Help Center

How to Filter Listings Based on Geolocation

How to Filter Listings Based on Geolocation

From this tutorial, you will find out how to filter Listing Grid posts based on the User Geolocation filter from JetSmartFilters.

Before you start, check the tutorial requirements:

Activate Maps Listings Module

Before starting, make sure that you have activated the Maps Listings module in the Modules tab of the WordPress Dashboard > JetEngine > JetEngine directory.

maps listings module activated

Create a Filter

Go to WordPress Dashboard > JetSmartFilters > Add New.

Complete the Filter Name field and select the “User Geolocation” Filter Type.

Fill in the Filter Label and Active Filter Labels. The first one can be displayed next to the filter, and the second one is used for Active Tags and Active Filters widgets/blocks.

Hit the “Publish” button.

user geolocation filter settings

Build a Query

Head to WordPress Dashboard > JetEngine > Query Builder and press the “Add New” button.

Give a Name to the query and set its Query Type to one of the presented options, where the geo search can be applied. Among them are “Posts Query,” “Terms Query,” “Users Query,” and “Custom Content Type Query.” Pick according to the Listing Grid source that you want to filter.

In the General tab of the following Posts Query section, define the Post Type you are working with and select the Post Status.

user geolocation filter settings

Head to the Geo Search tab and pick the point on the Select location map. It will be used as a map center.

Complete the Address Field with the name of a field attached to the post type to pull the data about the location.

Specify the Distance and its Units to search only around the set radius.

Click the “Add Query” button to save the result.

posts query geo search settings

Edit a Page

Proceed to WordPress Dashboard > Pages and create a new page (the “Add New” button) or select the already built one (the “Edit” button).

A page can be edited either in Elementor, Bricks, or Gutenberg. We will create a page on an Elementor page builder basis.

Place the Heading widget to customize the page and add the User Geolocation widget.

Pick the newly created filter in the Select filter field and attach it to the “JetEngine” provider with the help of the This filter for field.

You can also customize the following widget settings if needed.

user geolocation filter

Make sure you have added a Listing Grid widget to the page as well. Select the desired Listing and adjust the following customization fields in the General settings tab.

listing grid general settings

In the Custom Query tab, activate the Use Custom Query toggle and pick the Custom Query you created earlier.

Once everything is set, press the “Publish/Update” button to save the changes.

use custom query toggle

Check the Result

Head to the front end to check the result. 

Here, the location permission window will appear at first, if the user hasn’t granted it on this website before. If the user agrees to share their geolocation, the Listing Grid will now show posts based on the user’s geolocation.

content filtered by user location

That’s all about filtering the JetEngine’s Listing Grid with the help of the User Geolocation filter from the JetSmartFilters plugin for WordPress.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.