如何创建 WooCommerce 灯箱
已发表: 2019-06-05消费者在网上购物时面临的最大障碍之一是快速查找产品信息。 事实上,根据 Forrester 的报告,如果无法快速找到问题的答案,45% 的美国在线成年人会放弃在线购物。
通过向您的在线商店添加具有快速查看功能的 WooCommerce 灯箱,您将能够创建流畅的用户流并为您的客户提供顺畅的在线购物体验。 换句话说,您的客户将能够找到他们需要的一切——产品、产品详细信息和定价信息——而无需点击进入单个产品页面。
在本文中,我们将深入探讨为什么您可能会考虑在您的在线商店中使用 WooCommerce 灯箱插件。 我们还将引导您完成分步教程,向您展示如何通过四个简单的步骤快速创建 WooCommerce 灯箱。
让我们开始吧!
为什么需要 WooCommerce 灯箱插件
作为 WooCommerce 店主,您可能已经知道客户必须访问各个产品页面才能了解有关每种产品的更多信息。 然而,这并不总能带来直观、用户友好的购物体验。
使用 WooCommerce 灯箱插件,您可以让客户:
- 在灯箱中查看产品图片、画廊和详细信息。
- 选择产品选项(例如变化和数量)并将它们添加到他们的购物车中。
最好的部分是他们可以直接从主商店页面或类别页面完成所有这些操作。 您可以选择包含产品图片或图库、变体和属性、数量选择器、添加到购物车按钮等信息,以及其他产品详细信息,例如价格、评论和类别。
与默认的 WooCommerce 用户流程相反,拥有一个还具有图库功能的 WooCommerce 灯箱插件可以让您改善客户的在线购物体验。 它可以更轻松地查看产品图片和画廊,并快速找到所有重要的 WooCommerce 产品详细信息。 这对于销售以图像为中心的产品(如衣服、珠宝、摄影或礼品)的在线商店特别有用。
以下是使用插件创建具有快速查看功能的灯箱的一些主要好处:
- 不需要编辑任何 php 文件。 安装并激活插件后,它会自动创建一个快速查看灯箱。 无需编辑functions.php文件。
- 使用 CSS 自定义样式。 您可以自定义灯箱以匹配您的品牌,而无需编辑 CSS 文件。
- 支持。 您还可以从插件开发人员那里获得客户支持,即 Barn2 Media。
如何使用 WooCommerce Quick View Pro 创建快速查看灯箱
以下是创建具有快速查看功能的 WooCommerce 灯箱所需的内容:
- 由 WooCommerce 提供支持的商店,其中添加了一些产品。
- WooCommerce Quick View Pro — 响应式 WooCommerce 灯箱插件。
步骤#1:安装并激活 WooCommerce Quick View Pro
购买 WooCommerce Quick View Pro 插件后,登录您的 WordPress 网站并安装并激活它。 接下来,从 WordPress 仪表板转到插件的设置页面( WooCommerce >设置>产品>快速查看)。
在许可证密钥选项中输入您在购买确认电子邮件中收到的许可证密钥。 单击屏幕底部的保存更改按钮以继续。
如果您访问在线商店的主商店页面,您会注意到快速查看按钮已直接添加到产品图片下方。 根据您使用的主题,它可能看起来像这样:
当您单击它时,它会启动一个 WooCommerce 灯箱,其中显示产品的图像、画廊、名称、价格、描述、SKU 和类别。
步骤 #2:选择客户如何启动 WooCommerce 灯箱
使用 WooCommerce Quick View Pro,您可以选择客户启动产品灯箱的方式。 再次前往WooCommerce >设置>产品>快速查看并找到选项部分。
您可以让客户通过以下任一方式启动灯箱:
- 在商店中显示快速查看按钮。 单击每个产品图像正下方的快速查看按钮。 您还可以更改按钮文本并选择显示/隐藏按钮图标。
- 通过单击商店中的产品名称或图像打开快速查看。 单击产品的名称或图像。
您可以选择启用其中一个选项或两者都启用! 同样重要的是要记住,默认情况下,单击产品名称或图像会将客户引导至单个产品页面。 通过单击商店中的产品名称或图像选项启用打开快速查看可让您禁用此选项。

步骤#3:在灯箱中显示产品图片(快速查看)
WooCommerce Quick View Pro 提供的简洁功能之一是它允许您选择要在灯箱中显示的内容。
- 以图像为中心的产品。 如果您销售以图片为中心的产品(如衣服、鞋子或珠宝首饰),您希望客户能够通过图片缩放在灯箱中查看产品图片和画廊。
- 具有规格和详细信息的产品。 如果您销售的是批发产品、计算机零件或音乐,您可能只想在灯箱中显示产品详细信息。
- 可定制的产品。 如果您要销售可定制的产品或具有变体的产品,您可能希望在灯箱中同时显示产品图片和详细信息。
在插件的设置屏幕中,找到Quick View display选项,然后决定是要在灯箱视图中显示Image only 、 Product details only还是Image and product details 。
例如,如果您决定仅显示产品详细信息,您的 WooCommerce 灯箱可能如下所示:
如果您决定在灯箱中显示图像,您还可以选择将它们显示为缩略图或项目符号。 如果您在Gallery 缩略图样式选项设置为Bullets的情况下同时显示图像和产品详细信息,那么您的 WooCommerce 灯箱可能会如下所示:
注意:如果要显示产品库,请确保从产品的编辑产品屏幕将图像添加到产品库。 您可以为每个要显示多个图像的 WooCommerce 产品执行此操作。
第 4 步:确定要显示的产品详细信息
如果您选择在 WooCommerce 灯箱中显示产品详细信息(或图像和产品详细信息),那么您还可以选择在快速查看灯箱中包含哪些产品详细信息。
在插件的设置页面中,您可以使用产品详细信息选项来勾选灯箱中显示的产品详细信息:
- 评论
- 价钱
- 简短的介绍
- 添加到购物车按钮
- 元信息(例如 SKU 和类别)
例如,如果您不想显示购买选项,只需取消选中“添加到购物车”按钮复选框即可。 您的 WooCommerce 灯箱可能看起来像这样:
结论
具有快速查看功能的 WooCommerce 灯箱允许客户:
- 快速找到他们正在寻找的产品详细信息
- 查看产品图片
- 选择变体
- 将产品添加到购物车
… 无需先访问单个产品页面。
WooCommerce Quick View Pro 允许用户将具有快速查看功能的灯箱添加到他们的主商店页面和类别页面。 它还可以轻松自定义灯箱的外观和感觉以及客户与它的交互方式。
您是否同意具有快速查看功能的 WooCommerce 灯箱可以改善客户的在线购物体验? 在下面的评论部分分享您的想法!