如何在您的在线商店中显示 WooCommerce 产品列表

WooCommerce 产品列表插件

在功能性、交互式表格布局中显示 WooCommerce 产品列表是一种很好的方式 在更小的空间内展示更多产品. 它还使您能够显示与每个产品相关的附加信息,例如其属性、尺寸、颜色和价格。

在本文中,我们将向您展示 如何创建和显示 WooCommerce 产品列表 带有产品数据并添加到购物车按钮。 阅读完毕后,您将能够以如下方式列出您的产品 积极吸引客户 增加销售额.

让我们开始吧。

我需要产品列表的插件吗?

第一步是确定您的 WooCommerce 商店是否需要产品列表功能。 最终,这完全取决于两件事:您的目标受众和您销售的产品类型。

以下是一些使用 WooCommerce 产品列表插件会很有用的场景:

  • 你有很多产品 如果您有很多产品,显示产品列表非常有效。 这是因为它允许您在每页列出更多产品。
  • 改善客户体验 客户无需滚动浏览大量页面即可查看您的所有产品。
  • 简化您的用户界面 产品列表本质上非常简单。 您可以在功能性和交互式表格中显示您的产品,而不是弄乱复杂的布局。

这些场景中的任何一个都适用于您吗? 继续阅读以了解如何使用 WooCommerce 产品表插件在 WordPress 网站上创建和显示产品列表。 在我们开始教程之前,让我们快速浏览一下插件提供的关键功能。


WooCommerce 产品表插件

WooCommerce 产品表使您能够以可搜索、可排序和可过滤的表布局显示产品列表。 以下是提供的一些出色功能:

  • 列出特定类别的产品、标签、自定义字段、自定义分类术语、ID 等……
  • 创建产品列表 仅产品名称。
  • 链接单个产品列表 到单个产品页面或禁用链接以创建只读列表。
  • 建立高级产品列表 专注于显示额外的产品信息。 开箱即用,它支持短(和长)描述、类别、标签、价格、尺寸、重量、评论、库存和属性。
  • 将您的产品列表转换为 功能性的 WooCommerce 订单。
  • 为了使您的产品列表对客户更加友好,您可以将它们与 WooCommerce Quick View Pro 插件一起使用,并将快速查看链接添加到列表中。

一些产品列表具有产品图像,而另一些则没有。 同样,这取决于您销售的产品类型。 许多人使用产品列表插件以仅信息格式(即没有图像)显示他们的产品。 您可以设置 WooCommerce 产品表插件以显示您喜欢的任何格式。

继续阅读以了解如何使用它来创建灵活的产品列表。


如何将 WooCommerce 产品表用于产品列表

假设您已经有一个设置了 WooCommerce 并添加了一些产品的 WordPress 网站,我们将向您展示如何为您的在线商店创建一个简单的 WooCommerce 产品列表。

  1. 获取 WooCommerce 产品表插件并从确认电子邮件中复制您的许可证密钥。
  2. 从 WordPress 管理面板,前往 插件 > 添新 并将插件的压缩文件上传到您的网站。 激活您网站上的插件。
  3. 导航 WooCommerce > 设置 > 产品 > 产品表 并输入您的许可证密钥。 您还可以根据您的偏好从该屏幕配置插件的设置。
激活的许可证密钥
  1. 转到您要添加 WooCommerce 产品列表的页面。 您可以创建新页面或编辑现有页面。
  2. 最后,在文本编辑器中添加以下短代码: [product_table]

这将使用插件的默认列在表格布局中列出您的 WooCommerce 产品。 它应该看起来像这样:

WooCommerce 产品表的默认表布局

在下一节中,我们将了解如何配置插件以获得不同的产品列表视图。

在 WooCommerce 产品表演示页面上查看不同类型的产品列表!

在产品列表页面上显示额外信息

您只需更改插件设置即可选择要包含在产品列表中的信息。 或者,如果您想创建多个产品表,每一个都不同,那么您可以改为编辑简码。 下面,我们将向您展示如何创建仅显示产品名称的产品列表。 我们还将引导您完成创建显示更多信息的表格布局的过程。

仅产品名称

如果要显示 WooCommerce 产品名称的简单列表,请添加 name 到插件设置页面上的列选项。 或者,像这样设置您的简码:

[product_table columns="name"]

结果,它在前端应该看起来像这样:

显示名称列的 WooCommerce 产品表

带有图片、名称、评论、价格和添加到购物车按钮的产品列表

