WooCommerce：将自定义字段添加到产品变体中

第1部分– PHP代码段：在产品变体中添加和保存自定义字段

// 1. Add custom field input @ Product Data > Variations > Single Variation
 
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 )
   ) );
}
 
// -----------------------------------------
// 2. Save custom field on product variation save
 
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 ) );
}
 
// -----------------------------------------
// 3. Store custom field value into variation data
 
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;
}

第2部分– WooCommerce模板覆盖：选择产品变型时显示自定义字段
由于变化的选择过程，以获取正确的变化数据使用JavaScript，我们唯一的选择是重写名为WooCommerce模板文件variation.php，文件在woocommerce/templates/single-product/add-to-cart。
请注意-我们不会编辑核心文件。为了覆盖此模板，我们创建了一个名为“ variation.php ”的文件，并将其放在子主题的“ woocommerce / single-product / add-to-cart ”文件夹中。如果不存在，请通过FTP创建它。

最终子主题的woocommerce / single-product / add-to-cart / variation.php文件脚本应如下所示（请注意，如果您在代码段1中对其进行了重命名，则必须更改“ custom_field”）：

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