在WordPress中为Woocommerce插件的商品后台增加自定义字段

十三:以下方法转自“Brain的技术笔记”,在文章标题下可以找到原文链接,请支持原作者。我在本文后加入了自己的实践,欢迎交流。

Woocommerce是基于WordPress的购物网站最有力的插件被广泛使用。Woocommerce本身是一款免费的插件,但它提供了丰富的扩展接口,为网站的进一步开发提供了无限的可能,当然也提供了很多付费的功能插件购买服务。

在Woocommerce插件的商品添加后台有“属性”一栏,用于添加商品的尺寸、重量、产地等要素信息,这些信息在前台显示的时候,统一显示在商品的“其他信息”中。但是,有的时候我们需要更多自定义的字段,并且显示在商品页的其他位置,这就需要在Woocommerce插件的商品后台增加自定义字段。(我会在文末添加我的实践图片)

Brain的技术笔记原文以珠宝商城为例,每个珠宝都要有主石、主石颜色、主石重量……等参数,为了规范管理和方便调用,这些参数最好都写到自定义字段中去。本文就是介绍了通过在function.php中添加代码从而添加自定义字段到插件商品后台的常规选项卡中。

下面来介绍一下要放入function.php中的代码:

一、首先是要显示在后台常规选项卡中自定义字段的钩子:

add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

二、这个钩子对应的函数:

function woo_add_custom_general_fields() {

global $woocommerce, $post;

echo ‘<div class=”options_group”>’;

… //此处留待添加具体内容,见下文

echo ‘</div>’;

}

三、以下代码根据需要,添加到上面“…”的位置

这里我备注一下,以下的例子是原作者给出的常见的自定义字段表现形式的代码,根据需要可自由选择和组合。

1、第一个自定义字段是“主石”,表现形式是select下拉菜单(这里我备注一下就是该自定义字段是从预先准备好的下拉框中选择的),Woocommerce里的写法是:

woocommerce_wp_select(

array(

‘id’ => ‘_pro_mainStone’, //自定义字段的id

‘label’ => __( ‘主石’, ‘woocommerce’ ), //自定义字段在后台显示的名字

‘options’ => array( //定义各个选项

‘粉蓝宝’ => __( ‘粉蓝宝’, ‘woocommerce’ ),

‘黄蓝宝’ => __( ‘黄蓝宝’, ‘woocommerce’ ),

‘红宝石’ => __( ‘红宝石’, ‘woocommerce’ ),

‘蓝宝石’ => __( ‘蓝宝石’, ‘woocommerce’ ),

‘沙佛来’ => __( ‘沙佛来’, ‘woocommerce’ ),

‘祖母绿’ => __( ‘祖母绿’, ‘woocommerce’ ),

‘钻石’ => __( ‘钻石’, ‘woocommerce’ )

)

)

);

这里我备注一下: ‘_pro_mainStone’为自定义字段的id,你可以根据你的需要在此时任意命名。

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

3、第三个自定义字段是“主石数量”,是一个可以上下调节数字的input输入框(这里我备注一下就是比一般的输入框多一个上下增减按钮),代码如下(注意几个参数的说明):

woocommerce_wp_text_input(

array(

‘id’ => ‘_pro_mainStone_amount’,

‘label’ => __( ‘主石数量’, ‘woocommerce’ ),

‘placeholder’ => ‘1’, //默认显示一个数字,起到提醒用户的作用

‘description’ => __( ‘填写数字’, ‘woocommerce’ ),//输入框后面的说明文字

‘type’ => ‘number’, //如果没有这个参数,那么就只是普通的input输入框了

‘custom_attributes’ => array(

‘step’ => ‘any’, //数字输入框的步进,any表示1

‘min’ => ‘0’, //数字输入框的最小值

‘max’ => ‘100’ //数字输入框的最大值

)

)

);

4、第四个自定义字段是“主石说明”,表现形式为普通的input输入框,代码如下(注意tip相关的参数):

woocommerce_wp_text_input(

array(

‘id’ => ‘_pro_mainStoneIntro’,

‘label’ => __( ‘主石说明’, ‘woocommerce’ ),

‘placeholder’ => ‘添加注石说明’,

‘desc_tip’ => ‘true’,//如果有了这一行,字段输入框后面会多出一个问号小图标,description的值会在鼠标移到小图标的时候显示

‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )

)

);

