WooCommerce
WooCommerce Product Collection block for catalogues
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. 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 and update without a full reload. That is layered navigation without a jQuery filter plugin. I still use WooCommerce product page blocks for the PDP. If the shop loop is still a shortcode, read WooCommerce blocks vs shortcodes in 2026 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.
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 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 separately because you can add a template for all categories or for one category. Attribute archives 404 unless Enable Archives is checked.
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.
- Confirm WooCommerce is 10.6 or newer if you want the brand, category and hand-picked pickers.
- Edit Appearance, Editor, Templates, WooCommerce, Product Catalog. Do not restyle the Shop page.
- Keep Sync with current query on for shop and taxonomy grids. Add a second collection only when a banner must ignore the archive.
- 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.
- Keep image, title, price and add to cart in Product Template. Add rating only if reviews exist.
- Set Grid columns, items per page and max pages together. Leave Random off on indexable URLs.
- 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.
- For a specific category, add a dedicated template when that category needs filters the rest of the shop should not show.
- Enable archives on each public attribute or the URL 404s. Confirm Brands is core (9.6+), not the old plugin.
- Keep the first Product Image on the shop eager via
woocommerce_product_image_loading_attrif 10.6 lazy-loads the LCP image. - 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.
- Watch
/wc/store/v1/while toggling a filter. Ifper_page=0appears, 10.6 rejects it. Paginate instead. - Recheck title, H1, term description and breadcrumbs on shop, one category, one brand, one attribute and search results.
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 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.
Related work on this site
The Skanvi furniture storefront needs the shop grid tied to category context or a sofa page starts listing tables. The Janet Janet footwear work needs attribute archives that resolve, plus a card that still shows price and add to cart on a phone. 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.
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.
Keep reading
Contact if you want this kind of work on a live store.