How to Get Min and Max Values for a Range Filter From a Query

Go to WordPress Dashboard > Snippets > Add New.

Name a snippet. For example, we name it “JetEngine Query Source for Range Filter”.

Paste the following snippet into the Snippet Content Area:

This snippet adds a new callback that allows the Range Filter to retrieve minimum and maximum values dynamically from a JetEngine query.

Click the “Save and Activate” button.

Navigate to WordPress Dashboard > JetEngine > Query Builder and press “Add New”.

Enter a query Name and select the Query Type. In this example, we leave it to “Posts Query.”

Also, specify the Custom Query ID that will connect the query, filter, and provider. For instance, we paste the “price-range” value.

Scroll down to the Posts Query section and select the “Products” Post Type.

Next, open the Tax Query tab and press the “Add new” button.

In the Taxonomy field, we select the “Product categories” option. Also, we select the “Slug” option as the Field, and complete the Terms field with the “business” value.

These settings limit the query results to products from the specified category. This step is optional and used here only as an example. You can configure any taxonomy or skip this step depending on your use case.

Press the “Add Query” button to save the query.

Now, go to WordPress Dashboard > Smart Filters > Add New and enter a Filter Name.

In the Filter Settings section, select the “Range” Filter Type.

Open the Get min/max dynamically dropdown and select the “Get from JetEngine Query” option that appeared after activating the code snippet.

Once selected, the Select Query dropdown appears. Choose the query you built earlier.

Scroll down to the Query Variable field and paste the “_price” value there.

The “_price” value is a WooCommerce meta key that stores product prices in the database. The Range Filter uses this meta field to determine the products’ minimum and maximum prices. If you need to filter by another numeric field (for example, a custom meta field), specify its meta key instead.

Also, complete the Filter Labels section.

Click the “Update” button to save the filter.

Open the editor where you want to place the content (Elementor, Gutenberg, or Blocks). In this example, we use Elementor.

Add a Range Filter widget to the page, then adjust it. 

In the Select filter field, pick the filter you built.

In the This filter for dropdown, select the “JetEngine” option.

Also, complete the Query ID field with a unique value that links the filter, query, and provider. For example, “price-range.”

Add a provider widget to the page. In this example, it’s Listing Grid.

Select the Listing created beforehand and adjust other settings on the General tab if needed. For example, we change the Column Number to “1.”

Open the Custom Query tab and enable the Use Custom Query toggle.

Select the built query in the Custom Query dropdown field.

Also, switch to the Advanced tab and enter the same ID you used in the Range Filter in the CSS ID field. In our case, “price-range.”

Publish the page when ready.

Open the page on the frontend. 

Now, the Range Filter and Listing Grid widgets are displayed on the page.

Adjust the Range Filter values to see whether the Listing Grid content changes accordingly.

If configured correctly, the Listing Grid displays products within the specified price range.