如何使用 Divi 创建 WooCommerce 结帐页面模板

设计 WooCommerce 结帐页面通常涉及对后端 PHP 模板文件的高级自定义和大量自定义 CSS。 但是有了 Divi 的 Woo 模块，这个过程变得简单而愉快！ 当您使用 Divi 编辑 WC 结帐页面时，该 WC 短代码将转换为动态 Woo 结帐模块的结构化布局，可以使用强大的内置设计选项进行可视化设计。 这使您可以完全控制结帐页面的设计。

在本教程中，我们将向您展示如何使用 Divi 从头开始​​创建一个完全自定义的 WooCommerce 结帐页面。 首先，我们将使用结帐页面可用的动态 Woo 模块设计 WooCommerce 结帐页面。 完成后，我们将向您展示如何将结帐页面设计添加到主题生成器中的结帐页面模板。 因此，无论您是想自定义实际的结帐页面还是创建结帐页面模板，Divi 都能满足您的需求。 您将立即开始设计令人惊叹的结帐页面。

让我们开始吧！

抢先看

之前和之后

这是 Divi 默认结帐页面与我们将在本教程中设计的新结帐页面的快速对比。

以下是桌面和移动设备上的结帐页面设计的详细介绍。

您还可以查看此结帐页面设计的现场演示。

免费下载结帐页面布局

要掌握本教程中的结帐页面模板设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送终极 Divi 登陆页面布局包的副本，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将立即成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载以访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将部分布局导入 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后单击导入按钮。

完成后，部分布局将在 Divi Builder 中可用。

下载 Divi 的购物车和结帐页面模板集

此结帐页面设计也可作为 Divi 的免费购物车和结帐页面模板集的一部分下载。

让我们进入教程，好吗？

关于 WooCommerce 结帐页面和 Divi

每当您在 Divi 网站上安装 WooCommerce 时，WooCommerce (WC) 都会生成关键的 WC 页面，包括商店页面、购物车页面、结帐页面和帐户页面。 页面内容是通过在后端 WordPress 块编辑器上使用简码来部署的。

如果您在此结帐页面上激活 Divi Builder，WooCommerce 结帐页面的每个内容元素都将作为可用于设置页面样式的 Divi Woo 模块加载。

用于在 Divi 中设计结帐页面的 Woo 模块

Divi 带有各种模块，这些模块对于向页面模板添加动态内容至关重要。 其中一些包括特定于结帐页面的 Woo 模块。

构建结帐页面或模板的关键模块包括：

• 帖子标题- 这将在构建结帐页面模板时动态显示结帐页面的标题。
• Woo Notice – 此模块可以设置为不同的页面类型（购物车页面、产品页面、结帐页面）。 它将根据需要动态地向用户显示重要通知。
• Woo Checkout Billing - 此模块显示结帐期间使用的帐单详细信息表单。
• Woo Checkout Shipping - 此模块显示结帐期间使用的运输详细信息表格。
• Woo 结帐信息- 此模块显示结帐期间使用的附加信息表。
• Woo Checkout Details - 此模块在结账时显示订单详细信息，包括所购买的产品及其价格。
• Woo Checkout Payment - 此模块在结帐期间显示付款类型选择和付款表格详细信息。

另一个可选的 woo 模块：

• Woo Breadcrumbs – 这将显示 WooCommerce 面包屑导航栏。

设计结帐页面或模板

如前所述，我们可以轻松使用 Divi Woo 模块来设计自定义 WooCommerce 结帐页面。 但是，您也可以选择使用相同的设计流程构建自定义 Checkout模板。 对于本教程，我们将为结帐页面构建自定义结帐页面布局。 然后我们将向您展示如何使用自定义结帐页面布局使用 Divi 主题生成器创建结帐页面模板。

使用 Divi 设计 WooCommerce 结帐页面布局

对于此 WooCommerce 结帐页面教程，目标是为在 WooCommerce 中指定为 WooCommerce 结帐页面的 WooCommerce 结帐页面创建自定义页面布局。 在本教程的最后，我们将向您展示如何轻松保存和导入此结帐页面布局，以使用主题生成器创建新的结帐页面模板。

