Products
Display WooCommerce products in a grid or list layout. Filter by source, category, tag, and ordering. It is shown in the block inserter as Canvas Products and registered as canvas-core/woo-products.
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:
Layout
Display ModeDefaultGrid
How the products are arranged: a grid of cards, full width rows with the picture beside the copy, tight rows for a sidebar, or a carousel the shopper slides through.
ChoicesGridListCompact widget rowsCarousel
ColumnsDefaultEmpty
How many cards stand side by side. Store Setting follows your store's own Products per row setting on the shop and category archives, and is four across anywhere else. None drops the Bootstrap column class from the card root, for a design whose cards are full-width rows of a list.
ChoicesStore Setting (empty)23456None - cards are rowsnot columnsShown when Display Mode is "Grid"
Grid ContainerDefaultEmpty
Choose None when the design puts the cards in a row that also holds a static column, so they become direct children of it.
ChoicesOwn row (default) (empty)None - cards join the parent row
Query
SourceDefaultRecent
Which products the block pulls in. Recently Viewed is per visitor, so each shopper sees their own.
ChoicesRecentFeaturedOn SaleBest SellingTop RatedRecently ViewedShown when Inherit Main Query (Archive Mode) is off
When Nothing Viewed YetDefaultShow the most recent products
A visitor who has not opened a product yet has no viewing history. Choose what the block shows until they do.
ChoicesShow the most recent productsShow nothingShown when Source is "Recently Viewed"
LimitDefault
12The most products the block shows, however many match.
Shown when Inherit Main Query (Archive Mode) is off
Skip First ProductsDefault
0Start the query this many products in, so several blocks on one page can each show a different slice of the same catalogue. 0 starts at the first product.
Shown when Inherit Main Query (Archive Mode) is off
CategoryDefaultEmpty
Narrow the block to one or more product categories. Leave empty for the whole catalogue.
Shown when Inherit Main Query (Archive Mode) is off
TagDefaultEmpty
Narrow the block to one or more product tags.
Shown when Inherit Main Query (Archive Mode) is off
Order ByDefaultDate
What decides the sequence of the cards. Catalogue order follows the arrangement you set in the products list.
ChoicesDateTitlePricePopularityRatingCatalogue orderShown when Inherit Main Query (Archive Mode) is off
OrderDefaultDescending
Which end of that sequence comes first: newest and dearest first, or oldest and cheapest first.
ChoicesDescendingAscendingShown when Inherit Main Query (Archive Mode) is off
Archive Mode
Inherit Main Query (Archive Mode)DefaultOff
On: consume the current archive/shop query and render the #shop container, use on a shop/product-archive template. Off (default): use this block's own Source/Limit/Category/Order query above.
Container IDDefault
shopHTML id on the products container. Defaults to the shop archive (#shop).
Container ClassDefault
shop row gutter-30HTML class(es) on the products container. Defaults to the shop archive classes.
Show PaginationDefaultOn
Show the controls a shopper moves between catalogue pages with. Left on, this archive follows Theme Options → Shop → Catalogue; turn it off to drop the controls from this archive only.
Shown when Inherit Main Query (Archive Mode) is on
Card Display
Show ImageDefaultOn
Show the product photograph on each card.
Show TitleDefaultOn
Show the product name on each card.
Show PriceDefaultOn
Show the price on each card.
Show RatingDefaultOn
Show the star rating on each card. A product with no reviews shows no stars.
Show BadgeDefaultOn
Mark a card 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 ImagesDefaultEmpty
How a product's gallery images are shown on its card. Theme Options follows the site-wide catalogue setting; Reveal on Hover shows the second image behind the first; Image Slider turns the card image into a slideshow; Slider When Several does both: a slideshow once the product holds two or more gallery images, a hover reveal when it holds one.
ChoicesTheme Options (empty)Reveal on HoverImage SliderSlider When SeveralShown when Image Swap is on
Excerpt Length (words)Default
20How many words of the short description each card prints before trailing off. Keep it low so cards in a row stay a similar height.
Shown when Show Excerpt is on
Feature List AttributeDefaultEmpty
Name of a product attribute (Product data → Attributes) whose values are listed under the description as a bulleted feature list. Leave empty for no list.
Record ClassesDefaultOff
Tag every card with the identifying classes WordPress gives a record, so styling or a script can single out one product or one category.
Show CategoryDefaultOff
Show the product's term name at the "category" position of the description.
Filtering
Filter Classes From TaxonomyDefaultEmpty
Emit each product's terms in this taxonomy as classes on its card, so an Isotope filter bar can match them. Empty for none.
Filter Class PrefixDefault
pf-Text placed in front of each of those tags, so they cannot collide with a class the design already uses. Your filter buttons have to use the same prefix.
Shown when Filter Classes From Taxonomy is set
Card Classes
Column ClassesDefaultEmpty
Overrides the Columns choice with an exact Bootstrap column class list, for grids the column count cannot express, such as a three-up grid with no large-screen step.
Card Inner ClassesDefaultEmpty
Extra classes on each card's inner wrapper. The list card is a Bootstrap row (row g-0) holding the image column beside the description column.
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
Column on Its Own WrapperDefaultOff
On: the Bootstrap column class goes on a wrapper around the card instead of on the card itself, the shape a design uses when the card is a plain block inside its column.
Description OrderDefaultEmpty
Which comes first under the picture, the product name or its price.
ChoicesTitlethen price (default) (empty)Pricethen title
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 PositionDefaultOver the picture
Over the picture keeps the flash inside the rounded, clipped image box. Beside the picture moves it out of that box, for a design whose flash has to escape the clip.
ChoicesOver the pictureBeside the pictureShown when Show Badge is on
Out of Stock Badge PositionDefaultEmpty
Where the out-of-stock flash sits, for a design that places it differently from the sale flash.
ChoicesSame as the sale badge (empty)Over the pictureBeside the pictureShown 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
Image ClassesDefaultEmpty
Class names on the picture area of each card. In the List mode this is the column the photograph occupies.
Description ClassesDefaultEmpty
Class names on the copy area of each card. In the List mode this is the column beside the photograph.
Excerpt ClassesDefaultEmpty
Class names on the short description, which is where a design hides it on narrow screens.
Shown when Show Excerpt is on
Title ClassesDefaultEmpty
Class names on the box around the product name, most often for the space under it.
Shown when Show Title is on
Title BoxDefaultOn
Emit the box around the product name. Switch it off when the description parts are grouped in a box of their own, so the two do not nest.
Shown when Show Title is on
Price WrapperDefaultEmpty
Wraps the price in an element the design can style on its own, such as the inserted-price styling a promotional card uses.
ChoicesNone (price only) (empty)Inserted text (ins)SpanIsolated text (bdi)Shown when Show Price is on
Struck Price ClassesDefaultEmpty
Classes on the old price a sale strikes through, for a design that mutes it.
Shown when Show Price is on
Sale Price ClassesDefaultEmpty
Classes on the price a sale actually charges, which the store marks with an ins element.
Shown when Show Price is on
Struck Price Inner ElementDefaultEmpty
Element wrapped around the amount inside the struck-through price, for a design that types the old price smaller than the one it charges.
ChoicesNone (amount only) (empty)SmallSpanEmphasis (em)StrongShown when Show Price is on
Struck Price Inner ClassesDefaultEmpty
Class names on the element chosen above.
Shown when Show Price is on
Sale Price Inner ElementDefaultEmpty
Element wrapped around the amount inside the effective sale price.
ChoicesNone (amount only) (empty)SmallSpanEmphasis (em)StrongShown when Show Price is on
Sale Price Inner ClassesDefaultEmpty
Class names on the element chosen above.
Shown when Show Price is on
Price Wrapper ClassesDefaultEmpty
Class names on the wrapper chosen above. Only useful when a Price Wrapper is set.
Shown when Show Price is on
Title ElementDefaultEmpty
Heading level for the product name, so a card can sit under the page heading at the right level.
ChoicesHeading 3 (default) (empty)Heading 2Heading 3Heading 4Heading 5Heading 6Shown when Show Title is on
Title Heading ClassesDefaultEmpty
Class names on the heading itself, setting the size and spacing of the product name.
Shown when Show Title is on
Title Link ClassesDefaultEmpty
Class names on the link inside the heading, setting the weight or colour of the clickable name.
Shown when Show Title is on
Price ElementDefaultEmpty
Element carrying the price. Designs that size the price as a heading need the heading element, not a division.
ChoicesDivision (default) (empty)Heading 2Heading 3Heading 4Heading 5Heading 6ParagraphSpanShown when Show Price is on
Price Element ClassesDefaultEmpty
Class names on the element carrying the price, setting its size, weight or colour.
Shown when Show Price is on
Overlay on Unavailable ProductsDefaultShow it anyway
What a card does when its product is out of stock or cannot be bought. Leaving the card plain drops the whole hover panel, which is what a design does when the only thing in that panel is an add-to-cart button.
ChoicesShow it anywayLeave the card plainShown when Show Overlay is on
Feature List ClassesDefaultEmpty
Class names on the feature list, which is where a design hides it on narrower screens.
Shown when Feature List Attribute is set
Feature List IconDefaultEmpty
Bullet glyph shown before each feature.
Shown when Feature List Attribute is set
Feature List LengthDefault
0Show at most this many features per card, for a narrow column with room for fewer. 0 shows every value the product holds.
Shown when Feature List Attribute is set
Image Element ClassesDefaultEmpty
Classes on the image element itself, not on its .product-image box.
Shown when Show Image is on
Image Link ClassesDefaultEmpty
Classes on the link around the card picture, for a design that sizes the link rather than the picture inside it.
Shown when Show Image is on
Picture WrapperDefaultOn
On: the picture sits in its own framed, clipped box, which is what pins every card image to one shape and reveals the second image on hover. Off: the picture link sits directly in the card, for a design whose card is a plain column and leaves the photograph at its own proportions.
Shown when Show Image is on
Picture LoadingDefaultEmpty
Choose Load straight away when a script measures these cards as it starts, such as a carousel: a picture that has not loaded yet has no size for it to measure.
ChoicesLet WordPress decide (empty)Load straight awayLoad when scrolled toShown when Show Image is on
Image SizeDefaultEmpty
Registered image size the card requests.
Shown when Show Image is on
Category ElementDefaultSmall
Element carrying the product's term name. Renders only when "category" is one of the description parts.
ChoicesSmallSpanDivisionParagraphShown when Show Category is on
Category ClassesDefaultEmpty
Class names on the category line, setting its size, casing or colour.
Shown when Show Category is on
Category PositionDefaultEmpty
Where the term sits. Inside the product name prints it as a pill on the name itself, which is how a short per-product label such as New or Sale is usually shown.
ChoicesIts own line in the description (empty)Inside the product namebefore the textShown when Show Category is on
Category TaxonomyDefaultEmpty
Taxonomy the card's term name is read from.
Shown when Show Category is on
Link CategoryDefaultOff
Link the term name to its archive.
Shown when Show Category is on
Category Link ClassesDefaultEmpty
Class names on the term link itself, for a design that styles the eyebrow above the product name.
Shown when Link Category is on
Category Link PositionDefaultInside the element
Whether the link sits inside the term element or wraps it. Wrapping it makes the whole eyebrow the click target.
ChoicesInside the elementAround the elementShown when Link Category is on
Rating ClassesDefaultEmpty
Class names on the rating row, most often to line the icons up with the number beside them.
Shown when Show Rating is on
Rating StyleDefaultFive-icon scale
Whether the score is drawn as a row of five icons or as one icon next to the figure, which is more compact.
ChoicesFive-icon scaleOne icon beside the numberShown when Show Rating is on
Rating IconDefaultEmpty
The single glyph used in that compact style.
Shown when Rating Style is "One icon beside the number"
Rating Icon ClassesDefaultEmpty
Class names on that glyph, most often to set the gap before the figure.
Shown when Rating Style is "One icon beside the number"
Show Rating NumberDefaultOff
Append the product's average rating as a number.
Shown when Show Rating is on
Rating Number ClassesDefaultEmpty
Class names on the rating figure, most often to set the gap between it and the icons.
Shown when Show Rating Number is on
Card Overlay
Overlay Alignment ClassesDefaultEmpty
Flex utilities positioning the buttons inside the hover overlay.
Shown when Show Overlay is on
Overlay ButtonsDefaultEmpty
What a shopper sees over a product picture. Theme Options follows the site-wide catalogue setting. Cart icon only drops the hover overlay entirely and places the add-to-cart icon straight on the photo.
ChoicesTheme Options (empty)Cart + Quick View iconsOne labelled buttonCart icon onlyno overlayShown when Show Overlay is on
Overlay Button LabelDefaultEmpty
Wording on the single button revealed over the photograph.
Shown when Overlay Buttons is "One labelled button"
Overlay Button IconDefaultEmpty
Glyph shown beside that wording.
Shown when Overlay Buttons is "One labelled button"
Overlay Button ClassesDefaultEmpty
Class names that set the look of that button.
Shown when Overlay Buttons is "One labelled button"
Cart Icon Button ClassesDefaultEmpty
Class names that set the look of the buy icon, including the gap to the quick view icon beside it.
Shown when Overlay Buttons is "Theme Options" or "Cart + Quick View icons" or "Cart icon only, no overlay"
Cart IconDefaultEmpty
Glyph used for the buy control.
Shown when Overlay Buttons is "Theme Options" or "Cart + Quick View icons" or "Cart icon only, no overlay"
Quick View Button ClassesDefaultEmpty
Class names that set the look of the quick view icon.
Shown when Overlay Buttons is "Theme Options" or "Cart + Quick View icons"
Quick View IconDefaultEmpty
Glyph used for the quick view control.
Shown when Overlay Buttons is "Theme Options" or "Cart + Quick View icons"
Overlay Tint LayerDefaultOn
Wash the photograph on hover so the controls over it stay readable. Turn it off for a design that keeps the picture clear.
Shown when Show Overlay is on
Overlay ControlsDefaultEmpty
States the overlay's own set, order and per-control classes. Empty keeps the built-in arrangement chosen above.
Shown when Show Overlay is on
Each row of Overlay Controls takes:
ActionDefaultAdd to cart
Add to cart uses the store's own cart URL and hooks; Custom link falls back to the product page when no URL is given.
ChoicesAdd to cartQuick viewProduct pageCustom link
Link URLDefaultEmpty
Where this control leads. Leave it empty and it falls back to the product page.
Shown when Action is "Custom link"
ClassesDefaultEmpty
Class names that set the look of this control, from its colour to what it does on hover.
IconDefaultEmpty
Glyph shown on this control. A control with an icon and no label reads as a plain button.
LabelDefaultEmpty
Wording on this control. Leave empty for an icon on its own.
Label ClassesDefaultEmpty
Classes on a span wrapping the label. Empty emits the text bare.
Title AttributeDefaultEmpty
Tooltip shown when the pointer rests on this control, which is worth setting for an icon that carries no label.
Wrapper ClassesDefaultEmpty
Wraps the control in a division carrying these classes.
Out of Stock ClassesDefaultEmpty
Added when the product cannot be bought.
Shown when Action is "Add to cart"
Out of Stock IconDefaultEmpty
Glyph shown in place of the usual one when the product cannot be bought.
Shown when Action is "Add to cart"
Hover AnimationDefaultEmpty
How this control arrives when the card is hovered. Leave empty for no animation.
Hover Animation OutDefaultEmpty
How it leaves again when the pointer moves away. Leave empty and it simply disappears.
Hover SpeedDefaultEmpty
How long that animation runs, in milliseconds.
Hover ParentDefaultEmpty
Which element has to be hovered for the animation to run. Name the whole card so the control appears wherever the shopper points at it, rather than only over the control itself.
Overlay Hover AnimationDefault
fadeInAnimation the overlay content plays on hover. Empty plays none.
Shown when Show Overlay is on
Overlay Hover Animation OutDefaultEmpty
How the overlay leaves when the pointer moves away. Leave empty and it simply disappears.
Shown when Show Overlay is on
Overlay Hover SpeedDefault
400Animation duration in milliseconds. Empty omits the attribute.
Shown when Show Overlay is on
Overlay Hover ParentDefaultEmpty
Selector of the ancestor whose hover drives the animation.
Shown when Show Overlay is on
Card Composition
Description PartsDefaultEmpty
Comma-separated order of the parts inside the card description, from: category, title, price, rating, excerpt, iconlist, buttons. A part left out still renders, after the named ones. Empty keeps the default title → price → rating order.
Description Row ClassesDefaultEmpty
Classes on a row wrapping the parts named below. Empty emits no row.
Description Row PartsDefaultEmpty
Comma-separated parts placed inside that row.
Description Group ClassesDefaultEmpty
Classes on a division wrapping the parts named below. Leave empty for a plain division with no classes; the group is emitted whenever it has parts.
Description Group PartsDefaultEmpty
Comma-separated parts placed inside that group. The group takes the position of the first part named here.
Description ButtonsDefaultEmpty
Controls rendered at the "buttons" position of the description: an add-to-cart call to action, a saved-items heart, a link to the product.
Each row of Description Buttons takes:
ActionDefaultAdd to cart
Add to cart uses the store's own cart URL and hooks; Custom link falls back to the product page when no URL is given.
ChoicesAdd to cartQuick viewProduct pageCustom link
Link URLDefaultEmpty
Where this control leads. Leave it empty and it falls back to the product page.
Shown when Action is "Custom link"
ClassesDefaultEmpty
Class names that set the look of this control, from its colour to what it does on hover.
IconDefaultEmpty
Glyph shown on this control. A control with an icon and no label reads as a plain button.
LabelDefaultEmpty
Wording on this control. Leave empty for an icon on its own.
Label ClassesDefaultEmpty
Classes on a span wrapping the label. Empty emits the text bare.
Title AttributeDefaultEmpty
Tooltip shown when the pointer rests on this control, which is worth setting for an icon that carries no label.
Wrapper ClassesDefaultEmpty
Wraps the control in a division carrying these classes.
Out of Stock ClassesDefaultEmpty
Added when the product cannot be bought.
Shown when Action is "Add to cart"
Out of Stock IconDefaultEmpty
Glyph shown in place of the usual one when the product cannot be bought.
Shown when Action is "Add to cart"
Hover AnimationDefaultEmpty
How this control arrives when the card is hovered. Leave empty for no animation.
Hover Animation OutDefaultEmpty
How it leaves again when the pointer moves away. Leave empty and it simply disappears.
Hover SpeedDefaultEmpty
How long that animation runs, in milliseconds.
Hover ParentDefaultEmpty
Which element has to be hovered for the animation to run. Name the whole card so the control appears wherever the shopper points at it, rather than only over the control itself.
Description WrapperDefaultOn
Emit the .product-desc box. Turn off for a row-shaped card whose description parts are columns of the card row itself.
Card Root ClassDefaultEmpty
The card root's own component class. Empty keeps .product.
Price Hook ClassDefaultOn
On: the price carries the theme's own .product-price class, which gives it a size, weight, colour and bottom margin. Off: the price carries only the classes stated here, for a design that sets its own type on that element.
Card Root Hook ClassDefaultOn
On: the card root carries the theme's own .product class, which its product rules apply to. Off: the root carries only the classes stated here, for a design whose card is a plain column with no framed picture box or overlay for those rules to reach.
Card Inner Base ClassDefaultEmpty
The inner wrapper's own class. Empty keeps .grid-inner.
Shown when Card Inner Wrapper is "Emit (default)"
Carousel
Items (base)Default
0Fallback item count for every breakpoint that sets none of its own. 0 leaves it unset.
Shown when Display Mode is "Carousel"
Items (XS)Default
1Slides visible on screens narrower than 576 pixels. 0 falls back to Items (base).
Shown when Display Mode is "Carousel"
Items (SM)Default
2Slides visible from 576 pixels up. 0 repeats the count from the breakpoint below.
Shown when Display Mode is "Carousel"
Items (MD)Default
3Slides visible from 768 pixels up. 0 repeats the count from the breakpoint below.
Shown when Display Mode is "Carousel"
Items (LG)Default
4Slides visible from 992 pixels up. 0 repeats the count from the breakpoint below.
Shown when Display Mode is "Carousel"
Items (XL)Default
4Slides visible from 1200 pixels up, including the widest screens. 0 repeats the count from the breakpoint below.
Shown when Display Mode is "Carousel"
Item Gap (px)Default
20Space between one slide and the next, in pixels.
Shown when Display Mode is "Carousel"
Show ArrowsDefaultOn
Show the previous and next arrows beside the slides.
Shown when Display Mode is "Carousel"
Arrows Always VisibleDefaultOff
Keep the arrows on screen instead of revealing them when the pointer enters the carousel.
Shown when Display Mode is "Carousel"
Show DotsDefaultOn
Show the row of dots below the slides, one per page.
Shown when Display Mode is "Carousel"
Autoplay (ms)Default
0Milliseconds between slides. 0 disables autoplay.
Shown when Display Mode is "Carousel"
LoopDefaultOff
Run the slides in an endless cycle, so the last one is followed by the first. Off stops at each end.
Shown when Display Mode is "Carousel"
Transition SpeedDefault
250Milliseconds per slide transition.
Shown when Display Mode is "Carousel"
Centre Active SlideDefaultOff
Keeps the active slide in the middle of the stage.
Shown when Display Mode is "Carousel"
Stage PaddingDefault
0Pixels of the neighbouring slides left visible at each edge. 0 leaves it unset.
Shown when Display Mode is "Carousel"
Animate InDefaultEmpty
Animation class applied to the incoming slide. Empty uses a plain slide.
Shown when Display Mode is "Carousel"
Animate OutDefaultEmpty
Animation class applied to the outgoing slide. Empty uses a plain slide.
Shown when Display Mode is "Carousel"
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.