将WooCommerce编辑账户表单验证错误显示在对应输入字段下方

要实现把表单验证错误放在对应输入字段下方而非全局通知框，需要从模板修改、错误拦截处理和样式美化三个部分入手：

1. 修改编辑账户表单模板 #

在你的表单代码中，为每个需要验证的字段下方添加错误显示容器，并输出对应字段的错误信息。修改后的表单代码如下：

<div id="user-info-form-profile">
    <?php do_action( 'woocommerce_before_edit_account_form' ); ?>
    <form class="woocommerce-EditAccountForm edit-account m-0" action="" method="post" <?php do_action( 'woocommerce_edit_account_form_tag' ); ?> >

        <?php do_action( 'woocommerce_edit_account_form_start' ); ?>
        <?php
        // 获取字段错误信息
        $account_errors = isset( $_SESSION['wc_errors'] ) ? $_SESSION['wc_errors'] : array();
        ?>

        <p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
            <label for="account_first_name"><?php esc_html_e( 'First name', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
            <span class="woocommerce-input-wrapper">
                <input type="text" class="woocommerce-Input woocommerce-Input--text input-text <?php echo isset( $account_errors['account_first_name'] ) ? 'woocommerce-invalid' : ''; ?>" name="account_first_name" id="account_first_name" autocomplete="given-name" value="<?php echo esc_attr( $user->first_name ); ?>" />
            </span>
            <!-- 显示名字字段错误 -->
            <?php if ( isset( $account_errors['account_first_name'] ) ) : ?>
                <span class="woocommerce-error" style="display:block;"><?php echo esc_html( $account_errors['account_first_name'] ); ?></span>
            <?php endif; ?>
        </p>

        <p class="woocommerce-form-row woocommerce-form-row--last form-row form-row-last">
            <label for="account_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
            <span class="woocommerce-input-wrapper">
                <input type="email" class="woocommerce-Input woocommerce-Input--email input-text <?php echo isset( $account_errors['account_email'] ) ? 'woocommerce-invalid' : ''; ?>" name="account_email" id="account_email" autocomplete="email" value="<?php echo esc_attr( $user->user_email ); ?>" />
            </span>
            <!-- 显示邮箱字段错误 -->
            <?php if ( isset( $account_errors['account_email'] ) ) : ?>
                <span class="woocommerce-error" style="display:block;"><?php echo esc_html( $account_errors['account_email'] ); ?></span>
            <?php endif; ?>
        </p>
        <?php do_action( 'woocommerce_edit_account_form' ); ?>

        <!-- 密码字段已注释，若启用可同理添加错误显示 -->

        <p>
            <?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce' ); ?>
            <button type="submit" class="woocommerce-Button button-w-border mx-0 px-0 mt-1 mb-0 pb-0 button<?php echo esc_attr( wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '' ); ?>" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Save changes', 'woocommerce' ); ?></button>
            <input type="hidden" name="action" value="save_account_details" />
        </p>

        <?php do_action( 'woocommerce_edit_account_form_end' ); ?>
    </form>
    <?php do_action( 'woocommerce_after_edit_account_form' ); ?>
</div>

2. 添加错误拦截与映射功能 #

在主题的functions.php文件中添加以下代码，拦截WooCommerce的全局错误，将错误信息按字段分类存储，同时禁用全局错误通知：

add_filter( 'woocommerce_add_error', 'wc_edit_account_field_errors', 10, 2 );
function wc_edit_account_field_errors( $error, $message ) {
    // 仅处理编辑账户页面的错误
    if ( is_account_page() && isset( $_POST['save_account_details'] ) ) {
        session_start();
        
        // 匹配字段对应的错误信息
        $field_error_map = array(
            'First name is required' => 'account_first_name',
            'Please enter a valid email address.' => 'account_email',
            'Email address is already registered.' => 'account_email',
            // 可根据实际错误提示添加更多映射
        );

        foreach ( $field_error_map as $error_msg => $field_name ) {
            if ( strpos( $message, $error_msg ) !== false ) {
                $_SESSION['wc_errors'][ $field_name ] = $message;
                return ''; // 阻止错误进入全局通知
            }
        }
    }
    return $error;
}

// 保存后清除错误会话
add_action( 'woocommerce_save_account_details', 'clear_edit_account_errors_session' );
function clear_edit_account_errors_session() {
    if ( isset( $_SESSION['wc_errors'] ) ) {
        unset( $_SESSION['wc_errors'] );
    }
}

// 禁用编辑账户页面的全局错误通知
add_action( 'woocommerce_before_edit_account_form', 'remove_edit_account_global_errors' );
function remove_edit_account_global_errors() {
    wc_clear_notices();
}

3. 添加CSS样式美化错误提示 #

在主题的自定义CSS或style.css中添加以下样式，让错误提示更贴合页面风格：

.woocommerce-EditAccountForm .woocommerce-error {
    color: #dc3232;
    font-size: 13px;
    margin-top: 8px;
    padding: 0;
    border: none;
    background: transparent;
}

.woocommerce-EditAccountForm .woocommerce-invalid {
    border-color: #dc3232;
}

注意事项 #

• 错误信息的映射需要根据WooCommerce实际输出的提示文本调整，确保能准确匹配到对应字段。
• 若启用密码字段，可按照相同逻辑为密码输入框添加错误显示容器和映射规则。

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