# WooCommerce Product Collection block for catalogues

Shop, category and brand templates in 2026: recipes, query sync, filters, carousels and WooCommerce 10.6 pickers.

- Date: 2026-09-07
- Category: WooCommerce

The WooCommerce Product Collection block is the grid I now ship on shop, category and brand templates instead of the old Products block. I am Alan Vo, a Gold Coast web developer with 18 years on WordPress catalogues. In 2026 this block is the default in every WooCommerce archive template, and the 10.6 pickers finally make merchandisers stop asking for a shortcode.

WooCommerce documents the merchant surface in the [Product Collection block guide](https://woocommerce.com/document/woocommerce-store-editing/customizing-shop-page-catalog/product-collection-block/). This note is the production path I use on furniture and footwear shops: recipe, query sync, filters, and what breaks when someone edits the Shop page instead of the Product Catalog template.

## Why the WooCommerce Product Collection block matters in 2026

The WooCommerce Product Collection block matters in 2026 because it is the supported query for every catalogue template WooCommerce ships, not a homepage widget you drop once and forget. Block themes and the Site Editor use it on Product Catalog, Products by Category, Products by Tag, Products by Attribute, Products by Brand, and Product Search Results. You can also place it on any page that needs a row of products.

The old Products block was a one-off query. This block is a parent with a Product Template, pagination and an empty state, plus recipes for featured, on sale, best selling, new arrivals, hand-picked, related, upsells and cross-sells. WooCommerce 10.6, released 10 March 2026, made those recipes usable: Hand-picked, brand, tag and category collections now open pickers instead of an empty placeholder. Brands have been in core since 9.6.

A synced collection can sit next to the [Product Filters block](https://woocommerce.com/document/woocommerce-store-editing/customizing-shop-page-catalog/filter-products/) and update without a full reload. That is layered navigation without a jQuery filter plugin. I still use [WooCommerce product page blocks](https://alanvo.com/blog/woocommerce-product-page-blocks/) for the PDP. If the shop loop is still a shortcode, read [WooCommerce blocks vs shortcodes in 2026](https://alanvo.com/blog/woocommerce-blocks-vs-shortcodes/) first.

## How the WooCommerce Product Collection block actually works

The WooCommerce Product Collection block actually works as a parent whose query can follow the current template or ignore it. WooCommerce describes two query types. Default follows the template and lets shoppers filter. Custom ignores archive context and uses the Order By, Products Per Page, sale and stock settings in the sidebar. Archive templates also have Sync with current query. Leave it on for the shop grid. Turn it off when the same page needs a second collection that is a banner of featured sofas, not the category the shopper already opened.

![WooCommerce Product Collection block checkout fields on a laptop in a studio](../../images/blog/woocommerce-product-collection-block-1.jpg)

Recipes are preset filters on that parent. Product Catalog (or create your own) is the archive default and adapts to the tag, category, attribute or brand URL. Featured, Top Rated, On Sale and Best Selling do what their names say. New Arrivals defaults to products created in the last 7 days. I widen that window on slow catalogues. Hand-Picked is a merchant-chosen ID list. Related uses categories and tags. Upsells read linked products on the Edit Product screen. Cross-sells are the cart companions.

Inside the parent you get Product Template (image, title, price, add to cart), pagination when more than one page is allowed, and No results. I treat the empty state as a merchandising page: a sentence, a category link, and a hand-picked fallback. Default "no products" copy on a brand archive is a soft 404 that still returns 200.

Layout is Stack, Grid or Carousel. Grid is the shop. Carousel is a landing-page row, not an archive. A homepage row is Grid with the same column count as Items per page and Max pages set to 1. Random order is a Custom query option only. I do not use Random on an indexable archive. Default sort on a synced collection is Manual (menu order plus name), price, sales or rating, and every Default-query collection shares it. If merchandising wants a fixed shop order, they need menu order on the products. A Custom query on the Product Catalog template is how category pages stop showing the category.

Filters live in two places. Editor-side filters appear when Sync is off. Shopper-side filters are the Product Filters block: Active Filters, Price, Rating, Attribute, Availability, Category, Brand and Tag. They update without a reload unless you enable Reload full page. I leave reload off unless a child plugin needs a full navigation. Collapse filters on small screens. Two instances of the same filter stay in sync, which is how chips sit above the grid and the list sits in the sidebar.

The Product Catalog template is not the Shop page. WooCommerce's [catalog template guide](https://woocommerce.com/document/woocommerce-store-editing/customizing-shop-page-catalog/) is explicit: the template wins. If someone styled the Shop page and nothing changed, they edited the wrong surface. I keep Term Description. Category copy is still on-page SEO.

Category, tag, attribute and brand archives share that inner structure. WooCommerce documents [those templates](https://woocommerce.com/document/woocommerce-store-editing/templates/customizing-products-by-category-tag-attribute-or-brand/) separately because you can add a template for all categories or for one category. Attribute archives 404 unless Enable Archives is checked.

![Shopping bags on a counter used while testing WooCommerce Product Collection block](../../images/blog/woocommerce-product-collection-block-2.jpg)

Developers who need a recipe the chooser cannot build can register one with `__experimentalRegisterProductCollection` from `@woocommerce/blocks-registry`, or via `wc.wcBlocksRegistry`. WooCommerce marks that API experimental. I still use it for a complete-the-look row that needs a `product` reference. `usesReference` accepts `product`, `archive`, `cart` and `order`. `hideControls` can lock sale or taxonomy so a merchant cannot turn a related row into the whole shop.

WooCommerce 10.6 also lazy-loads Product Image blocks by default. The filter is `woocommerce_product_image_loading_attr`. On a collection that is the shop LCP, I keep the first row eager. Lazy-loading the first visible image is how a furniture PLP fails after a routine update.

## Production checklist for shop and category templates

A collection is not done when the editor shows four pretty cards. Work this list on staging.

1. Confirm WooCommerce is 10.6 or newer if you want the brand, category and hand-picked pickers.
2. Edit Appearance, Editor, Templates, WooCommerce, Product Catalog. Do not restyle the Shop page.
3. Keep Sync with current query on for shop and taxonomy grids. Add a second collection only when a banner must ignore the archive.
4. Pick a recipe on purpose. Product Catalog for archives. Related or Upsells on the PDP. Cross-sells on cart. Hand-picked for a campaign. New Arrivals only after the created window can fill the row.
5. Keep image, title, price and add to cart in Product Template. Add rating only if reviews exist.
6. Set Grid columns, items per page and max pages together. Leave Random off on indexable URLs.
7. Add Product Filters to catalog and category templates, including Active Filters. Collapse them on small screens. Leave Reload full page off unless a child plugin needs it.
8. For a specific category, add a dedicated template when that category needs filters the rest of the shop should not show.
9. Enable archives on each public attribute or the URL 404s. Confirm Brands is core (9.6+), not the old plugin.
10. Keep the first Product Image on the shop eager via `woocommerce_product_image_loading_attr` if 10.6 lazy-loads the LCP image.
11. Test add-to-cart from the collection on a variable product, a simple product and an out-of-stock SKU. Confirm the empty state on a brand with no products.
12. Watch `/wc/store/v1/` while toggling a filter. If `per_page=0` appears, 10.6 rejects it. Paginate instead.
13. Recheck title, H1, term description and breadcrumbs on shop, one category, one brand, one attribute and search results.

![WordPress admin on a screen during WooCommerce Product Collection block work](../../images/blog/woocommerce-product-collection-block-3.jpg)

## What breaks on a live catalogue

The Shop page and the Product Catalog template disagree. Merchandisers edit the page. The template wins. They think the deploy failed.

Sync is off on the archive collection. Category URLs show the whole shop. Paid traffic lands on `/product-category/sofas/` and sees beds.

A Custom query with a hard-coded category is used as the shop grid. Filters and Catalog Sorting then fight that tax query. I have watched a price filter return the unfiltered set because the collection was no longer the default query.

Hand-picked IDs go stale. New Arrivals set to 7 days on a slow catalogue is empty from day eight. Related on a PDP with one category and no tags is thin. Upsells are the merchandiser-owned list.

Attribute archives without Enable Archives 404. Product Filters on a hand-picked list do nothing useful. Carousel on the shop template hides pagination and is a poor LCP candidate.

A custom collection registered with default `scope` appears in the chooser. Hide it (`scope: []` or `["inserter"]`) if it is a developer recipe. 10.6 lazy-loading the first Product Image jumps field LCP. Classic `pre_get_posts` filter plugins do not see the collection query, so the block and the old widget disagree.

## How I measure a collection change

I measure a collection change as shop and category engagement, not as a Lighthouse score on a 4-product demo.

In GA4 I watch `view_item_list` and `select_item` on shop, category, brand and search. Item list name should match the template. If those events never fire, add-to-cart still works and the catalogue report is fiction. I wrote how I keep [GA4 ecommerce events](https://alanvo.com/blog/ga4-ecommerce-events/) honest.

I compare shop-to-PDP click rate and add-to-cart from the list for two weeks after a template swap. I do not invent a conversion lift. Their Nibs published +31% conversions after a storefront rebuild. That figure is not a Woo collection claim. It is the bar I use for whether merchandising got clearer.

Field INP and LCP on `/shop/` and the largest category. If LCP is the first product image, confirm it is not `loading="lazy"`. Crawl a category, a brand, an attribute and search, and confirm product URLs in the first page of HTML. Count empty New Arrivals, On Sale and brand rows. On staging, a 400 from `/wc/store/v1/` on `per_page` is the 10.6 Store API floor. Fix the request.

![Product photography on a table for a WooCommerce PDP](../../images/blog/woocommerce-product-collection-block-4.jpg)

## Related work on this site

The [Skanvi furniture storefront](https://alanvo.com/work/skanvi/) needs the shop grid tied to category context or a sofa page starts listing tables. The [Janet Janet footwear work](https://alanvo.com/work/janet-janet/) needs attribute archives that resolve, plus a card that still shows price and add to cart on a phone. [Stitching Stories](https://alanvo.com/work/stitching-stories/) runs a synced shop grid and a hand-picked campaign row on the same templates. All three were contract work on an agency team. One default collection for the archive. Extra collections only when they may ignore that archive.

## FAQ

### When should I use the WooCommerce Product Collection block instead of a shortcode?

Use the WooCommerce Product Collection block instead of a shortcode whenever the theme can run the Site Editor and you want filters or recipes merchandisers can edit. Keep a shortcode loop only if a classic plugin owns the archive and has no block integration. Same split as [WooCommerce blocks vs shortcodes in 2026](https://alanvo.com/blog/woocommerce-blocks-vs-shortcodes/).

### Does the WooCommerce Product Collection block replace my shop page content?

The WooCommerce Product Collection block does not replace your Shop page document. The Product Catalog template replaces the shop layout. Edit the template, then take the old page-builder grid out of the visual story so editors stop changing the wrong thing.

### Can the WooCommerce Product Collection block show related products on a PDP?

The WooCommerce Product Collection block can show related products on a PDP when you pick Related Products (categories and tags) or Upsells (linked products on the product screen). I prefer upsells when merchandising has an opinion.

### How do I add filters next to a WooCommerce Product Collection block?

Add filters next to a WooCommerce Product Collection block by inserting the Product Filters block on the same template and keeping Sync with current query enabled on the archive collection. Put Active Filters above the grid. Collapse the rest on small screens. Do not attach filters to a hand-picked collection and expect the IDs to change.


![Mobile checkout on a phone after WooCommerce Product Collection block changes](../../images/blog/woocommerce-product-collection-block-5.jpg)


HTML version: https://alanvo.com/blog/woocommerce-product-collection-block/