使用 Divi 的 Fashion Layout Pack 通过 WooCommerce 创建在线商店

Divi 的新时尚布局包为任何在线商店提供了很好的设置。 商店模块的集成和页面布局的组织为您提供了一个重要的开端。 但是为了让这个布局作为一个功能性的在线商店运行起来，我们需要 WooCommerce 插件。 而且，您可能会对 Divi 和 WooCommerce 的协同工作感到惊讶。

在本教程中，我将向您展示如何使用 Woocommerce 使用 Divi 的时尚布局包创建在线商店。 我将向您介绍如何正确设置要自定义的布局，如何通过 Woocommerce 集成使商店页面栩栩如生，以及有关如何使用布局元素和主题定制器来设计 Woocommerce 页面样式的一些技巧。

设置

为了节省时间，我将开始本教程的某些步骤已经完成。

1.安装并激活Divi主题
2. 安装并激活 WooCommerce
3. 下载 Fashion Layout Pack 并将 Fashion_All.json 文件导入您的 Divi 主题库。
4. 为每个布局创建新页面。
5. 创建您的主菜单。

如果您对上面列出的设置感到困惑，您可以通过查看这 10 个为新项目使用布局包的步骤，找到有关如何正确设置布局的更多详细说明。

完成以上 5 个步骤后，您就可以开始了。

先睹为快

这是您将要创建的一些 WooCommerce 页面的一瞥。

使用 Divi 的 Fashion Layout Pack 通过 WooCommerce 创建在线商店

订阅我们的 YouTube 频道

更改您的全局口音颜色

首先，我们将更改 Divi 主题的全局强调色。 更改全局强调色以匹配您的布局始终是一个好主意，但这也是无需使用自定义 CSS 即可将您的 WooCommerce 页面与您的配色方案相匹配的最简单方法。 您会注意到这种强调色被用于为您的每个 WooCommerce 页面上的元素设置样式，例如单个产品页面、购物车页面等……

要更改全局强调色，请转到主题定制器并导航到常规设置 > 布局设置，然后在底部找到主题强调色选项。

我正在使用布局中的这种粉红色：#fc7086

然后，一旦您更改它，保存并发布您的设置并刷新您的页面以允许强调色更新定制器中的其他设置。

更新主题定制器中的排版设置

由于 WooCommerce 使用您的默认主题定制器设置来为其每个页面设置文本样式，因此您需要确保将布局上使用的排版与主题定制器中的排版设置相匹配。

要更新您的排版，请转到Divi > Theme Customizer > General Settings > Typography并更新以下内容：

正文文字大小：16px
车身线高：1.9
标题文字大小：42
标题字体样式：B
标题字体：Playfair Display
正文字体： Poppins
正文链接颜色：[如果您更新了全局强调色，则此颜色应显示在此处]

设置 WooCommerce 商店页面

WooCommerce 允许您设置要作为基本商店页面的页面。 此页面应包括所有产品类别，以便用户了解您的商店所提供的一切。 由于我们的布局有一个商店页面，让我们继续将此作为我们的基本商店页面。

从您的 WordPress 仪表板，转到WooCommerce > 设置，然后单击页面顶部的产品选项卡。 在选项卡正下方的菜单中，选择Display 。 然后选择商店页面到您使用时尚布局包中的新商店页面布局创建的“商店”页面。

然后保存更改。

将产品添加到您的商店

您可能已经注意到，尽管您的商店页面有两个商店模块，但并未显示任何产品。 显然，您需要先添加产品。 要将新产品添加到您的商店，请转到您的 WordPress 仪表板并按照以下步骤操作：

1. 导航到产品 > 添加新
2. 输入产品名称
3. 输入产品描述
4. 输入产品价格
5. 输入产品的简短描述
6. 添加三个新类别（夏季、精选和特卖）
7. 为您的产品选择类别（在本例中为夏季）
8. 添加产品图片
9. 发布/更新产品

为您的产品分配类别

当您重复上述步骤以创建更多新产品时，请确保为每个产品分配一个类别（上面列出的步骤中的 #7）。 在本教程中，我在“夏季”类别下添加了 6 个产品，在“特色”类别下添加了 6 个产品，在“特价”类别下添加了 1 个产品。

更新商店页面上的商店模块

现在您已经创建了产品，您可以将这些产品添加到您的商店页面。 正如我之前提到的，商店页面布局已经在布局中内置了商店模块。 在 Summer 部分下有一个，在 Featured 部分下有一个。

转到商店页面并部署可视化构建器。 然后将鼠标悬停在包含 Summer Fashion 标题的行下的商店模块（当前未显示任何产品）上，然后单击模块设置。

更新设置以仅包含“夏季”类别。

现在您应该看到添加了类别夏天的所有产品。

接下来，找到特色产品标题下的商店模块并更新设置以仅包含特色类别。

添加商店模块以在商店页面上显示“特价”商品

由于我们在商店页面上有两个类别（特色产品和夏季时装），使用布局中已经提供的模块可以轻松创建附加类别和产品。

