Woo Featured Products Slider Element

The Woo Featured Products Slider element shows your featured products 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 on a home page or landing page to put a hand-picked set of products in front of visitors. Which products appear is decided in WooCommerce: only products marked as featured are shown.

In this article: When the Element Is Available · Options · 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.

To feature a product, click the star in the product list under Products in WooCommerce. When no featured 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 crops every picture to the same width and height. Woo Single uses WooCommerce’s single product image size. Auto uses the full picture in its own proportions.
Categories Limits the slider to featured products of one or more categories. Leave it empty for all categories.
Number of Products How many products the slider holds, up to 24.
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 slider.

Tips

  • Use product pictures of the same shape, or set Picture Size to Fixed, 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.