如何仅在WooCommerce商店页通过CSS隐藏菜单中的购物车按钮？

之前CSS失效的原因 #

WooCommerce 内置的商店页、商品归档页属于动态生成的页面，不会像普通静态页那样在<body>标签上绑定.page-id-xxx类名，你之前针对静态页面ID写的选择器根本匹配不到目标元素，自然实现不了隐藏效果。

具体操作步骤 #

• 先确认目标元素的真实选择器
  打开你的商店页按F12调出开发者工具，点左上角的元素选择按钮，选中你当前用作注册入口的那个菜单购物车图标，记录下它的真实类名或ID（这类元素常见的选择器类似.menu-item-cart、#site-header-cart，别靠经验瞎猜选择器，很容易定位错目标）。
• 按实际需求编写CSS规则
  • 仅需要在主商店页隐藏的话，完全不用找对应页面ID：WooCommerce 商店页的<body>自带.woocommerce-shop专属类，直接写规则即可：

    /* 替换为你实际查到的购物车按钮选择器 */
    .woocommerce-shop .你的购物车按钮选择器 {
      display: none;
    }
    

  • 后续需要扩展到其他指定页面隐藏也很灵活：只要在选择器里叠加对应页面自带的body类就行——比如要同步隐藏某几个商品分类页的按钮，就把对应分类页的专属body类和.woocommerce-shop并列写；要针对独立静态页隐藏，再搭配对应页面的.page-id-xxx类组合选择器即可。
• 规则写完不生效的排查方向
  • 样式优先级不足：多数主题给菜单按钮设置的默认样式优先级较高，如果规则已经匹配到元素但样式被覆盖，可适当提高选择器权重（比如加上body前缀，必要时补充!important）
  • 缓存未刷新：如果新写的CSS完全没有加载到页面，大概率是站点缓存插件、CDN或者浏览器本地缓存的问题，清空缓存后重新验证即可。

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