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

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

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

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

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

WooCommerce 和 Elementor 组合

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

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

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

在 Elementor 中创建 WooCommerce 类别页面

如果您熟悉 WooCommerce，您就会知道产品类别对于组织您的产品以供客户正确展示和访问至关重要——他们越快找到他们想要的东西就越好。 但究竟什么是产品类别？

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

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

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

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

我们开始谈正事吧。
设置好您的产品后，您需要在发布之前执行以下操作，以便它出现在一个类别中：

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

点击发布，您的单品现在可以购买了！

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

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

预发布，选择确定存档显示位置的条件，就像您对单个产品模板所做的一样，然后发布。

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

Elementor pro 使您可以通过其一整套选项来设计快速清洁的产品类别；

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

WooCommerce 产品类别的布局设置

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

查询设置

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

风格设置

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

图像设置

• 边框类型：选择边框类型，从无、实心、双、点、虚线或凹槽中选择
• Border Radius：设置半径来控制边框的圆角
• 间距：调整图像与其数据之间的间距

标题设置

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

计数设置

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

结论

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