如何使用 Divi 创建 WooCommerce 购物车页面模板

WooCommerce 购物车页面对于任何使用 WooCommerce(WC) 在线商店的 Divi 网站都是必不可少的。 但是很多时候，购物车页面在设计时往往会受到影响，因为设计页面通常涉及从外部自定义购物车页面模板，然后纯粹使用外部 CSS 设置页面模板的样式。 但是有了 Divi 的新 Woo 模块，这个过程变得简单而愉快！

在本教程中，我们将向您展示如何使用 Divi Theme Builder 从头开始​​为您的网站创建一个 WC 购物车页面模板。 我们将向您展示如何为购物车页面快速设置新模板，并使用 Divi Builder 中可用的适当动态 woo 模块设计模板。

让我们开始吧！

抢先看

之前和之后

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

下面是购物车页面模板的详细介绍。

免费下载购物车页面模板

此购物车页面模板可作为我们的免费购物车和购物车页面模板集之一下载。 因此，请随时从包含购物车和结帐模板集的帖子中下载它。

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

下载文件

免费下载

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

下载

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

要将模板布局导入您的网站，您需要转到 Divi 主题生成器并使用可移植性选项将 .json 文件导入主题生成器。

完成后，购物车模板将在主题生成器中可用。 要编辑模板，请单击模板正文区域上的编辑图标。

让我们进入教程，好吗？

关于 WooCommerce 购物车页面和 Divi

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

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

用于在 Divi 中设计购物车页面的 Woo 模块

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

构建购物车页面或模板的关键模块包括：

• 帖子标题 - 这将在构建购物车页面模板时动态显示购物车页面的标题。
• Woo Notice – 此模块可以设置为不同的页面类型（购物车页面、产品页面、结帐页面）。 它将根据需要动态地向用户显示重要通知。
• Woo Cart Products – 此模块显示用户当前在其购物车中的产品列表。
• Woo Cart Totals – 此模块显示用户购物车中产品的当前小计、运费和总价。

其他可选模块包括：

• Woo Breadcrumbs – 这将显示 WooCommerce 面包屑导航栏。
• Woo Cross Sells – 这将动态显示与购物车中的项目相关联的任何交叉销售产品。

设计购物车页面或模板

如前所述，如果您不需要为购物车页面构建自定义模板，我们可以轻松使用 Divi Woo 模块设计自定义 WooCommerce 购物车页面。 对于本教程，我们将使用 Divi Theme Builder 构建购物车页面模板。

使用 Divi 设计 WooCommerce 购物车页面模板

对于此 WooCommerce 购物车页面模板，目标是为分配给 Divi 中的 WooCommerce 购物车页面的模板创建自定义正文区域。 我们不会为此模板创建自定义页眉或页脚区域，但您可以使用自己的页眉和页脚在自己的网站上轻松使用此模板。

为购物车页面创建自定义模板

首先，让我们执行以下操作：

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

创建新的购物车模板后，单击模板的“添加自定义正文”区域。 在弹出列表中，选择Build Custom Body 。

创建剖面行和列结构

在模板布局编辑器中，插入一个新的专业部分，该部分具有四分之一二分之一 0ne-fourth 列结构和两个侧边栏。

接下来，在该部分的中间添加一列行。

部分背景

打开部分设置并添加背景颜色，如下所示：

• 背景颜色：#f7f3f0

截面尺寸

在设计选项卡下，更新以下内容：

• 天沟宽度：2
• 内宽：100%
• 内部最大宽度：无
• 最小高度：100vh

截面间距

接下来为部分和列添加一些间距，如下所示：

• 内边距：顶部 0px，左侧 40px，右侧 40px
• 第 1 列填充：顶部 90 像素
• 第 3 列内边距：84 像素

创建自定义导航链接

对于此布局，我们将创建一些自定义导航链接，指向构成商店的关键页面——商店、购物车和结帐。 这将使用户更容易浏览购买过程。

在左栏中，添加一个新的简介模块。 这将用作您网站上商店页面的链接。

在 Blurb Settings 模式中，更新内容如下：

• 标题：商店
• 正文：留空
• 使用图标：是
• 图标：见截图

