Woo Product Carousel Element

Last Update: April 17, 2024

The Woo Product Carousel Element is a great way for you to showcase your WooCommerce products. You have the option to show only one category, a combination of them, or to show all of them. You can also choose to show or hide information such as category, price and buttons. Read below to discover more about this awesome eCommerce Element!

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Woo Product Carousel Element

Adding a WooCommerce carousel is now made easy with the Woo Product Carousel Element. To start, add the element to your desired column.

Now you have the options window open. Here you configure the product carousel, by selecting options. The Picture Size is the first option, and the best choice here will depend on both your design wishes and the sizes of your product images. Try both to see what the differences are. The other main options are to choose the category or categories, you wish to display in the carousel, and the number of products you want to display.

There are also a range of other minor options, to do with layout and spacing etc. Go through each one of these to make your choices.

Element Options

Note: The displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

HeadingDescription
Picture Sizefixed = width and height will be fixed auto = width and height will adjust to the image.
CategoriesSelect a category or leave blank for all.
Number of ProductsSelect the number of products to display.
Product OffsetThe number of products to skip. ex: 1.
Order ByDefines how products should be ordered. NOTE: If Order by Price is not working, please regenerate the Product Lookup Tables here.
OrderDefines the sorting order of products.
Include Out Of Stock ProductsChoose to include or exclude products which are out of stock.
Carousel LayoutChoose to show titles on rollover image, or below image.
Carousel AutoplayChoose to autoplay the carousel.
Maximum ColumnsSelect the number of max columns to display.
Column SpacingInsert the amount of spacing between items without 'px'. ex: 13.
Scroll ItemsInsert the amount of items to scroll. Leave empty to scroll number of visible items.
Show NavigationChoose to show navigation buttons on the carousel.
Mouse ScrollChoose to enable mouse drag control on the carousel. IMPORTANT: For easy draggability, when mouse scroll is activated, links will be disabled.
Show CategoriesChoose to show or hide the categories.
Show PriceChoose to show or hide the price.
Show Sale BadgeChoose to show or hide the sale badge.
Show ButtonsChoose to show or hide Add to Cart / Details buttons on the rollover.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Useful Links & Resources

In this article