关于Divi 5的WooCommerce产品模块，您需要了解的一切

与WooCommerce的兼容性现已扩展到Divi 5，可让您完全控制产品页面，而不依赖WooCommerce的内置模板。新成立的WooCommerce产品模块可让您设计引人入胜的，用户友好的布局，可与您的品牌相匹配并帮助销售，同时利用Divi 5的所有功能，包括Flexbox，以构建具有现代布局控制的产品页面。

在这篇文章中，我们将介绍模块的关键功能，并向您展示如何将它们用于下一个Divi 5电子商务网站。让我们潜水。

什么是WooCommerce产品模块？

Woo产品模块是Divi 5中的专门内容元素，旨在自定义Woo-Power商店的产品和类别页面。这些模块替换了插件标准配置的WooCommerce模板，从而使您可以创建可自定义的布局。与这些传统模板不同，Divi 5的模块允许创造性自由，同时保持与WooCommerce的核心功能的兼容性。

Divi 5中的17个WooCommerce模块的发布标志着一个重要的里程碑。这些模块涵盖了所有产品和类别页面设计方面，不再处于传统模式，这意味着它们都针对Divi 5的现代体系结构进行了全面优化。通过这种向更有效的基础的过渡，Divi 5的性能更好，更可扩展，并且与WordPress的未来兼容。

剩下的8个Woo模块，专注于购物车和结帐页面，预计将很快推出。

Divi 5的WooCommerce产品模块的主要功能

让我们介绍一下WooCommerce产品模块已集成到Divi 5中，您可以期待的关键功能。

综合模块集

Divi 5的第一批WooCommerce产品模块包括旨在处理产品和类别页面设计特定方面的工具。这些模块是：

• woo面包屑：显示导航面包板小径，以帮助用户轻松浏览商店。
• woo注意：显示系统消息，例如购物车更新，错误或确认。
• WOO产品添加到购物车：通过可选数量控件呈现一个添加到购物车按钮。
• Woo产品描述：输出主要的长格式产品描述。
• Woo产品库：以网格或滑块格式显示其他产品图像。
• Woo产品图像：显示主要产品图像或图像画廊。
• Woo产品信息：显示产品详细信息，例如重量，尺寸或属性。
• Woo产品元：显示产品SKU，类别和标签。
• Woo产品价格：显示产品的价格，包括销售价格。
• Woo产品评级：显示平均星级评分和审查计数。
• Woo产品评论：允许客户查看和提交产品评论。
• Woo产品库存：表示产品可用性和库存水平。
• Woo产品选项卡：显示默认产品选项卡以进行描述，其他信息和评论。
• Woo产品标题：将产品的名称输出为可自定义的标题。
• Woo Product upsell：促进销售产品以鼓励高价值购买。
• Woo产品：为类别页面创建可自定义的产品网格。
• Woo相关产品：根据类别或标签显示相关产品。

这些模块一起提供了构建产品和类别页面所需的一切，从导航面包屑到动态产品显示。

创意自由

Divi 5的WooCommerce产品模块从标准WooCommerce模板的限制中免费用户。使用这些模块，您可以完全控制产品页面的布局，结构和设计，从而创建独特的体验。

这些模块支持动态内容，这意味着它们直接从WooCommerce中获取产品数据，从而确保价格，股票水平和描述的实时更新。这使您可以构建可以驱动参与度和转换的页面，而无需第三方插件或自定义代码。

自定义选项

每个模块都有广泛的设计设置，所有模块都可以在视觉构建器中进行管理。您可以自定义产品库，销售徽章，按钮等元素，以及用于排版，颜色，间距和动画的选项。

例如，您可以调整Woo产品库模块的布局以在滑块或网格中显示图像，样式woo产品添加到推车按钮具有自定义颜色和悬停效果，或调整Woo产品评分模块，以完美地与您的设计保持一致。

这些设置使您可以轻松创建凝聚力的商店页面。

主题构建器的动态模板

Divi 5的主题构建器使您可以通过允许您为产品和类别页面创建全球模板来拥抱WooCommerce产品模块的全部潜力。使用主题构建器，您可以设计一个用于商店中所有产品和类别的单个模板，以确保一致，凝聚力的外观。

循环构建器用于动态WooCommerce内容

Divi 5循环构建器提供了构建动态Woo内容的另一种方法。使用Loop Builder，您可以使用任何Divi元素来查询WooCommerce产品和设计灵活的产品循环，从而创建超出专用产品模块的固定结构的布局，列表和旋转木制。对于单产品布局，请使用Woo产品模块；对于产品收集和档案，请使用循环构建器。

如何使用Divi 5的WooCommerce产品模块

本节将使用新的WooCommerce产品模块在Divi 5的主题构建器中创建产品页面。

创建一个新的主题构建器模板

导航到WordPress仪表板中的Divi>主题构建器。单击+添加新模板。

出现对话框时，单击“构建新模板” 。

接下来，我们需要将模板分配给我们的产品。在产品下，选择所有产品来分配模板。

单击创建模板分配。

单击添加自定义车身。这将使我们能够构建产品页面模板的主体。

出现对话框时，请选择“构建自定义车身” 。

构建产品模板

当主题构建器启动时，您可以从头开始构建模板，选择预制布局或使用AI构建。我们将从头开始选择本教程的构建。

单击绿色 +图标以添加新行。

