如何在您的在线商店中显示 WooCommerce 产品列表
在功能性、交互式表格布局中显示 WooCommerce 产品列表是一种很好的方式 在更小的空间内展示更多产品. 它还使您能够显示与每个产品相关的附加信息,例如其属性、尺寸、颜色和价格。
在本文中,我们将向您展示 如何创建和显示 WooCommerce 产品列表 带有产品数据并添加到购物车按钮。 阅读完毕后,您将能够以如下方式列出您的产品 积极吸引客户 和 增加销售额.
让我们开始吧。
我需要产品列表的插件吗?
第一步是确定您的 WooCommerce 商店是否需要产品列表功能。 最终,这完全取决于两件事:您的目标受众和您销售的产品类型。
以下是一些使用 WooCommerce 产品列表插件会很有用的场景:
- 你有很多产品 如果您有很多产品,显示产品列表非常有效。 这是因为它允许您在每页列出更多产品。
- 改善客户体验 客户无需滚动浏览大量页面即可查看您的所有产品。
- 简化您的用户界面 产品列表本质上非常简单。 您可以在功能性和交互式表格中显示您的产品,而不是弄乱复杂的布局。
这些场景中的任何一个都适用于您吗? 继续阅读以了解如何使用 WooCommerce 产品表插件在 WordPress 网站上创建和显示产品列表。 在我们开始教程之前,让我们快速浏览一下插件提供的关键功能。
WooCommerce 产品表插件
WooCommerce 产品表使您能够以可搜索、可排序和可过滤的表布局显示产品列表。 以下是提供的一些出色功能:
- 列出特定类别的产品、标签、自定义字段、自定义分类术语、ID 等……
- 创建产品列表 仅产品名称。
- 链接单个产品列表 到单个产品页面或禁用链接以创建只读列表。
- 建立高级产品列表 专注于显示额外的产品信息。 开箱即用,它支持短(和长)描述、类别、标签、价格、尺寸、重量、评论、库存和属性。
- 将您的产品列表转换为 功能性的 WooCommerce 订单。
- 为了使您的产品列表对客户更加友好,您可以将它们与 WooCommerce Quick View Pro 插件一起使用,并将快速查看链接添加到列表中。
一些产品列表具有产品图像,而另一些则没有。 同样,这取决于您销售的产品类型。 许多人使用产品列表插件以仅信息格式(即没有图像)显示他们的产品。 您可以设置 WooCommerce 产品表插件以显示您喜欢的任何格式。
继续阅读以了解如何使用它来创建灵活的产品列表。
如何将 WooCommerce 产品表用于产品列表
假设您已经有一个设置了 WooCommerce 并添加了一些产品的 WordPress 网站,我们将向您展示如何为您的在线商店创建一个简单的 WooCommerce 产品列表。
- 获取 WooCommerce 产品表插件并从确认电子邮件中复制您的许可证密钥。
- 从 WordPress 管理面板,前往 插件 > 添新 并将插件的压缩文件上传到您的网站。 激活您网站上的插件。
- 导航 WooCommerce > 设置 > 产品 > 产品表 并输入您的许可证密钥。 您还可以根据您的偏好从该屏幕配置插件的设置。

