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