如何在 WooCommerce 中创建产品图库滑块

woocommerce 产品库滑块

在 WooCommerce 中将产品图库滑块添加到您的产品页面是节省空间和提高可用性的好方法。 向您的产品图库添加滑块可让您的客户轻松滚动浏览产品图像,而不会感到不知所措。

但是有一个问题! 标准的 WooCommerce 设置不允许您在产品库中创建或添加滑块控件。

WooCommerce 产品库

标准 WooCommerce 产品库

换句话说,默认的 WooCommerce 设置仅堆叠缩略图图像,也不允许您滑过主产品图像。

如果您有多个产品图片,这可能看起来很混乱。 它还可以占用产品页面上的大量空间。 您可以用来销售产品的空间。

好消息 – 您可以在 WooCommerce 插件 WooThumbs 的帮助下将产品图库滑块添加到您的 WooCommerce 商店。 允许您将这些堆叠的缩略图变成一个滑块。

产品库滑块 woocommerce

使用 WooThumbs for WooCommerce 的产品库滑块控件

因此,在本文中,我们将解释如何通过几个步骤将产品库滑块添加到您的 WooCommerce 商店。 另外,我们将使用 WooThumbs for WooCommerce 立即完成它。

但在此之前,让我们找出为什么将产品库滑块添加到您的 WooCommerce 商店会使您受益。

在本节中,我们将概述为什么将产品库滑块添加到您的 WooCommerce 产品页面是有益的一些原因。 另外,我们将为您提供一些效果特别好的场景。

产品图库滑块可节省空间

您的 WooCommerce 商店可能有很多关于您的产品的信息。 但是为了让您的网站易于使用,您不希望创建一个包含太多图像的凌乱产品页面。

产品图库滑块将使您受益的原因之一是它可以容纳多个图像缩略图而不会占用太多空间。 含义 – 其他图像缩略图将被隐藏,除非客户单击滑块箭头。

画廊滑块 woocommerce

产品图库滑块减少了压倒性

视觉效果比文字更有吸引力。 根据 研究, 90% 留在客户大脑中的信息都是视觉效果。 但是,如果您有太多的图像或额外的变体图像要显示怎么办? 乍一看,您的客户会被额外的信息所淹没。

WooCommerce 产品库滑块可帮助您解决此问题。 它允许您添加任意数量的图像,但有一点不同。 它允许客户通过使用图库中主要产品图像上的滑块箭头来一张一张地滚动浏览产品图像。

所以现在我们知道了主要的好处,让我们看一些具体的例子,说明为什么使用像 WooThumbs 这样的产品画廊滑块效果很好。

场景#1:为了方便而增强用户体验

有时,在线购物的客户会搜索产品的详细信息。 例如,如果有人有兴趣购买运动鞋,他们可能想知道鞋底结构、鞋带的编织方式、鞋跟高度等。他们想一次一张地放大图片以便仔细查看。

WooThumbs 在这些情况下非常有用。 它具有可自定义的缩放功能,可提供产品图像的扩展视图,展示复杂而微小的细节。

场景#2:轻松展示可变产品

如果您的 WooCommerce 商店中有可变产品,您可能需要为每个变体添加多个图像。 使用标准的 WooCommerce 设置,这是不可能的。

其他变体图像 woocommerce

WooThumbs 通过允许您添加任意数量的附加变体图像来解决此问题。 然后,这些图像将显示在产品页面上的产品图库滑块中。 然后,您的客户只需在图库中滑动即可找到他们喜欢的产品版本。

场景 #3:添加视频以便更好地理解

想象一下客户想要购买您的产品但不知道如何使用它的情况。 他们可能会对是否购买产品感到困惑。

视频甚至比图像更好。 它们传达了明确的信息,并且更具吸引力。 如果您销售独特或难以使用的产品,您可以在图库中添加视频教程,以使客户更容易理解过程。

您无法使用标准 WooCommerce 安装将视频添加到您的产品库。 但好消息是,使用 WooThumbs,您可以将高质量视频添加到您的产品库中。 上传您自己的或通过 YouTube 或 Vimeo 嵌入 – 就这么简单。

WooCommerce 视频库

所以现在我们知道了好处,让我们找出 WooThumbs 是什么以及我们如何将它添加到 WooCommerce。

WooCommerce 的 WooThumbs 是什么?

WooThumbs 通过允许您自定义产品库的几乎所有方面来改进产品库。 它还允许客户在图像中滑动,以获得最大的影响和用户友好的参与。

