WooCommerce Blocks Store Owner’s Guide

Active Filters

The Active Filters block shows all the product filters that are currently active, and enables customers to disable active filters.

This block works well in tandem with the Filter by Attribute, Filter by Price, Filter by Stock, and Filter by Rating blocks. When users select one or more filters from filter blocks, the Active Filters block will display those filters.

To select how to display active filters:

Edit the page/templates containing the Active Filters block.
Select the Active Filters block.
Open the sidebar.
Click on the block tab.
Select if you wish the active filters to be displayed as a list or as chips.

The Active Filters block works with the All Products and Product Archive templates.

Filter blocks work in combination with the All Products block and with PHP templates.

All Products

↑ Back to top

The All Products block allows you to display all the products from your store in a grid. You can customize how to display them and what information to show about each product through the block settings.

Customizing the layout of the All Products grid

↑ Back to top

You can customize the layout of the product grid by changing how many products are shown per row, and how many rows you want to display. Depending on the number of products on your store, the block will divide the products into as many pages as needed, enabling your customers to seamlessly navigate through them.

To customize the layout of the All Products grid:

Select the All Products block.
Open the sidebar.
Use the Columns and Rows sliders in the Layout Settings section to adjust the number of columns and rows you wish to display.
Use the toggle to align the last block to the bottom.

Customizing the layout of each product

↑ Back to top

You have full control over what information is displayed for each product.

To customize the layout of each product:

Select the All Products block.
Click on Edit the layout of each product on the toolbar above, marked with a pencil icon.
Click on Reset Layout.
Configure the layout as you wish.

To explore which blocks you can display for each product:

Open the List View.
Reorder the blocks or insert new inner blocks.
Click Done to save your changes.

Customizing the content settings of the All Products grid

↑ Back to top

To customize the content settings of the All Products grid:

Select the All Products block.
Open the sidebar.
Use the toggle switch in the Content Settings section to Show Sorting Dropdown.

All Reviews

↑ Back to top

The All Reviews block shows a list of all product reviews in your store, enabling visitors to read what customers think about your products.

To customize the All Reviews block:

Select the All Reviews block.
Open the sidebar.
Use the toggle switches to decide which content to display in the list of reviews.
Select if you want to display the reviewer’s image or the product image.
Select the order by which you want to order the reviews.
Select the number of reviews shown by default.
Select whether to display a Load more button, so customers can read more reviews than the ones displayed by default.
Select the number of reviews to be displayed every time the user clicks on Load more.
Configure the text color and font size.

In order for the All Reviews block to be displayed properly, your store needs to have at least one review.

Best Selling Products

↑ Back to top

The Best Selling Products block allows you to display the products with the most sales on your store. You can customize how to display and what information to show about each product through the block settings.

Customizing the layout of the Best Selling Products grid

↑ Back to top

To customize the layout of the Best Selling Products grid, follow these steps:

Select the Best Selling Products block.
Open the sidebar.
Use the Columns and Rows sliders in the Layout section to adjust the number of columns and rows you wish to display.

Customizing the content of the Best Selling Products grid

↑ Back to top

You can customize what information is displayed for each of your products in the grid. You cannot change the order of the information.

To customize which product elements are displayed in the Best Selling Products grid:

Select the Best Selling Products block.
Open the sidebar.
Use the toggle switches in the Content section to decide which content to display in your grid.

Featured Category

↑ Back to top

The Featured Category block enables you to highlight a specific product category on your store, and provide direct access to its products.

By default the Featured Category block displays the image associated with the category you want to highlight, but you can customize it with a different image.

To customize the Featured Category block:

Select the Featured Category block.
Select a category to feature.
Use the Toolbar options to:
1. Change the block width.
2. Change the title alignment.
3. Replace the background image.
4. Select a different category.
Open the sidebar to:
1. Show/hide the description.
2. Change the background and text color.
Click on the Shop now button to:
1. Format the button text.
2. Change the color and background.