入门：编辑 WooCommerce 结帐页面

在 WordPress 仪表板中，单击以编辑 WooCommerce 结帐页面。 默认情况下，该页面将仅包含用于生成结帐页面内容的简码。

单击页面编辑器顶部的使用 Divi Builder按钮。

然后单击Edit With The Divi Builder按钮以启动 Divi Builder。

清除布局以从头开始

如前所述，该页面将加载构成结帐页面内容的所有可定制的 Divi 模块（包括关键的 Woo 模块）。 如果需要，您可以使用现有布局并开始自定义已经存在的模块。 但是对于本教程，我们将从头开始。

要清除布局，请打开页面底部的设置菜单，然后单击清除布局按钮（垃圾桶图标）并选择是。

创建部分、行和列

部分背景

首先，将背景颜色添加到新的常规部分，如下所示：

• 背景颜色：#f7f3f0

行列

接下来，向该部分添加一列行

创建动态结帐页面标题

要创建结帐页面所需的动态页面标题，请将帖子标题模块添加到该列。

帖子标题内容

在帖子标题设置中，更新元素以仅显示标题，如下所示：

• 节目名称：是的
• 显示元：否
• 显示特色图片：否

帖子标题文本

要设置帖子标题文本的样式，请在设计选项卡下更新以下内容：

• 标题字体：DM Serif Display
• 标题文字颜色：#fff
• 标题文字大小：80px（桌面）、60px（平板电脑）、42px（手机）
• 标题行高度：1.2em

为结帐页面设计动态 Woo 通知模块

在页面顶部添加 Woo Notice 模块始终是一个好主意，这样在与结帐页面交互时，用户最容易看到这些通知。 请记住，我们正在设计仅在需要时才显示的通知。

要添加 Woo 通知模块，请单击以在帖子标题模块下添加新的 Woo 通知模块。

Woo 通知页面类型和背景

接下来，更新 Woo Notice 的 Page Type 和 Background 颜色如下：

• 页面类型：结帐页面
• 背景颜色：rgba(153,158,117,0.1)

重要提示：确保选择结帐页面作为页面类型，以便 woo 通知正常工作。

Woo 通知标题文本

在设计选项卡下，更新标题文本样式如下：

• 标题字体：Roboto
• 标题字体粗细：中
• 标题文字颜色：#fff
• 标题文字大小：14px
• 标题行高度：1.8em

然后选择链接选项卡并更新标题链接文本颜色：

• 链接文字颜色：#999e75

Woo 通知正文

在标题文本之后，更新正文如下：

• 正文字体：Roboto
• 正文文本颜色：#fff
• 车身线高：1.8em

然后选择链接选项卡并更新链接文本：

• 链接字体粗细：粗体
• 链接文字颜色：#999e75

Woo 通知字段标签

结帐页面通知包括登录表单和优惠券代码等字段和字段标签。 要编辑这些字段的字段标签样式，请更新以下内容：

1. 必填字段指示器颜色：#fff
2. 字段标签字体：Roboto
3. 字段标签字体粗体：粗体

Woo 通知字段

接下来，更新字段样式选项，如下所示：

1. 占位符颜色：#fff
2. 字段背景颜色：透明
3. 字段文本颜色：#fff
4. 字段焦点文本颜色：#fff
5. 字段填充：顶部 12 像素，底部 12 像素
6. 字段边框宽度：1px
7. 字段边框颜色：rgba(255,255,255,0.32)

Woo 通知按钮

1. 为按钮使用自定义样式：是
2. 按钮文字大小：14px
3. 按钮文本颜色：#fff
4. 按钮背景颜色：#999e75
5. 按钮边框宽度：1px
6. 按钮边框颜色：#999e75
7. 按钮边框半径：0px
8. 按钮字母间距：1px
9. 按钮字体：Roboto
10. 按钮字体粗细：粗体
11. 按钮字体样式：TT
12. 按钮填充：顶部 12 像素，底部 12 像素，左侧 24 像素，右侧 24 像素

