Question

我正在使用WPExplorer的总主题：You should be able to click this sentence to open the Total Theme from WPExplorer. You'll need to add something to your cart and get to the checkout page for the rest of this...我已经向主题作者寻求了一些帮助，但显然，这是一个WooCommerce问题。好的。因此，我打开了我的TeamTreeHouse帐户并尽可能多地查看。没有运气。

现在，如果您打开主题，则会看到默认结帐页面左侧放置了所有woocommerce_checkout_billing字段，然后右侧放置了所有woocommerce_checkout_shipping字段。

现在，如果您的商店几乎没有需要像虚拟产品和可下载产品一样运送的产品，那么就会出现问题：

结帐页面难以置信。页面左侧有很多字段，页面右侧几乎没有任何字段。我尝试做的是让checkout_billing字段为左边，右边一个，（新行），左边一个，右边一个，（新行），左边再右边，然后（如果需要）显示＆＃34;运送到不同的地址＆＃34;切换出现。然后IF 并且仅当需要额外的woocommerce_checkout_shipping字段时，它们再次出现左，右，（新行）左和右，（新行）左和＆amp;右。

最终结果是结帐页面在表单上有 SYMMETRY ，而不是全部在左侧

来自Woo的控制结帐页面的文件是https://github.com/woothemes/woocommerce/blob/master/templates/checkout/form-checkout.php#L33，从第33行开始我们看到：

<div class="col2-set" id="customer_details">
        <div class="col-1">
            <?php do_action( 'woocommerce_checkout_billing' ); ?>
        </div>

        <div class="col-2">
            <?php do_action( 'woocommerce_checkout_shipping' ); ?>
        </div>
    </div>

我需要更改为只需将字段显示为1左，1右，新行，1左，1右，依次为checkout_billing，然后再次在{{ 1}} 1左，1右，新行，打开和打开？

谢谢！

Answer 1

这对我来说更像是一个纯粹的CSS问题。像下面这样的东西将是一个开始（假设我理解你所描述的）并且可以进一步定制。使用浏览器的开发人员工具检查元素并对其样式规则进行实时测试。

首先，我们删除了2个主要列。然后，我们将输入分成列。请注意，这不包括任何响应式布局。

.woocommerce .woocommerce-checkout .col2-set .col-1 {
    float: none;
    width: 100%;
}

.woocommerce form .form-row {
    margin-right: 4%;
    float: left;
    width: 48%;
}

.woocommerce form .form-row-last {
    margin-right: 0;
}

Answer 2

@helgatheviking提供了一个很好的答案，但这将改变整个站点中的行元素。

使用带有结帐页面ID的.page-id类可防止其他使用.woocommerce row类的页面出现问题。

.page-id-yourpageid .woocommerce .woocommerce-checkout .col2-set .col-1 {
    float: none;
    width: 100%;
}

.page-id-yourpageid .woocommerce form .form-row {
    margin-right: 4%;
    float: left;
    width: 48%;
}

.page-id-yourpageid .woocommerce form .form-row-last {
    margin-right: 0;
}

自定义WooCommerce结帐字段和列

2 个答案: