如何用CSS仅隐藏WooCommerce中特定提示‘您无法再添加商品到购物车’？

嘿，我之前也踩过这个坑——不想把那些有用的通知全藏了，就只想干掉那条“您无法再添加一件（商品）到购物车”（英文：You cannot add another (product) to your cart）的提示对吧？

你之前的代码会把所有通知都隐藏，是因为直接选中了整个错误列表或者通知容器。咱们换个精准的方式，只定位这条特定提示：

方法1：CSS :contains() 伪类（推荐，现代浏览器兼容） #

直接匹配包含目标文本的错误列表项，这样只会隐藏它，其他通知完全不受影响：

/* 针对英文提示 */
.woocommerce-error li:contains("You cannot add another") {
    display: none;
}

/* 针对中文提示 */
.woocommerce-error li:contains("您无法再添加一件") {
    display: none;
}

注意：:contains() 区分大小写，要确保引号里的文本和实际提示完全一致（包括空格、括号这些细节）。如果你的站点用了其他语言，替换成对应的提示内容就行。

方法2：兼容旧浏览器的稳妥方案 #

要是担心:contains()的兼容性，可以加一点点JavaScript给这条提示加个自定义类，再用CSS隐藏：

document.querySelectorAll('.woocommerce-error li').forEach(item => {
    const targetTexts = ['You cannot add another', '您无法再添加一件'];
    if (targetTexts.some(text => item.textContent.includes(text))) {
        item.classList.add('hide-specific-cart-error');
    }
});

对应的CSS代码：

.hide-specific-cart-error {
    display: none;
}

这个方法兼容性更强，文本匹配也更灵活。

最后提个醒：如果WooCommerce更新后提示文本有变化，记得同步调整匹配的内容哦！

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