Bigcommerce如何在结账页面隐藏税费展示项

云原生阿岚

2026-11-4

之前样式不生效的核心原因

选择器匹配错位：你写的.cart-taxes是Bigcommerce旧版立式结账的类名，当前使用的优化结账（Optimized Checkout）页面DOM结构已经更新，税费条目根本没有挂载这个类名，选择器抓取不到对应元素自然不会触发隐藏效果
样式优先级不足：就算类名写对了，优化结账的内置样式是作用域注入的高优先级规则，普通写在SCSS里的同权重选择器会被内置样式覆盖，重复编写多次也不会生效

可直接落地的隐藏实现方案

方案1：零代码编译，后台直接配置（最稳妥）

不需要修改SCSS源文件，直接登录Bigcommerce后台操作：

进入「商店设置 > 结账 > 定制结账 > 自定义CSS」配置面板
粘贴以下覆盖样式，保存后前端立即生效，不受主题缓存、编译流程影响：

/* 覆盖优化结账全场景的税费展示条目 */
[data-checkout-summary-tax],
.tax-summary-item,
.checkout-summary__row--tax,
.cart-tax-total,
.cart-tax {
  display: none !important;
}
/* 如果税费是分组下唯一的子项，直接隐藏空分组，避免残留空白块 */
.checkout-summary__group:has(> [data-checkout-summary-tax]:only-child) {
  display: none;
}

方案2：修改主题SCSS的正确写法

如果你必须在optimized-checkout.scss文件里调整，把原来的代码替换成下面的内容，记得改完要执行本地主题编译流程，不要只上传未编译的SCSS源文件，最后清空主题缓存再测试：

$tax-hide-selectors: (
  '[data-checkout-summary-tax]',
  '.tax-summary-item',
  '.checkout-summary__row--tax',
  '.cart-tax-total'
);

@each $selector in $tax-hide-selectors {
  #{$selector} {
    display: none !important;
  }
}