Post navigation

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.

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.

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>

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:

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".

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.