如何为Woocommerce注册表单添加自定义字段并调整字段顺序？

你的核心需求是让First Name、Last Name在注册表单最前面，Phone字段排在Password之后，当前代码用woocommerce_register_form_start钩子一次性添加所有自定义字段，导致它们全部出现在默认字段前，只需拆分字段到不同钩子即可实现目标：

实现代码 #

// 在注册表单最顶部添加First Name和Last Name
function wooc_add_first_last_name_fields() { ?>
    <p class="form-row form-row-first">
        <label for="reg_billing_first_name"><?php _e( 'First name', 'woocommerce' ); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_first_name" id="reg_billing_first_name" value="<?php echo esc_attr( isset( $_POST['billing_first_name'] ) ? $_POST['billing_first_name'] : '' ); ?>" />
    </p>
    <p class="form-row form-row-last">
        <label for="reg_billing_last_name"><?php _e( 'Last name', 'woocommerce' ); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_last_name" id="reg_billing_last_name" value="<?php echo esc_attr( isset( $_POST['billing_last_name'] ) ? $_POST['billing_last_name'] : '' ); ?>" />
    </p>
    <div class="clear"></div>
<?php }
add_action( 'woocommerce_register_form_start', 'wooc_add_first_last_name_fields' );

// 在Password字段之后添加Phone字段
function wooc_add_phone_field_after_password() { ?>
    <p class="form-row form-row-wide">
        <label for="reg_billing_phone"><?php _e( 'Phone', 'woocommerce' ); ?></label>
        <input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" value="<?php echo esc_attr( isset( $_POST['billing_phone'] ) ? $_POST['billing_phone'] : '' ); ?>" />
    </p>
<?php }
add_action( 'woocommerce_register_form', 'wooc_add_phone_field_after_password' );

关键逻辑说明 #

• woocommerce_register_form_start钩子：会在注册表单的起始位置输出内容，刚好用来放置First Name和Last Name，保证它们在默认的Username、Email字段之前。
• woocommerce_register_form钩子：会在默认注册表单的所有字段（包括Password）之后输出内容，完美实现Phone字段排在Password之后的需求。
• 代码优化：修正了原代码中esc_attr_e的错误用法（esc_attr_e是直接输出转义后的内容，不适合放在value属性里），改用esc_attr配合echo，同时增加isset()检查避免PHP未定义索引警告。

可选扩展 #

如果需要对这些自定义字段做验证（比如设置Phone为必填项、验证手机号格式），可以添加woocommerce_register_post钩子来处理验证逻辑，示例如下：

function wooc_validate_register_fields( $username, $email, $errors ) {
    // 验证First Name必填
    if ( empty( $_POST['billing_first_name'] ) ) {
        $errors->add( 'billing_first_name_error', __( 'First name is required!', 'woocommerce' ) );
    }
    // 验证Last Name必填
    if ( empty( $_POST['billing_last_name'] ) ) {
        $errors->add( 'billing_last_name_error', __( 'Last name is required!', 'woocommerce' ) );
    }
    // 验证Phone格式（示例：简单检查是否为数字）
    if ( ! empty( $_POST['billing_phone'] ) && ! is_numeric( $_POST['billing_phone'] ) ) {
        $errors->add( 'billing_phone_error', __( 'Phone number must be numeric!', 'woocommerce' ) );
    }
}
add_action( 'woocommerce_register_post', 'wooc_validate_register_fields', 10, 3 );

内容的提问来源于stack exchange，提问作者DearBee