How to create a WooCommerce Product Slider

Starting from version 9.5, WonderPlugin Slider added the support for WordPress custom post types. Since WooCommerce is based on custom post types, we can use the plugin to create WooCommerce product sliders.

Online demos are at WooCommerce Product Slider Demos.

The content of this tutorial is as following:

1 - Add WordPress Custom Post Type

In WonderPlugin Slider, create or edit an existing slider, in step 1, click the button "Add WooCommerce / Custom Post Type".

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


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


2 - Define the slider Title, Description and Image

A slider item has a title, a description and an image. You can define the content with WooCommerce custom fields.

For example, the following text in the "Field for Title" will use the product name as the title of the slider.


The following text in the "Field for Description" will display the product short description/excerpt and a Add to Cart button.

<p>%post_excerpt%</p><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% will display the product short description. The link /cart/?add-to-cart=%ID% is the "add to cart" URL of the product.

If the excerpt is too long, you can change the option "Maximum Post Content/Excerpt Word Length" to a smaller value. You can view the created online demo at WooCommerce Product Slider Demo.


The supported WooCommerce product fields are as following:

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

3 - Add product price, star rating and an add to cart button

To add the product price, star rating and an add to cart button to the carousel, you can enter the following code to the Field for Description input box:

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


In the plugin, step 3 Options tab, Advanced Options, enter the following 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;

4 - Link to the product page

In the Add Custom Posts 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 on clicking the slider image.

5 - Create a WooCommerce best selling products slider or a featured products slider

To create a WooCommerce best selling products slider or a featured products slider, in the "Add WooCommerce / Custom Posts" dialog, check the option "WooCommerce best selling products" or the option "WooCommerce featured products".

If you select both options, you can also define the logical relation of the two options as "AND" or "OR".


6 - Create a featured products slider for WooCommerce 3.0 and above

From WooCommerce 3, 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.

woocommerce3 featured products