我们可以向 Shop 页面添加动态链接，而不是添加静态链接 URL。 这是如何做到的。

1. 将鼠标悬停在模块链接 URL 输入框上，然后单击“使用动态内容”图标。
2. 在下拉列表中，从列表中选择页面链接。
3. 在页面链接模式中，从下拉列表中选择商店页面。
4. 然后保存更改。

在设计选项卡下，更新图标样式如下：

• 图标颜色：rgba(55,61,75,0.3)
• 图像/图标位置：左
• 图片/图标宽度：16px

接下来，更新标题文本：

• 标题字体：Roboto
• 标题字体粗细：中
• 标题文字颜色：rgba(55,61,75,0.3)

最后，更新大小和间距，如下所示：

• 内容宽度：100%
• 边距：底部 10px
• 图像/图标动画：无动画

这将确保简介（或导航链接）跨越平板电脑和手机上浏览器的整个宽度，并在我们要添加的下一个简介之间创建一些空间。

要创建我们接下来的两个链接，请将我们刚刚设计的现有简介模块复制两次，以便总共有三个链接。

第二个链接将是我们当前正在创建的页面的购物车链接。 为了让它脱颖而出，打开第二个简介的设置并更新图标和文本颜色：

• 图标颜色：#373d4b
• 标题文字颜色：#373d4b

现在剩下要做的就是更新标题文本和模块链接 URL，以便它们每个都有各自的动态页面链接 URL。

自定义行设置

在页面的中间部分，我们将添加 woo 通知模块和 woo 购物车产品。 但在我们添加这些之前，我们需要优化行设置。

行填充

打开行设置并更新以下内容：

• 内边距（桌面）：顶部 72 像素，左侧 6%，右侧 6%
• 填充：（平板电脑和手机）：0px 顶部，0px 左侧，0px 右侧

行边框

• 边框宽度：1px
• 边框颜色：rgba(55,61,75,0.14)
• 顶部边框宽度：0px
• 底部边框宽度：0px

为购物车页面设计动态 Woo 通知模块

在页面顶部添加 Woo 通知模块始终是一个好主意，这样在与购物车页面交互时，通知对用户最可见。 请记住，我们正在设计仅在需要时才显示的通知。

要添加 Woo 通知模块，请单击以在单列行内添加一个新的 Woo 通知模块。

Woo 通知页面类型和背景

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

• 页面类型：购物车页面
• 背景颜色：rgba(153,158,117,0.1)

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

Woo 通知标题文本

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

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

Woo 通知按钮

• 为按钮使用自定义样式：是
• 按钮文字大小：14px
• 按钮文本颜色：#fff
• 按钮背景颜色：#999e75
• 按钮边框宽度：0px
• 按钮边框半径：0px
• 按钮字母间距：1px
• 按钮字体：Roboto
• 按钮字体粗细：粗体
• 按钮字体样式：TT
• 按钮填充：顶部 0.8em，底部 0.8em，左侧 1em，右侧 1em

Woo 通知框阴影

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

• 盒子阴影：见截图
• 盒子阴影垂直位置：0px
• 盒子阴影模糊强度：0px
• 盒子阴影传播强度：0px
• 阴影颜色：#999e75

为了取出 woo 通知下方的默认边距，请转到高级选项卡并将以下自定义 CSS 添加到主元素：

margin-bottom: 0 !important;

创建动态购物车页面标题

要创建购物车页面所需的动态页面标题，请在 woo notice 模块下添加帖子标题模块。

帖子标题内容

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

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

帖子标题文本

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

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

设计动态 Woo 推车产品

现在我们的页面标题已经到位，我们准备添加 Woo Cart Products，这是购物车页面模板的另一个关键元素。

在帖子标题模块下，添加一个 Woo Cart Products 模块。

除非您的购物车中已有产品，否则该模块应显示虚拟内容。 这将有助于可视化设计过程。

Woo 购物车产品正文和链接

我们可以通过在 Woo Cart Products 设置中自定义正文文本选项来定位产品标题链接、价格文本和小计文本。

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

• 正文字体：Roboto
• 链接文字颜色：#373d4b

注意：链接文本将针对产品列下的产品标题链接。

