求助：WooCommerce结账页面无法将配送方式li的display:flex改为block

问题背景 #

在修改WooCommerce结账页面（需添加烧烤酱商品才能查看完整结账界面）的CSS时，尝试将“Expédition”板块下配送方式的<li>元素从display:flex改为display:block，修改第1482行CSS后未生效。

• 当前效果：配送方式选项横向排列，内容在同一行展示
• 期望效果：配送方式选项纵向排列，每个选项单独占一行

解决方案 #

1. 提升CSS选择器权重
   原有样式可能因选择器权重更高覆盖了你的修改，使用更具体的选择器：

.woocommerce-checkout .woocommerce-shipping-methods li.shipping_method {
    display: block;
}

若仍不生效，可临时使用!important强制覆盖（后续建议优化选择器权重替代!important）：

.woocommerce-shipping-methods li.shipping_method {
    display: block !important;
}

2. 检查内联样式干扰
   若<li>元素存在内联style="display:flex"，需：

• 排查主题/插件的JS代码，找到添加内联样式的逻辑并修改
• 或通过JS移除内联样式：

document.querySelectorAll('.woocommerce-shipping-methods li.shipping_method').forEach(el => {
    el.style.display = 'block';
});

3. 清除缓存
   修改CSS后需清除：

• 浏览器缓存（快捷键Ctrl+Shift+R强制刷新）
• 网站缓存插件（如WP Rocket、W3 Total Cache）的缓存
• CDN缓存（若使用）

4. 验证CSS文件加载状态
   通过浏览器开发者工具的「Sources」面板，确认修改后的CSS文件已正确加载，而非旧版本文件。

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