如何创建 WooCommerce 产品灯箱
改善在线商店的界面和用户流程是提高转化率的最简单方法之一。 这样想:当客户登陆您的网站时,您希望他们能够尽快找到他们正在寻找的产品。 对?
使用 WooCommerce 产品灯箱插件,您可以让访问者更轻松地了解您的产品、选择可用选项并将其添加到他们的购物车中。 您可以使用 WooCommerce Quick View Pro 插件做到这一点 – 以及更多! 这是让客户在灯箱视图中打开产品图片、画廊、详细信息和购买选项的最简单方法。
在本文中,我将向您展示如何使用 WooCommerce 产品灯箱插件在您的 WooCommerce 商店中实现快速查看功能。 我还将解释如何更进一步并在表格布局中显示产品。 当您阅读完本文时,您将清楚地了解如何让购物者在灯箱快速查看框中打开产品。
让我们开始吧!
为什么需要 WooCommerce 产品灯箱插件
如果你有一个 WooCommerce 通常情况下,了解每种产品的更多信息的唯一方法是访问该产品的单独页面。 在您的在线商店上安装 WooCommerce 产品灯箱插件后,您可以选择:
- 让客户在灯箱中打开产品图片(包括画廊)和产品详细信息。
- 允许客户选择可用的产品选项并将产品添加到他们的购物车。
快速查看灯箱可以配置为显示如下信息:
- 产品图片。
- 完整的产品库(如果有)。
- 简短的产品描述。
- 产品变体和属性。
- 数量选择器。
- 添加到购物车按钮。
- 其他产品信息,包括价格、评论、类别、标签和 SKU。
既然我们已经清楚地了解 为什么 您可能想在您的在线商店中使用 WooCommerce 产品灯箱插件,让我们看看 WooCommerce Quick View Pro 插件如何让您做到这一点。
介绍 WooCommerce Quick View Pro 插件
WooCommerce Quick View Pro 是一个产品灯箱插件,可以轻松添加 快速浏览 任何由 Woo 驱动的商店的功能。
您可以使用它来添加 快速浏览 按钮直接连接到您的主商店页面或类别页面。 该插件还与 WooCommerce 产品表无缝集成,用于在表格布局中最佳呈现的产品 – 稍后会详细介绍。
使用 WooCommerce Quick View Pro 插件,您可以:
- 让客户在灯箱中打开产品当客户点击产品或 快速浏览 按钮,它将启动一个包含产品图像的快速查看灯箱。 然后,客户可以将鼠标悬停在图像上以获得平滑的缩放效果。
- 在灯箱中显示整个产品库您还可以选择在灯箱中显示整个产品库。 客户可以在图库中的不同图像之间滑动,并使用图像缩放效果查看它们。
- 在灯箱中显示产品详细信息和购买选项 该插件还使在线商店所有者可以选择在快速查看灯箱中显示产品详细信息(例如产品描述、价格和评论)以及购买选项(例如数量选择器和 添加到购物车 按钮)。
WC Quick View Pro 充当 WooCommerce 产品灯箱插件,允许客户在灯箱中打开产品。
有关如何在您自己的在线商店中使用 WooCommerce 产品灯箱插件的更多想法,请务必查看一些示例用例!
如何使用 WooCommerce Quick View Pro 创建 WooCommerce 产品灯箱
在本节中,我将向您展示如何使用 WooCommerce Quick View Pro 插件让客户:
- 在产品灯箱中打开图像(包括完整的照片库)。
- 在灯箱中查看产品详细信息和购买选项。
出于本教程的目的,我假设您已经拥有一个由 Woo 驱动的在线商店,其中添加了一些产品。
步骤#1:安装并激活 WooCommerce Quick View Pro
您需要做的第一件事是获取 WooCommerce Quick View Pro 插件并将其安装并激活到您的 WP 网站。 完成后,您需要激活插件许可证密钥。 就是这样:
前往 WooCommerce -> 设置 -> 产品 -> 快速浏览 从管理面板中找到 注册码 选项。

