WordPress系统定制-为WooCommerce产品提升自定义

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

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

1

add\_action( woocommerce\_product\_options\_general\_product\_data, woo\_add\_custom\_general\_fields );

对应的函数：

function woo\_add\_custom\_general\_fields() {
    global $woocommerce, $post;
    echo 
;

    ...//此处留待添加具体内容，见下文

    echo 
;
}

以下代码根据需要，添加到上面“…”的位置：
自定义字段“主石”的表现形式是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 );
}

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

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

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

echo get\_post\_meta( $post->ID, \_pro\_mainStone, true );
echo get\_post\_meta( get\_the\_ID(), \_pro\_mainStone, true );