WooCommerce 产品增加自定义字段和前端选项卡

WooCommerce 无疑是打造基于 WordPress 的购物网站最有力的插件了。WooCommerce 本身是一款免费的插件，但它提供了丰富的扩展接口，为网站的进一步开发提供了无限的/ / ; 4 o可能。

定制 WooCommerce 商城网站，有时候我们需要为产品添加一些参数，比如在一个珠宝商城中，每个珠宝都要有主石、主石颜色、主石重量…等参数，为了规范管理和方便调用，这些参数最好都写到自定义字段中去。这里整理一下对产0 5 8 / a S ? 9 {品追加自定义字段的笔记。

WooCommerce 产品的_ g H , ~ y s自定义字段，在后台就放在常规选项卡中，添加了自定义~ 7 5 |字段的表现为：C ] V / M % v

下面来介绍一下要放入 function.php 中的代码，首先是要F x ?显示在后台常{ R f K j 6规选项卡中自定义字段的钩子：

add_action. 5 ?( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );

对应的函数

function woo_add_custom_general_fn . P / P i `ields() {
globaE % m K R X w 5 %l $woocommerce, $post+ t ( C 0 } G 2;
echo '&\ Q e dlt;div class="options_group&quoB G G ot;>';
...//此处留待添加具体内容，见下文
echo '&2 B 3 ; | C Vlt;/div>';
}

以下代码根据需要，添# D O e = Q加到上面“…”的位置：

自定义字段“主石”的表现形式是 select 下拉菜单，WooCommerce 里的写法是：

woocommerce_wp_select(
array(
'id' => '_pro_mainStone', //自定义字段的id
'label' => __c } 1( '主石', 'woocommerce'z O J n [ } ), //自定义字段在后台显示的名字
'options' => array( //定义各个选项
'粉蓝宝' => __( '粉蓝宝', 'woocommerce' ),
'黄蓝宝' => __( '黄蓝宝', 'woocommerce' ),
'红宝石' => __( '红宝石', 'woocommerce' &[ N n m c L J U +#41;,
'd m 5 { % U蓝宝石' => __( 'b I j f j v _蓝宝石', 'woocommerce' ),
'沙佛来' => __( '沙佛来', 'woocommerce' ),
'祖母绿' => __( '祖母绿', 'woocommerce' ),
'钻石' =&gt7 L j L u; __( '钻石', 'woocommerce' )b W _ X % e 7;
)
)
);

第二个自定义字段是“颜色”，表现形式也是 select，代码就不贴了。

第三个自定义字段是“主石数量”，是一个可以上下调节数字的 input 输入框，代码如下（注意几个参数的说明）：

woocommerce_wp_text` s ^ J ` - j v_input! _ A 1 # R + z0;
array(
'id' => '_pro_mainStone_amount',
'la| q f \ (bel'+ 2 ` s => __( '主石数量', 'woocommerce' ),
'placeholder' => '1', //默认显示一个数字，起到提醒用户的作用
'description' => _i B 5 t [ n *_( '填写数字',2 Z 9 p ! r M } 'woocommerce' ),//输入框后面的说明文字
'type' => 'number', //如果没有这z \ e H 4 / d :个参数，那么就只是普通的input输入框了
'custom_attributes' => array(
'step' => 'aX 9 e I L Iny', //数字输入框的步进，any表示1
'min' =>u 2 e , ^ 2 ~ Y X '0', //数字输入框的最小值
'max' => '100' //数字输入框的最大值
)
/ r u41# % Y;
);

假如要添加普通的b P E J ? H l ] . input 输入框，名字叫“主石说明”，代码如下(注意 tip 相关的参数)：

woocomm5 N f ; B - & t aeJ ) u \ f 3 / wrce_wp_text_input(
array(
'id' => 'D \ ] I b ! \_pro_mainStoneIntro',
'label' => __( '主石说明R 2 I { p 1 f L o',~ ^ w B 'woocommerce' ),
'placeholder' => '添加注石说明',
'desc_tip' => 'true',//如果有了这一行，字段输入框后面会多出一W K 9 s b (个问号小图标，description的值会在鼠标移到小图标的时候显示
'description' => __( 'Enter the custom value here.', 'woocommerce' )
)
);

