How to create a WooCommerce Product Carousel

Starting from version 10.0, WonderPlugin Carousel 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 carousels.

Online demos are at WooCommerce Product Carousel Demos.

The content of this tutorial is as following:

1 - Add WordPress Custom Post Type

In WonderPlugin Carousel, create or edit an existing carousel, 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.

woocommerce_product_carousel

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

wordpress-custom-post-carousel-multiple-taxonomies

2 - Define the Carousel Title, Description and Image

A carousel 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 carousel.

%post_title%

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 Carousel Demo.

wordpress-woocommerce-carousel-fields

Some carousel skins do not display the description text in the carousel, for example, the default skin "Classic". For these skins, in the plugin, goto step 3 Options tab, Content Template, you can add the following text to the Skin Template input box:

<div class="amazingcarousel-description">__DESCRIPTION__</div>

wordpress-carousel-with-text

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>

woocommerce-carousel-with-price-rating

In the plugin, step 3 Options tab, Advanced Options, enter the following code to the Custom CSS input box to customise the style:

#wonderplugincarousel-CAROUSELID {
  padding: 0 !important;
}

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

#wonderplugincarousel-CAROUSELID .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 carousel image.

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

To create a WooCommerce best selling products carousel or a featured products carousel, 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".

woocommerce-best-selling-product-carousel

6 - Create a featured products carousel 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 carousel, select "Taxonomy: product_visibility" from the "Query by Taxonomy and Terms", then select "Term: featured" from the term list.

woocommerce3 featured products