如何用CSS隐藏WooCommerce结账页的优惠券提示框？

没问题！你之前用PHP代码直接禁用了优惠券功能，确实会影响URL应用优惠券的逻辑。下面给你纯CSS方案——既能隐藏那个「Have a coupon? Click here to enter your code」提示框，又完全保留通过URL自动应用优惠券的功能：

核心CSS代码 #

/* 仅隐藏结账页的优惠券提示切换框 */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
    display: none !important;
}

代码说明 #

• .woocommerce-checkout 限定样式只作用在结账页面，不会干扰其他页面的优惠券功能
• .woocommerce-form-coupon-toggle 是WooCommerce默认给这个提示框分配的类，精准定位目标元素
• !important 用来覆盖主题或WooCommerce自带的默认样式，确保隐藏效果生效

如何添加这段CSS？ #

• 登录WordPress后台，进入「外观」→「自定义」→「额外CSS」，粘贴代码后保存即可
• 如果你使用子主题，也可以把代码添加到子主题的style.css文件中

要是选择器不生效怎么办？ #

如果你的主题或自定义修改了提示框的类名，可自行用浏览器开发者工具定位：

1. 打开结账页面，按F12调出开发者工具
2. 用左上角的选择工具点击优惠券提示框
3. 在右侧样式面板找到元素的类名/ID，替换到CSS选择器里即可

比如元素类是.custom-coupon-prompt，代码就改成：

.woocommerce-checkout .custom-coupon-prompt {
    display: none !important;
}

这个方案只是视觉上隐藏提示框，优惠券功能依然处于启用状态，所以通过URL应用优惠券的逻辑完全不受影响，正好匹配你的需求~

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