当选项出现时，选择两列行。您添加到任何Divi 5页或模板中的新行将使用Flebox。 Divi 5的Flexbox布局系统使您对产品页面的外观有更多的控制，包括更改WooCommerce产品模块在不同屏幕尺寸上堆叠的方式。

向下滚动以显示Woo产品模块选项。单击后，您将拥有17个Divi 5 Woo模块和8个旧模块（Divi 4）模块。

添加Woo产品图像模块

查找并选择Woo产品图像模块，然后将其添加到第一列。

默认情况下，在“内容”选项卡中的“产品”字段中选择此帖子。如果您想使用现有产品构建模板，请从下拉菜单中选择它。这是一种预览模板在创建模板时的好方法。切记在最终保存之前将其交换回此帖子。

扩展元素下拉菜单以显示设置。在这里，您可以控制模块中显示哪些图像，包括特色图像，画廊图像和销售徽章。

单击“设计”选项卡中的“图像下拉菜单”以显示设置。在这里，您可以强迫图像占据所有可用空间（强制全宽），添加边框，盒子阴影，调整间距或添加过滤器。

您还可以通过分配背景颜色，文字，边框等来设置销售徽章。

添加Woo产品标题模块

在第二列中，单击Woo产品模块，然后滚动以选择Woo产品标题模块。

使用“内容”选项卡的“产品”字段中的“下拉菜单”选择产品，然后预览模板中的外观。

接下来，导航到模块的设计选项卡并展开标题文本下拉菜单。在这里，您可以分配字体，并根据需要进行标题。

添加Woo产品价格模块

在产品标题下，单击以添加新模块。选择Woo产品模块并滚动以选择WOO产品价格模块。

在“设计”选项卡中，您可以设计产品价格的各个方面，包括文本，销售文本，新价格文本等。

添加Woo产品评级模块

接下来，我们将在WOO价格模块下添加Woo产品评级模块。

在元素下的“内容”选项卡中，您可以选择显示或隐藏星级评分和客户评论数量。

在“设计”选项卡中，布局下拉菜单使您可以选择如何显示星级评分。元素可以在线显示或堆叠。

其他样式选项包括为星星分配颜色，文本大小和字母间距以及评分文本的样式选项。

添加Woo产品描述模块

在Woo Star评级模块下，单击以添加新的Woo模块。这次，我们将选择Woo产品描述模块。在“内容”选项卡中，选择要显示的描述（描述或简短说明）。

在“设计”选项卡中，您可以使用字体，重量，样式，对齐，颜色，大小等选项为描述设计。

将Woo产品添加到购物车模块中

接下来，我们将添加Woo产品添加到购物车模块。它将使您的客户可以将产品添加到他们的购物车中，并选择分配给产品的任何变体。

“内容”选项卡中的元素可以切换，允许您显示或隐藏数量字段和可用库存。快速注意：要显示库存数量，必须检查WOO产品本身中的管理库存。

您可以在“设计”选项卡中对字段标签，文本，下拉菜单（用于变体）和与您的品牌匹配的按钮进行样式。

继续添加模块，例如Woo产品元模块以显示SKU数字和类别。

您还可以添加“ Woo产品”选项卡模块，以显示有关产品的描述，评论和其他信息。

为了获得最大范围，您可以在产品模板上显示一系列相关产品，以鼓励您的网站访问者探索商店中的其他产品，从而增加转换的机会。

保存模板

完成添加模块后，进行所需的任何其他更改，然后单击主题构建器右上角的“保存”按钮来保存模板。

接下来，单击“退出”按钮以返回主题构建器仪表板。

回到主题构建器仪表板中，单击“保存更改”以保存模板并将其应用于Woo产品。

如您所见，使用Divi 5的Woo产品模块创建产品模板是一个简单的过程。我们不会介绍本教程中的所有模块，但是使用所有模块，您可以创建令人印象深刻的产品或类别页面，以使访问者参与其中。

下载文件

免费下载

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

下载

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

Divi 5的WooCommerce集成的下一步是什么？

接下来的几周将发布第二批WooCommerce模块，重点关注购物车和结帐页面，并将其与WooCommerce结合在一起。这些添加将使用户能够完全自定义整个电子商务渠道，从产品浏览到结帐。 Divi 5 Public Beta将进一步完善这些功能，并结合用户反馈和其他错误修复，以确保稳定性。

除了WooCommerce的兼容性和集成之外，Divi 5还继续随着最新功能的发展而发展，例如用于创建动态产品滑块的组旋转木马模块，用于添加轻型动画的Lottie模块以及用于增强布局控制的新的Flexbox布局系统。这些添加补充了Woo模块，为电子商务网站提供了更具创造力的可能性。

立即尝试Divi 5的Woo产品模块

Divi 5的Woo产品模块使您可以以无与伦比的灵活性和创造力创建迷人的产品和类别页面。这些模块提供了创意自由，动态内容集成和性能的融合，所有这些都在直观的界面内。从可自定义的产品画廊到通过主题构建器的自定义布局，Divi 5使创建高转换商店页面变得容易。

您准备好潜入Divi 5吗？下载最新的Divi 5 Public Alpha来探索这些模块，并查看它们如何改变您的WooCommerce网站。我们很想听听您的想法。在评论中分享您的反馈，或在我们的社交媒体渠道上与我们联系。