使用 Elementor 设计您的 WooCommerce 产品类别

Elementor 是一款出色的 WordPress 页面构建器，可通过添加新功能来增强默认 WordPress 构建器的功能。

如果您还记得的话，WordPress 的早期版本并不是特别用户友好。除了功能有限之外，它还要求您依赖预制的 WordPress 主题来为您的网站创建基本设计。然而对于很多用户来说，WordPress主题的基本功能还不够，需要安装plugin或者手动编辑主题代码。

• WooCommerce 和 Elementor 组合
• 在 Elementor 中创建类别页面
• 布局设置

Elementor 是一个类似于 WordPress 的基于块的构建器，但它比 WordPress 构建器先进得多，因为它更直观、响应更快且功能丰富。最重要的是，您无需编写一行代码即可创建一个出色的网站！

WooCommerce 和 Elementor 组合

WP-WooCommerce 和 Elementor 是当今使用最广泛的两个 WordPressplugin。它们各自提供的灵活性和功能数量简直是无价的。如果您正在运营电子商务商店，WooCommerce 是满足您几乎所有需求的最佳plugin。它是最全面的plugin，可满足几乎任何需求。

此外，Elementor 是市场上最有效的拖放式网站构建器之一。它使您能够快速设计、自定义和提供网站上的几乎任何页面。更重要的是，还提供了一些功能，例如创建大型菜单以及访问各种非常方便的附加组件和模板。在 WooCommerce 和 Elementor 的帮助下，您可以以尽可能少的费用和精力来设计和构建专业品质的商店和企业页面。在 Elementor 的帮助下，您可以完全自定义商店布局、产品网格和轮播，以及从各种精美的布局中进行选择。还可以设置和个性化您的结账和购物车页面，并将其与各种支付选项和功能集成，为您的客户提供更大的便利。

此外，您还可以为数字商品创建自定义页面和设计，包括用于运输和付款的自定义页面选项以及发布和预购买页面等。所有这些都有助于使您公司的网站看起来既专业又用户友好。除了用户友好的号召性用语按钮、视差滑块以及许多其他功能之外，您还可以将 WooCommerce 功能集成到您的网站中。可用的机会数量几乎是无限的。现在，如果您有足够的信心，让我们引导您完成将计划付诸实施的过程。您可以执行多种操作来使您的商店页面更受欢迎，这些步骤的目标是帮助您为 WooCommerce 商店创建更受欢迎的商店页面。

在 Elementor 中创建 WooCommerce 类别页面

如果您熟悉 WooCommerce，您就会知道产品类别对于组织产品以便客户正确展示和访问至关重要 - 他们越快找到所需的产品就越好。但产品类别到底是什么？

客户花费大量时间在您的商店页面上浏览您的产品，因此他们必须获得积极的体验。没有什么比必须浏览数十个页面才能查看商店网站上的产品更令人沮丧的了。

因此，分类对于为客户提供更好的购物体验至关重要。如果有一个针对所有类型商品（例如衣服或鞋子）的精心布置和组织的区域，顾客会发现更容易对自己的偏好进行排序和筛选。添加潜在客户生成元素，例如号召性用语按钮、特色产品部分、销售或优惠弹出窗口以及其他类似组件，可以使其对访问者更具吸引力。

如果您拥有 WooCommerce 商店并想要对其进行改造，那么本教程正是您入门所需要的。

许多 WooCommerce 主题都包含产品类别的默认布局，这可能最适合也可能不适合您的业务需求。尽管这些默认设置可能包含一些有用的功能，但它们不能经常被自定义。

让我们言归正传吧。
设置产品后，您需要在发布之前执行以下操作，以便它出现在类别中：

您将设置决定产品模板在此阶段出现的位置的条件。当您使用模板时，它将自动应用于您网站上的所有产品页面。您还可以将搜索范围缩小到特定的产品类别。

单击“发布”，您的单个产品现在可供购买！

我们还没有完成。我们刚刚所做的还不足以让类别在我们的网站上生效；为了让类别出现在我们网站的所有或某些页面上，我们仍然需要设置一些东西。
要完成该任务，请创建将影响所有产品的产品目录页面或将影响特定产品类别的目录页面。为此，首先返回 Elementor > 我的模板并创建产品存档模板。然后选择现有模板或创建新模板。
通过将存档产品小部件和存档标题小部件添加到您的页面来自定义它们的外观。

使用页面之间的复制样式功能对其进行自定义，以匹配您已为单个产品模板创建的设计，然后保存更改。返回产品页面并从下拉菜单中选择复制。返回存档产品后，右键单击“粘贴样式”。
从存档产品设置的查询 > 来源下拉菜单中选择最新产品。然后从产品类别下拉菜单中选择戒指。只有环类别才会以这种方式显示。
如果您有特定类别的一长串产品，则应该打开分页。
您可以通过选择样式选项卡来自定义列和行之间的距离。更改设计的颜色、字体和其他方面。

预发布，选择决定存档将出现在何处的条件，就像对单个产品模板所做的那样，然后发布。

点击“发布”后，您的存档页面就会上线。

Elementor pro 让您可以通过其丰富的选项来设计快速清洁的产品类别；

您可以使用 Elementor Pro 上的可用选项执行以下操作：

WooCommerce 产品类别的布局设置

• 列数：设置要显示的确切列数，从 1 到 12
• 类别计数：选择要显示的类别数量

查询设置

• 来源：选择要显示类别的来源，可以从“全部”、“手动选择”、“按父类别”或“当前子类别”中进行选择。如果选择“手动选择”，请手动选择要显示的类别。如果选择“按父级”，请从“仅顶级”中选择，或从下拉列表中选择单个类别。
• 隐藏空：对于其中没有产品的类别设置为是
• 排序依据：设置类别的显示顺序。选项包括名称、别名、描述或计数
• 顺序：选择以 ASC 或 DESC（升序或降序）顺序显示类别

风格设置

• 列间隙：设置列之间的精确间隙
• 行间隙：设置行之间的精确间隙
• 对齐：将产品数据左对齐、右对齐或居中对齐

图像设置

• 边框类型：选择边框类型，可以选择无、实线、双线、点线、虚线或凹槽
• 边框半径：设置半径来控制边框的角圆度
• 间距：调整图像及其数据之间的空间量

标题设置

• 颜色：选择标题颜色
• 版式：设置标题文本的版式选项

计数设置

• 颜色：选择计数的颜色
• 版式： 设置计数的排版选项

结论

Elementor 中的 WooCommerce Builder 为您提供以可视方式创建和微调产品页面所需的设计灵活性。从想法到实施所需的时间, 并完全 由于节省了您的时间，功能性在线 WooCommerce 商店显着减少。 总体而言，使用 Elementor 自定义您的 WooCommerce 商店页面可能会显着影响您网站的整体性能。通过以尽可能最好的方式组织和展示您的产品以供客户查看和购买，您可以帮助或阻碍销售。将通过本指南中的步骤演示如何在 Elementor 中设置和自定义 WooCommerce 商店页面。但是，请记住，就问题的范围而言，这只是冰山一角。此基本演示介绍了如何使用 Elementor 为您的商店创建理想的商店页面。以此为起点并进行尝试，以充分利用这个出色的页面构建器