How to Use the Products by Attribute WooCommerce Block

Posted on December 16, 2021 by 1 Comment

How to Use the Products by Attribute WooCommerce Block
Blog / WordPress / How to Use the Products by Attribute WooCommerce Block

As your WooCommerce store grows, so will the variety of products that you offer. One of the best ways to categorize different items is by using features such as color or size. The Products by AttributeĀ WooCommerce block enables you to display products that fit specific characteristics. That way, customers can find the exact styles and sizes that fit their needs.

In this article, weā€™ll show you how to add the Products by AttributeĀ block to your posts and pages. Weā€™ll discuss how to configure the element, and go over several tips for using it effectively.

Letā€™s get started!

How to Add the Products by Attribute WooCommerce Block to Your Post or Page

TheĀ Products by AttributeĀ block enables you to choose from all the product characteristics in your WooCommerce store. Once you select an attribute, the element will display a product grid that showcases all items with that characteristic.

For example, you can use the Products by AttributeĀ block to display clothing items in a specific size or color. You might also characterize products by brand or material.

To use the block, open the Block Editor and select the + button. Then, type ā€œproducts by attributeā€ into the search bar:

Adding a Products by Attribute block in WooCommerce

Note that two blocks share very similar names. However, the Filter Products by AttributeĀ element works differently from the one weā€™re using. With that block, users can see a list of available attributes and choose the ones they want to browse.

Once you insert the Products by AttributeĀ block, WooCommerce will show you a list of the attributes available for your products. Note that you can always add or edit characteristics if youā€™re not satisfied with your current options:

A list of product attributes.

Once you select an attribute, the block will transform into a product grid. That grid will display all of the items with that characteristic.

In the screenshot below, you can see a product grid for the BlueĀ attribute in our test store:

A product grid for the blue attribute

That red hoodie also comes in blue, but itā€™s not the color we chose for its featured image. Thatā€™s something to keep in mind when adding the Products by AttributeĀ block within your store.

Products by Attribute WooCommerce Block Settings and Options

TheĀ Products by AttributeĀ block includes a broad range of formatting and configuration options. If you select the element, youā€™ll see a formatting menu appear above it. That menu contains options for (1) changing the blockā€™s width and (2) editing your choice of attribute(s):

The Product by Attribute block's formatting settings

Selecting the block and clicking on the gear icon in the top-right corner of the screen will open its configuration menu. TheĀ Layout options (1) enable you to change the number of columns and rows in the blockā€™s product grid. You can also use the Align Last BlockĀ setting (2) to align the Add to basketĀ buttons within the grid:

Changing the layout for the Product by Attribute block in WooCommerce

Moving on, theĀ ContentĀ section enables you to choose which elements will appear within the Products by AttributeĀ block. By default, each product includes its title (1), price (2), rating (3), and an Add to basketĀ button (4):

Choosing what elements to display within the Products by Atrribute block

Continue to scroll down the blockā€™s settings menu, and youā€™ll see a tab called Filter by Product Attribute (1).This section enables you to edit your choice of attributes. Finally, Order By (2) can change the order in which products appear:

Changing the order in which products appear within your block

Once youā€™re happy with the layout of theĀ Products by AttributeĀ block and the elements it includes, you can save your post or page. If you view the block from the front end, youā€™ll see a product grid consisting of all items with the attributes you chose. However, thereā€™s still some work to do if you want to ensure that the layout is as user-friendly as possible.

Tips and Best Practices for Using the Products by Attribute WooCommerce Block

TheĀ Products by AttributeĀ block enables you to add a custom product grid anywhere on your WordPress website. However, the element doesnā€™t include a header that describes the types of items in the grid.

To avoid confusion, we recommend adding a HeadingĀ block that explains your chosen attributes:

A Products by Attribute block with a descriptive heading

Moreover, the Products by AttributeĀ block should include all the same elements as the other product grids in your store. That means every item should display its price, title, and an Add to cartĀ button. Furthermore, if you choose to show ratings for other products, you can also display them in the Products by AttributeĀ block.

Frequently Asked Questions About the Products by Attribute WooCommerce Block

Placing and configuring theĀ Products by AttributeĀ block is simple. However, if you still have any questions about using the element, this section aims to answer them.

How Many Attributes Can I Choose With the Products by Attribute Block?

TheĀ Products by AttributeĀ block enables you to select as many attributes as you want. However, choosing multiple characteristics might be confusing for users, unless the attributes are somewhat related to each other.

How Can I Add New WooCommerce Attributes?

Maybe youā€™re not happy with the selection of attributes that you see when you use the Products by AttributeĀ block. If so, you can add new options at any time. However, after adding new WooCommerce attributes, make sure to update the products that fall under those categories.

Where Should I Place the Products by Attribute Block?

TheĀ Products by AttributeĀ block is a perfect fit for shop home pages. By displaying the element on your home page, you can drive attention to trending products, and showcase items that might not get much attention otherwise.

Conclusion

WooCommerce blocks offer you multiple ways to display custom product grids within your store. For example, the Products by AttributeĀ block enables you to show items that meet specific characteristics, such as sizes, colors, and any other options available in your shop.

You can configure theĀ Products by AttributeĀ block to display as many attributes as you want. The element also gives you complete control over its layout and display settings, including product prices, ratings, and Add to cartĀ buttons.

Do you have any questions about using the Products by AttributeĀ WooCommerce block? Letā€™s talk about them in the comments section below!

Featured image via ProStockStudio / shutterstock.com

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time šŸ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

7 Best WordPress Website Builders in 2023 (Compared)

7 Best WordPress Website Builders in 2023 (Compared)

Posted on November 16, 2023 in WordPress

When you’re in the market for a new website, there are a lot of factors to consider. Price, features, and platform all come into play. WordPress has a considerable market share and is one of the world’s most customizable content management systems. With over 44% of the internet built on...

View Full Post
4 Best AI WordPress Website Builders in 2023 (Compared)

4 Best AI WordPress Website Builders in 2023 (Compared)

Updated on November 13, 2023 in WordPress

WordPress is one of the world’s most popular content management systems (CMS), with over 44% of the internet built on it. For over a decade, website builders have allowed users to quickly build WordPress sites with drag-and-drop editors and easily load pre-design templates. With the emergence...

View Full Post

1 Comment

  1. Woocommerce is still great but only for small companies šŸ™‚

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

šŸ‘‹ It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Get Started With Divi