如何用CSS修改WooCommerce结账页面的配送信息标签？

购物车和结账页面的HTML结构、CSS类名往往不一样，你在购物车用的选择器到结账页匹配不上，这是核心原因。按下面步骤处理：

1. 定位结账页的正确元素
   打开浏览器开发者工具（F12），找到结账页里配送信息对应的区域——比如配送地址表单、配送选项模块，查看它们的类名或ID。常见的目标元素类名示例：

• 配送地址字段容器：.woocommerce-shipping-fields
• 配送选项标题：.woocommerce-shipping-methods__title
• 配送选项列表项：.woocommerce-shipping-methods li

2. 编写针对性的CSS代码
   给选择器加上.woocommerce-checkout前缀，确保只作用于结账页面，同时提升样式优先级。示例代码：

/* 结账页配送地址容器样式 */
.woocommerce-checkout .woocommerce-shipping-fields {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
}

/* 配送选项标题样式 */
.woocommerce-checkout .woocommerce-shipping-methods__title {
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}

/* 配送选项单选框区域样式 */
.woocommerce-checkout .woocommerce-shipping-methods li {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

3. 确保CSS生效

• 把代码放到主题自定义CSS面板（外观→自定义→额外CSS），或者子主题的style.css文件里，别直接修改父主题，避免主题更新后代码丢失。
• 如果还是不生效，检查是否有其他高优先级样式覆盖了你的代码，可以临时加!important测试（比如color: #2c3e50 !important;），但更推荐优化选择器的精确性，比如添加更多父级类名来提升权重。

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