WooCommerce两栏结账页面实现咨询（附已用CSS代码）

看起来你想在桌面端把WooCommerce结账页改成两栏布局（账单信息左、订单预览右），但你提供的CSS存在截断问题（最后一行float:le...没写完），而且初始样式逻辑也有冲突，我来帮你梳理和修正：

原代码的核心问题 #

• 代码不完整：#order_review_heading, .woocommerce #order_review, .woocommerce-page #order_review{float:le... 这里float属性值未写完，应该是float:right
• 逻辑冲突：你先设置了.woocommerce .col2-set .col-1{width:100%;}，这会直接把账单信息栏拉成全宽，后续给.col2-set设48%宽度的操作就完全失效了

修正后的完整有效CSS #

下面是适配993px+桌面端的两栏布局代码，调整了逻辑确保布局正确：

/* Large devices (large desktops, 993px and up) */
@media (min-width: 993px) {
    /* 重置默认col2-set布局，设置账单信息栏宽度并左浮 */
    .woocommerce-checkout .col2-set {
        width: 48%;
        float: left;
        margin-right: 4%; /* 两栏之间留间距，避免拥挤 */
    }
    
    /* 订单预览栏靠右，取消右侧间距并清除默认换行限制 */
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review {
        float: right;
        width: 48%;
        margin-right: 0;
        clear: none;
    }
    
    /* 保持你需要的账单标题间距 */
    .woocommerce-billing-fields h3 {
        margin-top: 40px;
    }
    
    /* 清除父容器浮动，避免布局溢出 */
    .woocommerce-checkout .checkout {
        overflow: hidden;
    }
}

验证与调试小贴士 #

• 用浏览器开发者工具（F12）检查样式：如果看到代码被划掉，说明优先级不够，可以给选择器加更高权重，比如改成body.woocommerce-checkout .col2-set
• 测试响应式：缩小窗口到992px以下，确认布局自动变回单栏，不影响移动端体验
• 检查页面结构：如果你的结账页用了自定义模板，要确认.col2-set和#order_review的HTML结构没被修改，不然需要调整选择器匹配实际结构

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