- 转到您要添加 WooCommerce 产品列表的页面。 您可以创建新页面或编辑现有页面。
- 最后,在文本编辑器中添加以下短代码:
[product_table]
这将使用插件的默认列在表格布局中列出您的 WooCommerce 产品。 它应该看起来像这样:
在下一节中,我们将了解如何配置插件以获得不同的产品列表视图。
在 WooCommerce 产品表演示页面上查看不同类型的产品列表!
在产品列表页面上显示额外信息
您只需更改插件设置即可选择要包含在产品列表中的信息。 或者,如果您想创建多个产品表,每一个都不同,那么您可以改为编辑简码。 下面,我们将向您展示如何创建仅显示产品名称的产品列表。 我们还将引导您完成创建显示更多信息的表格布局的过程。
仅产品名称
如果要显示 WooCommerce 产品名称的简单列表,请添加 name
到插件设置页面上的列选项。 或者,像这样设置您的简码:
[product_table columns="name"]
结果,它在前端应该看起来像这样:
带有图片、名称、评论、价格和添加到购物车按钮的产品列表
您可以在 WooCommerce 产品列表中显示尽可能多的产品信息。 每条数据将被列为单独的列。
您所要做的就是将产品表设置页面上的列选项设置为: image,name,reviews,price,buy
用于指定您希望在前端显示哪些列的简码。 或者,下面给出的简码将在产品列表中显示您产品的图像、名称、评论、价格和添加到购物车按钮:
[product_table columns="image,name,reviews,price,buy"]
它在前端看起来像这样:
查看可用的列选项以创建您自己的自定义产品列表!
选择显示哪些类别和标签
使用 WooCommerce 产品表插件,您可以选择要包含在产品列表中的分类法(类别、标签和自定义分类法)。 例如, 类别 选项允许您显示来自指定类别的产品。
更重要的是,您可以指定要在产品列表中显示的多个类别:
- 使用逗号。 格式中的逗号分隔类别 类别=“类别1,类别2” 方法 类别 1 或类别 2 中的产品.
- 使用加号 (+)。 格式中的加号分隔类别 类别=“类别1+类别2” 方法 类别 1 和类别 2 中的产品.
因此,如果您想显示类别中的产品(带有产品信息) 配件 和 连帽衫,短代码看起来像这样:
[product_table category="hoodies,accessories"]
这是前端的预览:
您可以通过替换以相同的方式使用标签 类别 和 标签. 有关更多选项,请查看我们关于使用 WooCommerce 产品表插件列出特定产品的教程。
选择是否显示添加到购物车按钮和变体
如果您希望创建简单的产品列表,那么您可能不想显示 添加到购物车 按钮。 您所要做的就是将其从您希望在 WooCommerce 产品列表中显示的以逗号分隔的列列表中删除。 例如:
[product_table columns="image,name,reviews,price,category"]
它可能看起来像这样:
如果您使用添加到购物车列,则可以选择两种不同的方式在产品列表中显示可变产品:
- 将变体显示为下拉列表
- 在单独的行上列出每个变体
要将变体显示为下拉列表,请在插件设置页面上选择此选项或使用简码 [product_table variations="dropdown"]
.
它看起来像这样:
另一方面,如果您想在单独的行上列出每个变体,您可以使用该选项或简码 [product_table variations="separate"]
.
它看起来像这样:
额外提示:为您的产品列表添加快速视图
有时,您需要一种方法来提供有关您的产品的额外信息,而无需将人们带到每个产品的单独页面。 您可能还有太多的产品选项或变体无法适应产品列表视图,并且需要另一种购买方式。
您可以通过使用 WooCommerce 产品表及其姊妹插件 WooCommerce Quick View Pro 来实现这两个目标。 此插件添加快速查看按钮和/或产品列表链接。 客户可以单击此按钮在灯箱中查看更多信息。
根据您的设置方式,这可能包括灯箱中的完整产品图片库,或其他信息,如类别、元、价格、简短描述,甚至嵌入式音频或视频播放器。 您还可以包括添加到购物车信息,包括产品变体下拉列表。
快速查看是扩展您的 WooCommerce 产品列表的好方法,同时让客户保持在同一页面上。
获取 WooCommerce 快速查看
创建完美的 WooCommerce 产品列表
Product Table 插件非常适合在您的在线商店中以可搜索、可排序和可过滤的表格布局显示 WooCommerce 产品列表。 除此之外,它还使您可以灵活地将图像添加到您的列表中或使用仅信息格式。
让我们快速回顾一下使用 WooCommerce 产品表插件显示产品列表的不同方式:
- 仅列出产品名称或在表格布局中显示其他产品信息。
- 选择您要显示的类别、标签或自定义分类法。
- 显示 添加到购物车 产品列表中的按钮以鼓励潜在客户购买。
- 隐藏 添加到购物车 目录式产品列表的按钮。
- 以行或下拉列表的形式单独显示可变产品。
您如何在 WooCommerce 网站上显示产品列表? 我们很乐意收到您的来信,所以请在下面发表评论让我们知道!