最近帮一个朋友(甲方)用WooCommerce做了一个B2C的网站,在PayPal对接完并沙盒测试成功后,朋友说希望能让客人在买家账号的orders页面可以直接看到物流信息。
于是经过一番搜索,发现WooCommerce官方提供了付费的扩展,$49/年,或者其他的付费扩展也可以实现这个功能。
考虑到朋友刚刚开始创业,经费也比较紧张,我也想让朋友对我的技术更有信心,于是乎研究了一下WooCommerce,最终利用计算机基础知识,实现了无需付费扩展,在买家账号的Order details页面,增加物流信息版块,最终展示效果如下:
需要安装的wordpress插件
- Advanced Custom Fields,后续简称ACF,免费版的功能就足够用了
- Code Snippets
第一步,安装插件
第二步,在ACF新建一个Field Group
名字可以随便起,但是最底下的条件要选order,如图
第三步,添加需要的Fields
我这里添加了3个fields,你也可以根据自己需求添加合适的fields
- tracking code,Field Type选Text
- tracking URL,Field Type选Text
- shipping date,Field Type选Date Picker
每个fields添加时,记住Field Name,在下一步可以用到。
第四步,在WC后台订单管理中添加物流信息
在WooCommerce > Orders页面,点开具体一个订单的信息,就可以看到多出了如下3个文本框,依次填入对应的信息即可。
第五步,在Code Snippets插件中,新增一个snippet(代码片段)
具体代码见附件
php
123456789101112131415161718192021222324
add_action( 'woocommerce_order_details_after_order_table', 'ex_tracking_info' );
function ex_tracking_info( $order ) {
$tracking_code = get_field( "tracking_code" , $order->get_id());
$tracking_url = get_field( "tracking_url" , $order->get_id());
$shipping_date = get_field( "shipping_date" , $order->get_id());
?>
<h2 class="woocommerce-column__title">Tracking Information</h2>
<span style="font-weight:bold;line-height:1.5em;">Tracking Code:</span>
<?php if( $tracking_code ) { echo esc_html( $tracking_code );} ?>
<br />
<span style="font-weight:bold;line-height:1.5em;">Tracking URL:</span>
<?php if( $tracking_code ) { echo "<a href='".esc_html( $tracking_url )."' target='_blank'>".esc_html( $tracking_url )."</a>";} ?>
<br />
<span style="font-weight:bold;line-height:1.5em;">Shipping Date:</span>
<?php if( $shipping_date ) { echo date('F j, Y', strtotime($shipping_date) );}
}
大功告成
可以在买家账号后台查看效果了。
更多思考
17track提供了一些示例,可以在客户页面直接嵌入物流跟踪结果,进一步提升用户体验。