Product Carousel

Display WooCommerce products in a scrollable owl-carousel. Supports autoplay, navigation arrows, dots, and responsive breakpoints. It is shown in the block inserter as Canvas Product Carousel and registered as canvas-core/woo-product-carousel.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Query

• SourceDefaultRecent

  Which products the carousel pulls in. Best Selling and Top Rated are worked out from your own sales and reviews.

  ChoicesRecentFeaturedOn SaleBest SellingTop Rated

• LimitDefault12

  The most products the carousel holds, however many match.

• CategoryDefaultEmpty

  Narrow the carousel to one or more product categories. Leave empty for the whole catalogue.

• TagDefaultEmpty

  Narrow the carousel to one or more product tags.

• Order ByDefaultDate

  What decides the sequence of the slides. Catalogue order follows the arrangement you set in the products list.

  ChoicesDateTitlePricePopularityRatingCatalogue order

• OrderDefaultDescending

  Which end of that sequence comes first: newest and dearest first, or oldest and cheapest first.

  ChoicesDescendingAscending

Card Display

• Show ImageDefaultOn

  Show the product photograph on each slide.

• Show TitleDefaultOn

  Show the product name on each slide.

• Show PriceDefaultOn

  Show the price on each slide.

• Show RatingDefaultOn

  Show the star rating on each slide. A product with no reviews shows no stars.

• Show BadgeDefaultOn

  Mark a slide whose product is on sale or out of stock.

• Show OverlayDefaultOn

  Reveal the buy and quick view controls over the photograph on hover.

• Show ExcerptDefaultOff

  Print the product's short description under the name.

• Image SwapDefaultOn

  Use a product's gallery pictures as well as its main one. What happens with them is set below.

• Extra ImagesDefaultReveal on Hover

  How a product with more than one image is shown.

  ChoicesReveal on HoverImage SliderSlider When SeveralShown when Image Swap is on

• Card Inner Classes

  Class names on the inner box of each slide, for a border, shadow or background the design gives its cards.

• Card Image Classes

  Class names on the picture area of each slide.

• Card Text Classes

  Class names on the area under the picture holding the name, rating and price.

Card Classes

• Card Inner WrapperDefaultEmpty

  Choose None for a design whose card has no inner wrapper element.

  ChoicesEmit (default) (empty)None: image and description sit directly in the card

• Title ClassesDefaultEmpty

  Class names on the product name, most often for the space under it.

  Shown when Show Title is on

• Price Element ClassesDefaultEmpty

  Class names on the price, setting its typeface, size or colour.

  Shown when Show Price is on

• Sale Badge ClassesDefaultEmpty

  Exact class list on the sale / out-of-stock flash. Empty keeps the theme's own badge classes.

  Shown when Show Badge is on

• Out of Stock Badge ClassesDefaultEmpty

  Exact class list on the out-of-stock flash only, for a design that colours it differently from the sale flash. Empty uses the Sale Badge Classes.

  Shown when Show Badge is on

• Sale Badge LabelDefaultEmpty

  Wording on the badge marking a discounted product. Leave empty for the theme wording.

  Shown when Show Badge is on

• Out of Stock Badge LabelDefaultEmpty

  Wording on the badge marking a product that cannot be bought. Leave empty for the theme wording.

  Shown when Show Badge is on

Carousel

• Items VisibleDefault4

  How many slides are visible at once. Every screen size that sets none of its own falls back to this.

• Item Margin (px)Default20

  Space between one slide and the next.

• LoopDefaultOff

  Run the carousel round without end, so the last slide is followed by the first.

• Autoplay (ms)Default0

  Autoplay interval in ms (0 = off)

• Transition Speed (ms)Default250

  How long the movement from one slide to the next takes.

• Show ArrowsDefaultOn

  Show previous and next arrows for moving between slides.

• Arrows Always VisibleDefaultOff

  Keep the arrows on screen instead of revealing them when the pointer enters the carousel.

• Show DotsDefaultOn

  Show a row of dots under the carousel, one per position.

• Items - Extra SmallDefault1

  Items visible below 576px.

• Items - SmallDefault2

  Items visible from 576px.

• Items - MediumDefault3

  Items visible from 768px.

• Items - LargeDefault4

  Items visible from 992px.

• Items - Extra LargeDefault0

  Items visible from 1200px (0 = inherit Large).

Container

• Carousel ID

  HTML id placed on the carousel itself rather than on a wrapper.

• Carousel Classes

  Class names on the carousel itself, for spacing or a design family it belongs to.

• No Wrapper

  Render the carousel as the block root instead of nesting it in a wrapper element.

  Default: Off.

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in WooCommerce: Add to Cart, Cart Table, Cart Totals, Checkout Billing, Checkout Order Review, Conference Tickets.