WooCommerce 商品轮播插件：使用动态展示效果，增加购买率！

这是一篇完整的WooCommerce商品轮播设计教程，我们将使用 Product Slider for WooCommerce 插件，电商网站中加上商品轮播功能。搭建购物网站，站长可能会想让网页拥有轮播商品展示的功能，运用这些动态效果，让购物页面的视觉呈现更精美，从而增加购买率。

有些页面编辑器的滑块功能，可能不是太完整，或是无法显示站长想呈现的样式，因此，使用插件也是不错的选择。

这款插件，拥有 3 种设计样式、可调整轮播速度、展示商品数量、颜色调整等 .. ，多种功能可以设定，整体操作起来也非常简单。

文章会教大家如何使用插件，做出简单的 WooCommerce 商品轮播功能。

 

• 1. Product Slider for WooCommerce 是什么？
• 2. 安装+启用 Product Slider for WooCommerce
• 3. 新增+设计 WooCommerce 商品轮播滑块
• 4. 商品轮播，正式上线

---

1. Product Slider for WooCommerce 是什么？

Product Slider for WooCommerce 是一款制作 WooCommerce 商品轮播功能插件，可设定商品轮播滑块，呈现在页面上，添加商品页面的视觉效果。

在商品滑块中，通常都带有加入购物车按钮，非常方便用户选购商品，并且有多达3种样式可供选择。

除此之外，也可以调整商品照片尺寸、商品数量、等 .. 多项区块细节。

高级版本则可以调整显示“ 商品类别 ” 以及拥有更多可调整样式选择）

---

2. 安装+启用 Product Slider for WooCommerce

这个章节，我们就来安装+启用 Product Slider for WooCommerce 。

前往 WordPress 后台，插件 > 安装插件，搜寻 Product Slider for WooCommerce 安装+启用。

---

3. 新增+设计 WooCommerce 商品轮播滑块

Product Slider for WooCommerce 安装+启用完成后，我们就可以开始新增+设计 WooCommerce 商品滑块！

新增商品滑块+一般设计

前往 Product Slider > Add New，新增商品滑块，输入名称，因为使用免费版，这边我们只能锁定在“ 滑块模式 。 接着选择滑块样式，有 3 种主题样式，可供站长选择。

接着往下滑，站长可依据图片指示，设置滑块样式。

这边我调整了字段显示数量、页数限制，最后，可以点击下方的Show Perview 预览滑块样式。

滑块控制选项

接着我们点击上方Slider Controls滑块控制选项。

“ 滑块控制选项 ” 块可调整滑块的动画样式、是否自动播放、播放速度、播放方向等 .. 动画效果。

显示设置

接着切换 Display Options 显示选项区域，这里可调整滑块想显示&隐藏的选项，像是：商品标题、价格、评分等 .. WooCommerce 商品相关项目。

图片设置

“ Image Settings ”图片设定区域，这里可调整 WooCommerce 商品轮播的图片设计、尺寸等 .. 相关设计。

文字排版

「 Typography 」文字排版设计区域，可调整商品展示滑块的字体设计，像是：商品滑块标题、商品名称字体、价格字体等 .. 多种区域的字体设计。

以上就是 Product Slider for WooCommerce 插件设计区域的介绍。

站长可参考以上说明，完成定制商品滑块样式后，点击「 发布」或「 更新」存储滑块选项，接着就可以让商品滑块正式上线。

---

4. 商品轮播，正式上线

设置好 WooCommerce 商品轮播滑块，我们就可以让它上线！进入 Product Slider，上滑找到 Shortcode，复制短代码。

前往编辑页面，这边我们使用的是 Elementor 作为演示。 进入 Elementor 编辑页面，找到「短码」小工具，拖曳进页面。

并且贴上刚刚复制好的 WooCommerce 短码。 完成后，点击储存。

接着我们前往前台页面，发现 WooCommerce 商品轮播滑块，成功上线啰！

---

常见问题

原文链接：https://www.itaoda.cn/blog/12458.html，转载请注明出处。