如何在 Divi 中自定义 WooCommerce 产品页面

您是否使用 Divi 并想编辑您的产品页面以提高转化率？ 你来对地方了！ 在本指南中，我们将向您展示在 Divi 中自定义 WooCommerce 产品页面的不同方法。

WooCommerce 是目前最好的电子商务工具。 正确的插件和优化的 WordPress 主题是拥有成功 WooCommerce 商店的第一步。 但这还不足以拥有成功的企业。 要将您的商店提升到一个新的水平，您应该自定义最重要的部分。 我们已经了解了如何编辑商店页面和结帐页面，所以今天我们将向您展示如何在 Divi 中自定义 WooCommerce 产品页面。

为什么要自定义 WooCommerce 产品页面？

产品页面是您展示您在商店中销售的商品的地方。 它可以成就或破坏您的业务，因此您必须花时间对其进行优化以提高转化率。

默认情况下，WooCommerce 插件带有自定义产品页面模板。 因此，无论您是使用像 GeneratePress 这样的简单主题还是像 Avada 这样复杂的主题，产品页面的元素和设计都是相同的。 这就是为什么如果你想给你的客户留下印象，你应该自定义默认的 WooCommerce 产品页面。

更改产品页面的颜色和元素是一个好的开始，但您可以做的还有很多。 一种选择是使用自定义设计创建新的产品页面模板。 使用一点 PHP、HTML 和 CSS，您可以完全重新设计您的产品页面。 但是，如果您使用 Divi，则有更好的选择。

Divi 主题带有自己的自定义页面构建器，称为Divi Builder 。 它允许您轻松自定义 WooCommerce 产品页面和网站的每一寸，而无需编写任何代码。 让我们仔细看看如何做到这一点。

如何在 Divi 中自定义 WooCommerce 产品页面

对于此演示，我们将使用Divi Builder插件对我们的产品页面进行所有更改。 在开始之前，请确保您的站点上安装了 Divi 和 Divi Builder。

启用可视化编辑器

要开始使用 Divi Builder 在 Divi 中自定义您的 WooCommerce 产品页面，请打开您要编辑的任何产品页面。 页面打开后，您将在管理栏上看到一个名为“启用可视化编辑器”的按钮。 单击它以打开Divi Builder 。

现在您已经启用了 Divi 的可视化编辑器，您将能够选择该页面上的任何模块并进行编辑。 要自定义您当前的模板，您可以简单地编辑现有模块或添加新模块。 在模块部分，您将看到基于 WooCommerce 的模块，例如：

• 添加到购物车
• 附加信息
• 面包屑
• 购物车通知
• 描述
• 画廊
• 图片
• 元
• 价格
• 评分
• 相关产品
• 评论
• 库存
• 标签
• 标题
• 追加销售

您可以将这些模块中的任何一个添加到您的页面，只需单击它就可以使其更加用户友好。 最重要的是，最新版本的 Divi 构建器与 WooCommerce 配合得非常好，因此您可以轻松自定义任何模块。 让我们看一下您可以编辑的一些内容。

1. 显示或隐藏评论

让我们从简单的事情开始。 正如您在上面看到的，您可以轻松地显示或隐藏星级功能并关闭客户评论计数。 只需单击评论元素，然后按设置图标。 然后转到元素部分，您可以选择显示或隐藏星级和客户评论计数。

为了在您的在线客户之间建立信任，我们建议您在产品页面上同时显示星级和评论。

2.图库修改

一张照片值一千字，这已经不是什么秘密了。 这就是为什么要提高转化率，在产品页面中添加产品库是个好主意。 WooCommerce 默认包含此功能，因此您只需将图像上传到产品页面或从媒体页面中选择它们。

使用图像更新产品页面后，它将如下所示：

如果由于某种原因您只想显示每个产品的一张图片，您可以使用 Divi Builder 隐藏任何产品的图库。 只需单击图库，按设置图标，转到Elements ，您就可以选择禁用图库。

此外，您可以隐藏特色图片和销售徽章。 考虑到图片在销售时的重要性，我们建议您为每个产品添加至少 3-4 张图片。

3. 特色图片修改

在 Divi 中自定义 WooCommerce 产品页面的另一种有趣方法是编辑特色图像。 第一印象很重要，因此您应该为您的产品选择有吸引力的特征图像。 此图像也将在商店存档页面上可见。

当您使用 Divi 构建器打开特色图像选项时，您将能够更改特色图像和销售徽章。

正如我们之前提到的，我们建议您展示有吸引力的特色图片，因为它们会对您的转化率产生很大影响。

