定制WooCommerce的账户详情(用户资料)页，增加自定义字段，修改默认字段

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

WooCommerce是一款非常流行的WordPress电商插件。然而也听到很多人反映，它并太符合中国用户的使用习惯。国内用户的电商网站使用习惯大多是被淘宝培养出来的，因此如果要基于WordPress + WooCommerce搭建一个面向国人的小型电商网站，为提高用户体验，还是要对WooCommerce做不少改造的。在做过N个相关项目后，我觉得有必要分几篇文章，把WooCommerce值得改造的点和改造过程总结一下。我的原则还是能不用插件就不用插件，几十行代码能搞定的事情，肯定不会考虑用插件。本文先说说如何自定义账户中心的用户资料页。

首先，默认的WC用户资料页大致是这样的：


这里不符合中国用户习惯的主要是姓名的输入，我希望把姓氏和名称合并为姓名；另外，由于业务需要知道更多用户信息，可能还需要增加一些其他的必要字段，比如增加一个手机号码。因此我们要把页面改成这样：

WordPress的特性，每个用户都有一个叫nickname的用户字段可以存放用户昵称或者姓名，而且nickname也可以做为displayname显示在网站前端，兼容性不错，这样就没必要创造新的用户字段去合并姓和名了。
于是先要去除姓和名的必填属性，在一个叫woocommerce_save_account_details_required_fields的filter中，代码如下，加在主题function文件里：

1
2
3
4
5
6

add_filter( 'woocommerce_save_account_details_required_fields', 'brain1981_account_required_fields');
function brain1981_account_required_fields($fields){
    unset($fields['account_first_name']);
    unset($fields['account_last_name']);
    return $fields;
}

同时找到主题文件夹中的\myaccount\form-edit-account.php 文件，放心地把account_first_name和account_last_name相关的的HTML去除，然后直接加上nickname部分：

1
2
3
4

<p class="woocommerce-FormRow woocommerce-FormRow--first form-row">
	<label for="account_first_name"><?php _e( '姓名', 'woocommerce' ); ?> <span class="required">*</span></label>
	<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="account_nickname" id="account_nickname" value="<?php echo esc_attr( $user->nickname ); ?>" />
</p>

然后在主题function文件里加上保存nickname的代码，用于保存字段：

1
2
3
4

add_action( 'woocommerce_save_account_details', 'brain1981_woocommerce_save_account_details' );
function brain1981_woocommerce_save_account_details( $user_id ) {
    update_user_meta( $user_id, 'nickname', $_POST[ 'account_nickname' ] );
}

接下来是增加一个phonenumber的必填字段存储手机号
可以到form-edit-account.php里去写HTML，也可以在页面表单里用woocommerce_edit_account_form钩子可以直接添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

add_action( 'woocommerce_edit_account_form', 'brain1981_woocommerce_edit_account_form' );
function brain1981_woocommerce_edit_account_form() {
    $user_id = get_current_user_id();
    $user = get_userdata( $user_id );
    if ( !$user ) return;
    $phonenumber = get_user_meta( $user_id, 'phonenumber', true );
    ?>
    <fieldset>
    <legend>手机号码</legend>
    <p class="form-row form-row-thirds">
        <label for="phonenumber">请填写您真实有效的手机号码 <span class="required">*</span></label>
        <input type="tel" name="phonenumber" value="<?php echo esc_attr( $phonenumber ); ?>" class="input-text" />
    </p>
    </fieldset>
  <?php
}

改写一下前面保存字段的代码，增加一行保存电话号码

1
2
3
4
5

add_action( 'woocommerce_save_account_details', 'brain1981_woocommerce_save_account_details' );
function brain1981_woocommerce_save_account_details( $user_id ) {
    update_user_meta( $user_id, 'nickname', $_POST[ 'account_nickname' ] );
    update_user_meta( $user_id, 'phonenumber', htmlentities( $_POST[ 'phonenumber' ] ) );//新增的这行
}

这就基本完成了，不过我想把新增的电话号码和前面的nickname做为必填字段，而且还要验证一下手机号格式，用这个钩子woocommerce_save_account_details_errors可以方便地添加字段验证，代码：

1
2
3
4
5
6
7
8
9
10
11

add_action('woocommerce_save_account_details_errors', 'my_custom_checkout_field_process', 10, 1);
function my_custom_checkout_field_process($args) {
    if ( ! $_POST['account_nickname'] ){
        $args->add( 'error', '请填写姓名','');
    }
    if ( ! $_POST['phonenumber'] ){
        $args->add( 'error', '请填写手机号','');
    }else if(!preg_match("/^1[34578]{1}\d{9}$/",$_POST['phonenumber']) ){
        $args->add( 'error', '请填写正确的手机号','');
    }
}

这样就算完成了，若有其他修改需求，都可以举一反三。下次有空我再总结一下如何修改账户地址和结帐页面的表单项。

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

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

相关文章

9 关于 “定制WooCommerce的账户详情(用户资料)页，增加自定义字段，修改默认字段” 的评论

  1. 王银

    大兄弟啊，我在我的主题文件夹中的\myaccount 找不到 form-edit-account.php 文件啊？怎么回事啊？

    回复 ↓
    1. Brain 文章作者

      自己的主题文件夹当然是没有这个文件的，需要从WooCommerce插件目录中templates里找到这个文件，复制到自己主题下面对应的目录位置

      回复 ↓
  4. 8ee886e75077be741f271db4589526df

    if ( ! $_POST[‘nickname’] ){
    $args->add( ‘error’, ‘请填写姓名’,”);
    }

    回复 ↓
    1. Brain

      每个theme都有一个function.php的，当然你也可以加到子主题里面或是任何其他确保每个页面都会调用的文件里

      回复 ↓

发表回复

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