Woo 通知表

每个通知表单都可以在表单选项组下设置样式。 要为表单提供浅色边框，请更新以下内容：

1. 形成圆角：0px
2. 表格边框宽度：1px
3. 表单边框颜色：rgba(255,255,255,0.32)

Woo 通知框阴影

要为 woo 通知栏提供类似顶部边框的设计，请按如下方式更新 box-shadow 选项：

1. 盒子阴影：见截图
2. 盒子阴影水平位置：0px
3. 盒子阴影垂直位置：3px
4. 阴影颜色：#999e75

设计 Woo Checkout 计费模块

现在我们的页面标题和通知已经到位，我们准备添加 Woo Checkout Billing 内容，这是结帐页面的另一个关键元素。

在我们添加计费内容之前，创建一个具有五分之三五分之二列结构的新行。

在第 1 列中，添加一个 Woo Checkout 计费模块。

Woo Checkout 帐单标题文本

我们可以通过自定义标题文本选项来定位标题文本。

打开 Woo Checkout Billing 设置模式，然后在设计选项卡下更新以下内容：

1. 标题字体：DM Serif Display
2. 标题文字颜色：#fff
3. 标题文字大小：30px（桌面）、24px（平板电脑）、18px（手机）
4. 标题行高：1.4em

Woo Checkout 计费字段和字段标签

就像通知模块一样，这个模块也有设置字段和字段标签样式的选项。 由于我们希望所有字段和字段标签在整个页面中匹配，我们可以从已创建的 Notice 模块复制字段和字段标签样式并将这些样式粘贴到 Woo Checkout Billing 模块。

这是如何做到的：

• 在页面顶部打开通知模块的设置。
• 右键单击设计选项卡下的字段标签选项组。
• 从右键菜单中选择“复制字段标签样式”。

现在复制样式后，打开 Woo Checkout Billing 模块顶部菜单栏中的更多设置菜单。 然后从菜单中选择“粘贴字段标签样式”。

我们也可以重复相同的过程来复制字段样式。

这是如何做到的：

• 在页面顶部打开通知模块的设置。
• 右键单击设计选项卡下的字段选项组。
• 从右键菜单中选择“复制字段样式”。

现在复制样式后，打开 Woo Checkout Billing 模块顶部菜单栏中的更多设置菜单。 然后从菜单中选择“粘贴字段样式”。

Woo Checkout 账单表格通知

表单通知是动态显示填写表单时可能出现的任何通知或错误的内容。 要设置表单通知的样式，请打开 Woo Checkout Billing 设置并更新以下内容：

• 表格通知背景颜色：#e0816b
• 表单通知填充：顶部 8px，底部 8px
• 表格通知字体：Roboto
• 表格通知文字大小：14px

Woo 结帐帐单间距和边框

为了完成设计，让我们为模块添加一点填充和浅色边框，如下所示：

• 内边距：顶部 16 像素，底部 16 像素，左侧 16 像素，右侧 16 像素
• 边框宽度：1px
• 边框颜色：rgba(255,255,255,0.1)

设计 Woo Checkout 运输和 Woo 结帐信息

我们需要创建结帐页面模板的下一个关键元素是 Woo Checkout Shipping 模块和 Woo Checkout Information 模块。 Woo Checkout Shipping 模块显示完成结帐前输入运输信息所需的表格。 Woo 结帐信息模块显示一个输入表单，允许用户在结帐前输入任何其他信息。

添加 Woo Checkout 运输模块

对于此布局，请直接在 Woo Checkout Billing 模块下添加一个新的 Woo Checkout Shipping 模块。

添加 Woo Checkout 运输模块

在 Woo Checkout Shipping 模块下，继续添加 Woo Checkout Information 模块。

样式化 Woo Checkout Shipping 和 Woo Checkout 信息模块

因为这两个 woo 模块（Checkout Shipping 和 Checkout Information）都需要匹配 Woo Checkout Billing 模块的设计，所以我们可以将我们需要的样式复制到每个模块中。

复制和粘贴标题文本样式

