Woo Product Carousel Element

The Woo Product Carousel element shows products of your shop side by side in a carousel. Each card has the product picture and, as you choose, the title, the categories, the price and the buttons for the cart and the product page.

Use it to present the newest products, the best sellers or the products of one category on a home page or landing page. Products that are hidden from the shop catalog in WooCommerce are left out.

In this article: When the Element Is Available · Options · Typical Setups · Tips · Related

When the Element Is Available

The element is part of the Builder only while WooCommerce is installed and active. Without WooCommerce it is missing from the element list.

When no product matches your choices, visitors see nothing in place of the element, and logged-in editors see a link to add products.

Options

Option What it does
Picture Size Fixed gives every picture the same width and height. Auto uses each picture in its own proportions.
Categories Limits the carousel to products of one or more categories. Leave it empty for all categories.
Number of Products How many products the carousel holds, up to 25.
Product Offset The number of products to skip at the start of the list.
Order By Sorts by Date, Title, Random, ID, Price, Popularity (sales) or Average Rating.
Order Descending or Ascending. Not shown when Order By is Random.
Include Out Of Stock Products Include lists products that are sold out as well, Exclude leaves them out.
Carousel Layout Title on rollover shows title, categories and price on top of the picture when the mouse is over it. Title below image prints them under the picture.
Carousel Autoplay Yes moves the carousel by itself.
Maximum Columns How many products are visible side by side on a wide screen, from 1 to 6.
Column Spacing The space between the cards in pixels.
Scroll Items How many products move per step. Empty moves as many as are visible.
Show Navigation Shows or hides the previous and next arrows.
Mouse Scroll Yes lets visitors drag the carousel with the mouse. The links on the cards are then switched off.
Show Categories Shows or hides the product categories.
Show Price Shows or hides the price.
Show Sale Badge Shows or hides the sale badge on reduced products.
Show Out Of Stock Badge Meant to show or hide the sold-out badge. See the note below.
Show Buttons Shows or hides the Add to Cart and Details buttons.
Margin Space above, right of, below and left of the element.
Element Visibility Shows or hides the element on small, medium and large screens.
CSS Class / CSS ID A class or ID for the element, for your own styling.

Note: At present Show Out Of Stock Badge has no effect of its own. The sold-out badge appears whenever Include Out Of Stock Products is set to Include. To keep the badge away, set that option to Exclude, which removes sold-out products from the carousel.

Typical Setups

  • New in the shop: Order By Date, Order Descending.
  • Best sellers: Order By Popularity (sales), Order Descending.
  • One product line: choose its category under Categories and sort by Title.
  • A changing selection: Order By Random.

Tips

  • Set Picture Size to Fixed when your product pictures have different shapes, so that all cards have the same height.
  • Leave Mouse Scroll on No if visitors should be able to click through to the products. With Yes the cards cannot be clicked.
  • If sorting by price gives a wrong order, regenerate WooCommerce’s product lookup tables under WooCommerce › Status › Tools.
  • The design of the cards follows WooCommerce Product Box Design under Tirenoa › Options › WooCommerce › WooCommerce Styling.
  • The element shows only data from your own shop and connects visitors to no outside service.