WooCommerce登录失败无错误提示 如何配置为指定报错样式？

以下方案可实现你需要的用户名/密码错误时的红色警告提示效果：

1. 检查WooCommerce默认提示输出钩子 #

首先确认当前主题的WooCommerce登录模板myaccount/form-login.php中，是否包含错误提示输出代码：

<?php wc_print_notices(); ?>

如果没有这段代码，将它添加到登录表单的最上方位置，即可输出系统默认的错误提示。

2. 自定义错误提示文本与样式 #

如果需要修改默认提示内容、调整样式匹配设计需求，按以下两步操作：

• 首先将自定义错误逻辑代码添加到主题functions.php文件中：

// 自定义WooCommerce登录错误提示
add_filter( 'woocommerce_login_errors', 'custom_wc_login_error_prompt', 10, 2 );
function custom_wc_login_error_prompt( $error, $user ) {
    if ( is_wp_error( $error ) ) {
        // 用户名不存在场景
        if ( in_array( 'invalid_username', $error->get_error_codes() ) ) {
            $error = new WP_Error( 'invalid_username', '错误：您输入的账号未在站点注册' );
        }
        // 密码错误场景
        if ( in_array( 'incorrect_password', $error->get_error_codes() ) ) {
            $error = new WP_Error( 'incorrect_password', '错误：您输入的密码不正确，请重新输入' );
        }
    }
    return $error;
}

• 然后将以下CSS代码添加到主题自定义CSS设置区域，实现红边背景的警告样式：

/* 登录错误提示自定义样式 */
.woocommerce-error {
    background-color: #fff2f0;
    border: 1px solid #ffccc7;
    border-left: 4px solid #ff4d4f;
    border-radius: 2px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #cf1322;
    font-size: 14px;
    line-height: 1.5;
}

3. 排除缓存导致的提示不显示问题 #

如果配置后还是看不到错误提示，需要将登录页、我的账户页从所有缓存规则中排除，涉及的缓存类型包括：

• 服务器端缓存（主机自带缓存、Nginx缓存等）
• WordPress缓存插件（WP Rocket、W3 Total Cache等）
• CDN缓存配置
  将/my-account/*路径加入以上所有缓存的排除列表即可。

4. 自定义登录页适配 #

如果你使用的是主题自带的非WooCommerce默认登录页面，需要找到主题登录表单的处理逻辑，手动添加错误信息输出代码，或者联系主题开发者确认是否默认屏蔽了登录错误提示。

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