所有分类
  • 所有分类
  • WP插件Pro
  • HTML模板
  • 微信小程序模板
  • 源码

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 商品轮播区块插件

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

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

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

Product Slider for WooCommerce 有多种轮播样式可供选择

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


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 种主题样式,可供站长选择。

新增 WooCommerce 商品滑块,选择滑块布局样式

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

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

继续设置 WooCommerce 商品轮播滑块选项

滑块控制选项

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

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

WooCommerce 商品轮播,滑块控制选项

显示设置

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

Display Options 显示选项区域,可调整想显示&隐藏的选项

图片设置

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

Image Settings 图片设定区域,可调整 WooCommerce 商品轮播图片相关设计

文字排版

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

Typography 文字排版设计区域,可调整商品展示滑块的字体设计

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

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


4. 商品轮播,正式上线

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

复制 WooCommerce Product Slider 短代码

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

进入 Elementor 编辑页面,找到「短码」小工具

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

贴上复制好的 WooCommerce 商品轮播滑块

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

WooCommerce 商品轮播滑块,成功上线!

常见问题

如何在 WooCommerce 新增商品轮播滑块?

可安装 Product Slider for WooCom 插件,帮助我们在页面上新增商品轮播滑块。

Product Slider for WooCom 有 3 种样式可供站长选择调整,能够在页面上添加视觉效果,丰富页面设计,吸引顾客注意力,提升购买率:)

还有其他方法,可增加 WooCommerce 页面设计效果吗?

可以使用 优质页面编辑器,选择适合的页面编辑器,定制页面设计!其中我们最推荐大家使用 Elementor。

Elementor 是全球知名的 WordPress 页面编辑器,有免费版本可使用,且和 WordPress 知名主题主题 有完美兼容性。

不需会任何程序基础,只要用区块拖曳方式,就能定制形象网站设计。

使用 WordPress 页面编辑器,可以做什么事呢?

大部分页面编辑器,都会提供多种模板 or 区块样式,可直接点击套用,就能马上完成页面设计,就不用从零制作,非常方便。

而且有提供多种元素功能,可简单拖曳元素&可视化排版,能完成绝大部分的网页制作。

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

0
使用和安装有任何问题
请加客服QQ:1442071397 或wechat:pufei889


免责声明

本站所发布的部分内容自网络,该部分内容限用于学习和研究目,有版权问题的,下载后的24个小时之内,从您的电脑中彻底删除。且不得将用于商业或者非法用途,否则,一切后果请用户自负,与本站无关。

评论0

请先
没有账号?注册  忘记密码?

社交账号快速登录

温性提示

演示站服务器在国外,网站打开速度有点慢,请耐心等待

多功能、多行业外贸商城 wordpress商城WOOCOMMERCE

23+
行业模板