假如要大一些的输入框,textarea形式的:

woocommerce_wp_textarea_input(

array(

‘id’ => ‘_pro_mainStoneIntro’,

‘label’ => __( ‘主石说明’, ‘woocommerce’ )

)

);

5、Checkbox框(这里我备注一下就是复选框,可以通过勾选选中多个选项),一般用得比较少:

woocommerce_wp_checkbox(

array(

‘id’ => ‘_checkbox’,

‘wrapper_class’ => ‘show_if_simple’,

‘label’ => __(‘My Checkbox Field’, ‘woocommerce’ ),

‘description’ => __( ‘Check me!’, ‘woocommerce’ )

)

);

Checkbox多选框经常要配合隐藏域使用,隐藏域用法:

woocommerce_wp_hidden_input(

array(

‘id’ => ‘_hidden_field’,

‘value’ => ‘hidden_value’

)

);

6、另外还有radio单选域,用到的函数为woocommerce_wp_radio,但我觉得woocommerce_wp_select完全可以代替了,就不展开了。

四、在定义了所有字段后,按理就要写保存函数了:

add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

function woo_add_custom_general_fields_save( $post_id ){

$woocommerce_pro_mainStone = $_POST[‘_pro_mainStone’];

if( !empty( $woocommerce_pro_mainStone ) )

update_post_meta( $post_id, ‘_pro_mainStone’, esc_attr( $woocommerce_pro_mainStone ) );

…   //所有的值按如上格式保存即可

//对于checkbox,可以这么写

$woocommerce_checkbox = isset( $_POST[‘_checkbox’] ) ? ‘yes’ : ‘no’;

update_post_meta( $post_id, ‘_checkbox’, $woocommerce_checkbox );

}

这里我备注一下:上面保存代码中的’_pro_mainStone’即是我们设置的自定义字段的id,你可以根据你的需要在最开始的时候任意命名。

上面的代码是将自定义字段放在了“常规”选项卡中,如果要把这些自定义字段放在其他的选项卡中,只需要修改钩子:

add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

把钩子woocommerce_product_options_general_product_data改成这些即可:

woocommerce_product_options_attributes(”属性”选项卡)

woocommerce_product_options_shipping (”配送”选项卡)

woocommerce_product_options_advanced (”高级”选项卡)

五、在前台调用这些自定义字段:

echo get_post_meta( $post->ID, ‘_pro_mainStone’, true );

echo get_post_meta( get_the_ID(), ‘_pro_mainStone’, true );

这里我备注一下,’_pro_mainStone’即是我们设置的自定义字段的id,你可以根据你的需要在最开始的时候任意命名。

六、我自己的实践

我在woocommerce商品页面添加了一个自定义字段“_unit”,用以标记商品价格对应的计量单位例如“/斤”、“/个”。我在function.php文件中加入了如下代码:

add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

function woo_add_custom_general_fields() {

global $woocommerce, $post;

echo ‘<div class=”options_group”>’;

woocommerce_wp_text_input(

array(

‘id’ => ‘_unit’,

‘label’ => _( ‘价格计量单位’, ‘woocommerce’ ),

‘placeholder’ => ‘输入价格计量单位’,

‘desc_tip’ => ‘true’,//如果有了这一行,字段输入框后面会多出一个问号小图标,description的值会在鼠标移到小图标的时候显示

‘description’ => _( ‘对商品的计量价格进行单位定义,如“/5斤”、“/2个”’, ‘woocommerce’ )

)

);//后台添加的字段

echo ‘</div>’;

}

add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );//以下代码为保存在后台该自定义字段的输入数据

function woo_add_custom_general_fields_save( $post_id ){

$woocommerce_unit = $_POST[‘_unit’];

if( !empty( $woocommerce_unit ) )

update_post_meta( $post_id, ‘_unit’, esc_attr( $woocommerce_unit ) );

}

以下是后台效果:

wordpress-coo-1

然后在前台价格位置所在的模板页面我加入了调用代码:

<?php echo get_post_meta( get_the_ID(), ‘_unit’, true ); ?>

这样一来,前台商品价格后面将调用“价格计量单位”的值,就像这样“¥56.0050.00元/2斤”。

未经允许不得转载:把控人生 » 在WordPress中为Woocommerce插件的商品后台增加自定义字段

赞 (2)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址