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

您必须修改您的产品页面，以使您的电子商务商店在竞争中脱颖而出，并为您的客户提供独特的体验。 此外，对产品页面进行美观个性化的选择对于在整个在线商店中保持一致的视觉设计至关重要。

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

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

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

让我们开始吧。

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

创建 Elementor 模板

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

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

构建 Elementor 产品图像或图库

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

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

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

WooCommerce产品标题、价格并添加到购物车

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

在 Elementor 构造函数中搜索这三个模块，然后拖放它们以按照上述顺序排列它们； 这是功能齐全的，但我们想要自定义它以匹配上面部分的 Hello Elementor 主题的样式。 使用 Elementor 设置模块样式很简单，您所需要做的就是单击模块，编辑器应该在左侧打开样式选项。

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

然后，我们需要通过单击每个模块并修改文本颜色，对“产品价格”和“添加到购物篮”模块执行相同的操作。 对于产品价格，我将使用深灰色与标题形成对比，因此如果您遵循以下步骤，请输入此十六进制代码 – #54595f

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

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

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

设置 Elementor 产品选项卡

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

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

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

.woocommerce #review form #reply .form-submit input { 背景颜色：#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 页面？ 欢迎您在评论区分享您的想法。 我们很乐意看一看。