本文解析 woocommerce 结账页在特定屏幕分辨率（如 1080p）下 shipping 费用不刷新的异常现象，指出其本质是 divi 主题中 sticky 列重复渲染导致 dom 冲突，进而阻断了 woocommerce 前端计算钩子（如 wc-update-cart 或 wc-update-shipping）的正常触发。
本文解析 woocommerce 结账页在特定屏幕分辨率（如 1080p）下 shipping 费用不刷新的异常现象，指出其本质是 divi 主题中 sticky 列重复渲染导致 dom 冲突，进而阻断了 woocommerce 前端计算钩子（如 wc-update-cart 或 wc-update-shipping）的正常触发。
该问题看似是 WooCommerce 功能失效，实则源于主题层的 DOM 结构污染。当用户在 1080p 屏幕上访问结账页时，Divi 的 sticky 模块（如 .et_pb_column_1_tb_body）在滚动过程中会动态克隆自身以实现“吸顶”效果——但这一机制未做唯一性校验，导致页面中出现两个完全相同的 column 元素（ID 和 class 均重复）。WooCommerce 的 JavaScript 依赖精确的 DOM 查询（例如通过 document.querySelector('.wc-blocks-checkout__shipping') 绑定事件），一旦匹配到多个同名节点或因重复结构破坏事件委托链，shipping 选项变更后触发的 AJAX 计算（wc-ajax=update_shipping_method）将无法正确执行，表现为运费不更新、总计不重算。
关键证据链如下：
- 浏览器控制台明确报出警告：[Violation] Avoid using document.write() 或更典型的是 Duplicate ID detected / Multiple elements with same class used for WC event binding；
- 网络面板中缺失 ?wc-ajax=update_shipping_method 请求（对比 4K 屏幕下可正常发出）；
- 缩放页面（如 Ctrl+Minus 至 75%）使 sticky 行不再触发克隆，问题随即消失；
- 禁用所有插件后问题仍在，锁定为 Divi 主题行为。
✅ 标准修复步骤：
定位并禁用 sticky 行
进入 Divi → Theme Builder → 编辑对应结账页模板 → 找到含 et_pb_column_1_tb_body 的模块 → 在模块设置 → Advanced → Sticky Options 中关闭 Make this module sticky；-
替代方案（如需视觉粘性）
移除 Divi 原生 sticky，改用 CSS position: sticky 安全实现：.et_pb_column_1_tb_body { position: -webkit-sticky; position: sticky; top: 20px; /* 避免遮挡标题栏 */ z-index: 100; }✅ 此方式不复制 DOM，仅改变渲染层，完全兼容 WooCommerce 事件系统；
-
验证与加固
- 清除浏览器缓存及服务器端静态资源缓存；
- 在结账页打开 DevTools → Elements 面板，搜索 .et_pb_column_1_tb_body，确认仅存在 1 个 实例；
- 切换至 1080p 分辨率模拟（DevTools → Toggle Device Toolbar → 设置为 1920×1080），选择不同 shipping 方法，观察 Network 中是否成功发起 wc-ajax=update_shipping_method 请求，并返回有效 JSON（含 shipping_methods 和 totals_html）。
⚠️ 注意事项：
- 切勿通过 !important 强行覆盖 Divi sticky 样式，这可能引发布局错位；
- 若使用 Divi 子主题，请将上述 CSS 加入子主题的 style.css，避免升级后丢失；
- WooCommerce Block Checkout（即新版结账区块）对 DOM 稳定性要求极高，任何非标准 DOM 操作（包括 jQuery 插件动态插入/克隆元素）均可能引发同类问题，建议定期审计主题 JS 脚本。
从根本上说，WooCommerce 的前端交互高度依赖干净、语义化且唯一的 DOM 结构。当主题功能（如 sticky、parallax、lazyload）采用侵入式 DOM 操作时，务必进行兼容性测试——尤其在主流分辨率（1366×768、1920×1080）下验证结账核心流程。稳定比炫技更重要。
