Filter Products By Price

The Filter Products by Price widget allows customers to filter WooCommerce products within a specific price range. This widget is typically used in shop sidebar areas to enhance product discovery and improve user experience.
Porto includes an extended version of this widget with optional price chart visualization for more advanced filtering.

You can manage and configure this widget from Appearance → Widgets

1. Navigate to Appearance → Widgets in your WordPress dashboard.
2. Select your desired widget area (e.g., Shop Sidebar, Product Archive Sidebar, Off-Canvas Sidebar).
3. Add the Filter Products by Price widget to the selected area.

1. Title

   Set a custom title that appears above the widget—for example “Filter by Price”, “Price Range”, or “Shop by Cost”. Leave this field blank if you prefer no visible title.

2. Show Price Chart

   Enable this option to display a small interactive price distribution chart above the filter slider. When activated, customers see a visual representation of your product price range. This is especially helpful for stores with many products across wide pricing tiers.

   • Enabled: Displays price distribution chart
   • Disabled: Shows only the price range slider
3. Chart Steps Count (Min: 20, Max: 100)

   Determines the granularity of the price chart.

   • Lower values (20–40):
     • Larger chart segments
     • Useful for stores with simpler pricing
   • Higher values (60–100):
     • More precise steps
     • Best for stores with extensive product ranges

   This option is only relevant when Show Price Chart is enabled. If the chart is disabled, this setting has no visual effect.

• The widget automatically detects the minimum and maximum product prices in your shop.
• Customers can drag the slider handles to refine the product list.
• If the price chart is enabled, the chart displays product distribution across the price range.
• WooCommerce dynamically reloads products matching the selected price range.

• Place this widget near the top of your shop sidebar for better usability.
• Combine it with other filters such as Filter by Attribute or Filter by Rating for improved product navigation.
• Use higher chart steps if your store sells many products with varied prices.