立即注册 找回密码

QQ登录

只需一步,快速开始

查看: 1541|回复: 0

[Wordpress 通用教程] 给WooCommerce变量产品添加属于变量的自定义字段

[复制链接]

106

主题

0

回帖

1212

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1212
发表于 2024-4-8 20:52:04 | 显示全部楼层 |阅读模式
道勤网-数据www.daoqin.net

亲注册登录道勤网-可以查看更多帖子内容哦!(包涵精彩图片、文字详情等)请您及时注册登录-www.daoqin.net

您需要 登录 才可以下载或查看,没有账号?立即注册

x
WooCommerce二次开发中,我们经常需要根据业务需要,给产品添加自定义字段,如果需要为其每个变量(很多人喜欢称作SKU)各自添加自定义字段,以下这篇文章能教你如何实现。

011.jpg
如上图,这是一个可变产品下的一个变量,我为其添加了一个名为“New Custom Meta”的字段。同时这个字段框会出现在这个产品的所有变量下供店主编辑。WooCommerce默认已经为可变产品提供了价格、尺寸、重量、库存、描述等一系列字段,但它仍然无法满足所有要求,比如我的每个SKU都会有不同的材质、保质期等等,我就需要添加新的字段去描述它们。
首先添加如下代码,这样后台产品变量的编辑栏就能出现上面图片中的字段了,用到woocommerce_product_after_variable_attributes这个勾子。
  1. //add custome field for variations  - https://blog.brain1981.com
  2. add_action( 'woocommerce_product_after_variable_attributes', 'brain1981_add_custom_field_to_variations', 10, 100 );
  3. function brain1981_add_custom_field_to_variations( $loop, $variation_data, $variation ) {
  4.         $new_custom_meta = get_post_meta( $variation->ID, 'new_custom_meta', true );
  5.         woocommerce_wp_text_input( array(
  6.         'id' => 'new_custom_meta[' . $loop . ']',
  7.         'name' => 'new_custom_meta[' . $loop . ']',
  8.         'class' => 'short',
  9.         'label' => __( 'New Custom Meta', 'woocommerce' ),
  10.         'value' => $new_custom_meta
  11.         ) );
  12. }
复制代码
可以看到前文的“woocommerce_wp_text_input”这个函数在这里仍然适用。那么woocommerce_wp_select、woocommerce_wp_textarea_input、 woocommerce_wp_checkbox等自然也都可以用在这里,就不赘述了。
通过woocommerce_save_product_variation这个勾子保存字段。
  1. //save this field for variations  - https://blog.brain1981.com
  2. add_action( 'woocommerce_save_product_variation', 'brain1091_save_variation_settings_fields', 10, 2 );
  3. function brain1091_save_variation_settings_fields( $variation_id, $loop ) {
  4.         $text_field = $_POST['new_custom_meta'][ $loop ];
  5.         if ( ! empty( $text_field ) ) {
  6.                 update_post_meta( $variation_id, 'new_custom_meta', esc_attr( $text_field ));
  7.         }
  8. }
复制代码
把保存的字段放到变量的数组中,供前端调用
  1. //load this field for variations to frontend  - https://blog.brain1981.com
  2. add_filter( 'woocommerce_available_variation', 'brain1981_load_variation_settings_fields' );
  3. function brain1981_load_variation_settings_fields( $variation ) {     
  4.     $variation['new_custom_meta'] = get_post_meta( $variation[ 'variation_id' ], 'new_custom_meta', true );
  5.     return $variation;
  6. }
复制代码
至此后端的工作就完成了,下面介绍前端如何调用这个字段。
通常,一个产品会有自己的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. //load this field in current variations - https://blog.brain1981.com
  2. global $product;
  3. if ( $product->is_type('variable') ) {
  4.         $new_custom_meta =[]; //create an array to store new_custom_meta values
  5.         // Loop through variations data
  6.         foreach($product->get_available_variations() as $variation ) {
  7.                 $new_custom_meta[$variation['variation_id']] = $variation['new_custom_meta'];
  8.         }
  9.         ?>
  10.         <script>
  11.         var v_custom_meta= '';
  12.         $(function($) {
  13.                 var inputVID = 'input.variation_id';
  14.                 var jsonData = <?php echo json_encode($new_custom_meta); ?>;
  15.                 console.log("jsonData ",jsonData );//此JSON格式: {"1234":"value 1", "1235":"value 2", ...}
  16.                 $('input').change( function(){
  17.                         if( '' != $(inputVID).val() ) {
  18.                                 var vid = $(inputVID).val(); //variation ID
  19.                                 v_custom_meta = jsonData[vid];
  20.                                 console.log("v_custom_meta",v_custom_meta);
  21.                                 //do something to use this meta value...
  22.                         }
  23.                 });
  24.         });
  25.         </script>
  26.         <?php
  27. }
复制代码
总结:基本思路还是很简单的,之所以这里前后端混写了,就是因为需要根据用户操作去读取当前变量的字段值。

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户,那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信:q792472177免费电话、后台提交工单这些方式联系道勤主机客服! 如果您不是我们的客户也没问题,点击页面最右边的企业QQ在线咨询图标联系我们并购买后,我们为您免费进行无缝搬家服务,让您享受网站零访问延迟的迁移到道勤主机的服务!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

道勤网- 推荐内容!上一条 /2 下一条

!jz_fbzt! !jz_sgzt! !jz_xgzt! 快速回复 !jz_fhlb! !jz_lxwm! !jz_gfqqq!

关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程 ( 皖ICP备15000319号-1 )

GMT+8, 2024-12-23 14:07

Powered by DaoQin! X3.4 © 2016-2063 Dao Qin & 道勤科技

快速回复 返回顶部 返回列表