使用 Elementor 构建和设计令人惊叹的 WooCommerce 产品页面

您必须修改您的产品页面以将您的电子商务商店与竞争对手区分开来，并为您的客户提供独特的体验。 此外，在美学上个性化您的产品页面的选项对于在整个在线商店中保持一致的视觉设计至关重要。

Elementor 是市场上领先的 WordPress 网站建设者之一，但您是否也知道您可以使用它建立 WooCommerce 商店？

许多内置的 Elementor WooCommerce 模块允许您使用 Elementor 构建器插入 WooCommerce 内容或功能块或设置它们的样式。 非常棒，对吧？

过去，WooCommerce 的样式和自定义每次微小更改都需要 PHP 和 CSS，但随着 Elementor 等工具的改进和变得更加复杂，越来越多的选项可用于控制商店的外观和运作方式。

让我们开始吧。

• 创建 Elementor 模板
• 构建 Elementor 产品图片或图库
• WooCommerce 产品名称、价格和添加到购物车
• 设置 Elementor 产品选项卡
• Elementor 产品简介
• Elementor 和 WooCommerce 产品追加销售
• 结论 – Elementor 产品页面构建器

创建 Elementor 模板

该过程的第一步是通过导航到 WordPress 仪表板中的模板来构建新的 Elementor 模板。 单击“新建”，然后选择单个产品作为您要创建的模板。

当我们从头开始开发这个模板时，不需要放置任何块； 退出下一个框，直到您到达新页面的常用 Elementor 构建器屏幕。

构建 Elementor 产品图片或图库

每个 WooCommerce 产品都有一个产品图片或图片库，向客户展示产品的照片。 Elementor 提供了一个内置的 Product Images 模块，允许我们将其插入到我们的模板中。

创建一个简单的 2 列行并在左列中输入 Product Images 模块； 这看起来很实用并且可以完成工作，但是让我们自定义销售徽章以匹配本文使用的 Elementor Hello 主题。 为此，我们需要应用一小行自定义 CSS，可以通过前往 Advanced > Custom CSS 并粘贴以下代码来引入。

选择器 .onsale { \sbackground-color: #cc3366 ; \s}

WooCommerce产品名称、价格和添加到购物车

我们将在右侧栏中添加产品标题、产品价格和添加到购物车的 Elementor 模块。

在 Elementor 构造函数中搜索这三个模块，然后将它们拖放以按上述顺序排列； 这是功能齐全的，但我们希望自定义它以匹配上一节 Hello Elementor 主题的样式。 使用 Elementor 对模块进行样式设置很容易，您只需单击模块，编辑器就会打开左侧的样式选项。

这些模块的内容非常好。 因此，我们将在“样式”选项卡下工作。 首先，让我们更新产品标题的字体和颜色以匹配 Hello Elementor 主题中使用的字体和颜色。

然后，我们需要通过单击每个模块并修改文本颜色对 Product Price 和 Add To Basket 模块执行相同的操作。 对于产品价格，我将使用深灰色与标题形成对比，因此如果您正在关注，请输入此十六进制代码 – #54595f

接下来，在添加到购物车模块上，我们将更新一些内容。 按钮的背景颜色和按钮的边框半径使用以下设置：

• 将内容设置为“添加到购物车”。
• 将背景颜色设置为“#cc3366”
• 将边框半径设置为 0

我确实将数量选择器的边框半径更改为 0，您可以在数量的样式选项卡中执行此操作。

设置 Elementor 产品选项卡

每个产品都必须显示一些基本信息，如产品描述和评论（如果有）； 这通常通过产品选项卡处理。

请在顶部下方创建一个新行，然后将产品数据选项卡模块从 Elementor 构建器拖到该行中以将其插入。 这里不需要太多样式，因为它继承了 Hello Elementor 主题的一些样式。 但是，让我们修改评论提交按钮的样式。

为此，我们将再次需要一些自定义 CSS。 开始编辑产品数据选项卡，然后单击高级选项卡并向下滚动到自定义 CSS。 输入下面的CSS，你可以根据你的设计调整颜色。

.woocommerce #review form #reply .form-submit input { background-color: #cc3366; 颜色：#fff; 边界半径：0px； }

Elementor产品简介

好的，到目前为止，我们有一个体面的、外观简单的设计，但它看起来有点稀疏。 将产品简短描述模块添加到顶部可以帮助弥补这一点并添加更多上下文。

请搜索 WooCommerce 简短描述模块，然后将其拖放到产品价格下方和添加到购物车模块上方。

这里还不需要样式，因为它继承了 Hello Elementor 的样式。

Elementor 和 WooCommerce产品追加销售

增加您的平均购物篮价值对于每个 WooCommerce 网站都至关重要，这就是为什么 Elementor 包含一个产品追加销售模块让您轻松地在您的商店中集成定制的原因。

请在 Elementor 构建器中搜索产品追加销售模块，并将其插入产品数据选项卡后面的新行中。

如您所见，这需要进行一些调整以补充我们风格的其余部分。 开始修改模块并进行以下更改：

• 将标题颜色设置为 – #cc3366
• 将标题颜色设置为 – #cc3366
• 将价格颜色设置为 – #54595f
• 将按钮背景颜色设置为 – #cc3366
• 将按钮颜色设置为 – #fff
• 设置按钮边框半径 t0 – 0

成品将如上图所示。 如果您使用本指南作为模板的起点，您可以根据需要调整颜色十六进制代码。

完成后，您发布模板。 在下一个窗口中，您将看到问题“您想在哪里显示您的模板？”。 单击“添加条件”以确定何时应使用此模板。 您可以选择“所有产品”以在所有产品页面上使用该模板。 您也可以选择仅将此模板用于属于特定类别或具有与其关联的特定标签的产品。

结论 – Elementor产品页面构建器

某些用户在使用 Elementor 时可能难以显示他们的自定义设计设置，例如字体颜色和排版。 如果您使用可以控制商店外观的 WordPress 主题，您的 WooCommerce 商店的外观可能会受到影响。 如果您遇到此问题，请记住，您的文章在某些情况下可能会覆盖您的自定义页面设置。

您还可以选择一个空白页面并使用产品小部件从头开始创建一个完全自定义的外观。 使用一个空白页面，当它出现时关闭模板库弹出窗口并开始在新创建的页面上构建。 自定义的“添加到购物车”按钮、“产品价格”、“产品图片”和“产品标题和描述”只是您可以用来自定义产品页面的几个 WooCommerce 小部件。 您可以通过访问此页面查看当前可用的所有不同小部件。 如果您愿意，您可以在页面布局上的任何位置排列小部件，并自定义其样式以匹配您所需的外观。

您必须修改您的产品页面以将您的电子商务商店与竞争对手区分开来，并为您的客户提供独特的体验。 此外，在美学上个性化您的产品页面的选项对于在整个在线商店中保持一致的视觉设计至关重要。 Elementor 是用于自定义 WooCommerce 商店页面的绝佳工具，强烈推荐使用它。 除了易于使用之外，页面构建器还包括所有必要的小部件和样式选项，以帮助您创建自定义产品页面。 我们希望您发现本教程内容丰富，并为您提供了使用 Elementor 自定义 WooCommerce 产品和产品存档页面所需的信息。 您过去是否使用 Elementor 创建 WooCommerce 页面？ 欢迎您在评论部分分享您的想法。 我们很乐意看一看。