In order for the Featured Category block to be displayed properly, please make sure you have assigned products to it.

Single Product

↑ Back to top

The Single Product block will allow you to select and display any product on a page, post, or template.

Products (beta)

↑ Back to top

The Products (beta) block will allow you to display and arrange a selection of products based on popular filters, stock status, taxonomias and keyword.

Customizing the layout and content of the Products (beta)

↑ Back to top

You can customize the layout of the products (beta) by changing how many products are shown per row, and how many rows you want to display. Depending on the number of products in your store, the block will divide the products into as many pages as needed, enabling your customers to seamlessly navigate through them. You can also change the content width with options for full and wide widths.

As for the content, you can use different settings to create your product selection. To customize the content:

Select the Products (beta) block.
Open the sidebar.
Use the Popular filters, Advanced Filters and Filters to adjust the product selection you wish to display.

Filter by Price

↑ Back to top

The Filter by Price block enables customers to filter products by choosing a price range.

The Filter by Price block is made up of 2 sub-blocks, the Heading and the Filter by Price Controls sub-blocks.

Customizing the Heading sub-block

↑ Back to top

To customize the Heading sub-block:

Select the Filter by Price block in the editor.
Select the Heading sub-block.
Use the toolbar options to:
1. Change the heading level i.e. H1, H2, H3, H4, H5 & H6.
2. Change the alignment.
3. Make the heading text bold or italic.
4. Make the heading a link.
Open the sidebar to:
1. Change the text color, background color & link color
2. Change the appearance of text etc.

Customizing the Filter by Price Controls sub-block

↑ Back to top

To customize the Filter by Price Controls sub-block:

Select the Select the Filter by Price block in the editor.
Select the Filter by Price Controls sub-block.
Use the toolbar options to:
1. Make the price editable or show it as plain text.
2. Click on the toggle to hide or show the Apply filters button.

Filter by Attribute

↑ Back to top

The Filter by Attribute block enables customers to filter a grid of products based on selected attributes.

To customize the Filter by Attribute information you want to display:

Select the Filter by Attribute block.
Select the attribute by which your customers will be able to filter the products on your store.
Open the sidebar to:

Include or omit the product count.
Allow a single or multiple options.

Select the Filter Conditions.
Select the Display Style.
Select the Product attribute.
Configure the text color.

To use the Filter by Attribute block, please make sure that there are products on your store that have at least 1 attribute assigned to them.

Filter by Stock

↑ Back to top

The Filter by Stock block enables customers to filter the product grid by stock status.

The Filter by Stock block is made up of 2 sub-blocks, the Heading and the Filter by Stock Controls sub-blocks.

Customizing the Heading sub-block

↑ Back to top

To customize the Heading sub-block:

Select the Filterby Stock block in the editor.
Select the Heading sub-block.
Use the toolbar options to:
Change the heading level i.e. H1, H2, H3, H4, H5 & H6.
Change the alignment.
1. Make the heading text bold or italic.
2. Make the heading a link.
Open the sidebar to:
1. Change the text color, background color & link color
2. Change the appearance of text etc.

Customizing the Filter by Stock Controls sub-block

↑ Back to top

To customize the Filter by Stock Controls sub-block:

Select the Select the Filterby Stock block in the editor.
Select the Filter by Stock Controls sub-block.
Use the toolbar options to:

Make the price editable or show it as plain text.
Hide or show the Apply filters button.

Hand-picked Products Block

↑ Back to top

The Hand-picked Products block enables you to select specific products from your store to be displayed in a product grid.

To customize the Hand-picked Products information you want to display:

Select the Hand-picked Products block.
Select the products you want to feature.
Open the sidebar to:

Define the number of columns in the grid;
Select whether you want to align the buttons vertically.
Use the toggle switches in the Content section to decide which content to display in your grid.
Define what order the products should be ordered by.
Select the products that you want to display in the products grid.

Customer Account Block

