How to Use the Filter Products by Price WooCommerce Block

Posted on December 22, 2021 by in WordPress

How to Use the Filter Products by Price WooCommerce Block
Blog / WordPress / How to Use the Filter Products by Price WooCommerce Block

Customers will often arrive at your WooCommerce store with a set budget in mind. They’ll think, “I can only spend $X, so I need to find the perfect fit.” Forcing users to navigate through page after page of products until they find one that meets their budget can be exhausting. That’s where the Filter Products by Price WooCommerce block comes in handy.

This block enables customers to choose a specific price range. WooCommerce will then update the products list to show only the items that fit into that budget. This article will show you how to place the Filter Products by Price block and how to configure it. We’ll also discuss best practices for using this element.

Let’s get to it!

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

Before we explain how to use the Filter Products by Price block, it’s important to note that it only works in conjunction with the All Products WooCommerce block. If you place the Filter Products by Price block on any page that doesn’t include the All Products block, the filtering feature won’t work.

Together, these two blocks make a perfect combination for your store’s main shop page. With that in mind, open the Block Editor and place the All Products block first:

Adding an All Products block in WooCommerce

This block will generate a product grid that includes every single item in your catalog. You can configure how many rows and columns that product grid includes, and change the order in which items appear:

Configuring the All Products WooCommerce block

For now, we’re not going to tinker with those settings. Instead, select the option to add a new block above the All Products element. Look for the Filter Products by Price block:

Adding the Filter Products by Price block in WooCommerce

Once you place this element, the Block Editor will display a price slider starting at $0 and capping at the price of your store’s most expensive item. In our case, that’s a $90 dollar product, so the slider goes from $0 to $90:

The Filter by Price block in WooCommerce

You’ll notice that the slider isn’t functional within your editor screen. To see the block in action, you’ll need to preview the page (or publish it and access it from the front end). If it doesn’t look quite right yet, don’t worry – let’s talk about how to configure it.

Filter Products by Price WooCommerce Block Settings and Options

The Filter Products by Price block doesn’t offer a broad range of settings. However, you can configure a few aspects of how the block looks and works.

To access these settings, select the element within the Block Editor and click on the gear icon in the top-right corner of the screen. That will open the block’s settings menu to the right. Within this menu, you can enable or disable the option for editable price text fields:

Configuring the price fields for the Filter Products by Price block

If you select the Text option, users will only be able to filter prices by using the slider. The default Editable option also enables them to change the price fields manually.

Moving on, the block’s settings menu includes an option to add a confirmation or “filter” button. If you enable this setting, users will have to click on a button to confirm the price range they set. Finally, you can change the heading level for the Filter Products by Price label text:

Configuring the Filter Products by Price block

Configuring the Filter Products by Price block shouldn’t take long, since the element only includes a handful of settings. If you’re not sure what options to select, we’ll talk about our recommended settings in the next section.

Tips and Best Practices for Using the Filter Products by Price WooCommerce Block Effectively

The first thing you need to consider when using the Filter Products by Price block is that it only works alongside the All Products WooCommerce block. The All Products block doesn’t enable you to filter products by categories or any other attribute. That means it makes sense to pair the two blocks together if you’re building a WooCommerce shop page.

As we mentioned before, it makes sense to place the Filter Products by Price block above the All Products element. That way, users won’t miss the filtering feature while they’re browsing the shop page.

The Filter Products by Price block already includes an identifying header, which reads “Filter by price”. That header is perfect for most stores, as is its default H3 level. We only recommend using lower heading levels if there are other H3 elements on the page that take precedence.

The Filter Products by Price block in action

For usability’s sake, we recommend that you also maintain the default editable text fields that come with the Filter Products by Price block. Offering users the option to edit prices manually or use the slider makes the block more adaptable.

As far as adding a confirmation button goes, we leave that choice up to you. Enabling the button means that your product grid won’t update automatically as you use the Filter Products by Price slider. However, that can be a valid compromise if your website is already suffering performance issues.

Frequently Asked Questions About the Filter Products by Price WooCommerce Block

If you have any questions left about the Filter Products by Price block, this section aims to answer them. Let’s start by talking about the requirements for this block to work.

Why Is the Filter Products by Price Block Not Working?

The Filter Products by Price block only works if you pair it with the All Products WooCommerce block. If you place the Filter Products by Price block alongside any other type of product grid, it simply won’t work. You’ll be able to move the slider, but the products won’t update accordingly.

Can I Edit the Minimum and Maximum Prices in the Filter Products by Price Block?

The Filter Products by Price block automatically sets its price slider to start at $0 and to cap at the price of your store’s most expensive product. You can only edit the slider’s value by changing product prices in your store.

Conclusion

The Filter Products by Price element is a WooCommerce block that only works when you pair it with another element. Other blocks that only work in pairs include Filter Products by Attribute and Active Product Filters.

Using the Filter Products by Price WooCommerce block enables customers to navigate your store’s entire inventory and only see the items that fit their budgets. The block only works alongside the All Products element, so keep that in mind when placing it on your website.

Do you have any questions about how to use the Filter Products by Price block? Let’s talk about them in the comments section below!

Featured image by Bakhtiar Zein / 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

3 Best Text-to-Speech Plugins for WordPress

3 Best Text-to-Speech Plugins for WordPress

Posted on August 13, 2022 in WordPress

Adding text-to-speech functionality to your website can provide greater accessibility and boost user experience. Visitors who can’t read the screen or would rather listen to the content can do so easily. Plus, this feature is easy to set up with the right text-to-speech WordPress plugin. In...

View Full Post
14 Best SEO Plugins for WordPress

14 Best SEO Plugins for WordPress

Posted on August 10, 2022 in WordPress

Despite how great your website may be, people won’t just stumble upon it accidentally (for the most part). You actually have to drive traffic to your site. In addition to paying for advertising, there’s also organic (i.e. non-ad) traffic to think about, which requires search engine...

View Full Post
6 Best Google Drive Plugins for WordPress

6 Best Google Drive Plugins for WordPress

Posted on August 6, 2022 in WordPress

As a website owner, you likely deal with a lot of content and media files. If so, you may want to consider using a Google Drive plugin. Not only can this tool help free up storage space, but it can also create off-site backups of your site and enable you to collaborate on content-related...

View Full Post
Get Started With Divi