定制WooCommerce的用户地址页以符合国内用户使用习惯

接上一篇 定制WooCommerce的账户详情(用户资料)页,增加自定义字段,修改默认字段 后,本文记录一下如何修改WooCommerce用户中心的edit-address以及购买商品结帐页面的字段。所有修改还是为了符合国内用户的书写习惯,把姓名合并成一个字段,去掉email字段,把地址栏从2行变成1行。
修改之前是这样的:
定制WooCommerce的用户地址页以符合国内用户使用习惯 修改前
首先是去掉lastname、city和address_2这些没必要的字段

1
2
3
4
5
6
7
add_filter( 'woocommerce_billing_fields', 'brain1981_custome_billing_address');
function brain1981_custome_billing_address($address_fields){
    unset($address_fields['billing_last_name']);
    unset($address_fields['billing_city']);
    unset($address_fields['billing_address_2']);
    return $address_fields;
}

接下来微调一下各字段的顺序和属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function brain1981_custom_order_address_fields( $fields ) {
    $order = array(
        'first_name',
        'last_name',
        'company',
        // 'email',
        // 'phone',
        'country',
        'state',
        //'address_2',
        'address_1',
        'postcode',
        //'city',
 
    );
    foreach( $order as $field ) {
        $ordered_fields[$field] = $fields[$field];
    }
    $fields = $ordered_fields;
 
    $fields['country']['class'] = array( 'form-row-first', 'address-field' );
    $fields['state']['class'] = array( 'form-row-last', 'address-field' );
    $fields['postcode']['class'] = array( 'form-row-first', 'address-field' );
 
    $fields['postcode']['required'] = false;
    return $fields;
}
add_filter( 'woocommerce_default_address_fields', 'brain1981_custom_order_address_fields', 10, 1 );

其中$order = array数组中的字段,注释掉的是无需改动的字段,保留着的字段名可以直接在数组中修改前后位置。
下半部分的代码,把country字段从原先占用一行改成半行,把state(省)连在它的后面,后面再接上邮编。这些都只要修改字段的[‘class’]值就可以。
如果要修改字段是否为必填,比如把电话号码改成非必填项,可以加上这行:

1
$fields['phone']['required'] = false;

更多的范例可以参考:https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/

按照本文修改后的地址栏就变成这样了:
定制WooCommerce的用户地址页以符合国内用户使用习惯 修改后

最后,由于WooCommer默认提供了两个地址- billing_address和shipping_address 对国内用户来说,没必要搞得那么复杂,只要填写一个快递地址就行了,所以我只修改了billing_address,并把shipping_address禁用。这个只要到后台WooCommerce – 设置 – 配送 设置一下即可:

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/1499.html。百度不可信,搜索请谨慎。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以获取本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

5 关于 “定制WooCommerce的用户地址页以符合国内用户使用习惯” 的评论

  1. segrasd

    第一段多了一个代码:add_filter( ‘woocommerce_shipping_fields’, ‘brain1981_custome_shipping_address’);,其他人看看了容易出错哈

    回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注