[WooCommerce] Thêm field vào trong Product Variations

Hướng dẫn tạo field trong product đơn giản như hình bên dưới

Image

Bước 1 - Thêm field vào Product Variations

1.1. Thêm field

add_action( 'woocommerce_variation_options_pricing', 'bbloomer_add_custom_field_to_variations', 10, 3 );

function bbloomer_add_custom_field_to_variations( $loop, $variation_data, $variation ) {
  woocommerce_wp_text_input( array(
'id' => 'custom_field[' . $loop . ']',
'class' => 'short',
'label' => __( 'Custom Field', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, 'custom_field', true )
  ) );
}

1.2. Lưu giá trị của field khi lưu biến thể sản phẩm

add_action( 'woocommerce_save_product_variation', 'bbloomer_save_custom_field_variations', 10, 2 );

function bbloomer_save_custom_field_variations( $variation_id, $i ) {
  $custom_field = $_POST['custom_field'][$i];
  if ( isset( $custom_field ) ) update_post_meta( $variation_id, 'custom_field', esc_attr( $custom_field ) );
}

1.3. Lưu giá trị của field vào biến thể sản phẩm

add_filter( 'woocommerce_available_variation', 'bbloomer_add_custom_field_variation_data' );

function bbloomer_add_custom_field_variation_data( $variations ) {
  $variations['custom_field'] = '<div class="woocommerce_custom_field">Custom Field: <span>' . get_post_meta( $variations[ 'variation_id' ], 'custom_field', true ) . '</span></div>';
  return $variations;
}

Bước 2 - Hiển thị trên giao diện

Chúng ta tạo một tệp có tên “variation.php” và đặt nó vào thư mục “woocommerce/single-product/add-to-cart” của childtheme chúng ta

<script type="text/template" id="tmpl-variation-template">
<div class="woocommerce-variation-description">
{{{ data.variation.variation_description }}}
</div>
 
<div class="woocommerce-variation-price">
{{{ data.variation.price_html }}}
</div>
 
<div class="woocommerce-variation-custom_field">
{{{ data.variation.custom_field}}}
</div>
 
<div class="woocommerce-variation-availability">
{{{ data.variation.availability_html }}}
</div>
</script>

Nguồn: businessbloomer.com