更改woocommerce中的结帐模板

Question

我想更改woocommerce默认结帐，所以它看起来像这样： http://savoy.nordicmade.com/checkout/。如您所见，标题始终位于左侧，而表格和字段位于右侧。为了实现这一点，我需要在结帐模板中更改什么？

Answer 1

从WooCommerce插件中复制templates文件夹并将其放在主题文件夹的根目录中。然后将该文件夹重命名为woocommerce。主题文件夹中的模板将优先于插件文件夹中的模板。然后，您可以编辑主题文件夹中的模板以满足您的需求。

来自Template Override的WooCommerce文档的更多信息。

Answer 2

要实现类似的外观，您需要执行以下操作：

1. 找到 woocommerce / templates /
下的Woocommerce插件模板文件夹
2. 在步骤1
中找到文件夹中的结帐文件夹
3. 将步骤2中的文件夹复制到主题文件夹
4. 在步骤3中编辑文件夹中的文件

通过将Woocommerce模板文件复制到您的主题，您可以覆盖checkout html输出的每个方面。

要实现您正在寻找的外观，请为表单的不同元素和部分添加必要的html结构，以适应CSS网格框架，即：Bootstrap＆＃39; s。

让我们看看如何使用Skeleton CSS框架完成此操作：

1. 将容器类添加到表单元素<form class="checkout woocommerce-checkout container"
2. 使用<div class="row">
换算每个结帐部分
3. 在每个部分中包含带有<div class="one-third column"的 h3 标题元素，并在部分内容two-thirds column
中添加<div class="shipping_address two-thirds column">类