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 đó

';
	$control_id = CUSTOM_META_VARIATION_NOTE . '_' . $loop;
	printf(
		'%s',
		esc_attr($control_id),
		esc_html('Custom Note'),
		esc_attr($control_id),
		'variation_' . CUSTOM_META_VARIATION_NOTE,
		$loop,
		esc_attr(get_post_meta($variation->ID, 'variation_' . CUSTOM_META_VARIATION_NOTE, true))
	);
	echo '
';

	// Render more product-variation fields in here...
	// ...
	// ...
}
add_action('woocommerce_product_after_variable_attributes', 'custom_render_variation_panel', 10, 3);

/**
 * When a product-variation is being saved, check to see if our fields are
 * present, sanitise them and save then as post_meta.
 */
function custom_save_product_variation_options($variation_id, $variation_index) {
	$field_name = 'variation_' . CUSTOM_META_VARIATION_NOTE;
	if (array_key_exists($field_name, $_POST) && is_array($_POST[$field_name]) && array_key_exists($variation_index, $_POST[$field_name])) {

		// You might want to replace sanitize_text_field with sanitize_url(),
		// sanitize_email(), wp_kses_post(), intval(),  or some other way of
		// preventing hacky string injection.
		// sanitize_text_field() will work well in most cases.
		$field_value = sanitize_text_field($_POST[$field_name][$variation_index]);

		if (empty($field_value)) {
			// If the field value is empty, delete the post meta.
			delete_post_meta($variation_id, $field_name);
		} else {
			update_post_meta($variation_id, $field_name, $field_value);
		}

	}

	// Process more saved product-variation fields here...
	// ...
	// ...
}
add_action('woocommerce_save_product_variation', 'custom_save_product_variation_options', 10, 2);

/**
 * When an order is being rendered (in an email or on the screen), catch each
 * order item and see if it's a product-variation that has any of our custom
 * fields.
 */
function custom_woocommerce_order_item_meta_end($item_id, $item, $order) {
	if (empty($product = $item->get_product()) || !$product->is_type('variation')) {
		// This order item isn't a product-variation.
	} elseif (empty($variation_id = $product->get_variation_id())) {
		// ...
	} elseif (empty($custom_note = get_post_meta($variation_id, 'variation_' . CUSTOM_META_VARIATION_NOTE, true))) {
		// This product-variation doesn't have a custom note.
	} else {
		printf(
			'
%s
',
			esc_html($custom_note)
		);
	}
}
add_action('woocommerce_order_item_meta_end', 'custom_woocommerce_order_item_meta_end', 10, 3);

Tiếp theo, đi vào các chức năng của chủ đề con của bạn. php và thêm vài dòng sau

// WP Tutorials : Product-variation custom fields
require_once dirname(__FILE__) . '/wpt-product-variation-fields.php';

Lưu mọi thứ và chỉnh sửa một sản phẩm có thể thay đổi ở phần cuối trang web của bạn. Khi bạn mở rộng một biến thể sản phẩm, bạn sẽ thấy trường Ghi chú tùy chỉnh mới

Nhấp chuột phải vào trường nhập văn bản của Ghi chú tùy chỉnh và kiểm tra phần tử. Kiểm tra cách tên trường đi vào id của trường HTML

Ghi chú biến thể sản phẩm tùy chỉnh

Ghi chú biến thể sản phẩm tùy chỉnh trong đơn đặt hàng của khách hàng

Kiểm tra nó và dọn dẹp

Hãy thử thực hiện một số giao dịch mua. Chúng tôi không thể tự kiểm tra mã mới – chúng tôi cần đảm bảo rằng chúng tôi cũng không vi phạm quy trình đối với các loại sản phẩm khác

• Mua biến thể sản phẩm có bộ ghi chú tùy chỉnh, sau đó mua biến thể sản phẩm không có ghi chú tùy chỉnh
• Hãy thử các kết hợp khác nhau trong giỏ hàng của bạn, với các sản phẩm đơn giản và các biến thể sản phẩm
• Truy cập trang Tài khoản của tôi phía trước và xem qua các đơn đặt hàng của bạn – có thể thêm một chút kiểu dáng để làm nổi bật (các) trường tùy chỉnh
• Kiểm tra email “Đơn đặt hàng mới” để đảm bảo ghi chú tùy chỉnh được gửi chính xác

Vậy là xong – chỉ cần một vài dòng PHP và bạn có thể tránh phải cài đặt một plugin khác, với tất cả sự cồng kềnh đi kèm với nó 😎 👍