WooCommerce

Display WooCommerce products in style with Slider Revolution!

Quick Note

The WooCommerce Slider Template used in this article is available free to Direct Customers

Table of Content

  • Step 1 : Getting Started
  • Step 2 : Configuring the source
  • Step 3 : Editing the Slide
  • Step 4 : Additional Product Information

Step 1

Getting Started

Downloading the Woocommerce Slider Template

Step 2

Configuring the Source

Selecting Woocommerce as Slider Source

Configuring Woocommerce Slider Source

Step 3

Editing the Slide

Show the product image as the slide’s Main Background Image

Creating “Add to Cart” and “Product Link” buttons

The “Add to Cart” and “Product link” buttons are created using Button Layers and it’s hyperlinked using Layer Actions. Click on the Meta button shown below to open the list of Meta Data

Select “WooCommerce” tab and copy the “Add to Cart URL” Meta Data shortcode.

Open the Button Layer > Layer Actions and insert the “Add to Cart URL” Meta Data shortcode into a “Simple Link” action.

Displaying Product Ratings

Rating and review count is created using Text Layers and will be displayed directly on the front end. Click on the Meta button shown below to open the list of Meta Data

Select a “Text Layer” and insert the “Text/Star Rating” Meta Data Shortcode into the Layer Contents.

Step 4

Display Additional Product Information

To display additional product information such as “Stock” and “Price”. Add a new Text/HTML Layer.

Click on the Meta button shown below to open the list of Meta Data

Select “In Stock” Meta Data to display the stock quantity on the Text Layer.

WooCommerce

The Author

KC

Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!