如何使用 Divi 制作 WooCommerce 结帐页面模板

创建 WooCommerce 结帐页面通常需要对后端的 PHP 模板文件进行大量自定义以及大量自定义 CSS。但是，由于Divi的 Woo 模块，此过程变得有趣且简单！当您使用 Divi 更新 WC 结帐页面时，WC 简码转换为动态 Woo 结帐模块的结构化布局，可以使用复杂的内置设计选项进行视觉样式化。这使您可以完全控制结帐页面的设计。

本指南将教您如何使用Divi创建一个完全独特的 WooCommerce 结帐页面。首先，我们将利用结帐页面可访问的动态 Woo 模块创建 WooCommerce 结帐页面。然后，当您完成后，我们将向您展示如何将结帐页面设计应用于 Theme Builder 中的结帐页面模板。因此，无论您是想修改结帐页面本身还是开发结帐页面模板，Divi 都能满足您的需求。您将很快就可以创建具有视觉吸引力的结帐页面。

设计预览

这就是我们的设计。

WooCommerce 签出页面和 Divi

当您在 Divi 网站上安装 WooCommerce 时，它将构建主要的 WC 页面，例如购物车页面、购物车页面、结帐流程和帐户页面。然后，在后端 WordPress 块编辑器中使用简码部署页面内容。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

如果您在此结帐页面上启用 Divi Builder，每个 WooCommerce 结帐页面的内容组件都将作为可用于自定义页面的 Divi Woo 模块加载。

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

Divi 有几个基本模块用于向页面模板添加交互式内容。其中一些包含为结帐页面量身定制的 Woo 模块。

以下模块对于创建结帐页面或模板至关重要：

帖子标题：创建结帐页面模板时，这将动态显示结帐页面的标题。

Woo 通知： Â 此模块可以分配给多种页面类型（购物车、产品和结帐）。它将根据需要向用户动态显示重要通知。

Woo Checkout Billing： Â此模块显示结帐过程中使用的帐单详细信息表格。

Woo Checkout Shipping： Â 此模块显示在结帐过程中出现的运输详细信息表单。

Woo 结帐信息： Â 此模块显示在整个结帐过程中使用的附加信息表。

Woo Checkout Details： Â 此模块在结账时显示订单详细信息，包括所购买的产品及其价格。

Woo Checkout Payment：这个模块在结账时显示付款类型选择和付款表格详细信息。

另一个 woo 模块选项：

Woo Breadcrumbs：将显示 WooCommerce 面包屑导航栏。

创建结帐页面或模板

如前所述，我们可以使用 Divi Woo 模块轻松创建自定义 WooCommerce 结帐页面。但是，您可以使用相同的设计流程来创建自定义 Checkout 模板。本教程将为结帐页面创建自定义结帐页面布局。然后，使用 Divi Theme Builder，我们将向您展示如何利用自定义结帐页面布局来创建结帐页面模板。

使用 Divi 创建 WooCommerce 结帐页面布局

本 WooCommerce Checkout Page 教程的目的是为 WooCommerce Checkout Page 开发自定义页面布局，在 WooCommerce 中称为 WooCommerce Checkout Page。在课程结束时，我们将向您展示如何轻松保存此结帐页面布局并将其导入主题构建器以构建新的结帐页面模板。

WooCommerce 结帐页面编辑

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

单击页面编辑器顶部的使用 Divi Builder 选项。

使用 Divi 构建器选择编辑。

白手起家

如前所述，该页面将加载包含结帐页面内容的所有可自定义 Divi 模块（包括关键的 Woo 模块）。当然，如果您愿意，您可以使用现有布局并开始更改已经存在的模块。但是对于本指南，我们将从头开始。

进入页面底部的选项菜单，然后为 Clear Layout 按钮（垃圾箱图标）选择 YES 以清除布局。

部分背景

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

背景颜色：#264653

行列

下一步将在此部分添加一列行。

创建动态结帐页面标题

要使结帐页面的页面标题动态化，请在列中添加一个帖子标题模块。

帖子标题内容

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

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

帖子标题文本

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

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

动态 Woo 通知模块

将 Woo 通知模块放置在页面顶部以在与结帐页面互动时查看通知总是一个好主意。请记住，我们正在创建仅在需要时才显示的通知。

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