假如要大一些的输入框，textarea 形式的：

woocommerce_wp_te} * T r P ) } w {xtarea_input(
arrayt z w w r p e | H0;
'id' => '_pro_mainStoneIntro',
'label' => __O A W |40; '主石说明', 'woocommerce' )
)
);

Checkbox 框，一般用得比较少：

woocommerce_wp_checkbox(
array(
'id' => '_checkbox',
'wrapper_class' => 'show_if_simple',
'label' => __('My Checkbox Field', 'woocommerce' ),
'description' => __(t * U U | q e 'ChecR N Q t 0k me!', 'woocommerce'R I \ t x o L )
)
);

Checkbox 多选框经常要配合隐藏域使用，隐藏域用法：

woocommerce_wp_hidden_inpu9 3 u } v l % U [t(
array(
'id' => '_hidder Q \ - f V \ sn_field',
'value' => 'hidden_value'
)
&b g 5 % m#41;;

另外还有H W ] | ^ i e radio 单选域，用到的函数为 woocommerce_wp_radio，但我觉得 woocommerce_wp_select 完全可以代替了，就不展开了。

另, x 5 8外我们还可以用原生的写法来写自定义字段，一样是加到“…”里面，包括上传图片域，可以参: F * _ a N w +考这篇文K X : G 7 | n章。

在定义了所有字段后，按理就要写保存函数了：

add_action( 'woocommerce_proce( z a \ss_product_metaf A S p . #', 'woo_add_custom_general_fields_save' f x z l41;;
function woo_add_cusN , ~ % ) c |tom_general_fields_save( $post_iE j C :d _ Y 7 r a41;{
$woocommerce_pro_mainStone = $_POST['_pro_mainStone'];
if( !empty( $woocommeB o \ 5 \ A : # erce_p6 U q _ro_mainStone ) )
update_post_metaS N / B d S( $post_id, '_pro_mainStone', esc_attr( $woocommerce_pro_mainStone ) );
...//所有的值按如上格式保存即R v G可
//对于checkbu c E : y 2 5 s iox，可以这么写
$woocommerce_checkbox = isset( $_POST['_checkbox'] ) ? 'yes' : 'no';
update_post_meta( $post_id, '_checkbox', $woocommerct ` .e_@ i p V w M ] -checkbox );
}

如果要把这些自定义字段放在其他的选项卡中，只需要在这里

add_action( 'woocommerce_produY + = ? ucty ! | M f V x_options_general_product_data', 'woo_add_custom_general_fields' );

把钩k [ Q . 1 v子 woocommerce_product_options_general_product_data 改成这些即可：

woocommerce_product_options) N e 6 \ i @ * p_^ K - g { E L ] Iak P W bttributes（"属性"选项卡）
woocommerce_produc# a 9 ~t_options_shipping （"配送"选项卡）
woocommerce_product_options_advanced （"高级"选项卡）

最后，在前台调用这些自定义字段就和以往一样：

echo get_post_meta( $post->ID, '_pro_mainStone', true );
ecF W r R 6 4 u _ zho get_post_meta( get_the_ID(), '_pro_mainStone', true );0 2 @ ] O

扩展应用

添加多文本域并且添加到前端产品详情页选项卡里：

add_actiP 7 P Y V | w t lon( 'woocommerce_product_options_general_product_data', 'wp_amaoni_de_add_customv A ! . P + P 6 F_product_field' );
functb \ 7 i Nion wp_amaoni_U Y P \ _ 2 S 8de_add_custom_product_field() {
woocommerce_wp_textarea_input(
arrayj u / ~ l40;
'id' => '_custom_tab_description',
'label' => __( 'Custom Tab Description' )
)
I ? J Y y W41;;
}
add_action& $ $ K M40; 'woocommerce_process_prodW * 8 H Z Iuct_meta', '& r L :wp_amaoni_de_save_custom6 O O \ u . J_product_field' );
funcP g [ ( ltion wp_amaoni_de_save_custom_product_field( $post_id ){
$custom_tab_description = $_POST['_custom_tab_description'p + e p m ) * ;];
if( !empty( $custom_tab_description ) ) :
update_post_meta( $post_id, '_custom_ta\ b X y 7 (b_descriptio5 D S = I 7 K 8n', esc_HTMj 1 ] - ;L( $custom_tab_description )c j t 2 ] ` \; );
endif;
}
add_filter( 'woocc \ y l )ommerce_product_tabs', 'wp_amaoni_de_add_woocommerce_producv W %t_tabs' );
function wp_amah B noni_de_add_woocommerce_product_tabs8 D I = k y x K0; $tabs ) {
$tabs['wp_amaoni_de_custom_tab'] = array(
'title' => __l q G0; 'New Product Tab' ),
'priority' => 50,
'callback' => 'wp_amaoni_de_new_producb 7 t h [ + jt_tab_callback'
);
return $tabs;
}
function wp_amaoni_de_n8 n B \ew_product_tab_callback() {
global $post;
echo wpautop( get_post_meF ~ ; 3ta( $post-&gtS . Y g t;ID, '_custom_tab_description', true &2 f % ? _ $ K#41; );
}

加强应用

有些客户需6 u F k要在前d v k \端产品详情页选项卡里添加一个可支持编辑器的新选项卡，如下图这样。

这个场景很久见，下面我们贴上代码供大家参考：

add_action('woocommercep ^ v ] A ~_product_optie U D =ons_general_product_data', 'wp_amA A , X 6 Faoni_m O 5 % ) j k (de_add_custom_product_field')S ` S Q \ / S;;
function wp_amaon\ A ] d /i_de_add_custo! G 4 O Vm_producC n N I yt_field() {
global $post;x g f ; ) R - t Z
$conteno 0 At = get_post_meta($post->ID,'_cus* % s Utom_tab_description',true);
// $content = $post-g / J @>post_content; 获取主内容，也可以获取其他自定义字段，自行发挥
$ed} 1 # g W kitor_iS p Y rd = '_custom_tab_description';
wp_edito` t t 9 ~ , A yr(html_entity_decode($content), $editor_id, arI i xray('media_buttons' => true,'quicktags'=>true));
}
add_action( 'woocommerce_process_product_meta', 'wp{ N w s - ~_amaoni_de_save6 . : G ^ 2 Z ! P_custom_product_field' );
function wp_amaoni_de_save_custom_product_field( $post_id ){
$custom_tab_description =8 f } ~ $_POST} $ T & N C {T L * } r J 191;'_custom_tab_desc~ s M Z b Y Oription'];
if( !empty( $cust: 1 o X X * g #om_tab_description ) ) :
update_post_meta( $post_id, '_custom_tab_description', esc_html( $custom_tab_description ) );
endif;
}
add_f$ 4 = o _ # B `ilter( 'woocommerce_product_tabs', 'wp_amaoni_de_add_woocommerce_product_tabs' );
function wp_amaoni_de_add_woocommerce_product_tabs( $tabs ) {
$tat ~ E = Z Jbs['u U )wp_amaoni_de_custom_tab'] = array&8 e s + ) O ;#40;
'title' => __( 'FAQ'/ A = 6 ` . V ),
'priority' => 10,
'callback' => 'wp_amaoni_de_new_product_tav a V B Ib_callback'
);
return $tabs;L e O = : 0 u q
}
function wp_amaoni_de_new_M @ - ) oproduct_tab_callback() {
global $post;
echo wpautop( html_entity_decode ( get_post_meta( $post-&w c * mgt;ID, '_custom_tab_description', trh ! g a sue ) ) );
}