WordPress后台定制-为Woocommerce产品增加选择参数自定义字段


本站长承接“企业网站定制服务,有想做网站的客户可联系!站长QQ:739696033 | 微信:bing-0719

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

站长QQ:739696033 | 微信:bing-0719:Bcoder资源网 » WordPress后台定制-为Woocommerce产品增加选择参数自定义字段


本站VPN

扫描二维码关注微信公众号:“bcoder-cn 声明:本站内容部分来自互联网,仅供交流学习之用,请勿作商业用途,版权归原作者所有。如果有侵犯到您的权益,请提供相关证明联系本站删除,谢谢合作!
赞 (0)
分享到:更多 ()

评论 0

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