How to Add a WooCommerce Price Filter (Step by Step)

A WooCommerce price filter lets shoppers drag a slider to set the lowest and highest price they’ll pay, and the shop shows only the products in that range. WooCommerce has a basic one built in. This tutorial shows you how to add a better one with Premmerce Product Filter for WooCommerce: it updates the products without reloading the page, works on search results as well as shop and category pages, and sits in the same widget as your attribute, category and brand filters. It takes about five minutes, with no code.

We make Product Filter, so every setting below is checked against the plugin’s current version (3.8), and the screenshots are from a real store running it.

Does WooCommerce have a price filter?

Yes, WooCommerce has three built-in price filters, depending on your theme:

• Filter Products by Price widget (classic themes): a slider for a sidebar. It only appears on the shop page and on product category and tag pages, not on search results. It rounds the range to steps of 10, and the shopper has to press Filter, which reloads the page.
• Filter by Price block: the block version of the same slider, for pages built with blocks.
• Product Filters block (block themes): WooCommerce’s newer filter set, with a Price Filter block inside it. It’s built to sit next to the Product Collection block that block themes use for the shop page.

If your store runs a classic theme like Storefront, or you want price to sit in one panel with your other filters, Product Filter is the simpler route. If you’re on a block theme and only need price, WooCommerce’s Product Filters block is worth trying first.

How to add a WooCommerce price filter with Product Filter

Step 1: Install Product Filter

In WordPress, go to Plugins > Add New Plugin, search for “Premmerce Product Filter”, then install and activate the free version. If you’ve bought Product Filter, install the copy from your purchase instead. WooCommerce must be active.

Step 2: Check the price filter is on

Go to Premmerce > Product Filter and open the Settings tab. Under Behavior, Show price filter is ticked by default when you first activate the plugin. If someone has turned it off, tick it and click Save Changes.

Further down, Show filter on pages controls where the filter appears: Product category, Tag, Search, Store (the main shop page), Attribute, and Brands if your store uses WooCommerce Brands. They’re all on by default.

Step 3: Add the filter to your shop sidebar

The setting turns the price filter on, but the filter needs somewhere to show. Go to Appearance > Widgets, add the Premmerce Filter widget to your shop sidebar, and save. On the block-based widgets screen, search for “Premmerce Filter” in the block inserter.

Open your shop page and you’ll see Filter by price at the top of the widget, with the slider and two boxes for the minimum and maximum price. Any attribute filters you’ve turned on in the Attributes tab appear underneath it.

Not using a sidebar? Product Filter also adds a Premmerce Product Filter block, which you can place in a block theme’s shop template or any widget area that takes blocks. The premium version adds a [premmerce_filter] shortcode for page builders. If you build your shop with Elementor, our Elementor product filter tutorial covers the options.

Step 4: Choose how the filter applies

By default, releasing a slider handle reloads the page with the new price range. Two settings in the Settings tab change that:

• Use ajax (under AJAX): the product grid updates in place, without a page reload. We recommend turning it on.
• Show filter button (under Behavior): nothing changes until the shopper clicks Filter. Useful when shoppers set price and several other filters at once, so the grid doesn’t refresh after each one.

Click Save Changes, and your price filter is live.

How the price filter works

A few details that matter once real customers start using it:

• The range follows the page. The slider’s ends are the lowest and highest prices among the products on the current page. On a category page, it covers that category only, and it narrows as shoppers pick other filters, so they never drag into a range with nothing in it.
• Variable products match on their whole price range. A hoodie sold at $42 to $45 shows up for a $40 to $60 search, and so does one whose cheapest variation is in range. Sale prices count, because filtering uses the price the customer pays. Grouped products work the same way: the Logo Collection in the screenshot below shows from $18 but includes a $45 hoodie, so it matches.
• The filter hides itself when there’s nothing to filter. If every product on a page costs the same, the price filter doesn’t appear.
• It uses WooCommerce’s own URL parameters. A filtered page has ?min_price=40&max_price=60 on the end, the same as WooCommerce’s widget, so filtered links can be shared and bookmarked, and WooCommerce does the filtering itself.
• It moves in whole numbers. The slider steps by 1, not 10 like WooCommerce’s widget, so shoppers can set $25 to $35 exactly.

To show shoppers what they’ve selected, add the Premmerce Active Filters widget above the filter. It lists the price range as “Min $40.00” and “Max $60.00”, each with a link to remove it. Tick Show “Reset filter” button in the settings to add a Reset filter link to that widget, which clears every filter at once.

If you sell in more than one currency with our Premmerce Multi-currency for WooCommerce, the slider shows prices in the shopper’s currency and converts their range back before filtering. Our guide to selling in multiple currencies covers the setup.

Customize the price filter

Colors. The widget’s Style option offers Default and Premmerce in the free version. The premium version adds Custom, with price filter colors for Input Background, Input Text Color, Slider Range Color and Slider Handle Color. On the free version, the Custom css box under Styles in the settings takes any CSS you like.

The title. The price filter is titled “Filter by price”. To change it, add this to a child theme’s functions.php or a code snippets plugin:

add_filter( 'premmerce_filter_render_item_title', 'acme_price_filter_title', 10, 2 );
function acme_price_filter_title( $title, $item ) {
    return 'price' === $item->getId() ? 'Price' : $title;
}

The range. Product Filter applies WooCommerce’s woocommerce_price_filter_widget_min_amount and woocommerce_price_filter_widget_max_amount filters to the slider’s ends, so code you’ve written for WooCommerce’s own price widget keeps working. Our WooCommerce hooks list covers how filters like these work.

Combine price with other filters

Price is usually the first filter a shopper reaches for, and rarely the only one. The same widget handles the rest, and each has its own tutorial:

• Filter by attribute: size, color, material, as checkboxes, radio buttons or a dropdown
• Filter by category, with an expandable category hierarchy
• Filter by brand, with WooCommerce Brands or YITH Brands
• Filter by a custom taxonomy (premium)

Product Filter’s premium version also adds On sale, In stock and rating filters, color, image and label swatches, and SEO-friendly URLs for filtered pages. See the Product Filter page for everything it does.

For more ways to help shoppers find things quickly, read our guide to WooCommerce store UX.

Add a price filter to your store today

Product Filter gives you the price slider, AJAX filtering and the attribute, category and brand filters in one widget, plus custom styles, swatches and SEO pages. Get it from the Product Filter page.