WordPress后台定制-为WooCommerce产品增加自定义字段方法

美工学习 · 发表于 2023-12-1 21:59:12

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

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

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

WooCommerce产品的自定义字段，在后台就放在常规选项卡中，添加了自定义字段的表现为：

下面来介绍一下要放入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>';
}

复制代码

以下代码根据需要，添加到上面“…”的位置：
自定义字段“主石”的表现形式是select下拉菜单，WooCommerce里的写法是：

woocommerce_wp_select(
array(
'id' => '_pro_mainStone', //自定义字段的id
'label' => __( '主石', 'woocommerce' ), //自定义字段在后台显示的名字
'options' => array( //定义各个选项
'粉蓝宝' => __( '粉蓝宝', 'woocommerce' ),
'黄蓝宝' => __( '黄蓝宝', 'woocommerce' ),
'红宝石' => __( '红宝石', 'woocommerce' ),
'蓝宝石' => __( '蓝宝石', 'woocommerce' ),
'沙佛来' => __( '沙佛来', 'woocommerce' ),
'祖母绿' => __( '祖母绿', 'woocommerce' ),
'钻石' => __( '钻石', 'woocommerce' )
)
)
);

复制代码

第二个自定义字段是“颜色”，表现形式也是select，代码就不贴了。
第三个自定义字段是“主石数量”，是一个可以上下调节数字的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' //数字输入框的最大值
)
)
);

复制代码

假如要添加普通的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' )
)
);

复制代码

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'
)
);

复制代码

另外还有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 );
}

复制代码

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

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 );

复制代码

这样就可以了

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！