↑ Back to top

The Customer Account Block enables customers to visit the My Account page of your store from anywhere.

Mini Cart

↑ Back to top

The Mini Cart block enables customers to check the contents of their cart from any store page.

To customize the Mini Cart block:

Select the Mini Cart block.
Open the sidebar.
Select what happens when a customer adds a product to the cart.
Show or Hide Cart Price.
Configure the appearance of the Mini Cart.

Mini Cart

Newest Products Block

↑ Back to top

The Newest Product Block enables you to display a grid of the last added products on your store.

Customizing the layout of the Newest Products grid

↑ Back to top

You can customize the layout of the Newest Products grid by choosing how many products are shown per row, and how many rows you want to display. Depending on the number of products on your store, the block will divide the products into as many pages as needed, enabling your customers to seamlessly navigate through them.

To customize the layout of the Newest Products grid:

Select the Newest Products block.
Open the sidebar.
Use the Columns and Rows sliders in the Layout section to adjust the number of columns and rows you wish to display.

Customizing the content of the grid

↑ Back to top

You can customize what information is displayed for each of your products in the grid. You cannot change the order of the information.

To customize which product elements are displayed for each of the products in the grid:

Select the Newest Products block.
Open the sidebar.
Use the toggle switches in the Content section to decide which content to display in your grid.

On Sale Products Block

↑ Back to top

The On Sale Products block enables you to display a grid of products that are currently on sale in your store.

Customizing the layout of the On Sale Products grid

↑ Back to top

To customize the layout of the On Sale Products grid:

Select the On Sale Products block.
Open the sidebar.
Use the Columns and Rows sliders in the Layout section to adjust the number of columns and rows you wish to display.
Use the toggle to align the last block to the bottom.

Customizing the content for each product in the grid

↑ Back to top

You can customize what information is displayed for each of your products in the grid via the sidebar. You cannot change the order of the information.

To customize which product elements are displayed for each of your products in the grid:

Select the On Sale Products block.
Open the sidebar.
Use the toggle switches in the Content section to decide which content to display in your grid.

Additional Customization Options

↑ Back to top

The On Sale Products block also enables you to:

Define what order the products should be sorted by.
Select the products that you want to display in the grid.
Select if you want to filter the products displayed by category.
Select if you want to filter the products displayed by stock status.

Products by Attribute Block

↑ Back to top

The Products by Attribute block displays products listed under your selected attribute and enables you to customize how many products, rows, and columns are displayed to your customers.

Customizing the layout of the Products by Attribute grid

↑ Back to top

To customize the layout of the Products by Attribute grid:

Select the Products by Attribute block.
Open the sidebar.
Use the Columns and Rows sliders in the Layout Settings section to adjust the number of columns and rows you wish to display.
Use the toggle to align the last block to the bottom.

Customizing the content for each product in the grid

↑ Back to top

You can customize what information is displayed for each of your products in the grid via the sidebar. You cannot change the order of the information.

To customize which product elements are displayed for each of your products in the grid:

Select the Products by Attribute block.
Open the sidebar.
Use the toggle switches in the Content section to decide which content to display in your grid.

Products by Category Block

↑ Back to top

The Products by Category block allows you to display a grid of products based on their category. Products can match any selected category or all selected categories. You can customize how to display and what information to show about each product through the block settings.

Customizing the layout of the Products by Category grid

↑ Back to top

To customize the layout of the categories grid:

Select the Products by Category block.
Open the sidebar.
Use the Columns and Rows sliders in the Layout section to adjust the number of columns and rows you wish to display.
Use the toggle to align the last block to the bottom.

Customizing the content of the Products by Category grid

↑ Back to top

You can customize what information is displayed for each of your products in the grid. You cannot change the order of the information.

To customize which product elements are displayed in the Products by Category grid:

Select the Products by Category block.
Open the sidebar.
Use the toggle switches in the Content section to decide which content to display in your grid.

Products by Tag Block

