Divi 插件亮点：Divi BodyCommerce

Divi BodyCommerce 是 Divi 的第三方插件，可让您控制从产品页面到结账页面以及两者之间的所有内容的商店设计。 它的设计考虑到了转换，让您可以使用 Divi Builder 完全控制商店的设计。

当一个插件提供与这个一样多的模块和功能时，它们往往会变得难以使用。 然而，这不是问题，因为一切都很容易理解，而且比我见过的任何插件都有更多的分步视频。 在本文中，我们将看看 Divi BodyCommerce，看看它可以做什么以及它是多么容易使用。

Divi BodyCommerce 安装和设置

正常上传并激活插件。 要激活许可证，请转到仪表板菜单中的Divi Engine > BodyCommerce 许可证。

单击仪表板菜单中的BodyCommerce打开设置。 这些与您希望在 WooCommerce 中看到的设置类型相同。 在这里，您可以选择您的页面。 为这些页面创建布局后，请转到此设置页面并选择它们。 您还可以将页面设置为全宽，并为每个类别选择不同的产品模板。

Divi BodyCommerce 模块

Divi Builder 中添加了 53 个新模块。 这些是设计 WooCommerce 商店各个方面所需的所有元素，包括产品页面、帐户页面、存档页面、购物车等。它们采用颜色编码，因此您不会错过它们。 颜色实际上显示了模块的用途。 例如，红色模块用于产品页面。 有些使用渐变来显示它们可以处理两种类型的页面。 此图显示前 24 个模块。

以下是接下来的 29 个模块。 模块添加页面元素，例如向上销售、交叉销售、滑块、相关产品、轮播、画廊、共享、标签、面包屑等等。 循环创建产品列表以构建您的商店页面。 它们包括预期的内容、设计和高级选项卡和选项。

注意 – 如果页面未加载，请确保您没有在该页面上使用不是设计为在该页面上工作的模块。 一些模块是全局的，适用于任何页面，但其他模块则适用于特定类型的页面。 例如，您不能在循环页面上使用产品页面模块。

创建和分配页面

让我们看看如何创建页面并将其设置为该类别的默认值。 首先，在 Divi 库中创建布局。

接下来，转到仪表板菜单中的Divi Engine > BodyCommerce 。 选择您正在创建的页面类型的选项卡，然后为该页面选择布局。 您可以根据需要创建任意数量的布局，并将它们用于不同类型的页面和各个类别。

Divi BodyCommerce 示例

以下是我创建的几个示例。 这只是使用此插件可以完成的一小部分示例。

Divi BodyCommerce 商店页面

对于商店页面，我刚刚添加了一个产品循环存档页面模块。

这是具有默认设置的页面。 每个元素都可以使用 Divi Builder 进行调整。

这是在茶店布局内。 这是除限制外的默认设置。 我将其设置为显示 6 个产品。

您可以实时调整一些元素。

我为销售徽章和按钮添加了绿色背景，将布局设置为显示 6 列，为产品添加了框阴影，并添加了绿色覆盖层。 我对布局的选项数量印象深刻。

这是博客风格的布局。 如果您有更长的产品说明，那就太好了。

Divi BodyCommerce 产品页面

我在 Divi 库中创建了一个产品页面布局，并在 BodyCommerce 设置中选择它作为默认布局。 这只是了解模块可以做什么的基本布局。

这很简单，但它是一个很好的起点。 它显示了产品的标题、图库和滑块。

我随机添加了一些产品页面和全局模块。

它开始展示可以使用 BodyCommerce 完成的事情。 让我们在这个页面上做一些 Divi。

以下是 Divi Builder 的一些简单调整。 我所做的只是为部分和行添加背景，并调整按钮和搜索字段的边框。

在这一行中，我为相关产品添加了一个新行，并将搜索模块移至该行。 我还更改了产品的布局并将产品图片更改为图库。 我把它设置为垂直滚动。 如果 WooCommerce 演示中有更多该产品的图像，它们将显示在左侧的垂直列中。 这只是触及产品页面可以完成的调整级别的表面。

Divi BodyCommerce 购物车

我正在使用 Bakery 布局中的联系页面构建购物车页面。 我正在使用 Cart Products 和 Cart Totals 模块。 在 Visual Builder 中查看时，它们不会显示其内容，但您仍然可以在 Visual Builder 中进行构建。 这些模块提供了许多其他功能，例如交叉销售。

这是使用默认设置的购物车。 我在一个 2 列布局中有两个模块。

这是经过几次更改后的购物车页面。 我改为单列布局，在右侧和左侧添加一些间距，从布局中添加背景颜色，更改按钮颜色和文本颜色以匹配布局，并添加框阴影。

Divi BodyCommerce 文档

开发人员的网站以书面形式提供文档，并在 YouTube 上提供一系列视频。 我喜欢它包括两者。 Divi Engine 仪表板菜单中提供了链接。 您还可以通过单击开发人员网站上的任何功能来观看视频。 这会创建一个有趣的结构来查找您需要的视频。 这实际上是我找到我想看的视频的方式。

Divi BodyCommerce 价格

BodyCommerce 有三个许可证可供选择：

• 1 个站点 – 24 英镑
• 5 个站点 – 50 英镑
• 无限站点 – 96 英镑

您可以从开发商的网站购买 BodyCommerce。

结束的想法

Divi BodyCommerce 对 WooCommerce 产品和页面设计提供了令人印象深刻的控制。 我只是几乎没有触及它可以做什么。 您还可以自定义登录屏幕、徽章、帐户页面、感谢页面、表单、搜索页面等等。 它甚至包括用于购物车的电子邮件模板、自定义图标、色板和 AJAX。 我喜欢能够为每个类别创建不同的布局。

模块和布局易于使用。 我确实按照开发人员页面上的视频来创建我的示例。 这些视频很详细，易于理解。 我可以轻松创建我想要的任何类型的页面。

BodyCommerce 提供的工具和自定义功能比我目前见过的任何 WooCommerce/Divi 插件都多。 如果您将 WooCommerce 与 Divi 一起使用并且想要自定义您的 WooCommerce 页面，BodyCommerce 是一个简单的选择。

我们希望听到您的意见。 您是否为 Divi 和 WooCommerce 尝试过 BodyCommerce？ 请在评论中告诉我们您对此的看法。

精选图片来自 Letters-Shmetters / shutterstock.com