WooCommerce：如何修改“您必须登录才能结账”提示颜色

问题描述 #

在WooCommerce中，“您必须登录才能结账”是唯一无独立类的提示信息，无法通过.woocommerce等类修改其背景色，对应代码结构如下：

<div class="post-content clearfix">
    <header class="entry-header">
        <h1 class="page-title">Checkout</h1>
    </header><!-- .entry-header -->
    <div class="entry-content clearfix">
        <div class="woocommerce">
            <div class="woocommerce-notices-wrapper"></div>
            <div class="woocommerce-notices-wrapper"></div>
            You must be logged in to checkout.
        </div>
    </div><!-- .entry-content -->
</div>

请问是否有CSS解决方案？若只能通过钩子或过滤器实现，能否仅用类包裹该信息并保留源翻译，不使用自定义翻译？

解决方案 #

方案一：CSS 实现（无需修改代码） #

可以利用CSS的:empty选择器和相邻兄弟选择器定位这段文本。因为文本位于两个空的.woocommerce-notices-wrapper元素之后，且是.woocommerce容器内的直接文本节点，代码如下：

.woocommerce .woocommerce-notices-wrapper:empty + .woocommerce-notices-wrapper:empty + * {
    background-color: #ffeeee; /* 替换为需要的背景色 */
    padding: 1em;
    border: 1px solid #ffcccc;
    display: block; /* 转为块级元素以支持内边距等样式 */
}

核心逻辑：

• :empty 确保选中无内容的.woocommerce-notices-wrapper元素
• + 选择紧邻的下一个兄弟元素
• + * 选中第二个空wrapper之后的直接子元素（即目标文本），通过display:block让它支持块级样式

方案二：使用钩子包裹文本（保留原翻译） #

若CSS方案因浏览器兼容性或结构变化失效，可通过WooCommerce钩子给文本添加包裹类，同时保留默认翻译。

将以下代码添加到主题的functions.php或自定义插件中：

add_action( 'woocommerce_checkout_before_customer_details', 'wrap_login_required_checkout_message', 9 );
function wrap_login_required_checkout_message() {
    // 检查是否要求登录结账且用户未登录
    if ( wc_checkout_is_required() && ! is_user_logged_in() ) {
        echo '<div class="woocommerce-info login-required-message">';
    }
}

add_action( 'woocommerce_checkout_before_customer_details', 'close_login_required_checkout_message', 11 );
function close_login_required_checkout_message() {
    if ( wc_checkout_is_required() && ! is_user_logged_in() ) {
        echo '</div>';
    }
}

说明：

• 利用woocommerce_checkout_before_customer_details钩子，在默认消息前后添加带自定义类的<div>标签
• 完全保留WooCommerce自带的翻译内容，无需自定义翻译
• 添加后即可通过类直接设置样式：

.login-required-message {
    background-color: #ffeeee;
    padding: 1em;
    border: 1px solid #ffcccc;
}

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