以下是 WooThumbs for WooCommerce 的一些主要功能:

  • 自定义图片库布局以适合您的特定产品和主题。
  • 启用滑动缩略图以方便浏览。
  • 多个缩放选项来展示细节。
  • 为您的产品变体添加无限的附加图像。
  • 具有高级缓存的超快加载时间可增强用户体验。
  • 仅显示所选变体的相关产品图像。
  • 将视频直接嵌入到产品库中以获得最大的影响并将它们托管在多个平台上。

woocommerce 顶部滑块

所以现在我们知道 WooCommerce 的 WooThumbs 是什么,让我们安装它并在我们在那里的时候添加产品库滑块。

对于本教程,我们假设您有一个 WooCommerce 网站,其中已经设置了产品。 您还需要购买 WooThumbs for WooCommerce 插件,您可以在此处找到该插件。

第 1 步:为 WooCommerce 安装 WooThumbs

从 Iconic 商店购买 WooThumbs for WooCommerce 后,请执行以下步骤。

  1. 转到插件 → 添加新 → 上传插件。
  2. 选择您下载、上传的 zip 文件,然后单击激活。
  3. 激活后,您需要输入许可证密钥。

安装 WooThumbs for WooCommerce 后,我们可以继续向您的产品库添加产品图像滑块。

步骤#2:启用上一个和下一个箭头

要允许上一个和下一个箭头出现在主产品图像上,您需要启用它。 为此,您需要执行以下操作。

  1. 在您的 WordPress 仪表板中,转到 WooCommerce → WooThumbs 并单击顶部的导航选项卡。
  2. 转到常规导航设置,然后在启用上一个/下一个箭头?旁边,将下拉菜单更改为是。
  3. 然后向下滚动到页面底部并单击蓝色的保存更改按钮。
启用 上一个 下一个

完成后,将启用主产品图像上的上一个和下一个箭头。

第 3 步:添加滑动缩略图

WooThumbs 中的缩略图类型设置允许您在滑动或堆叠缩略图之间进行选择。

滑动缩略图将在单行/列中显示所有缩略图。 如果您一次显示 4 个缩略图但产品有 6 个,您将能够使用内置滑块滚动到其他缩略图。

堆叠缩略图将一次显示所有缩略图并将它们堆叠成行。

因此,如果您想节省产品页面的空间,最好使用滑动缩略图选项。

要启用滑动缩略图,请执行以下步骤:

  1. 在您的 WordPress 仪表板中,转到 WooCommerce → WooThumbs 并单击顶部的导航选项卡。
缩略图设置
  1. 向下滚动到缩略图设置部分,然后在启用缩略图?旁边,将下拉菜单更改为是。
  2. 在缩略图类型旁边,将下拉列表更改为滑动缩略图。
  3. 然后,您可以通过更改“缩略图计数”部分中的数字来更改主图像下方显示的缩略图数量。
  4. 您还可以通过更改
  5. 启用缩略图控件? 下拉到是或否。
  6. 然后向下滚动到页面底部并单击蓝色的保存更改按钮。

完成后,您的产品图库滑块将启用。

产品库滑块 woocommerce

第 4 步(可选):更改图库滑块过渡效果

WooCommerce 的 WooThumbs 允许您在客户滚动浏览您的新产品图片库时更改显示给客户的效果。

只需对插件设置进行一些更改,您就可以在水平幻灯片、垂直幻灯片和淡入淡出之间进行选择。

要更改过渡效果,请执行以下步骤:

  1. 从您的 WordPress 仪表板,转到 WooCommerce → WooThumbs → Carousel。
轮播设置
  1. 在轮播设置部分,您会在模式旁边看到一个下拉菜单。 使用它来选择您喜欢的过渡。
  2. 接下来,您可以设置过渡速度。 这是图库从一张图像更改为另一张图像的速度。
  3. 您可以通过启用“自动播放”选项将图像设置为在页面加载后自动滑动/淡出。
  4. 最后,您可以启用或禁用无限循环。 这意味着当您到达图像的末尾时,当您单击下一个图标时,它将回到起点。
  5. 对所有设置感到满意后,滚动到页面底部,然后单击蓝色的保存更改按钮。
查看  如何在 WooCommerce 中使用分组产品

完成后,您将在 WooCommerce 中成功自定义产品库滑块。

而已! 在本文中,我们解释了如何通过添加产品库滑块来改进您的 WooCommerce 产品页面。 通过进行此更改,您将能够立即节省空间、减少负担并改善客户体验。

所有这些以及更多功能都可以通过易于使用的插件 WooThumbs for WooCommerce 完成。

类似文章