Làm cách nào để thêm trường tùy chỉnh vào biến thể sản phẩm trong WooC Commerce?

Hướng dẫn này bao gồm cách thêm Trường biến thể sản phẩm WooC Commerce tùy chỉnh, làm sạch đầu vào và hiển thị các trường theo đơn đặt hàng của khách hàng. Chúng tôi sẽ thực hiện việc này với một vài đoạn mã và không cần cài đặt plugin khác. Dễ dàng mở rộng với các trường bổ sung và bạn không cần phải là nhà phát triển để theo dõi nó. tôi hứa

Ví dụ về trường biến thể sản phẩm tùy chỉnh trong WooC Commerce

Nó sẽ hoạt động như thế nào

Chúng ta sẽ làm ba điều trong hướng dẫn này

  1. Chèn một số HTML để hiển thị nhãn và hộp văn bản vào điều khiển đàn accordion biến thể sản phẩm
  2. Phát hiện khi một biến thể sản phẩm được lưu và lấy giá trị của trường tùy chỉnh của chúng tôi từ $_POST
  3. Kết nối các đơn đặt hàng của khách hàng và thêm trường biến thể sản phẩm của chúng tôi vào màn hình [email và trên màn hình]

Khi chúng tôi truy cập trang WooC Commerce> Chỉnh sửa sản phẩm [đối với Sản phẩm có thể thay đổi], chúng tôi nhận được tất cả các điều khiển HTML cho những thứ ở cấp độ sản phẩm, nhưng chúng tôi cũng nhận được các biểu mẫu con lặp lại [trong một chiếc đàn] cho từng biến thể. Nếu chúng tôi thêm trường biểu mẫu tùy chỉnh vào biểu mẫu con biến thể sản phẩm, như thế này…


Custom Note

…chúng tôi gặp rắc rối ngay khi có hai [hoặc nhiều] biến thể, vì ID kiểm soát cần phải là duy nhất. Sẽ không sao nếu nhiều trường đầu vào HTML có cùng tên, bởi vì chúng chỉ quay lại với chúng tôi trong dữ liệu POST dưới dạng một mảng. Vì vậy, chúng tôi chỉ cần cẩn thận một chút khi sắp xếp HTML và quét dữ liệu POST

Khi chúng tôi đã lưu trữ các giá trị trường tùy chỉnh theo các biến thể của sản phẩm bằng chức năng update_post_meta[] của WordPress, việc chọn ra và hiển thị dữ liệu theo đơn đặt hàng tương đối dễ dàng

Viết mã

Trong chủ đề con WordPress tùy chỉnh của bạn, hãy tạo một tệp mới có tên wpt-product-variation-fields. php và dán đoạn sau vào đó

Chủ Đề