如何在WooCommerce我的账户编辑资料页展示自定义注册字段供用户编辑

Hey there! Let's get those custom fields (phone number, gender) showing up and editable on the My Account > Edit Account page in WooCommerce. I’ve got two reliable approaches for you—one with code (great for full control) and one no-code plugin option if you prefer that route:

This method lets you tailor everything exactly how you want, and it’s more stable long-term (no plugin dependencies). Just follow these steps:

步骤1：添加自定义字段到编辑账户页面 #

We’ll use the woocommerce_edit_account_form action hook to inject your fields into the edit form. Add this code to your child theme’s functions.php file, or a custom plugin file:

// 添加自定义字段到"我的账户-编辑资料"页面
add_action( 'woocommerce_edit_account_form', 'add_custom_edit_account_fields' );
function add_custom_edit_account_fields() {
    $current_user = wp_get_current_user();
    ?>
    <!-- 手机号字段 -->
    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="phone_number"><?php esc_html_e( '手机号', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="tel" class="woocommerce-Input woocommerce-Input--text input-text" 
               name="phone_number" id="phone_number" 
               value="<?php echo esc_attr( get_user_meta( $current_user->ID, 'phone_number', true ) ); ?>" 
               required />
    </p>

    <!-- 性别字段 -->
    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="gender"><?php esc_html_e( '性别', 'woocommerce' ); ?></label>
        <select class="woocommerce-Input woocommerce-Input--select input-select" 
                name="gender" id="gender">
            <option value="" <?php selected( get_user_meta( $current_user->ID, 'gender', true ), '' ); ?>><?php esc_html_e( '请选择', 'woocommerce' ); ?></option>
            <option value="male" <?php selected( get_user_meta( $current_user->ID, 'gender', true ), 'male' ); ?>><?php esc_html_e( '男', 'woocommerce' ); ?></option>
            <option value="female" <?php selected( get_user_meta( $current_user->ID, 'gender', true ), 'female' ); ?>><?php esc_html_e( '女', 'woocommerce' ); ?></option>
        </select>
    </p>
    <?php
}

步骤2：保存自定义字段的值 #

Next, we need to hook into the woocommerce_save_account_details action to save the updated values to the user’s profile. Add this right after the previous code:

// 保存编辑资料页面的自定义字段值
add_action( 'woocommerce_save_account_details', 'save_custom_edit_account_fields', 10, 1 );
function save_custom_edit_account_fields( $user_id ) {
    // 处理手机号字段
    if ( isset( $_POST['phone_number'] ) ) {
        update_user_meta( $user_id, 'phone_number', sanitize_text_field( $_POST['phone_number'] ) );
    }

    // 处理性别字段
    if ( isset( $_POST['gender'] ) ) {
        update_user_meta( $user_id, 'gender', sanitize_text_field( $_POST['gender'] ) );
    }
}

重要提示： #

• Meta Key一致性: Make sure the meta keys (phone_number and gender) match exactly what you used when adding these fields to the registration form. If they don’t, the existing user data won’t load here, and new updates won’t save correctly.
• 子主题使用: Always use a child theme for code edits—this way, your changes won’t get overwritten when your parent theme updates. If you’re not using a child theme, create a simple custom plugin instead (it’s just as easy!).

If you’d rather avoid code, there are great plugins that let you manage user fields visually:

• WooCommerce Extra Checkout Fields & Manager: This plugin lets you create, edit, and manage custom fields for registration, checkout, and the My Account page. Just navigate to the plugin’s settings, find your existing phone/gender fields, and set their display location to My Account > Edit Account.
• User Registration: A popular user management plugin that integrates seamlessly with WooCommerce. You can edit your registration fields and toggle the option to show them on the account edit page with a few clicks.

插件使用注意事项： #

• Double-check that the field names/meta keys match your existing registration fields to keep data synced.
• Always test plugin changes on a staging site first to avoid breaking your live store.

内容的提问来源于stack exchange，提问作者Tarunya .R