↑ Back to top

The Products by Tag block allows you to display a grid of products based on the tags assigned to them.

Customizing the layout of the Products by Tag grid

↑ Back to top

You can customize the layout of the product grid by changing how many products are shown per row, and how many rows you want to display. Depending on the number of products in your store, the block will divide the products into as many pages as needed, enabling your customers to seamlessly navigate through them.

To customize the layout of the Products by Tag Block grid:

Select the Products by Tag block.
Open the sidebar.
Use the Columns and Rows sliders in the Layout section to adjust the number of columns and rows you wish to display.
Use the toggle to align the last block to the bottom.

Customizing the content of the Products by Tag grid

↑ Back to top

You can customize what information is displayed for each of your products in the grid via the sidebar. You cannot change the order of the information.

To customize which product elements are displayed in the Products by Tag grid:

Select the Products by Tag block.
Open the sidebar.
Use the toggle switches in the Content section to decide which content to display in your grid.

↑ Back to top

The Product Categories List Block allows you to display a list of product categories in bullet-point form or under a dropdown.

You can customize the layout of the categories by changing the display between List and Dropdown.

To customize which List Settings elements are displayed in the Product Categories List Block:

Select the Product Categories List block.
Open the sidebar.
Use the display style in the List Settings section to decide which option you want to display.

↑ Back to top

You can customize how the categories are displayed via the sidebar. You cannot change the order of the information.

To customize which product elements are displayed in the Products by Tag grid:

Select the Products Categories List block.
Open the sidebar.
Use the toggle switches in the Content section to decide which content to display in your grid.

Product Search

↑ Back to top

The Product Search Block allows your customers to search for products on your store.

Customizing the layout of the Product Search

You can customize the layout of the search bar by changing the Display Settings via the sidebar and toolbar.

To customize how the search bar is displayed:

Select the Product Search block.
Open the sidebar.
Use the display settings in the Display Settings section to decide which option you want to edit. You will be able to edit width, color, typography and border.
You can also click on the block and use the toolbar settings to change the appearance of the Product Search display.

Reviews by Category

↑ Back to top

The Reviews by Category block allows you to show a list of reviews in your store for products that belong to a specific category.

To add or remove product that are displayed in the Reviews by Category grid:

Use the search bar to filter out categories.
Choose the categories.
Click done once you have it ready.

To customize the Reviews by Category block:

Select the Reviews by Category block.
Open the sidebar.
Use the toggle switches to decide which content to display in your grid.
Select if you want to display the reviewer’s image or the product image.
Select the order by which you want to order the reviews.
Select the number of reviews shown by default.
Select whether to display a Load more button, so customers can read more reviews than the ones displayed by default.
Select the number of reviews to be displayed every time the user clicks on Load more.
Configure the text color and font size.

In order for the Reviews by Category block to be displayed properly, the category you select needs to have at least one review.

Reviews by Product

↑ Back to top

The Reviews by Product block allows you to show a list of reviews in your store for an individual product.

To add or remove product that are displayed in the Reviews by Product grid:

Use the search bar to filter out the products.
Choose the product.
Click done once you have it ready.

To customize the Reviews by Product block:

Select the Reviews by Product block.
Open the sidebar.
Use the toggle switches to decide which content to display in your grid.
Select if you want to display the reviewer’s image or the product image.
Select the order by which you want to order the reviews.
Select the number of reviews shown by default.
Select whether to display a Load more button, so customers can read more reviews than the ones displayed by default.
Select the number of reviews to be displayed every time the user clicks on Load more.
Configure the text color and font size.

In order for the Reviews by Product block to be displayed properly, the product you select needs to have at least one review.

Top Rated Products Block

↑ Back to top

The Top Rated Products block displays a grid of your store’s top-rated products.

Customizing the layout of the Top Rated Products grid

↑ Back to top

To customize the layout of the Top Rated Products grid:

