添加字段选项卡到WooCommerce产品数据Metabox信息

添加自界说字段和选项卡到WooCommerce产物数据Metabox,在开发WooCommerce电子商务网站时,产物默认提供的元数据字段不够我们使用,我们需要添加自界说产物字段来实现我们特殊的需求,好比我们可以添加产物的产地、品牌等自界说数据。

我们可以通过自界说字段插件来添加字段,然则这种方式会在产物编辑页面新建一个 Metabox,增添了UI的庞大度。实在我们可以把需要的自界说字段添加到WooCommerce默认的「产物数据」Metabox,只需要简朴的几段代码就可以。

添加自界说字段表单项到现有选项卡

要添加自界说字段到现有的选项卡中,我们需要挂载两个钩子;一种用于输出字段,另一个用于保留字段的值。第一个钩子可以凭证我们需要添加到的选项卡中下面的列表中选择一个

  • woocommerce_product_options_general_product_data (“General | 通例”)
  • woocommerce_product_options_inventory_product_data (“Inventory | 库存”)
  • woocommerce_product_options_shipping (“Shipping | 配送”)
  • woocommerce_product_options_related (“Linked Products | 联锁产物”)
  • woocommerce_product_options_attributes (“Attributes| 属性” )
  • woocommerce_product_options_advanced (“Advanced | 高级”)

添加自界说字段表单

添加自界说表单字段的方式很简朴,WooCommerce 为我们提供了一些显示常用表单的函数,我们直接在挂在到默认选项卡的钩子函数中使用这些函数添加表单字段即可,如下面代码中的 woocommerce_wp_text_input 函数,WooCommerce 支持的其他表单字段函数都可以在上面的链接中找到。

  1. add_action('woocommerce_product_options_inventory_product_data', function ()
  2. {
  3.     woocommerce_wp_text_input([
  4.         'id'            => '_number_in_package',
  5.         'label'         => __('Number in package', 'txtdomain'),
  6.         'wrapper_class' => 'show_if_simple',
  7.     ]);
  8. });

通过添加上面的代码,我们可以获得如下图中的功效,最下面的「Number in package」就是我们刚刚添加的字段。

保留自界说字段数据

需要注重的是,添加了自界说字段后,保留产物的时刻,系统并不会自动保留我们这些自界说字段的值,我们需要通过下面的代码手动保留这些数据。

  1. add_action('woocommerce_process_product_meta', function ($post_id)
  2. {
  3.     $product     = wc_get_product($post_id);
  4.     $num_package = isset($_POST[ '_number_in_package' ]) ? $_POST[ '_number_in_package' ] : '';
  5.     $product->update_meta_data('_number_in_package', sanitize_text_field($num_package));
  6.     $product->save();
  7. });

前端输出我们添加的自界说数据

在后台添加了数据之后,我们就可以在模版代码中获取使用这些数据了,直接使用$product->get_meta() 方式获取我们添加的自界说字段值即可。

  1. add_action('woocommerce_product_meta_start', function ()
  2. {
  3.     global $post;
  4.     $product     = wc_get_product($post->ID);
  5.     $num_package = $product->get_meta('_number_in_package');
  6.     if ( ! empty($num_package)) {
  7.         printf('<div class="custom-sku">%s: %s</div>', __('Number in package', 'txtdomain'), $num_package);
  8.     }
  9. });

添加表单项到自界说产物数据选项卡

若是我们需要添加的元数据对照多,而且这些元数据放到现有的产物数据选项卡中不合适,我们可以新建一个自界说产物数据选项卡,然后把自界说字段表单项添加到新建的产物数据选项卡中。

好比,我们需要添加一个「其他信息」的选项卡,然后添加几个自界说产物字段到这个选项卡中。
添加产物数据选项卡题目

首先,我们通过 woocommerce_product_data_tabs Filter 添加自界说选项卡题目到产物数据Metabox 选项卡中。

  1. add_filter('woocommerce_product_data_tabs', function ($tabs)
  2. {
  3.     $tabs[ 'additional_info' ] = [
  4.         'label'    => __('Additional info', 'txtdomain'),
  5.         'target'   => 'additional_product_data',
  6.         'class'    => ['hide_if_external'],
  7.         'priority' => 25,
  8.     ];
  9.  
  10.     return $tabs;
  11. });

添加产物数据选项卡内容

和添加到默认的选项卡一样,我们可以使用WooCommerce为我们提供的表单字段函数来快速添加表单字段。固然,若是需要,我们也可以通过HTML或PHP代码自行添加表单字段。

  1. add_action('woocommerce_product_data_panels', function ()
  2. {
  3.     ?>
  4.     <div id="additional_product_data" class="panel woocommerce_options_panel hidden"><?php
  5.  
  6.     woocommerce_wp_text_input([
  7.         'id'            => '_dummy_text_input',
  8.         'label'         => __('Dummy text input', 'txtdomain'),
  9.         'wrapper_class' => 'show_if_simple',
  10.     ]);
  11.     woocommerce_wp_checkbox([
  12.         'id'            => '_dummy_checkbox',
  13.         'label'         => __('Dummy checkbox', 'txtdomain'),
  14.         'wrapper_class' => 'hide_if_grouped',
  15.     ]);
  16.     woocommerce_wp_text_input([
  17.         'id'                => '_dummy_number_input',
  18.         'label'             => __('Dummy number input', 'txtdomain'),
  19.         'type'              => 'number',
  20.         'custom_attributes' => [
  21.             'step' => '1',
  22.             'min'  => '0',
  23.         ],
  24.     ]);
  25.  
  26.     ?></div><?php
  27. });

添加了上面的代码后,我们可以在产物数据选项卡中看到如下的界面,又一个「Addition info」的自界说选项卡被添加到了 inventory 选项卡下面,该选项卡中有我们需要添加的 3 个自界说字段。

保留自界说选项卡数据

和添加到默认的选项卡一样,我们需要收到保留我们添加的自界说字段数据。

  1. add_action('woocommerce_process_product_meta', function ($post_id)
  2. {
  3.     $product = wc_get_product($post_id);
  4.  
  5.     $product->update_meta_data('_dummy_text_input', sanitize_text_field($_POST[ '_dummy_text_input' ]));
  6.  
  7.     $dummy_checkbox = isset($_POST[ '_dummy_checkbox' ]) ? 'yes' : '';
  8.     $product->update_meta_data('_dummy_checkbox', $dummy_checkbox);
  9.  
  10.     $product->update_meta_data('_dummy_number_input', sanitize_text_field($_POST[ '_dummy_number_input' ]));
  11.  
  12.     $product->save();
  13. });

通过插件实现本文中的功效

除了通过本文中的代码添加自界说字段,我们还可以使用 WC Fields Factory 插件实现本文中的功效,有需要的同伙可以凭证自己的需求和喜欢选择。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 添加字段选项卡到WooCommerce产品数据Metabox信息 https://zhutizhen.com/14885.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章