WooCommerce 是最受欢迎的 WordPress 电子商务插件之一。 为了解决这个问题， Divi发布了一些新的以 Woo 为中心的模块，让您在创建标准 WooCommerce 页面时有更多的自由。 我们将在今天的帖子中为Divi创建一个 WooCommerce 购物车时间线。 我们将为这一时期的用户旅程设计一个视觉描述。 应明显显示用户从商店到结账的旅程。
设计预览
在我们直接开始设计之前，让我们看看我们的设计在完成后会是什么样子。 这是购物车页面预览。
此外，这就是我们的结帐页面的样子。
要下载模板，请单击此处并获取文件。 然后解压缩。
创建令人惊叹的网站
使用最好的免费页面构建器 Elementor
现在开始安装模板
转到 WordPress 网站后端的 Divi Theme Builder 以上传模板。
然后，右上角会出现一个双箭头图标。 切换图标。
将您从本文下载的 JSON 文件上传到导入选项卡后，单击“导入 Divi 主题生成器模板”。
上传文件后，您会注意到一个新的购物车、结帐和商店模板。 一旦您希望激活模板，请将您的修改保存在 Divi Theme Builder 中。
创建 WooCommerce 购物车时间轴
如果您正在寻找更多挑战，我们博客文章的下一部分将演示如何为 Divi 重新创建 WooCommerce 购物车时间线。 本指南中的过程可用于创建您独有的购物车时间表。 利用它作为您后续 WooCommerce 和 Divi 努力的动力！ 这就是我们将要构建的 WooCommerce 购物车时间轴的外观：
现在让我们开始吧，我们已经有了我们将要创建的内容的可视化表示！
Divi 主题生成器设置
我们将开发的这些模板将对 WooCommerce 的结帐和购物车页面产生影响。 因此，我们开始在 Divi Theme Builder 中处理我们的项目。
在“添加新模板”卡中，单击加号。
接下来选择创建新模板。
之后，将向您显示一个模式框，其中列出了您可以附加到您正在构建的新模板的所有不同分配。 在这种情况下，我们将为 WooCommerce 商店的购物车页面制作一个模板。 因此，导航到模式框中的 WooCommerce 标题并单击购物车。 选择后，选择Create Template。 通过这样做，我们正在使用新构建的模板标记购物车页面。
要开发结帐模板，我们将遵循类似的过程。 在“添加新模板”卡中，单击加号。
再次选择创建新模板。
我们必须向下滚动模式窗口并从 WooCommerce 标题中选择结帐才能访问结帐页面。 选择后，选择Create Template。
我们现在可以在创建购物车和结帐模板后保存它们。 在 Divi Theme Builder 的顶部，选择绿色的 Save Changes 按钮。
构建 WooCommerce 购物车流程
乐趣现在开始！ 我们将开始为购物车页面的购物流程起草时间表。 为此，我们打开刚刚制作的购物车模板并选择添加自定义主体按钮。
我们将选择出现在模态框中的“创建自定义正文”按钮，就像我们在创建这些模板及其分配时所做的那样。
新的部分和行
现在我们在 Divi Builder 中，我们将创建一个新行。 这一行将有五列。
在新行的第 1、3 和 5 列中，添加三个 Blurb 模块。
按照 blurb 模块设置：
第一个简介（第 1 栏）
- 标题：商店
- 正文：留空
- 使用图标：是
- 图标：见下图
- 模块链接 URL： /shop（或您的商店页面的自定义链接）
第二个简介（第 3 栏）
- 标题：评论
- 正文：留空
- 使用图标：是
- 图标：见下图
- 模块链接 URL： /cart（或您指向购物车页面的自定义链接）
第三个简介（第 5 栏）
- 标题：结帐
- 正文：留空
- 使用图标：是
- 图标：见下图
- 模块链接 URL： /checkout（或您指向结帐页面的自定义链接）
此时，我们的 WooCommerce 时间线会出现如下：
无论客户登陆哪个页面，我们都需要在为购物车和结帐页面创建模板时简单地访问我们的 Blurb 模块。 最终用户 — 您的客户 — 在各个结帐阶段之间无缝移动的能力是 WooCommerce 时间线的关键组成部分。 我们先进入第一个blurb，shop的模块设置，添加网站默认的shop，cart，checkout页面的链接。
无论客户登陆哪个页面，我们都需要在为购物车和结帐页面创建模板时简单地访问我们的 Blurb 模块。 最终用户 — 您的客户 — 在各个结帐阶段之间无缝移动的能力是 WooCommerce 时间线的关键组成部分。 我们先进入第一个blurb，shop的模块设置，添加网站默认的shop，cart，checkout页面的链接。
每个 Blurb 模块都会收到指向正常 WooCommerce 页面的链接。 对您在 WooCommerce 安装中为这些页面建立的任何自定义链接进行必要的调整。 我们首先从 Shop Blurb 模块开始。 我们在 Module Link URL 框中输入 /shop。 这是 WooCommerce 商店页面的标准 URL。 如果您更新了此 URL，请记住将其替换为您的个性化 URL。
要保存更改，请单击绿色复选标记按钮。 接下来我们进入 Review Blurb 模块。 此模块提供购物车页面的链接。 再次选择链接选项卡，并将模块链接 URL /cart 添加到模块 URL。
我们将链接到标准 WooCommerce 结帐页面链接，即 /checkout，用于最后一个 Blurb 模块，即 Checkout Blurb 模块。
样式 Blurb 模块
然后我们新添加的 Blurb 模块的样式将开始。 在模块上，我们将应用悬停样式。 这改善了 WooCommerce 购物车时间线的用户体验 (UX)。 我们希望 Blurb 模块使用不同的颜色来代表我们现在所在的页面。 此外，我们希望图标在我们将鼠标悬停在其上时改变颜色并变大。
Blurb 模块样式
- 图标颜色： #eac989
- 悬停图标颜色： #9fa2ce
- 文本对齐方式：居中
标题文字：
- 标题标题文字： H4
- 标题字体：巴斯克维尔
- 标题字体粗细：粗体
- 标题文字颜色： #354e7c
转换：
- 变换比例（桌面）： 100%
- 变换比例（悬停）： 115%
在我们为第一个 Blurb 模块完成配置后，我们将把设计参数应用于我们行中的其他 Blurb 模块。
只是我们部分中的模块是我们想要将样式扩展到的对象。 记住这一点很重要，尤其是当您正在处理包含现有内容的页面时。
设计购物车 Blurb 模块
我们将为用户现在所处的阶段提供单独的图标颜色，以指示各种结帐流程阶段。 例如，如果它们在购物车页面上，我们将更改引用流程购物车阶段的 Blurb 模块的颜色。
购物车页面 Blurb 模块：
- 图标颜色（桌面）： #f6c6c5
- 图标颜色（悬停）： #9fa2ce
添加时间线分隔线
在我们构建和设计我们的 Blurb 模块之后，我们将首先添加和定制我们的 Divider 模块。 我们行的第二列和第四列包括分隔模块。
样式时间线分隔线
接下来，我们将自定义分频器模块。 在分频器设置中进行以下更改。
能见度：
- 显示分隔线：是
线：
- 线条颜色： #354e7c
- 线型：虚线
- 行位置：垂直居中
浆纱
- 分隔线重量： 5px
让我们使用一个非常聪明的 Divi 功能将样式从这个 Divider 模块复制并粘贴到我们行中的另一个模块。 然后，我们将右键单击已完成的分频器模块。 然后，我们将选择复制模块设置。 然后，我们右键单击 Divider Module，此时它没有样式。 最后一步是单击粘贴模块设置。 节省时间就是赢得时间！
自定义 CSS
我们的 WooCommerce 购物车时间轴目前看起来是这样的：
我们将向我们的行添加一些 CSS，以确保我们的分隔模块正确对齐并使我们的时间轴模块具有移动响应能力。
在添加自定义 CSS 之前，我们必须首先为 WooCommerce 购物车时间轴输入行选项。 然后我们选择高级选项卡。 最后但同样重要的是，我们将在主元素中包含以下 CSS：
display:flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;现在单击绿色复选标记以保存设置。
设置结帐页面
在我们的购物车页面中，我们为 WooCommerce 购物车流程时间轴奠定了基础。 但是，我们必须用已完成的工作更新我们的结帐页面模板以完成我们的时间表。 为了简化结帐页面的程序，我们将使用右键单击菜单，这是 Divi 的原始功能之一。 我们走吧！
从购物车页面复制购物车流程时间轴
我们将返回购物车页面。 不过，我们不会为身体使用 Divi Builder。
右键单击购物车模板的自定义主体。 之后，从右键单击菜单中选择复制。
复制完成后，我们现在将在购物车模板中完成的工作粘贴到结帐模板中。 在结帐页面模板中，我们右键单击“添加自定义正文”按钮来完成此操作。 完成后，粘贴选项将出现在菜单中。 要将自定义正文从结帐页面模板复制到购物车页面模板，请单击粘贴。
您现在可以看到结帐页面模板和购物车模板都有自定义主体。 这将使我们能够加快网站设计过程。 谢谢你，迪维。 我们将单击构建器顶部的绿色保存更改按钮以保存我们对结帐模板的修改。
更新结帐页面
在设计过程中缩短了一些时间后，让我们对结帐页面进行最后的调整，以确保它与我们项目的其余部分无缝集成。 要编辑结帐页面模板的自定义正文，首先，单击铅笔图标。
样式结帐图标
现在开始设计我们的结帐图标。 单击齿轮符号时，将打开结帐按钮的模块设置。
转到模块设置模块的设计选项卡。 应单击标题“Image & Icon”。 图标的颜色将更改。 因此，选择吸管图标并输入十六进制值 #f6c6c5。 结果，该图标将呈现当前页面的颜色，即粉红色。
更新购物车图标
有必要返回并更改购物车图标的图标颜色。 我们将返回模块设置来完成此操作。 然后我们选择购物车符号的齿轮图标。
我们将再次导航到模块设置的设计选项卡。 之后，从图片 & 图标部分选择吸管工具。 然后以十六进制格式输入#eac989。
离开 Divi Builder 后，不要忘记保存您的设置和所有辛苦的工作。
一起玛吉
虽然购物车时间线是本教程的主要焦点，但该模板还需要使用额外的 WooCommerce 模块。 这些额外的 WooCommerce 模块必须添加到每个模板页面才能使您的商店完整。
购物车页面模板
- Woo 购物车产品：这将显示 WooCommerce 购物车
- Woo Cart Totals：使用此模块展示小计、税收等
结帐页面模板
- Woo Notice Module：我们使用此模块来显示与结帐相关的任何错误、信息或通知
- Woo Checkout Billing：此模块将为您的客户的账单详细信息着色
- Woo Checkout Details：与购物车总数不同，此模块将显示实际产品名称、数量等
- Woo Checkout Billing：为了显示可用的付款方式，我们将此模块添加到结帐页面
包起来
购物车时间轴可以让客户直观地描述他们在您网站上的旅程。 您可以使用Divi调整新组件并将其添加到您的 WooCommerce 商店。 借助 Divi 的工具，您可以将在这里学到的知识应用到您自己的客户和个人网站上。 如果您在课堂之外使用本教程，请告诉我！
