Skip to main content

Filter products by price range

Goal​

Add a price range filter to a WooCommerce catalog page so customers can set a minimum and maximum price and see matching products update instantly.

Prerequisites​

  • WooCommerce with products at varied prices (including sale prices if you use them)
  • An existing product Archive Loop and Filter Posts setup, or willingness to create one
  • WPEnhanced Ajax Filter Blocks installed and active

Step 1: Set up the product loop​

If you do not already have a product filter page:

  1. Create a page with an Archive Loop block (Post type: Product).
  2. Add a Filter Posts block linked to that loop.

See Filter products by category for a full shop setup walkthrough.

Step 2: Add a Price filter item​

  1. Inside Filter Posts, add a Filter Posts Item block.
  2. Set Filter source to Price (WooCommerce price).
  3. Choose a control type:
    • Range slider — Best for visual price browsing
    • Min / max inputs — Precise numeric entry
  4. Set the Label to Price or Budget.

Step 3: Configure range bounds​

In the filter item settings:

  • Min / max values: Set Auto to derive bounds from your catalog, or enter fixed values (e.g. 0–500).
  • Step: Choose increment (e.g. 1, 5, or 10) appropriate for your products.
  • Prefix / suffix: Add currency symbols or text (e.g. $ prefix) for clarity.

The slider endpoints should reflect realistic prices in your store. If all products are under $100, cap the max accordingly so the slider stays usable.

Step 4: Combine with other filters​

Price filters work alongside category and attribute filters in the same Filter Posts block:

  1. Keep your Product category filter item.
  2. Place the Price item below or above it.
  3. Test selecting a category and a price range—the loop should show only products matching both.

Step 5: Sale prices​

WooCommerce products may have regular and sale prices. The plugin typically filters on the effective price shown to customers. Verify behavior with a few sale products on your staging site.

If results look wrong, see Stale or wrong results.

Step 6: Test on the front end​

  1. Preview the page.
  2. Drag the price slider or enter min/max values.
  3. Confirm the product grid updates without a page reload.
  4. Check that the URL updates if URL sync is enabled—shareable links should restore the price range.
Variable products

Variable products use price ranges across variations. Test with your most common variable products to ensure the range filter behaves as shoppers expect.

What's next​