Woocommerce 增加自定义发货地图标

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

主要的功能要求

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

设置方案

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

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

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

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

WordPress片段代码

增加代码到子主题Function.php

[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;
}
}[/php]

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

自定义CSS部分

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

[/css]