Woo 通知页面类型和背景

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

页面类型：结帐页面
背景颜色：#2a9d8f

标题文本

在设计选项卡中，更新以下设置。

标题字体：Roboto
标题字体粗细：中
标题文字颜色：#e9c46a
标题文字大小：14px
标题行高度：1.8em
链接文本颜色：#f4a261

Woo 通知字段

登录表单和优惠券代码等项目的字段和字段名称包含在结帐页面通知中。要更改这些字段的字段标签样式，请进行以下更改：

必填字段指示器颜色：#e9c46a
字段标签字体：Roboto
字段标签字体粗体：粗体
占位符颜色：#e9c46a
字段背景颜色：透明
字段文本颜色：#e9c46a
字段焦点文本颜色：#e9c46a
字段填充：顶部 12 像素，底部 12 像素
字段边框宽度：1px
字段边框颜色：rgba(255,255,255,0.32)

Woo 通知按钮

是时候自定义按钮了。

为按钮使用自定义样式：是
按钮文字大小：14px
按钮文本颜色：#e9c46a
按钮背景颜色：#2a9d8f
按钮边框宽度：1px
按钮边框颜色：#e9c46a
按钮边框半径：0px
按钮字母间距：1px
按钮字体：Roboto
按钮字体粗细：粗体
按钮字体样式：TT
按钮填充：顶部 12 像素，底部 12 像素，左侧 24 像素，右侧 24 像素

Woo 通知表

在表单选项组下，每个通知表单都可以设置样式。更新以下内容以使表单具有浅色边框：

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

Woo 通知框阴影

要在 woo 通知栏中添加类似顶部边框的设计，请更新 box-shadow 选项，如下所示：

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

Woo Checkout 计费模块

现在我们已经有了页面标题和通知，我们可以添加 Woo Checkout Billing 内容，这是结帐页面的另一个重要组成部分。

在添加开票材料之前，创建一个具有五分之二列排列的新行。

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

Woo Checkout 帐单标题文本

在 Woo Checkout Billing 模块中，打开设置并在设计选项卡下调整以下内容。

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

Woo Checkout 计费字段和字段标签

与通知模块一样，此模块包括用于设置字段和字段标签样式的选项。因为我们希望我们所有的字段和字段标签在整个页面中保持一致，我们可以从 Notice 模块复制字段和字段标签样式并将它们粘贴到 Woo Checkout Billing 模块中。

以下是如何去做：

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

将复制的样式粘贴到新添加的模块中。

它看起来像这样。

Woo Checkout 账单表格通知

表单通知负责在填写表单时动态显示任何通知或错误。要设置表单通知的样式，请导航到 Woo Checkout Billing 设置并进行以下更改：

表格通知背景颜色：#e58991
表单通知填充：顶部 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 结帐运输模块。

还添加了一个 Woo Checkout 信息模块。

每个 woo 模块（Checkout Shipping 和 Checkout Information）必须看起来像 Woo Checkout Billing 模块。我们可以将每个需要的样式复制到每个。让我们在这里复制并粘贴设计。

Woo 结帐详情模块

现在我们已经设计了我们的运输和额外信息内容，我们准备添加 Woo Checkout Details 内容。这是显示采购订单详细信息的结帐页面的另一个重要组成部分。它包含产品列表、小计和购买的总价。它还显示已应用并可通过链接提取的任何优惠券节省。

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

Woo 结帐详细信息标题文本

更新标题文本设置如下：

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

Woo 结帐详细信息列标签

让我们设置列标签的样式：

列标签字体：Roboto
列标签字体粗细：粗体
列标签文本颜色：#ddb17c

Woo 结帐详细信息正文

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

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

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

链接文本颜色：#e0816b

Woo 结帐详细信息表边框

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

表格边框宽度：0px

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

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

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

Woo 结帐细节填充和边框

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

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

Woo Checkout 支付模块

我们已经准备好添加 Woo Checkout Details 内容，因为我们已经构建了我们的运输和额外信息内容。这是显示采购订单详细信息的结帐页面的另一个关键部分。它包括产品清单、小计和最终购买价格。它还显示已应用的任何优惠券节省，可通过单击链接提取。