让我们创建另一个部分来展示我们的“特价”产品。

为此，请部署可视化构建器并使用右键单击选项复制显示夏季时尚产品的整个部分，并将其直接粘贴到“特色产品”部分下方。

现在您所要做的就是进行一些更新。

在显示标题的行中，继续单击文本模块中的文本并将标题更改为“特价”而不是“夏季时尚”。

然后将左栏中的图像更改为与您的销售产品更一致的图像。

最后，更新商店模块以仅包含“在售”类别。

使用时尚布局设计您的 WooCommerce 页面

当您安装插件时，WooCommerce 会自动生成自己的一组 WooCommerce 页面。 这些包括以下内容：

商店 - 这是您产品的帖子类型存档的占位符。
购物车 - 使用短代码 [woocommerce_cart] 生成购物车内容
Checkout – 使用短代码 [woocommerce_checkout] 显示信息。
我的帐户 - 使用短代码 [woocommerce_my_account] 显示与其帐户相关的特定客户信息。

由于我们已经选择了我们的商店页面，因此无需进一步设计。 但是对于其他 3 个 WooCommerce 页面，我们需要对它们进行样式设置以适应我们其他页面布局的设计。

将部分标题添加到购物车和结帐页面

我们先来看看购物车页面。 这是在我们对它做任何事情之前的样子。

请注意，因为我们更新了全局强调色，所以我们的链接和按钮已经与配色方案相匹配。 而且，由于我们更新了主题定制器中的排版设置，标题和正文也与我们的主题相匹配。

但只需点击几下，我们就可以做得比这更好一点。 首先转到商店页面，部署可视化构建器，并将包含页眉的顶部部分保存到库中。 您可以命名为“页眉部分”。

然后向下滚动到页面底部，找到包含电子邮件选项和联系方式的最后一部分，并将其以“页脚部分”的名称保存到您的库中。

现在去编辑您的购物车页面。 从默认页面编辑器中，选择使用 Divi Builder，然后选择“使用 Visual Builder”。 构建器应该自动将短代码 [woocommerce_cart] 放在常规部分的一列行内的文本模块中。 如果没有，您将需要自己创建它。 接下来，单击蓝色加号图标在当前部分下添加一个新部分，选择“从库中添加”选项卡。 然后选择您刚刚创建的名为“页眉部分”的新部分。

然后将该部分拖到页面顶部并将标题文本更改为“您的购物车”。 就是这样！

您也可以对结帐页面重复此过程。

使用 Divi Builder 设计我的帐户页面

既然您知道如何向这些 WooCommerce 页面添加标题，请继续为“我的帐户”页面执行相同操作。 这次您可以将您保存到库中的页脚部分添加到此页面的底部。

您可能希望给这个页面一个独特的设计，以使其更明显，这是一个管理您帐户的页面。 因此，不是页眉和页脚部分的粉红色渐变背景，而是转到每个部分的部分设置并将背景渐变颜色更改为#9599e2 和#8bc6ec。

使用文本模块设置来设计 WooCommerce 简码内容的样式

由于 WooCommerce 短代码现在位于文本模块中，因此您可以利用它来为模块设置中的某些元素设置样式。

让我们为我们的“我的帐户”页面执行此操作。 从可视化构建器中，更新保存短代码内容的文本模块的设置，如下所示：

在设计选项卡下...

文字文字大小：20px
文本行高：1.6em

现在单击“文本”部分下的链接选项卡，按如下方式设置链接样式：

链接字体： Poppins
链接字体粗细：半粗体
链接文字大小：27px
链接线高度：1.5em

保存设置

现在查看您的“我的帐户”页面。

使用自定义 CSS 来设计 WooCommerce 存档页面的样式？

WooCommerce 使用的某些存档页面不像其他页面那样使用短代码生成，因此无法使用 Divi Builder 对其进行调整。 因此，对于这些页面，您需要拆分一些自定义 CSS。

让我们以“特色类别”页面为例。

现在让我们打开 Theme Customizer 并单击 Additional CSS 并添加以下内容：

.orderby {
background: #fd7792;
color: #fff!important;
font-size: 18px;
height: 40px;
font-size: 18px !important;

}

.woocommerce-Price-amount, .woocommerce .woocommerce-breadcrumb, p.woocommerce-result-count {
    font-size: 16px !important;
    color: #fd7792 !important;
    letter-spacing: 2px;
}

这将设置排序下拉框、面包屑和价格字体的样式。 可以使用主题定制器中的排版设置更改其余文本。

最后的想法

借助这个令人惊叹的布局包、WooCommerce 和 Divi Builder，为您的网站构建在线商店变得更加容易。 显然，还有一些需要完成的工作超出了本文的范围。 例如，您仍然需要决定使用哪种支付网关、您希望如何处理运输以及其他更多公司特定的行动项目。 但是 WooCommerce 应该能够处理您需要的大部分内容。

如果有的话，我希望这篇文章能激励你自己创造一些惊人的东西。

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

干杯!