自定义 WooCommerce 结帐字段和列答案

【问题标题】：Customize WooCommerce Checkout Fields and Columns自定义 WooCommerce 结帐字段和列
【发布时间】：2015-12-16 06:08:56
【问题描述】：

我正在使用 WPExplorer 的 Total 主题：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 字段为左一右，（新行），下一个左，下一个右，（新行），左再右，然后（如果需要）显示出现“运送到不同地址”切换。然后如果且仅当需要额外的 woocommerce_checkout_shipping 字段时，它们会再次出现左、右、（新行）左然后右、（新行）左和右。

最终结果是结帐页面在表单上对称而不是全部在左侧

来自 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、on 和 on 以用于 checkout_billing，然后再次出现在 @987654328 @ 1 左，1 右，换行，不停，不停？

谢谢！

【问题讨论】：

“有人告诉我，在这里问一个不正确的问题显然是死亡之吻，社交鞭笞很有可能”哈！它并没有那么糟糕，但某些事情是题外话，你会惊讶于真正可怕的问题的数量之多。结束所有这些有助于获得好问题的实际答案。

标签： php wordpress woocommerce

【解决方案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;
}

【讨论】：

我已将 form-checkout.php 文件添加到 Total Child 主题文件夹 prntscr.com/8ihd88 并将 form-checkout.php github.com/woothemes/woocommerce/blob/master/templates/checkout/… 的第 33 行上的类更改为“form-row-wide " prntscr.com/8iheox 显然，这是错误的。我的目标是仔细检查文件夹是否提取了正确的文件。现在我给了自己一点点信心:-) 让我们继续前进。什么 CSS 可以简单地使任何表单字段在左侧一个，在右侧的下一个字段，然后转到新行？
我想我留下了一些宽度和浮动规则。尝试使用更新的代码。由于 woo 的标记，它不像您描述的那么容易，但我认为这应该让您接近。
prntscr.com/8isyq6 这是奇怪的部分......无论我似乎添加，更改或修改什么，它仍然将内容设置为两列〜这有点目标，但不太像那。我敢肯定，您的 CSS 比我多年来所学的要先进得多。然而，无论任何人试图做什么，结帐页面的右侧仍然有（很少使用）“运送到不同的地址”。
不要忘记这些样式规则需要在 WooCommerce 样式表之后（和/或也可能在主题样式表之后）。否则将应用 Woo 的规则。
大写字母 d ！当您浏览内网时，您是否有过那种似曾相识的模糊时刻？我终于点击了你的用户名，我的头盖骨终于连接了看似随机的点。小姐姐，你真棒！！！ ;-) 我一直在读你的真棒！好的，够了。我真的希望我能神奇地将我的学习推向你所在的位置！现在我意识到（还要学习另一件事）所有这些 CSS 文件都会优先加载。惊人的。哈！

【解决方案2】：

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

将.page-id 类与结帐页面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;
}

【讨论】：