Product Collection Block

The Product Collection block is designed to help you display and customize archives of products; and offer product recommendations.

Upon inserting the block, and depending on the template or page that you are currently editing, you will be prompted to create your own custom product collection; or choose from a list of variations/recipes that enable you to quickly offer some of the most common types of recommendations.

The Product Collection block is used by default in all the WooCommerce templates for displaying your product catalog:

  • Product Catalog,
  • Products by Category,
  • Products by Tag,
  • Products by Attribute and
  • Product Search Results

Beyond the templates where it is included, you can add the Product Collection block to any page or template on your site where you’d like to showcase your products.

Product Collections

↑ Back to top

The product collection block has a selection of predefined recipes that you can choose from, and then further customize. The premade collection recipes are great for banners and by default only show a single row of products with no pagination, but can be edited to fit any design or layout. You can also choose to create a custom collection.

A window prompting to "Choose a collection" with the options of: product catalog, featured products, top rated products, on sale products, best sellers, or new arrivals.
After inserting the Product Collection block, you’ll be prompted to choose a collection. You can change the selected collection at any time from the block toolbar.

Product Catalog

↑ Back to top

By default the Product Catalog collection displays your shop’s entire catalog, and adapts to the context of the page that it’s on. For example, if you add the Product Catalog collection to the “Products by Tag” template, when a shopper visits the page for a specific tag, they’ll only see the products in your catalog that have that tag. You can disable a product collection from dynamically matching the context of a page by toggling the “Sync with current query” setting in the Collection’s sidebar block settings.

↑ Back to top

Use this collection to showcase your featured products. See how to mark products as featured

Top Rated

↑ Back to top

Use this product collection to recommend the products in your shop with the best reviews.

On Sale

↑ Back to top

Just like the name says, this product collection will showcase the products in your shop that are on sale!

Best Sellers

↑ Back to top

The best sellers product collection showcases the products that have been purchased the most on your site.  When products have been sold the same number of times, the product published most recently will be shown first.

New Arrivals

↑ Back to top

The new arrivals product collection highlights products most recently added to your catalog. By default only products created within the last 7 days will be displayed. This setting can be adjusted in the block sidebar.

The block sidebar settings for defining “New Arrivals”

Collections are, essentially, preset filters on the collection block. You can change the selected collection at any time with the “Choose Collection” button in the Block toolbar, then tweak the filters in the block settings sidebar as desired.

Block Structure

↑ Back to top

After selecting which product collection to use, in the list view you’ll see a parent block added that matches the collection you chose, with blocks inside for: 

  • Product Template – These blocks show the product’s image, title, price, and add to cart button. 
  • Pagination – These blocks control how your shoppers navigate through your collection. If you set your collection to show only 1 page of products, these controls will not be displayed.
  • No results – These blocks show the “Empty state” of the collection. i.e. What your shoppers will see if they navigate to the page and no products match your set collection filters.

Each of these block elements is composed of several nested inner blocks, each of which has its own settings and can be removed if needed. Explore the settings of the parent block and each inner block by selecting it, then checking the block and style settings in the settings sidebar, as well as any settings in the block toolbar. See our guide on exploring block settings here

In addition to altering the settings of the existing blocks, you can also add additional blocks of your choosing to further customize the product templates, add additional content to the collection area, or change its layout! Feel free to explore and see where your creativity takes you!

Customization

↑ Back to top

Customizing your shop page with the Product Collection block gives you lots of options for how to display your products. Here we cover some important basics. You can take things further to create very interesting and compelling designs by utilizing layout blocks to alter the structure, and the style options to match your brand.

How can I create a single row layout of products?

↑ Back to top

To set a product collection to only display a single row of products: 

  1. In the collection’s sidebar block settings choose the “Grid” layout option, then enter how many columns you’d like in your row of products. Leave the “Responsive” toggle unchecked.
  2. In the collection’s block toolbar, click the “Display Settings” icon and set the “Items per page” to the same number of columns you’ve chosen, and the “Max pages to show” to 1

Now your product collection will display as a single row with the number of columns you’ve selected.

How can I display a hand-picked selection of products based on filters I choose?

↑ Back to top

If you have a specific design in mind, sometimes you’ll want to display a specific filtered set of products, instead of having the product collection match the query and filters of the current page or template.

To make a product collection display a custom filtered set of products:

  1. In the collection’s sidebar block settings leave the “Sync with current query” toggle disabled. The “Filters” section will appear.
  2. Under the “Filters” section in the sidebar block settings, click the three dots menu, then click to toggle the different filtering options.
    • After clicking a filter in the list to toggle it on, that filter and its options will display in the block settings sidebar under the “Filters” section.
  3. Using your chosen filters filters, select the products, categories, or combinations that you want to show in this collection.

This can be a great use of a second product collection on a page, that acts as a banner to recommend specific products to your shoppers. The possibilities are nearly endless!

Questions and Support

↑ Back to top

Do you still have questions and need assistance? 

This documentation is about the free, core WooCommerce plugin for which support is provided in our community forums on WordPress.org. Searching there you’ll often find that your question has been asked and answered before.

If you haven’t created a WordPress.org account to use the forums, here’s how.

  • If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the Woo Marketplace.
  • Need ongoing advanced support, or a customization built for WooCommerce? Hire a WooExpert agency.
  • Are you a developer building your own WooCommerce integration or extension? Check our Developer Resources.

If you weren’t able to find the information you need, please use the feedback thumbs below to let us know! 🙏