How to create a WooCommerce Product Slider

This tutorial will guide you how to create a WooCommerce product slider for your WordPress website. You can create a WooCommerce product slider from a category, add product description, price, star ratings and shopping cart button to the slideshow, link the slide image to the product web page.

You can view the following page for the demo created with this tutorial: WooCommerce Product Slider Demo.

There are 5 steps in this tutorial:

  • Step 1 - Install WordPress plugin Wonder Slider
  • Step 2 - Create a WooCommerce product slider
  • Step 3 - Add product name, description, price, star rating and shopping cart button to the slider
  • Step 4 - Link to the product page
  • Step 5 - Publish the slider

This tutorial will also show you how to create a WooCommerce best selling products slider and a WooCommerce featured products slider.

  • Create a WooCommerce featured products slider
  • Create a WooCommerce best selling products slider

Step 1 - Install WordPress plugin Wonder Slider

First please install the plugin Wonder Slider. You can download the Free Version from the product homepage, try it, make sure it works for you before upgrading to the commercial version.

For how to install a plugin from the downloaded plugin ZIP file, please view this tutorial: How to install a WordPress plugin from a ZIP file.

Step 2 - Create a WooCommerce product slider

After you have installed Wonder Slider, in your WordPress backend, left menu, goto Wonder Slider -> New Slider and create a new slider.

In the slider editor, step 1, click the button Add WooCommerce / Custom Post Type.

In the "Add WooCommerce / Custom Post Type" dialog, choose "product" for the Custom Post Type, then you can select the taxonomy "product_cat" and choose a category from the Term list.

You can also choose multiple taxonomies and define the logical relationship as AND or OR.

woocommerce slider taxonomy terms

Step 3 - Add product name, description, price, star rating and shopping cart button to the slider

In the "Add WooCommerce / Custom Post Type" dialog, enter the following text to the "Field for Title" input box. It will use the product name as the title of the slide.

%post_title%

In the "Field for Description" input box, enter the following code:

<p>%post_excerpt%</p>
<div class="wc_price">%wc_price_html%</div>
<div class="wc_rating">%wc_rating_html%</div>
<p><a href="/cart/?add-to-cart=%ID%"><button class="single_add_to_cart_button button alt">Add to cart</button></a></p>

In the above code, %post_excerpt% displays the product short description. %wc_price_html% displays the product price. %wc_rating_html% displays the product star ratings. /cart/?add-to-cart=%ID% is the "add to cart" URL of the product. If you don't want to display the price or the star ratings, you can remove the line from the code.

woocommerce slider fields

The product price and star ratings may not look very well in the slideshow. In the plugin, step 3 Options tab, Advanced Options, you can enter the following CSS code to the Custom CSS input box to customise the style:

#wonderpluginslider-SLIDERID .wc_price,
#wonderpluginslider-SLIDERID .wc_price del,
#wonderpluginslider-SLIDERID .wc_price ins {
  color: #333;
  background: transparent;
  font-size: 12px;
  color: #77a464;
}

#wonderpluginslider-SLIDERID .wc_rating {
  display: inline-block;
  margin: 8px auto;
}

All supported WooCommerce product fields are as follows:

Field Macro Description
%ID% Product ID
%post_title% Product name
%post_content% Product description
%post_excerpt% Product short description
%featured_image% Product image
%wc_price_html% Product price HTML code
%wc_rating_html% Product star rating HTML code
%wc_rating_count% Product rating count
%wc_average_rating% Product average rating
%wc_review_count% Product review count
%wc_total_sales% Total sales

Step 4 - Link to the product page

In the "Add WooCommerce / Custom Post Type" dialog, check the option "Open the post page or image lightbox on clicking the image" and "Click to open the post page", it will open the product page when clicking the slide image.

Step 5 - Publish the slider

After you have finished the slider, click the button Save & Publish, the plugin will display the shortcode and the php code snippet of the slider.

To embed the slider to a post or page, copy the shortcode and paste it to the page content.

Create a featured products slider

For WooCommerce 2, to create a WooCommerce featured products slider, in the "Add WooCommerce / Custom Posts" dialog, WooCommerce tab, check the option "WooCommerce featured products".

For WooCommerce 3.0 and above, featured products are using the new product_visibility taxonomy instead of meta. To create a featured products slider, select "Taxonomy: product_visibility" from the "Query by Taxonomy and Terms", then select "Term: featured" from the term list.

woocommerce featured products slider

Create a WooCommerce best selling products slider

To create a WooCommerce best selling products slider, in the "Add WooCommerce / Custom Post Type" dialog, WooCommerce tab, check the option "WooCommerce best selling products".

woocommerce best selling products slider