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

| 24 条评论 | 24,408 人已阅
本站所有文章均为博主人工写作，绝无AI辅助成分，请放心参阅。

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

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

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

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

1

add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );

对应的函数：

1
2
3
4
5
6
7
8

function woo_add_custom_general_fields() {
	global $woocommerce, $post;
	echo '<div class="options_group">';
 
	...//此处留待添加具体内容，见下文
 
	echo '</div>';
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

第二个自定义字段是“颜色”，表现形式也是select，代码就不贴了。
第三个自定义字段是“主石数量”，是一个可以上下调节数字的input输入框，代码如下（注意几个参数的说明）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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相关的参数)：

1
2
3
4
5
6
7
8
9

woocommerce_wp_text_input( 
	array( 
		'id'          => '_pro_mainStoneIntro', 
		'label'       => __( '主石说明', 'woocommerce' ), 
		'placeholder' => '添加注石说明',
		'desc_tip'    => 'true',//如果有了这一行，字段输入框后面会多出一个问号小图标，description的值会在鼠标移到小图标的时候显示
		'description' => __( 'Enter the custom value here.', 'woocommerce' ) 
	)
);

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

1
2
3
4
5
6

woocommerce_wp_textarea_input( 
	array( 
		'id'          => '_pro_mainStoneIntro', 
		'label'       => __( '主石说明', 'woocommerce' )
	)
);

Checkbox框，一般用得比较少：

1
2
3
4
5
6
7
8

woocommerce_wp_checkbox( 
array( 
	'id'            => '_checkbox', 
	'wrapper_class' => 'show_if_simple', 
	'label'         => __('My Checkbox Field', 'woocommerce' ), 
	'description'   => __( 'Check me!', 'woocommerce' ) 
	)
);

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

1
2
3
4
5
6

woocommerce_wp_hidden_input(
array( 
	'id'    => '_hidden_field', 
	'value' => 'hidden_value'
	)
);

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

另外我们还可以用原生的写法来写自定义字段，一样是加到“…”里面，包括上传图片域，可以参考这篇文章。

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

1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

1

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 （"高级"选项卡）

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

1
2

echo get_post_meta( $post->ID, '_pro_mainStone', true );
echo get_post_meta( get_the_ID(), '_pro_mainStone', true );

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/1050.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。

相关文章

24 关于 “WordPress后台定制-为WooCommerce产品增加自定义字段” 的评论

  2. 陈小小新

    HI，这篇文章真的帮了我的大忙！就是想问下，自定义的输入框textarea_input怎么能够支持html代码呢？比如我写一个两行的内容，就识别成文字了…

    回复 ↓
    1. Brain

      Checkbox如果有多个选项，需要配合隐藏域，也就是用js把多个Checkbox的值整理成JSON或者自己需要的字符串格式复制给隐藏域
      多个Checkbox直接的写法差不多就是这样

      woocommerce_wp_checkbox(
      array(
      'id' => 'theId1',
      'name' => 'theName',
      'label' =>'the label',
      'value' =>'value 1'
      )
      );
      woocommerce_wp_checkbox(
      array(
      'id' => 'theId2',
      'name' => 'theName',
      'label' =>'the label',
      'value' =>'value 2'
      )
      );
      ...

      回复 ↓
        1. Brain 文章作者

          请注意上面我稍微改了下’id’ => ‘theId1’, ‘id’ => ‘theId2’,
          这里id不能一样，否则js会不能正确取值

          回复 ↓
  7. 孟阳

    你好，select 下拉菜单可以做成通过另外一个下拉菜单已选选项来修改当前下拉菜单的选项吗？怎么做呢？

    回复 ↓
  8. 许晨阳

    博主你好，试了一下发现属性存储存储后无法删除的问题（存储，更改正常，当删除内容并保存后刷新页面，信息仍在）
    请问这种情况应该怎么解决？感谢！

    回复 ↓
      1. Brain 文章作者

        这个判断可以去掉，这样即使是空值也会保存。一般来说如果是空值就不更新了，这个逻辑并不饱满，可以改掉。
        你可以在这个if后面加上 else { delete_post_meta( $post_id, $meta_key); } 就可以删除空值了。

        回复 ↓
  9. 无言

    你好！我的为什么在后台修改了无法保存到数据？请看下面代码

    // WordPress后台定制-存储WooCommerce产品自定义字段
    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 ) );
    }else {
    delete_post_meta( $post_id, $meta_key);
    }

    woocommerce_wp_text_input(
    array(
    ‘id’ => ‘amazon_link’, //自定义字段的id
    ‘label’ => __( ‘亚马逊链接’, ‘woocommerce’ ), //自定义字段在后台显示的名字
    ‘placeholder’ => ‘添加亚马逊的购物链接’,
    ‘desc_tip’ => ‘true’,//如果有了这一行，字段输入框后面会多出一个问号小图标，description的值会在鼠标移到小图标的时候显示
    ‘description’ => __( ‘请填写此产品的购买链接.’, ‘woocommerce’ )
    )
    );

    //对于checkbox，可以这么写
    $woocommerce_checkbox = isset( $_POST[‘_checkbox’] ) ? ‘yes’ : ‘no’;
    update_post_meta( $post_id, ‘_checkbox’, $woocommerce_checkbox );
    }

    回复 ↓
      1. 无言

        您好，您文章中写的是这段为保存数据呀，保存数据的钩子不是这个吗add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );

        我没有贴出写入后台的那段代码，后台显示的钩子是add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

        麻烦您看下，谢谢！

        回复 ↓
        1. Brain 文章作者

          这个钩子是保存数据的，要确保保存的值是你前面新增字段的id
          你的字段名称是amazon_link，那就要保存这个名称获取的值

          回复 ↓
  10. 七七八八

    大佬，您好，照抄了后台能编辑能保存，为什么前台调用不了。
    add_action( ‘woocommerce_product_options_general_product_data’, ‘woo_add_custom_general_fields’ );

    function woo_add_custom_general_fields() {
    global $woocommerce, $post;
    echo ”;
    woocommerce_wp_select(
    array(
    ‘id’ => ‘_pro_mainStone’, //自定义字段的id
    ‘label’ => __( ‘主石’, ‘woocommerce’ ), //自定义字段在后台显示的名字
    ‘options’ => array( //定义各个选项
    ‘粉蓝宝’ => __( ‘粉蓝宝’, ‘woocommerce’ ),
    ‘黄蓝宝’ => __( ‘黄蓝宝’, ‘woocommerce’ ),
    ‘红宝石’ => __( ‘红宝石’, ‘woocommerce’ ),
    ‘蓝宝石’ => __( ‘蓝宝石’, ‘woocommerce’ ),
    ‘沙佛来’ => __( ‘沙佛来’, ‘woocommerce’ ),
    ‘祖母绿’ => __( ‘祖母绿’, ‘woocommerce’ ),
    ‘钻石’ => __( ‘钻石’, ‘woocommerce’ )
    )
    )
    );
    echo ”;
    }

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

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

    回复 ↓

发表回复

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