Woocommerce二次开发笔记

Woocommerce二次开发笔记

十一月 20, 2019

Woocommerce的很多功能并不是非常符合中国用户的使用习惯,比如订单列表点击地址会跳转到谷歌地图、订单搜索项目默认只包含固定点项目、自带配送方式过于简陋等,但可以通过Hooks分别解决。

文内代码可以放在functions.php中,也可放在插件里。

自定义订单列表栏目和搜索

假设我增加了一个key为_shipping_qq的meta项用于存放用户的QQ号码,需要在订单列表页面显示,则需要如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
add_filter( 'manage_edit-shop_order_columns',function ($columns){
$new_columns = (is_array($columns)) ? $columns : [];
unset( $new_columns['wc_actions']);/*【操作】一栏需要放在最后*/
$new_columns['_shipping_qq'] = 'QQ';
$new_columns['wc_actions'] = $columns['wc_actions'];
return $new_columns;
});
add_action( 'manage_shop_order_posts_custom_column',function ($column){
global $post;
$data = get_post_meta( $post->ID );
if ( $column == '_shipping_qq' ) {
echo (isset($data['_shipping_qq']) ? $data['_shipping_qq'][0] : '无');
}
});

如果我需要允许通过QQ号搜索订单,就再加入以下代码:

1
2
3
4
add_filter( 'woocommerce_shop_order_search_fields',function ( $search_fields ) {
$search_fields[] = 'your_meta_key';
return $search_fields;
});

在订单预览弹窗中显示更多信息

同样以_shipping_qq字段为例,若需要在订单预览的弹窗中显示,则需要如下代码:

1
2
3
4
5
6
7
8
add_filter('woocommerce_admin_order_preview_get_order_details',function($fields){
$txt="无QQ号码";
foreach($fields['data']['meta_data'] as $meta){
if($meta->key=="_shipping_qq")$txt=$meta->value;
}
$fields['formatted_shipping_address']=$fields['formatted_shipping_address']."<br />QQ:".$txt;
return $fields;
});

此时QQ号码将显示在地址的下方。

订单列表和弹窗复制地址

后台点击配送地址默认跳转到谷歌地图,但我们实际上只想复制地址去寄快递…
如果你只想阻止打开谷歌地图的行为:

1
2
3
4
5
6
7
8
9
10
add_action( 'admin_print_footer_scripts',function(){
?>
<script>
jQuery(function(){
jQuery("body").on("click",".wc-order-preview-address a,.column-shipping_address a",function(e){
e.preventDefault();
});
});
</script>
<?php });

如果你还想要复制地址,就使用这段代码(上面的不需要了):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
add_action( 'admin_enqueue_scripts',function(){
wp_register_script( "clipboard",'https://lib.baomitu.com/clipboard.js/2.0.4/clipboard.min.js',[],"2.0.4");
/*使用360CDN加载,可以换成自己的js地址*/
wp_enqueue_script( 'clipboard' );
});
add_action( 'admin_print_footer_scripts',function(){
?>
<script>
jQuery(function(){
jQuery("body").on("click",".wc-order-preview-address a,.column-shipping_address a",function(e){
e.preventDefault();
})
var c=new ClipboardJS('.wc-order-preview-address a',{
text: function(trigger) {
return trigger.innerText;
}
});
c.on('success', function(e) {
alert("配送地址已复制");
});
});
</script>
<?php });

设置自提后依然显示配送地址

Woocommerce对于配送方式为【本地自提】的订单,默认在预览窗口中不显示配送地址等信息。如果仍需要显示,则可以使用这段代码:

1
2
3
4
add_filter('woocommerce_admin_order_preview_get_order_details',function($fields){
$fields['needs_shipping']=true;
return $fields;
});