让我们从标题文本样式开始。 打开 Woo Checkout Billing 模块的设置并使用右键菜单复制标题文本样式。

然后使用多选功能选择 Woo Checkout Shipping 和 Woo Checkout 信息模块。 然后将标题文本样式粘贴到选定的模块之一。

复制和粘贴字段标签样式

重复相同的过程以复制和粘贴字段标签样式。

打开 Woo Checkout Billing 模块的设置并使用右键菜单复制字段标签样式。

然后使用多选功能选择 Woo Checkout Shipping 和 Woo Checkout 信息模块。 然后将字段标签样式粘贴到所选模块之一。

复制和粘贴字段样式

重复相同的过程以复制和粘贴字段的样式。

打开 Woo Checkout Billing 模块的设置并使用右键菜单复制字段的样式。

然后使用多选功能选择 Woo Checkout Shipping 和 Woo Checkout 信息模块。 然后将字段样式粘贴到所选模块之一。

复制和粘贴填充

重复相同的过程来复制和粘贴填充。

打开 Woo Checkout Billing 模块的设置并使用右键菜单复制填充。

然后使用多选功能选择 Woo Checkout Shipping 和 Woo Checkout Information Modules 并将填充粘贴到所选模块之一。

复制和粘贴边框

重复相同的过程以复制和粘贴边框。

打开 Woo Checkout Billing 模块的设置并使用右键菜单复制边框。

然后使用多选功能选择 Woo Checkout Shipping 和 Woo Checkout 信息模块，并将边框样式粘贴到所选模块之一。

设计 Woo Checkout 详细信息模块

现在我们的运输和附加信息内容已经设计好了，我们准备添加 Woo Checkout Details 内容。 这是显示采购订单详细信息的结帐页面的另一个关键元素。 它包括产品清单、小计和采购总额。 它还显示任何可以通过链接删除的优惠券折扣。

在结帐详细信息中，将新的 Woo Checkout Details 模块添加到同一行的第 2 列。

Woo 结帐详细信息标题文本

在 Woo Checkout Details 设置模式中，转到设计选项卡并更新标题文本，如下所示：

• 标题字体：DM Serif Display
• 标题字体粗细：粗体
• 标题文字颜色：#fff
• 标题文字大小：24px（桌面）、22px（平板电脑）、18px（手机）
• 标题行高：1.4em

Woo 结帐详细信息列标签

要设置列标签的样式，请更新以下内容：

• 列标签字体：Roboto
• 列标签字体粗细：粗体
• 列标签文本颜色：rgba(255,255,255,0.32)

Woo 结帐详细信息正文

要设置针对列表中每列下项目的正文文本的样式，请更新以下内容：

• 正文字体：Roboto
• 正文文本颜色：#fff

在链接选项卡下，更新链接文本颜色：

• 链接文本颜色：#e0816b

Woo 结帐详细信息表边框

对于这个设计，我们将完全去掉表格边框。 为此，请更新以下内容：

• 表格边框宽度：0px

Woo 结帐详细信息表格单元格

要设置表格中表格单元格的样式，请更新以下内容：

• 表格单元格内边距：左 0px
• 表格单元格边框样式：无

这会将表格单元格内的内容向左对齐，并完全移除表格单元格边框。

Woo 结帐细节填充和边框

为了使模块的设计与其他模块保持一致，请按如下方式更新填充和边框：

• 内边距：顶部 16 像素，底部 16 像素，左侧 16 像素，右侧 16 像素
• 边框宽度：1px
• 边框颜色：rgba(255,255,255,0.1)

设计 Woo Checkout 支付模块

现在我们的结帐详情内容已经完成，我们准备添加 Woo Checkout Payment 内容。 这是结帐页面的最后一个关键元素。 它包括用于不同付款选项的可单击单选按钮切换以及主要结帐按钮。 它还包括内置的表单通知。

要添加结帐付款内容，请在第 2 列的结帐详细信息下添加一个新的 Woo Checkout 付款模块。

Woo Checkout 付款背景

打开 Woo Checkout Payment 设置并给模块一个透明背景：

• 背景颜色：透明