输入您的许可证密钥(您在购买时在电子邮件中收到)并单击 保存更改 按钮继续。
默认情况下,插件添加 快速浏览 在线商店主商店页面和类别页面的按钮。 这是它的外观示例:
您会注意到该插件在灯箱视图中显示产品的描述、图片库、价格、评论和元数据。
接下来,我将向您展示如何自定义 WooCommerce 产品灯箱中显示的内容。
第 2 步:选择客户打开 WooCommerce 产品灯箱的方式
导航 WooCommerce -> 设置 -> 产品 -> 快速浏览 从 WP 仪表板向下滚动直到到达 选项 部分。

您可以选择让客户通过以下方式打开 WooCommerce 产品灯箱:
- 使用 快速浏览 每个产品正下方的按钮。
- 单击产品的名称或图像。
如果您决定使用第一个选项(即使用 快速浏览 按钮),您还可以更改按钮文本并打开或关闭按钮图标。
专家提示: 默认情况下,单击产品名称或图像会将客户引导至单个产品页面。 如果您想禁用此选项,请确保选中从产品名称/图像打开复选框。
第 3 步:在产品灯箱中显示产品图片(和完整的产品图库)
WooCommerce Quick View Pro 插件可让您选择要在产品灯箱中显示的信息。 首先,我将向您展示如何在 WooCommerce 产品灯箱中显示产品图像(以及完整的产品库)的控件。
开始使用 快速查看内容 选项来决定您是否希望仅图像、仅产品详细信息或图像和产品详细信息都显示在产品灯箱中。

如果你决定去 仅图像,您的 WooCommerce 产品灯箱可能看起来像这样:
但是,如果您想同时显示两张图片(带有完整图库) 和 产品详情,请务必选择 图片和产品详细信息 下拉菜单中的选项。
步骤#4:选择要在 WooCommerce 产品灯箱中显示的产品详细信息
如果你决定去 图片和产品详细信息 步骤#3中的选项,您可以使用 产品详情 用于选择在快速查看灯箱中显示哪些产品详细信息的选项。 您可以选择的可用选项包括:
- 评论
- 价格
- 简短的介绍
- 添加到购物车 按钮
- 元信息(例如类别和 SKU)
例如,如果您只想显示产品的评论和价格,您的 WooCommerce 产品灯箱可能如下所示:
如果您想让客户能够直接从快速查看灯箱将产品添加到他们的购物车,您可以选择 显示加入购物车按钮 选项。 它看起来像这样:
将 WooCommerce Quick View Pro 与产品表一起使用
WooCommerce Quick View Pro 插件与 WooCommerce 产品表无缝集成。 这使您可以在交互式表格布局中列出产品 快速浏览 纽扣。
获取 WooCommerce 产品表
每当客户浏览您的产品列表时,他们将能够直接从表格中打开 WooCommerce 产品灯箱中的产品图像(和完整的产品库)。
根据您的配置设置,客户可以通过单击打开产品灯箱 快速浏览 按钮或单击产品名称(或图像)。
当两个插件都安装并激活后,你会看到一个 快速查看专业版 选项添加到 WooCommerce 产品表设置屏幕。 通过勾选 产品链接 复选框,出现在表格布局中的所有产品链接都将打开产品灯箱,而不是将客户定向到单个产品页面。
这意味着客户可以:
- 点击产品名称(或图片)或 快速浏览 按钮打开产品灯箱。
- 在灯箱中查看产品详细信息(例如评论、价格和元数据),而无需导航到单个产品页面。
- 直接从产品灯箱将产品添加到购物车。
该插件用产品灯箱替换单个产品页面的链接。 因此,客户可以直接从表中获取信息。 这比必须导航到单个产品页面要好得多。
从哪里获取插件
将 WooCommerce 产品灯箱视图添加到您的在线商店是让客户:
- 查看产品图片和画廊,
- 产品详情,以及
- 购买选项
…无需他们访问单个产品页面。
使用 WooCommerce Quick View Pro,您只需安装插件即可将此功能添加到您的主商店页面和类别页面。 如果您使用 WooCommerce 产品表创建了产品列表,您可以在几分钟内将灵活的产品快速查看框添加到表中。
您对如何在您的在线商店中使用 WooCommerce 产品灯箱插件有任何疑问吗? 我们很乐意提供帮助,因此请在下面的评论中告诉我们!