WooCommerce二次开发中，我们经常需要根据业务需要，给产品添加自定义字段，这在我很久以前的一篇博客中详细介绍过。不过那篇文章中我们添加的是产品本身的自定义字段，对于可变产品（Variable Product），如果需要为其每个变量（很多人喜欢称作SKU）各自添加自定义字段，以下这篇文章能教你如何实现。
如上图，这是一个可变产品下的一个变量，我为其添加了一个名为“New Custom Meta”的字段。同时这个字段框会出现在这个产品的所有变量下供店主编辑。WooCommerce默认已经为可变产品提供了价格、尺寸、重量、库存、描述等一系列字段，但它仍然无法满足所有要求，比如我的每个SKU都会有不同的材质、保质期等等，我就需要添加新的字段去描述它们。
首先添加如下代码，这样后台产品变量的编辑栏就能出现上面图片中的字段了，用到woocommerce_product_after_variable_attributes这个勾子。
1 2 3 4 5 6 7 8 9 10 11 12 | //add custome field for variations - https://blog.brain1981.com add_action( 'woocommerce_product_after_variable_attributes', 'brain1981_add_custom_field_to_variations', 10, 100 ); function brain1981_add_custom_field_to_variations( $loop, $variation_data, $variation ) { $new_custom_meta = get_post_meta( $variation->ID, 'new_custom_meta', true ); woocommerce_wp_text_input( array( 'id' => 'new_custom_meta[' . $loop . ']', 'name' => 'new_custom_meta[' . $loop . ']', 'class' => 'short', 'label' => __( 'New Custom Meta', 'woocommerce' ), 'value' => $new_custom_meta ) ); } |
可以看到前文的“woocommerce_wp_text_input”这个函数在这里仍然适用。那么woocommerce_wp_select、woocommerce_wp_textarea_input、 woocommerce_wp_checkbox等自然也都可以用在这里，就不赘述了。
通过woocommerce_save_product_variation这个勾子保存字段。
1 2 3 4 5 6 7 8 | //save this field for variations - https://blog.brain1981.com add_action( 'woocommerce_save_product_variation', 'brain1091_save_variation_settings_fields', 10, 2 ); function brain1091_save_variation_settings_fields( $variation_id, $loop ) { $text_field = $_POST['new_custom_meta'][ $loop ]; if ( ! empty( $text_field ) ) { update_post_meta( $variation_id, 'new_custom_meta', esc_attr( $text_field )); } } |
把保存的字段放到变量的数组中，供前端调用
1 2 3 4 5 6 | //load this field for variations to frontend - https://blog.brain1981.com add_filter( 'woocommerce_available_variation', 'brain1981_load_variation_settings_fields' ); function brain1981_load_variation_settings_fields( $variation ) { $variation['new_custom_meta'] = get_post_meta( $variation[ 'variation_id' ], 'new_custom_meta', true ); return $variation; } |
至此后端的工作就完成了，下面介绍前端如何调用这个字段。
通常，一个产品会有自己的product id，产品下的变量也会有自己的变量id，如果知道这个变量id，那么就和调用普通的自定义字段一样就行了：
1 | echo get_post_meta( $variation_id, 'new_custom_meta', true ); |
但大部分情况下我们是不知道这个variation_id的，能调到变量的自定义字段关键就需要知道这个变量的variation_id。在WooCommerce的产品页面上，我们可能需要遍历当前产品的每一个variation_id，更有可能需要找到当前所选定的这个变量的variation_id。
这时候可以通过页面上的一个隐藏input元素获取到当前变量的variation_id。这个隐藏元素就在产品详情页中，HTML在WooCommerce的默认主题文件”/single-product/add-to-cart/variation-add-to-cart-button.php”中，前端可以这样取值：
1 | $("input.variation_id").val() |
要获取当前变量的new_custom_meta值，就需要一些前后端混写的代码了：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | //load this field in current variations - https://blog.brain1981.com
global $product;
if ( $product->is_type('variable') ) {
$new_custom_meta =[]; //create an array to store new_custom_meta values
// Loop through variations data
foreach($product->get_available_variations() as $variation ) {
$new_custom_meta[$variation['variation_id']] = $variation['new_custom_meta'];
}
?>
<script>
var v_custom_meta= '';
$(function($) {
var inputVID = 'input.variation_id';
var jsonData = <?php echo json_encode($new_custom_meta); ?>;
console.log("jsonData ",jsonData );//此JSON格式: {"1234":"value 1", "1235":"value 2", ...}
$('input').change( function(){
if( '' != $(inputVID).val() ) {
var vid = $(inputVID).val(); //variation ID
v_custom_meta = jsonData[vid];
console.log("v_custom_meta",v_custom_meta);
//do something to use this meta value...
}
});
});
</script>
<?php
} |
总结：基本思路还是很简单的，之所以这里前后端混写了，就是因为需要根据用户操作去读取当前变量的字段值。
本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/3230.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。
本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。