如何实现：为所有H3添加CSS，排除WooCommerce结账页但包含订单完成页

数据老陈

2026-5-14

解决方案

有两种逻辑清晰的方式可以实现你的需求，核心是利用WooCommerce自动给页面<body>标签添加的专属类，来区分不同状态的结账页面：

方法1：全局设置+目标页重置

这种方式直观好维护，先给所有H3加样式，再单独覆盖掉不需要的页面：

/* 给所有页面的H3应用你的自定义样式 */
h3 {
  color: #2d3748;
  font-size: 1.5rem;
  /* 其他你需要的样式属性 */
}

/* 仅针对「常规结账页（非订单完成）」重置H3样式，恢复默认或清除自定义样式 */
.woocommerce-checkout:not(.woocommerce-order-received) h3 {
  color: inherit;
  font-size: inherit;
  /* 根据你的需求重置其他属性 */
}

方法2：精准选择目标H3

纯CSS写法，直接只选中需要应用样式的H3，无需重置：

/* 选中「非结账页」以及「订单完成页」的所有H3 */
body:not(.woocommerce-checkout) h3,
body.woocommerce-order-received h3 {
  color: #2d3748;
  font-size: 1.5rem;
  /* 其他你需要的样式属性 */
}

为什么这两种方法可行？

WooCommerce会给不同状态的页面自动添加对应的body类：

常规结账信息填写页（比如/checkout/）：body仅带有.woocommerce-checkout类，没有.woocommerce-order-received类
订单完成页（比如/checkout/order-received/）：body会同时拥有.woocommerce-checkout和.woocommerce-order-received两个类

所以.woocommerce-checkout:not(.woocommerce-order-received)能精准定位到你要排除的常规结账页，而订单完成页会被排除在这个选择器之外，自然保留你的H3样式。