添加自定义字段和选项卡到 WooCommerce 产品数据 Metabox，在开发 WooCommerce 电子商务网站时，产品默认提供的元数据字段不够我们使用，我们需要添加自定义产品字段来实现我们特殊的需求，比如我们可以添加产品的产地% / O 1、品牌等自定义数据。
我们可以通过自定义字段插件来添加字段，但是这种方法会在产品编辑页面新建一个 Metabox，增加了 UI 的复杂度。其实我们可以把需要的自定义字段添加到 WooCommerce 默认的「产品数据」Metabox，只需要简单的几段代码就可以。
添加自定义字段表单项到现有选项卡
要添加自定义字段到现有的选项卡中，我们需要挂载两个f ? 3 Q钩子；一种用于输出字段，另一个用于保存字段的值。第一个钩子可以根据我们需要添加到的选项卡中下面的列表@ $ T d中选择一个
-
woocommerce_product_options_general_product_data(“General ｜ 常规”) -
woocN \ _ommerce_product_options_inventory_product_data(“Inventory ｜ 库存”) -
woocommerce_product_options_shipping(“Shipping ｜ 配送”) -
woocommerce_product_options_related(“Linked Products ｜ 联锁产品”) -
woocommerce_product_options_attributes(“Attrii G 2 n 1 xbutes｜ 属性” ) -
woocommerce_product_options_advanced(“Advanced ｜ 高级”)
添加自定义字段表单
添加自定义表单字段的方法很简单，WooCommerce 为我们提供了一些显示常用表单的函数，我们直接在挂在到默认选项卡的钩子~ A j o 3 D +函数中使用@ _ u + O |这些函数添加表单字段即可，如下面代码中的 woocommerce_wp_text_input 函数，WooCommerce 支持的其他表单字段函数都可以在上面的链接中找到。
- add_action('woocommerce_product_optit 9 g eons_inventory_product_daG $ _ ^ / 3ta', function ()
- Q I S ] , / O23;
- woocommerce_wp_text_input([
- 'id' => '_numberB I A . $ n_in_package',
- 'labg 0 S y ) L I ~el' => __('Number in package', 'txtdomain'),
- 'wrapper_class' =&: 8 C { y y tgt; 'show_if_simple',
- ]);
- });
通过9 8 = E ! s j t添加上面的代码，我们可以得到如下图中的成果，最下面的「Number in package」就# 8 A 6 q F o A B是我们刚刚添加的字段t 6 , D - J 3 k q。
保存自定义字段数据
需要注意的是，添加了自定义字段后，保存产品的时候，系统并不会自动保存我们这些自定义字段的值，我们需要通过下# _ K y ` w面的代码手动保存这些数据。
- add_a_ P ; . Q ^ - /ction('woocommerce_ H S A v j_process_product_meta', function ($post_id)
- t , X | v123;
- $product = wc_get_product($post_id);
- $num_package = isset($_POST[ '_number_in_pa, V G 3 8 * t X bckage' ]) ? $_POS1 P P - h / FT[ '_2 ; ) Nnumber_in_package' ] : '';
- $product* @ # ) P ` c h->update_meta_data('_number_in_package', sanitize_text_field($num_package));
- $product->save();
- });
前端输出我们添加的自定义数据
在后台添加了数据之后，我们就可以在模版代码中获取使用这些数据了，直接使用$product} ; b->get_meta() 方法获取我们添加的自& q H , x t - B定义字段值即可。
- add_action('woocommerce_product_meta_star_ U a At', function ()
- {
- gs I z f q \ ulobal $poL g X J I ( .st;
- $product = wc_get_product($post->ID);
- $num_packagF , S v A @e = $product->get_meta('_number_in_package');
- if Q t \40; ! empty($num_package))Z ! 8 N g F Q {
- printf('<div class="custom-sku">%s: %s</div>', __('Ni E : T 4 N f 8umber in package', 'txtdomain'), $num_package~ j Z1;;
- }
- });
添加表单项到自定义产品数据选项卡
如果我们需要添加的元数据比较多，并且这些元数据放到现有的产品数据选项卡中不合适，我们可以新建一个自定义产品数据选项卡，然后把自定义字段表单项添加* u * Z } &到新建的产品数据选项卡中。
比如，我们需要添加一个「其他信息」的选项卡，然后添加几个自定义产品字段到这个选项卡中。
添加产品数据选项卡标题E K F 9 $ P 5 2
首先，我们通过 woocommerce_product_data_tabs Filter 添加% + 2自定义选项卡标题] ; = ` I到产品数据 Metabox 选项卡中。
- add_filter('woocommer$ 2 ( P , ace_product_data_tabs', function F s Z \40;$tabs)
- {
- $tabs[ 'additA ) Q D ! [ f 8 3ional_info' ] = [
- 'label' => __('Additional info', 'txtdomain'),
- 'ta9 X & /rget' => 'S v R - T ladditional_product9 W [ z [ P b ( y_data',
- 'class'v B B => ^ # % S k p o y !1;'hide_if_e? b [ txternal'],
- 'priority' => 25,
- ];
- return $tabs;
- });
添加产, 1 L ? s o品数4 K w R G E {据选项卡内容
和j 1 n c | Q ~添加到默认的选项卡一样，我们可以使用 WooCommerT 0 q l f Fce 为我们提供的表单字段函数来快速添加表单字段。当然，T V B r U 3 a如果需+ * v { M & v要，我们也可以通过 HTML 或 PHP 代码自行添加表单字段。
- add_action('wooco} F I , : m g Y +mmerce_product_data_panels', functiow e e 8 an ()
- {
- ?>
- <div id="additional_product_data" classR 3 p=&quoJ 2 J @ H P R Rt;panel woocommerce_options_panel hidden"><?php
- woocommerce_@ j m 7 K \ pwp_text_input([
- 'id' => '_dummy_text_input',
- 'lab) : C / zel' => __('Dummy text\ ; ; g = input', 'txtdomain'),
- 'wrapper_class' => 'show_if_simple',
- ]);
- woocommerce_wp_checkbox([
- 'id'( d U W => '_dummy_checkbox',
- 'label' => __('Dummy checkbox', 'txtdomain'),
- 'wrapper_class' => 'hide_if_gro! ^ ~ Q K Euped',
- ]);
- woocommerce_wp_text_inp\ t / / Tut([
- 'id' => '_dummy_number_input',
- 'label' => __Y { + H ? @ + * ?40;4 5 5'Dummy number i| f R T O , /nput',c o b 'txtdomain'),
- 'type' => 'number',
- 'custom_attribu\ . X 4tes' => [
- 'step' => '1',
- 'min' => '0',
- ],
- ]);
- ?></div><?Y { V 5 z % O p 1php
- });
添加了上面的代码后，我们可以在产品数据选项卡中看到如下的界面，又一个「Addition inu P & q Q ;fo」的自定义选项卡被添加到了 inventory 选项卡下面，该选项卡中有我们需要添加的 3 个自定义字段。
保存自定义选项卡数据
和添加到默认的选项卡一样，我们需要收到保存我们添加的自定义字段数据。
- add_action('woocommerce_process_product_meta', function ($post_id)
- {
- $product = wc_get_product($post_id);
- $produ! ` # / L 8 Ict->update_meta_data('_dummy_text_input', sanitize_text_field($_POST[ '_dummy_text_inp! i + T * x sut' ]));
- $dummy_checkbox = isset($_POST[ '_dummy_checkbox' ]E J { D 3 K 3 B {;x 5 {41; ? 'yes' : '';
- $( f K Iproduct->update_meta_data('_dummy_checkbox', $dummy_checkbox);
- $product->update_meta_data('_dummy_number_& I q Winput', sanitize_text_field($_POST[ '_dummy_number_input' P m s93;));
- $product->save();
- });
通过插件实现本文中的功b \ @ } 9能
除了通过本文中的代码添加自定义字段，我们还可以使用 WC Fields Factory 插件实现本文中的功能，有: Q 9 q需要的朋友可以根据自己的需求和喜好) = b k Q t : i 4选择。
