Product Collection block: New JS events and soft deprecation of Product Grid blocks

At the start of the year, we announced a significant update to our product grid system, the Product Collection block. Today, we’re introducing new JavaScript events to the Product Collection block and are on the path to consolidating all product grid functionalities within this single block. This will provide an improved experience by covering all the features of existing product grids, such as “All Products”, “Newest Products”, “On Sale Products”, and more, into the Product Collection block.

To support this, new JS events have been implemented as a replacement for actions previously emitted by other product grid blocks. These changes will become available with the release of WooCommerce 9.4.

Check out our example below on how to migrate to the new event structure, or dive directly into our documentation.

New JavaScript Events:

Starting with WooCommerce 9.4, Product Collection will emit JavaScript events on the frontend:

New JS Events:

Code Migration Example:

If you previously used the following code with experimental__woocommerce_blocks-product-list-render:

wp.hooks.addAction(
    "experimental__woocommerce_blocks-product-list-render",
    "your-namespace",
    ( {products, listName } ) => {
        /* ... */
    }
);

You should now use:

document.body.addEventListener(
    'wc-blocks_product_list_rendered',
    event => {
        const { collection } = e.detail;
        /* ... */
    }
);

Please note that the new events do not have an exact 1:1 payload match with the previous actions. Refer to the updated documentation for details on the new event structure.

Upcoming Soft Deprecation of Product Grid Blocks:

As part of the ongoing transition, WooCommerce 9.5 will introduce a soft deprecation for specific product grid blocks by hiding them from the block inserter. However, these blocks will continue to function on sites where they’re already in use.

• All Products
• Best Selling Products (will become Top Sellers collection)
• Top Rated Products (will become Top Rated collection)
• Newest Products (will become New Arrivals collection)
• On Sale Products (will become On Sale collection)
• Hand-picked Products (will become Product Collection with “Hand-Picked Products” filter)
• Products by Category (will become Product Collection with “Product Categories” filter)
• Products by Tag (will become Product Collection with “Product Tags” filter)
• Products by Attribute (will become Product Collection with “Product Attributes” filter).

We encourage you to transition to the Product Collection block to take full advantage of its unified features.

Tell us your thoughts

We’re looking forward to your feedback! Use Making Product Collection the main block for product lists and collections #44776 GitHub discussion to discuss extensibility.