Select the Top Rated Products block.
Open the sidebar.
Use the Columns and Rows sliders in the Layout Settings section to adjust the number of columns and rows you wish to display.
Use the toggle to align the last block to the bottom.

Customizing the content of the Top Rated Products grid

↑ Back to top

You can customize what information is displayed for each of your products in the grid via the sidebar. You cannot change the order of the information.

To customize the content of the Top Rated Products grid:

Select the Top Rated Products block.
Open the sidebar.
Use the toggle switches in the Content section to decide which content to display in your grid.
Select if you want to filter the products by product category.
Select if you want to filter the products by stock status.

Store Breadcrumbs Block

↑ Back to top

The Store Breadcrumbs block allows you to show your customers the path they took to get to the current page, making it easier for them to navigate through your store.

Customizing the layout of the Store Breadcrumbs

↑ Back to top

You can customize the layout of the Store Breadcrumbs Block by choosing how it will be displayed on your pages.

To customize the layout of the Store Breadcrumbs Block:

Select the Store Breadcrumbs block.
Open the sidebar.
Use the sliders in the Color and Typography Settings section to adjust the text color and the font type and size you wish to display.

In order for the Store Breadcrumbs block to be displayed properly, you need to add it while editing a template page.

Product Results Count Block

↑ Back to top

The Product Results Count block allows you to display the number of products found based on a specific search query or filter, making it easier for your customers to see how many products match their criteria.

Customizing the layout of the Product Results Count

↑ Back to top

You can customize the layout by choosing how it will be displayed on your pages.

To customize the display of the Product Results Count Block:

Select the Product Results Count block.
Open the sidebar.
Use the sliders in the Color and Typography Settings section to adjust the text color and the font type and size you wish to display.

In order for the Product Results Count block to be displayed properly, you need to add it while editing a template page.

Catalog Sorting Block

↑ Back to top

The Catalog Sorting block allows users to sort products within a category by various criteria, such as price, popularity, and newness.

Customizing the layout of the Catalog Sorting Block

↑ Back to top

You can customize the layout by choosing how it will be displayed on your pages.

To customize the display of the Catalog Sorting Block:

Select the Catalog Sorting block.
Open the sidebar.
Use the sliders in the Color and Typography Settings section to adjust the text color and the font type and size you wish to display.

In order for the Catalog Sorting block to be displayed properly, you need to add it while editing a template page.

Product Meta Block

↑ Back to top

The Product Metal block allows you to display the product SKU and product categories in a single product template.

Customizing the layout of the Product Meta Block

↑ Back to top

You can customize the layout by choosing how it will be displayed on your pages.

To customize the display of the Product Meta Block:

Select the Product Meta block.
Open the sidebar.
Use the sliders in the Layout, Color, Typography, and Dimensions Settings section to adjust the text color, font type, and size you wish to display.

In order for the Product Meta block to be displayed properly, you need to add it while editing the single product template.

Product Image Gallery Block

↑ Back to top

The Product Image Gallery block allows you to add an extra image gallery to your single product template.

Customizing the layout of the Product Image Gallery Block

↑ Back to top

The product Image Gallery block has no options for customization.

In order for the Product Image Gallery block to be displayed properly, you need to add it while editing the single product template

Product Details Block

↑ Back to top

The Product Details block allows you to add product descriptions, information, and reviews to your single product template.

Customizing the layout of the Product Details Block

↑ Back to top

The Product Details block has no options for customization.

In order for the Product Details block to be displayed properly, you need to add it while editing the single product template.

Add to Cart Form Block

↑ Back to top

The Add to Cart Form block allows you to add the block version of the add to cart form in a single product template.

Customizing the layout of the Add to Cart Form Block

↑ Back to top

The Add to Cart Form block has no options for customization. However, this will adapt depending on the product type. e.g. single product, variation, grouped products.

In order for the Add to Cart Form Block block to be displayed properly, you need to add it while editing the single product template.

↑ Back to top

