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

| 7 条评论 | 12,042 人已阅
本站所有文章均为博主人工写作，绝无AI辅助成分，请放心参阅。

接上一篇 定制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，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。

相关文章

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

  1. segrasd

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

    回复 ↓
    1. Brain 文章作者

      这是我自己定义的函数名，和主题没有什么关系。不过我的笔记本来也不是写给纯新手看的，还是要对WordPress有一定的了解和兴趣才能参考到。这篇文章提到的的几个钩子，你自己去查一下相关的官方文档，就能举一反三了。

      回复 ↓

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注