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

电玩女神 2021-09-08 19:26 736阅读 0赞

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

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
</pre> </td> 
   <td> <pre>add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );</pre> </td> 
  </tr> 
 </tbody> 
</table>

对应的函数：

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
</pre> </td> 
   <td> <pre>function woo_add_custom_general_fields() {
	global $woocommerce, $post;
	echo '&lt;div class="options_group"&gt;';
&nbsp;
	...//此处留待添加具体内容，见下文
&nbsp;
	echo '&lt;/div&gt;';
}</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre> </td> 
   <td> <pre>woocommerce_wp_select( 
array( 
	'id'          =&gt; '_pro_mainStone', //自定义字段的id
	'label'       =&gt; __( '主石', 'woocommerce' ), //自定义字段在后台显示的名字
	'options' =&gt; array( //定义各个选项
		'粉蓝宝' =&gt; __( '粉蓝宝', 'woocommerce' ),
		'黄蓝宝' =&gt; __( '黄蓝宝', 'woocommerce' ),
		'红宝石' =&gt; __( '红宝石', 'woocommerce' ),
		'蓝宝石' =&gt; __( '蓝宝石', 'woocommerce' ),
		'沙佛来' =&gt; __( '沙佛来', 'woocommerce' ),
		'祖母绿' =&gt; __( '祖母绿', 'woocommerce' ),
		'钻石' =&gt; __( '钻石', 'woocommerce' )
		)
	)
);</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre> </td> 
   <td> <pre>woocommerce_wp_text_input( 
array( 
		'id'                =&gt; '_pro_mainStone_amount', 
		'label'             =&gt; __( '主石数量', 'woocommerce' ), 
		'placeholder'       =&gt; '1', //默认显示一个数字，起到提醒用户的作用
		'description'       =&gt; __( '填写数字', 'woocommerce' ),//输入框后面的说明文字
		'type'              =&gt; 'number', //如果没有这个参数，那么就只是普通的input输入框了
		'custom_attributes' =&gt; array(
				'step' 	=&gt; 'any', //数字输入框的步进，any表示1
				'min'	=&gt; '0', //数字输入框的最小值
				'max'	=&gt; '100' //数字输入框的最大值
			) 
	)
);</pre> </td> 
  </tr> 
 </tbody> 
</table>

假如要添加普通的input输入框，名字叫“主石说明”，代码如下(注意tip相关的参数)：

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
</pre> </td> 
   <td> <pre>woocommerce_wp_text_input( 
	array( 
		'id'          =&gt; '_pro_mainStoneIntro', 
		'label'       =&gt; __( '主石说明', 'woocommerce' ), 
		'placeholder' =&gt; '添加注石说明',
		'desc_tip'    =&gt; 'true',//如果有了这一行，字段输入框后面会多出一个问号小图标，description的值会在鼠标移到小图标的时候显示
		'description' =&gt; __( 'Enter the custom value here.', 'woocommerce' ) 
	)
);</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
</pre> </td> 
   <td> <pre>woocommerce_wp_textarea_input( 
	array( 
		'id'          =&gt; '_pro_mainStoneIntro', 
		'label'       =&gt; __( '主石说明', 'woocommerce' )
	)
);</pre> </td> 
  </tr> 
 </tbody> 
</table>

Checkbox框，一般用得比较少：

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
</pre> </td> 
   <td> <pre>woocommerce_wp_checkbox( 
array( 
	'id'            =&gt; '_checkbox', 
	'wrapper_class' =&gt; 'show_if_simple', 
	'label'         =&gt; __('My Checkbox Field', 'woocommerce' ), 
	'description'   =&gt; __( 'Check me!', 'woocommerce' ) 
	)
);</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
</pre> </td> 
   <td> <pre>woocommerce_wp_hidden_input(
array( 
	'id'    =&gt; '_hidden_field', 
	'value' =&gt; 'hidden_value'
	)
);</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

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

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre> </td> 
   <td> <pre>add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );
&nbsp;
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 ) );
&nbsp;
	...//所有的值按如上格式保存即可
&nbsp;
	//对于checkbox，可以这么写
	$woocommerce_checkbox = isset( $_POST['_checkbox'] ) ? 'yes' : 'no';
	update_post_meta( $post_id, '_checkbox', $woocommerce_checkbox );
}</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

把钩子woocommerce\_product\_options\_general\_product\_data改成这些即可：

woocommerce_product_options_attributes（"属性"选项卡）
    woocommerce_product_options_shipping （"配送"选项卡）
    woocommerce_product_options_advanced （"高级"选项卡）

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
</pre> </td> 
   <td> <pre>echo get_post_meta( $post-&gt;ID, '_pro_mainStone', true );
echo get_post_meta( get_the_ID(), '_pro_mainStone', true );</pre> </td> 
  </tr> 
 </tbody> 
</table>

[Woocommerce]: /images/20210908/3fa23183c8a649c5b63dc86bc869f553.png
[Link 1]: https://blog.brain1981.com/942.html