Woo Cart Products 表格、表格单元格和删除图标

正如您可能知道的那样，购物车产品是在表格结构中组织的。 我们可以使用模块的内置选项来定位表格和表格单元格的样式。

对于此示例，更新以下内容：

• 折叠表格排水沟和边框：是
• 表格单元格填充：0px

然后更新每个产品左侧的删除图标（“x”）的颜色，如下所示：

• 删除图标文本颜色：#373d4b

Woo Cart 产品领域

我们还可以使用模块的内置字段选项来定位购物车产品字段。 这将针对数量字段框和优惠券代码字段框等内容。

在字段选项下，更新以下内容：

• 字段背景颜色：透明
• 字段填充：顶部 10 像素，底部 10 像素
• 场圆角：0px
• 字段边框宽度：1px
• 字段边框颜色：rgba(0,0,0,0.16)

Woo 购物车产品按钮

Woo Cart Products 模块包含两个按钮（“应用优惠券”按钮和“更新购物车”按钮），可以使用模块的内置按钮选项进行自定义。

由于我们已经在 Woo Notice 模块中设置了按钮样式，因此打开 Woo Notice 模块设置并找到按钮选项切换。 然后右键单击按钮切换或单击“三点”图标以打开更多设置菜单。 在那里，选择复制按钮样式。

现在复制按钮样式后，打开 Woo Cart Products 模块设置并打开按钮选项组上的更多设置菜单，然后选择粘贴按钮样式。 这会将按钮的样式从 woo 通知模块复制到该模块。

一旦按钮样式就位，更改按钮背景颜色如下：

• 按钮背景颜色：#373d4b

禁用按钮

“更新购物车”按钮在不需要时处于禁用状态。 我们也可以自定义禁用按钮的样式。 现在，只需复制当前按钮样式并使用右键单击菜单设置将它们粘贴到禁用的按钮样式中。

Woo 购物车产品图片

我们还可以在此模块中更改产品图片的样式。 现在，让我们在大小选项下更改图像的大小，如下所示：

• 图片宽度：80px

自定义表格布局

如果您想为表格中的产品信息创建更多水平空间，您可以将 WooCommerce 默认的固定表格布局覆盖为初始（或自动）。 为此，请转到高级选项卡，并将以下自定义 CSS 添加到表中：

table-layout: initial !important;

设计动态 Woo 购物车总计模块

我们需要完成购物车页面模板的最后一个关键元素是 Woo Cart Totals 模块。 此模块显示动态购物车总计内容以及“继续结帐”按钮。 对于此布局，继续并将购物车总计模块添加到该部分的右列。

购物车总计按钮

首先，让我们复制用于 Woo Notice 模块的按钮样式（就像我们之前所做的那样）并将按钮样式粘贴到购物车总计模块中。 这将为“Proceed to Checkout”按钮提供匹配的按钮样式。 当然，您可以使用模块的内置选项轻松自定义按钮样式。

购物车总计文本

要设置购物车总计模块的标题文本，请打开购物车总计模块，然后在设计选项卡下更新以下内容：

• 标题字体：DM Serif Display
• 标题文字大小：30px（桌面）、24px（平板电脑）、18px（手机）
• 标题行高度：1.8em

表格边框和表格单元格边框

默认情况下，购物车总计将具有一些表格样式。 您可以选择使用模块的内置表格和表格单元格选项来设置样式。 对于这个布局，我们将去掉两者的边框样式。 为此，请更新以下内容：

• 表格边框样式：无
• 表格单元格边框样式：无

购物车总计字段

要为购物车总计模块提供与 Woo 购物车产品中使用的相同字段样式，请从 Woo 购物车产品模块复制字段样式并将它们粘贴到购物车总计模块。

根据需要添加更多内容

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

• 添加 Woo Cross Sells 模块以显示与添加到购物车的产品相关联的任何交叉销售产品。
• 添加电子邮件选项以获得首次购买的折扣。
• 添加显示优惠券代码的促销以激励完成购买过程。

对于此布局的免费演示，我们在购物车产品下方提供了一个不错的电子邮件选择。

最后结果

让我们看看我们的购物车页面模板的最终结果。

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

最后的想法

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

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

干杯!