您可以在 WooCommerce 产品列表中显示尽可能多的产品信息。 每条数据将被列为单独的列。

您所要做的就是将产品表设置页面上的列选项设置为: image,name,reviews,price,buy 用于指定您希望在前端显示哪些列的简码。 或者,下面给出的简码将在产品列表中显示您产品的图像、名称、评论、价格和添加到购物车按钮:

[product_table columns="image,name,reviews,price,buy"]

它在前端看起来像这样:

显示多列的 WooCommerce 产品表

查看可用的列选项以创建您自己的自定义产品列表!

选择显示哪些类别和标签

使用 WooCommerce 产品表插件,您可以选择要包含在产品列表中的分类法(类别、标签和自定义分类法)。 例如, 类别 选项允许您显示来自指定类别的产品。

更重要的是,您可以指定要在产品列表中显示的多个类别:

  • 使用逗号。 格式中的逗号分隔类别 类别=“类别1,类别2” 方法 类别 1 或类别 2 中的产品.
  • 使用加号 (+)。 格式中的加号分隔类别 类别=“类别1+类别2” 方法 类别 1 和类别 2 中的产品.

因此,如果您想显示类别中的产品(带有产品信息) 配件连帽衫,短代码看起来像这样:

[product_table category="hoodies,accessories"]

这是前端的预览:

WooCommerce 产品表显示来自指定类别的项目

您可以通过替换以相同的方式使用标签 类别标签. 有关更多选项,请查看我们关于使用 WooCommerce 产品表插件列出特定产品的教程。

选择是否显示添加到购物车按钮和变体

如果您希望创建简单的产品列表,那么您可能不想显示 添加到购物车 按钮。 您所要做的就是将其从您希望在 WooCommerce 产品列表中显示的以逗号分隔的列列表中删除。 例如:

[product_table columns="image,name,reviews,price,category"]

它可能看起来像这样:

没有添加到购物车按钮的 WooCommerce 产品表

如果您使用添加到购物车列,则可以选择两种不同的方式在产品列表中显示可变产品:

  • 将变体显示为下拉列表
  • 在单独的行上列出每个变体

要将变体显示为下拉列表,请在插件设置页面上选择此选项或使用简码 [product_table variations="dropdown"].

它看起来像这样:

WooCommerce 产品表插件,产品变体显示为下拉列表。

另一方面,如果您想在单独的行上列出每个变体,您可以使用该选项或简码 [product_table variations="separate"].

它看起来像这样:

WooCommerce 产品表插件,产品变体显示在单独的行上。

额外提示:为您的产品列表添加快速视图

有时,您需要一种方法来提供有关您的产品的额外信息,而无需将人们带到每个产品的单独页面。 您可能还有太多的产品选项或变体无法适应产品列表视图,并且需要另一种购买方式。

WooCommerce 产品表快速查看放大镜

您可以通过使用 WooCommerce 产品表及其姊妹插件 WooCommerce Quick View Pro 来实现这两个目标。 此插件添加快速查看按钮和/或产品列表链接。 客户可以单击此按钮在灯箱中查看更多信息。

根据您的设置方式,这可能包括灯箱中的完整产品图片库,或其他信息,如类别、元、价格、简短描述,甚至嵌入式音频或视频播放器。 您还可以包括添加到购物车信息,包括产品变体下拉列表。

快速查看是扩展您的 WooCommerce 产品列表的好方法,同时让客户保持在同一页面上。

获取 WooCommerce 快速查看


创建完美的 WooCommerce 产品列表

Product Table 插件非常适合在您的在线商店中以可搜索、可排序和可过滤的表格布局显示 WooCommerce 产品列表。 除此之外,它还使您可以灵活地将图像添加到您的列表中或使用仅信息格式。

查看  免费在线课程:如何将您辛苦赚来的流量转化为销售额(4 之 2)

让我们快速回顾一下使用 WooCommerce 产品表插件显示产品列表的不同方式:

  • 仅列出产品名称或在表格布局中显示其他产品信息。
  • 选择您要显示的类别、标签或自定义分类法。
  • 显示 添加到购物车 产品列表中的按钮以鼓励潜在客户购买。
  • 隐藏 添加到购物车 目录式产品列表的按钮。
  • 以行或下拉列表的形式单独显示可变产品。

您如何在 WooCommerce 网站上显示产品列表? 我们很乐意收到您的来信,所以请在下面发表评论让我们知道!

类似文章