4.加入购物车按钮修改

要将产品添加到购物车，用户需要单击“添加到购物车”按钮。 WooCommerce 默认带有一个带有“添加到购物车”按钮的数量字段，因此您无需手动创建按钮。 在本节中，我们将向您展示如何使用 Divi 构建器修改“添加到购物车”按钮。

在元素部分下，您将看到两个主要选项。

• 数量字段
• 库存

如果您想让用户选择产品数量，请保留数量字段。 但是，例如，如果您销售在线课程，您可能希望禁用数量选项以消除产品页面中的噪音。

如您所见，一旦我们关闭数量字段，该字段就会消失。 在此产品页面上，我们没有查看库存选项的选项，但如果您在您的网站上显示库存，您可以以相同的方式启用或禁用它。

5. 对相关产品应用更改

向购物者展示相关产品是增加销售额的好方法。 通常，WooCommerce 默认根据项目的主要类别显示相关产品。 但是，如果您的主题或模板不显示相关产品，我们可以为您提供解决方案。 让我们看看如何自定义产品页面并使用 Divi 添加包含相关元素的新行。

首先，在页面中添加一个新行。 对于本教程，我们将添加一行，但您可以选择更适合您商店的样式。

之后，将 WooCommerce 相关产品模块添加到行中，如下所示。

您将看到相关的产品部分将添加到页面中。 然后，您可以自定义布局和颜色。

如果您没有展示相关产品，我们建议您尝试一下。 它们易于设置，可以帮助您提高销售额。

6.添加一个切换

切换是在产品页面上显示信息同时保持清洁的绝佳方式。 在 Divi 中，您可以使用Toggle 模块添加切换。 在本节中，我们将展示如何在产品描述下方添加切换模块。

让我们首先将鼠标悬停在产品描述上并单击+ 按钮。 然后，在搜索栏中查找 Toggle 并打开切换模块。

要添加切换，您需要两个主要的东西。

• 标题
• 身体

对于此演示，我们将使用产品名称作为切换标题，使用产品描述作为切换主体。 为此，只需单击右侧的数据库图标，您将在数据库中看到不同类型的内容。 对于标题，我们将选择产品/存档标题作为标题，但您可以选择最符合您需求的内容类型。

现在让我们对身体做同样的事情。 按数据库图标并从菜单中选择产品描述选项。

保存后，您将在产品页面上看到一个简单的切换模块，用户可以按下该模块来查看有关该产品的更多信息。

Divi 还允许您添加其他自定义元素，例如标题和描述以及字体、颜色等。 我们建议您使用切换按钮来玩并自定义您的产品页面。

WooCommerce 产品页面专业提示

在结束本指南之前，我们为您提供了一个快速提示。

定期更新主题和插件

为确保您始终可以访问 Divi 提供的最新功能，我们强烈建议您将 Divi 主题、Divi 构建器插件和 WordPress 核心更新到可用的最新稳定版本。

最简单的方法是从 Divi 主题面板打开自动更新。

您需要输入的只是优雅主题用户名和 API 密钥，您可以在优雅主题帐户的仪表板中找到。 输入这些内容后，保存更改，您将收到自动更新。

全站使用

使用新的 Divi Builder 模块，您将能够添加部分并自定义您的任何页面或帖子。 您需要做的就是启用可视化编辑器，添加您想要的元素，然后选择您想要使用的模块。 例如，如果您正在为您的产品撰写自定义评论，请考虑将添加到购物车按钮添加到评论帖子中，以便用户可以立即访问它。

奖励：编辑 WooCommerce 产品页面的其他方法

如果您正在寻找自定义产品页面的其他方法，请查看本指南，您将在其中了解如何使用插件、页面构建器和代码片段来编辑您的产品页面。

结论

总之，使用 Divi 自定义 WooCommerce 产品页面可以帮助您提高销售额并提高转化率。 好消息是，您无需编写任何代码即可完成此操作。

使用 Divi Builder，您可以轻松地编辑商店中的产品页面，而无需任何额外的页面构建器插件。 在本指南中，我们向您展示了如何显示或隐藏评论、特色图片和图片库，以及如何自定义添加到购物车按钮和相关产品部分。 这些只是您可以做的一些事情，因此我们鼓励您使用 Divi Builder 并进行其他修改。

即使您没有编码技能，拖放页面构建体验也将帮助您轻松自定义商店的每一寸。

您使用 Divi 对您的商店进行了哪些更改？ 您在学习我们的教程后有任何问题吗？ 在下面的评论部分让我们知道！