Woo Checkout 付款正文

接下来，更新正文样式如下：

• 正文字体：Roboto

在链接选项卡下更新链接文本颜色：

• 链接文字颜色：#999e75

Woo 结帐付款单选按钮

接下来，更新单选按钮的样式，如下所示：

• 单选按钮文本颜色：#fff
• 单选按钮字体：Roboto
• 单选按钮字体粗体：粗体

Woo Checkout 付款工具提示

工具提示是打开单选按钮切换时显示的文本框。

让我们更新工具提示样式如下：

• 工具提示背景颜色：透明
• 工具提示边距：顶部 -10 像素，左侧 17 像素
• 工具提示字体：Roboto

Woo Checkout 付款表格通知

因为 Woo Checkout Payment 模块共享相同的 Form Notice 选项，我们可以从 Woo Checkout Billing 模块复制现有的表单通知样式并将它们粘贴到 Woo Checkout Payment 模块。

Woo 结帐付款按钮

要为 Woo Checkout Payment 模块设置结帐按钮样式，请从 Woo Notice 模块复制按钮样式。

然后将按钮样式粘贴到 Woo Checkout Payment 模块。

Woo Checkout 付款填充和边框

要完成设计，请添加填充和边框，如下所示：

• 内边距：顶部 16 像素，底部 16 像素，左侧 16 像素，右侧 16 像素
• 圆角：0px
• 边框宽度：1px
• 边框颜色：rgba(255,255,255,0.1)

结果

这是我们的结帐页面现在的样子！

根据需要添加更多内容

至此，我们拥有结帐页面模板的所有关键元素。 但你不必停在这里。 您可以根据需要将任何您想要的内容添加到页面。

对于我们这个结帐页面模板的特色演示（可在此处下载），我们包含一个带有一些自定义导航链接的固定侧边栏。

为结帐页面创建自定义模板

如果要创建结帐页面模板，可以使用主题生成器创建结帐页面模板布局，就像我们使用结帐页面模板所做的那样。 但是，由于我们已经有了根据本教程设计的页面布局，我们可以简单地将此布局添加到结帐页面模板中。

将 WooCommerce 页面布局保存到 Divi 库

在我们可以将结帐页面布局添加到结帐页面模板之前，我们必须首先将页面布局保存到 Divi 库。

为此，请打开结帐页面底部的 Divi Builder 设置菜单。 单击添加到库图标，为布局命名，然后单击保存到库。

创建新的结帐页面模板

结帐页面布局保存到库后，我们就可以创建新的结帐页面模板了。

这是如何做到的：

1. 转到您的 WordPress 仪表板并导航到 Divi > Theme Builder。
2. 然后单击空灰色框区域内的添加新模板加号图标以添加新模板。
3. 在模板设置模式中，在“使用”选项卡下，选择 WooCommerce 页面列表下的结帐。
4. 最后，单击创建模板。

将结帐页面布局添加到结帐模板

创建新的结帐模板后，单击模板的“添加自定义正文”区域。 在弹出列表中，选择Add From Library 。

从“从库加载”弹出窗口的“您保存的布局”选项卡下，选择您已保存到库中的结帐页面布局。

完成后，Checkout 模板将在 Theme Builder 中可用。 要编辑模板，请单击模板正文区域上的编辑图标。

最后结果

让我们看看结帐页面模板的最终结果。

以下是它在平板电脑和手机设备上的外观。

最后的想法

使用 Divi 强大的可视化页面构建器和直观的 Woo 模块，设计自定义 WooCommerce 结帐页面模板的过程得到了极大的简化和放大。 在本教程中，我们专注于整合构成结帐页面的关键元素。 但是，请记住，所有其他强大的 Divi 模块和功能都可供您使用，以将您的结帐页面提升到一个全新的水平。 希望这将有助于提高您的 Divi 设计技能，更重要的是，带来更多的转化。

有关更多信息，请查看如何在 Divi 中设计 WooCommerce 购物车页面模板或下载我们很棒的 Divi 免费购物车和结帐页面模板集。

我期待在评论中收到您的来信。

干杯!