WordPress外贸建站客户要求增加自定义发货地选项,

主要的功能要求

在编辑产品时,要有3个地址的单选项,选择并保存产品,然后在产品详情页面显示对应的图标。如下

Woocommerce 增加自定义发货地图标Woocommerce 增加自定义发货地图标

设置方案

这里要使用一个自定义字段插件advanced-custom-fields,简称ACF,这是一付费插件,下载ACF插件

上传并安装好激活,添加一个字段组,然后增加字段,随意命名为From,别名为shipping_place

Woocommerce 增加自定义发货地图标

设置字段组的规则,选择产品,这样就只有在产品上显示以上字段了。

Woocommerce 增加自定义发货地图标

然后,随便编辑一个产品,就看到字段出来了,这样保存产品后,此产品就有这个字段了。

Woocommerce 增加自定义发货地图标

 

WordPress片段代码

增加代码到子主题Function.php


/*single products自定义字段*//*简码[shipping-from]插入*/
add_shortcode( 'shipping-from', 'wpc_shortcode_shipping' );
function wpc_shortcode_shipping() {
global $product;
$place = get_field('shipping_place');/*获取字段值*/
$air = "<div class='from-box'> <i class='fa fa-plane' /> </i> <div class='from2'>From China (Air freight) </div></div>";/*第1种情况输出的不同HTML*/
$Shipping = "<div class='from-box'> <i class='fa fa-ship' /> </i> <div class='from2'>From China (Shipping) </div></div>";/*第2种情况输出的不同HTML*/
$car = "<div class='from-box'> <i class='fa fa-truck' /> </i> <div class='from2'>From Ghana (Car) </div></div>";/*第3种情况输出的不同HTML*/
if( get_field('shipping_place') == 'From China (Air freight)' ) {
return $air;
}
if( get_field('shipping_place') == 'From China (Shipping)' ) {
return $Shipping;
}
if( get_field('shipping_place') == 'From Ghana (Car)' ) {
return $car;
}
}

以上代码通过简码的方式插入到产品详情页,你也可以用woocommerce勾子插入。

自定义CSS部分


/*shiping from自定义字段*/
.from2{background-color: #fff;border-radius: 30px;padding: 5px 10px;display: inline-block;}
.from-box {background-color: #009fe8;padding: 2px 2px 2px 20px;border-radius: 30px;display: inline-block;}
.from-box .fa{color: #fff;font-size: 22px;position: relative;top: 4px;}