Products
Usage
The Products block lists every published product, or just the Category boxes you tick, as cards. Search for Products in the block inserter.
Each card shows the product's featured image, title, and excerpt. Add a button to the product's page with Links and Link Text, or make the image the link with Image Links. With both at their defaults the cards don't link anywhere.
When to use it
Use it for the catalog page, or for one category on a landing page. Grid fits most catalogs; Dense suits many small products with short names; Loose gives a few products room.
Tips
- Order only appears after you pick an Order By other than Default.
- Image Links makes the image open the product page too. The editor preview does not show this.
- Align → Center centers the title, excerpt, and button under the image. With Images → Circle it centers the circle as well.
- Products with no featured image show a placeholder, so set one on every product.
Settings
Products
Only list products in the categories you tick. Leave them all blank to list every published product.
How the products are sorted.
- DefaultThe order you drag products into in the Products list when Sort by dragging is on there. Otherwise oldest first.
- DateBy publish date.
- TitleAlphabetical by title.
- Last ModifiedBy the date each product was last edited.
Appears after you pick an Order By other than Default. Ascending is oldest first, A–Z, or least recently edited first.
How many cards fit in a row.
- GridFive per row.
- DenseSeven per row with a tighter gap.
- LooseThree per row.
Crop shape for each featured image.
- CircleA small round crop.
- Square defaultA 1:1 crop.
- RectangleA wide golden rectangle.
- NaturalThe image at its own proportions, uncropped.
- <hidden>Hide the image.
Left or center alignment for the title, excerpt, and button under the image.
Makes the image open the product page. The editor preview doesn't show this.
Visual style for the product name. The name stays an H3.
- <h1>Looks like your site's H1 style.
- <h2>Looks like your site's H2 style.
- <h3>Looks like your site's H3 style.
- <h4> defaultLooks like your site's H4 style.
- <h5>Looks like your site's H5 style.
- <h6>Looks like your site's H6 style.
- <p>Looks like your site's paragraph style.
- <strong>Looks like bold paragraph text.
- <small>Looks like small paragraph text.
- <hidden>
Visual style for the product's Excerpt. Hidden removes it.
- <p>Looks like your site's paragraph style.
- <small> defaultLooks like small paragraph text.
- <hidden>Hide the excerpt.
A button under each card that opens the product page. Hidden (the default) shows no button, so turn on Image Links or pick a style here, or the cards don't link anywhere.
- <button>A solid button.
- <understated>A text link.
- <hidden>No button.
The button label (default View Product). Only shows when Links is not Hidden.