How to Use the Products by Attribute WooCommerce Block

Posted on December 16, 2021 by in WordPress 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

Want To Build Better WordPress Websites? Start Here! 👇

Take the first step towards a better website.

Get Started
Divi
Premade Layouts

Check Out These Related Posts

15+ Best Free WordPress Plugins for Business Websites

15+ Best Free WordPress Plugins for Business Websites

Posted on September 29, 2022 in WordPress

WordPress is undoubtedly impressive, but where it shines is as a content management system. For websites that have to go beyond being blog-centric, you may find that out-of-the-box WordPress is lacking. But, there’s no need to switch site builders. With the best free WordPress plugins for...

View Full Post
How to Use Bootstrap in WordPress: A Beginner’s Guide

How to Use Bootstrap in WordPress: A Beginner’s Guide

Posted on September 28, 2022 in WordPress

WordPress and Bootstrap are both popular platforms for web design that aren’t often considered as compatible. Bootstrap has grown to be a favorite CSS platform for developers because it makes it easy to build responsive websites. In fact, more than 70% of websites on the internet are designed...

View Full Post
4 Best IDX Plugins for WordPress

4 Best IDX Plugins for WordPress

Posted on September 24, 2022 in WordPress

If you’re in the real estate business, then you’re probably familiar with Multiple Listing Service (MLS) portals and Internet Data Exchange (IDX) software. Furthermore, if you have a real estate website built on WordPress, being able to pull listings using IDX software will make your...

View Full Post

1 Comment

  1. Woocommerce is still great but only for small companies 🙂

Get Started With Divi