1. David Wu首页
  2. WordPress
  3. WordPress安装教程

添加字段选项卡到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」就是我们刚刚添加的字段。
添加字段选项卡到WooCommerce产品数据Metabox信息-云模板

保存自定义字段数据

需要注意的是,添加了自定义字段后,保存产品的时候,系统并不会自动保存我们这些自定义字段的值,我们需要通过下面的代码手动保存这些数据。

  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 个自定义字段。
添加字段选项卡到WooCommerce产品数据Metabox信息-云模板

保存自定义选项卡数据

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

  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 插件实现本文中的功能,有需要的朋友可以根据自己的需求和喜好选择。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/103147

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注