The Related Products block allows you to display the products related to the featured product.

↑ Back to top

You can customize the layout by choosing how it will be displayed on your pages.

To customize the display of the Related Products Block:

Select the Related Products block.
Open the sidebar.
Use the sliders in the Typography Settings section to adjust the font type and size you wish to display.

In order for the Related Products block to be displayed properly, you need to add it while editing a template page.

Product Reviews Block

↑ Back to top

The Related Products block allows you to display the reviews for a given product. It can be inserted inside the Single Product template.

Customizing the layout of the Product Reviews Block

↑ Back to top

The Product Reviews block has no options for customization.

In order for the Product Reviews block to be displayed properly, you need to add it while editing a template page.

Small Discount Banner with Image Pattern Block

↑ Back to top

The Small Discount Banner with Image Pattern Block is a compact promotional tool, typically used in secondary areas like a sidebar or footer. This block can help subtly advertise discounts or promotions without taking up too much screen space.

To customize this block:

↑ Back to top

Select the Small Discount Banner with Image Pattern Block.
Open the sidebar for settings.

You will find options to adjust:

Color: Choose the color for the text and background.
Typography: Adjust the size of the text.
Dimensions: Modify the padding and margin to fit your design needs.

Clicking on the image opens further customization options:

Replace Image: Allows you to change the image.
Alternative Text: Add alt text for better SEO and accessibility.
Width and Height: Adjust the image’s dimensions.
Styles, Filters, and Border & Radius: Add extra styling effects to the image.

Product Collection Banner Pattern Block

↑ Back to top

The Product Collection Banner Pattern Block is a larger, more prominent tool for showcasing a specific collection or group of products. It’s ideal for promoting themed collections or categories.

To customize this block:

↑ Back to top

Select the Product Collection Banner Pattern Block.
Open the sidebar for settings.

You will find options to adjust:

Color: Choose the color for the text and background.
Typography: Adjust the text size.
Dimensions: Modify the padding and margin to fit your design needs.

Clicking on the image opens further customization options:

Replace Image: Allows you to change the image.
Alternative Text: Add alt text for better SEO and accessibility.
Width and Height: Adjust the image’s dimensions.
Styles, Filters, and Border & Radius: Add extra styling effects to the image.

Discount Banner with Image Pattern Block

↑ Back to top

The Discount Banner with Image Pattern Block is a larger, highly noticeable banner used for promoting specific discounts or sales. With its dominant placement, it effectively captures the visitors’ attention.

To customize this block:

↑ Back to top

Select the Discount Banner with Image Pattern Block.
Open the sidebar for settings.

You will find options to adjust:

Color: Choose the color for the text and background.
Typography: Adjust the text size.
Dimensions: Modify the padding and margin to fit your design needs.

Clicking on the image opens further customization options:

Replace Image: Allows you to change the image.
Alternative Text: Add alt text for better SEO and accessibility.
Width and Height: Adjust the image’s dimensions.
Styles, Filters, and Border & Radius: Add extra styling effects to the image.

Discount Banner Pattern Block

↑ Back to top

The Discount Banner Pattern Block is a text-driven promotional tool. It uses graphic elements to communicate deals or discounts, and its size and placement can be adjusted to cater to your marketing needs.

To customize this block:

Select the Discount Banner Pattern Block.
Open the sidebar for settings.

You will find options to adjust:

Color: Choose the color for the text and background.
Typography: Adjust the text size.
Dimensions: Modify the padding and margin to fit your design needs.

As this block typically doesn’t include images, the settings focus more on the text and background. However, if you choose to add an image:

Replace Image: Allows you to change the image.
Alternative Text: Add alt text for better SEO and accessibility.
Width and Height: Adjust the image’s dimensions.
Styles, Filters, and Border & Radius: Add extra styling effects to the image.

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! 🙏

WooCommerce Blocks Store Owner’s Guide

Customizing the layout of the Product Categories List

Customizing the layout of the Product Search