快速说明:
直接客户可免费使用本文中使用的WooCommerce滑块模板
内容
- 入门
1.1下载Woocommerce滑块模板 - 配置源
2.1 选择Woocommerce作为滑块源
2.2 配置Woocommerce滑块源 - 编辑幻灯片
3.1 将产品图像显示为幻灯片的主要背景图像
3.2 创建“添加到购物车”和“产品链接”按钮
3.3 显示产品等级 - 其他产品信息
1.入门
1.1下载Woocommerce滑块模板
![[Slider Revolution 6]通过Slider Revolution显示WooCommerce产品 [Slider Revolution 6]通过Slider Revolution显示WooCommerce产品](https://aladd.net//wp-content/uploads/2020/05/import-1.png)
![[Slider Revolution 6]通过Slider Revolution显示WooCommerce产品 [Slider Revolution 6]通过Slider Revolution显示WooCommerce产品](https://aladd.net//wp-content/uploads/2020/05/import-template-1.png)
2.配置源
2.1选择Woocommerce作为滑块源
![[Slider Revolution 6]通过Slider Revolution显示WooCommerce产品 [Slider Revolution 6]通过Slider Revolution显示WooCommerce产品](https://aladd.net//wp-content/uploads/2020/05/source-1.png)
2.2配置Woocommerce滑块源
![[Slider Revolution 6]通过Slider Revolution显示WooCommerce产品 [Slider Revolution 6]通过Slider Revolution显示WooCommerce产品](https://aladd.net//wp-content/uploads/2020/05/product-1.png)
3.编辑幻灯片
3.1将产品图像显示为幻灯片的主要背景图像
![[Slider Revolution 6]通过Slider Revolution显示WooCommerce产品 [Slider Revolution 6]通过Slider Revolution显示WooCommerce产品](https://aladd.net//wp-content/uploads/2020/05/featured-1.png)
3.2创建“添加到购物车”和“产品链接”按钮
“添加到购物车”和“产品链接”按钮是使用“按钮图层”创建的, 并且使用“图层操作”来超链接 。单击下面显示的“元”按钮以打开“元数据”列表
![[Slider Revolution 6]通过Slider Revolution显示WooCommerce产品 [Slider Revolution 6]通过Slider Revolution显示WooCommerce产品](https://aladd.net//wp-content/uploads/2020/05/meta-2.png)
选择“ WooCommerce”选项卡,然后复制“添加到购物车URL”元数据简码。
![[Slider Revolution 6]通过Slider Revolution显示WooCommerce产品 [Slider Revolution 6]通过Slider Revolution显示WooCommerce产品](https://aladd.net//wp-content/uploads/2020/05/meta-data-1.png)
打开“按钮层”>“层操作”,然后将“添加到购物车URL”元数据短代码插入“简单链接”操作中。
![[Slider Revolution 6]通过Slider Revolution显示WooCommerce产品 [Slider Revolution 6]通过Slider Revolution显示WooCommerce产品](https://aladd.net//wp-content/uploads/2020/05/add-cart-1.png)
3.3显示产品等级
评分和评论计数是使用“文字层”创建的 ,将直接显示在前端。单击下面显示的“元”按钮以打开“元数据”列表
![[Slider Revolution 6]通过Slider Revolution显示WooCommerce产品 [Slider Revolution 6]通过Slider Revolution显示WooCommerce产品](https://aladd.net//wp-content/uploads/2020/05/meta-2.png)
选择一个“文本图层”,然后将“文本/星级”元数据简码插入图层内容。
![[Slider Revolution 6]通过Slider Revolution显示WooCommerce产品 [Slider Revolution 6]通过Slider Revolution显示WooCommerce产品](https://aladd.net//wp-content/uploads/2020/05/rating-1.png)
4.显示其他产品信息
显示其他产品信息,例如“库存”和“价格”。添加一个新的文本/ HTML层。
![[Slider Revolution 6]通过Slider Revolution显示WooCommerce产品 [Slider Revolution 6]通过Slider Revolution显示WooCommerce产品](https://aladd.net//wp-content/uploads/2020/05/text-layer-14.png)
单击下面显示的“元”按钮以打开“元数据”列表
![[Slider Revolution 6]通过Slider Revolution显示WooCommerce产品 [Slider Revolution 6]通过Slider Revolution显示WooCommerce产品](https://aladd.net//wp-content/uploads/2020/05/select-meta-1.png)
选择“库存”元数据以在文本层上显示库存数量。
![[Slider Revolution 6]通过Slider Revolution显示WooCommerce产品 [Slider Revolution 6]通过Slider Revolution显示WooCommerce产品](https://aladd.net//wp-content/uploads/2020/05/stock-1.png)