Php 自定义电子商务签出字段和列

我使用的是WPExplorer的总主题：我已经向主题作者寻求了一些帮助，但显然，这是一个商业问题。 好的。所以我打开了我的TeamTreeHouse账户，尽可能多地浏览。不走运

现在，如果打开主题，您将看到默认的签出页面将所有

woocommerce\u checkout\u billing

字段放在左侧，然后将所有

woocommerce\u checkout\u shipping

字段放在右侧

现在，如果您的商店几乎没有需要发货的产品，如虚拟产品和可下载产品，则存在一个问题：

收银台页面极不平衡。页面左侧有大量字段，而页面右侧几乎没有字段。我试图做的是使

结帐\u账单

字段左一个、右一个（新行）、左一个、右一个（新行）、左一个，然后再右一个，然后（如果需要）显示“发送到其他地址”切换。然后，如果且仅当需要额外的

woocommerce\u checkout\u shipping

字段时，它们再次显示为左、右、（新行）左、右、（新行）左、右

最终的结果是签出页面在表单上具有对称性，而不是全部位于左侧

控制签出页面的来自Woo的文件是，从第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>

我需要做什么更改才能使字段在结账时显示为左、右、新行、左、右、开和开，然后在

checkout\u shipping

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;
}

---

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

将

.page id

类与签出页面id一起使用，以防止使用

.woocommerce行的其他页面出现问题


.page id yourpageid.woocommerce.woocommerce checkout.col2 set.col-1{
浮动：无；
宽度：100%；
}
.PageID yourpageid.woocommerce表单.form行{
保证金权利：4%；
浮动：左；
宽度：48%；
}
.PageID yourpageid.woocommerce表单最后一行表单{
右边距：0；
}
“有人告诉我，在这里问一个不正确的问题显然是死亡之吻，社会鞭笞是很有可能的”哈！这并没有那么糟糕，但某些事情是离题的，你会惊讶于有这么多真正可怕的问题。关闭所有这些有助于获得好问题的实际答案。我已将form-checkout.php文件添加到Total Child主题文件夹中，并将form-checkout.php第33行的类更改为“form row wide”，显然，这是错误的。我的目标是再次检查文件夹是否提取了正确的文件。现在我给了自己一点信心：-）让我们继续吧。什么样的CSS可以简单地使任何表单字段左移一个，右移下一个字段，然后转到新行？我想我留下了一些宽度和浮动规则。尝试使用更新的代码。这不像你描述的那么简单，因为吴的标记，但我认为这应该让你接近。这就是奇怪的部分。。。无论我添加、更改或修改了什么，它都会将内容分为两列~这有点像目标，但不太像。我相信你的css比我多年来学到的要先进得多。然而，无论任何人试图做什么，结帐页面的右侧仍然有（很少使用）“发送到其他地址”。不要忘记，这些样式规则需要在WooCommerce样式表之后（和/或可能也在主题样式表之后）。否则吴的规则将被应用。用大写字母d来表示！！！当你浏览网页的时候，你有过那种似曾相识的模糊时刻吗？我终于点击了你的用户名，我的头盖骨终于连接上了看似随机的点。小姐，你真棒！！！；-）我已经读了你的精彩一段时间了！！！好了，够了。我真的希望我能神奇地把我的学习带到你现在的位置！现在我意识到（还有一件事需要学习）所有这些CSS文件都以优先顺序加载。令人惊叹的。哈