{"id":42463,"date":"2023-11-13T13:32:01","date_gmt":"2023-11-13T13:32:01","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=42463"},"modified":"2025-05-15T12:25:37","modified_gmt":"2025-05-15T12:25:37","slug":"location-distance-filter-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/location-distance-filter-overview\/","title":{"rendered":"Location & Distance Filter Overview"},"content":{"rendered":"\n

Map Listings Module Activation<\/h2>\n\n\n\n
\n

The \u201cLocation & Distance\u201d <\/strong>filter is available only when the Maps Listings <\/strong>feature is activated in the WordPress Dashboard > JetEngine > JetEngine <\/em><\/strong>settings page.<\/p>\n\n\n\n

To keep the changes, the \u201cSave<\/strong>\u201d button should be hit.<\/p>\n\n\n\n

\"jetengine<\/a><\/div>\n\n\n\n

Also, the Maps Settings <\/strong>tab settings should be adjusted.<\/p>\n\n\n\n

\"maps<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Filter Settings<\/h2>\n\n\n\n
\n

The needed settings can be found by following the WordPress Dashboard > Smart Filters > Add New <\/em><\/strong>path.<\/p>\n\n\n\n

After opening filter settings, one should complete the Filter Name <\/strong>field with the needed value.<\/p>\n\n\n\n

Then, the \u201cLocation & Distance\u201d Filter Type <\/strong>should be selected among all the options.<\/p>\n\n\n\n

Also, one should fill in the Filter Label <\/strong>and Active Filter Label <\/strong>fields to display the corresponding values. The first feature serves as the title that can be displayed next to the filter, and the second one is required for Active Tags<\/strong><\/a> <\/strong>and Active Filters<\/strong><\/a> <\/strong>blocks\/widgets.<\/p>\n\n\n\n

The filter doesn\u2019t need any other customizations now, so the changes can be saved by pushing the \u201cUpdate<\/strong>\u201d button.<\/p>\n\n\n\n

\"location<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Query Builder Settings<\/h2>\n\n\n\n
\n

The \u201cLocation & Distance\u201d <\/strong>filter works only on a geolocation query basis, which can be built with JetEngine<\/em>\u2019s Query Builder<\/strong><\/a>.<\/p>\n\n\n\n

To create a new query, it\u2019s necessary to go to WordPress Dashboard > JetEngine > Query Builder <\/em><\/strong>and press the \u201cAdd New<\/strong>\u201d button.<\/p>\n\n\n\n

The General Settings <\/strong>section can be completed with the basic information. It is important to pick the needed Query Type<\/strong>. The geolocation query can be created for such types: \u201cPosts Query,\u201d \u201cTerms Query,\u201d \u201cUsers Query,\u201d and \u201cCustom Content Type Query.\u201d<\/p>\n\n\n\n

In the General <\/strong>tab of the Post Query<\/strong> settings section, the Post Type <\/strong>and Post Status <\/strong>should be selected.<\/p>\n\n\n\n

\"location<\/a><\/div>\n\n\n\n

Also, the Pagination <\/strong>tab should be opened to edit the Posts Per Page <\/strong>value. Here, the maximum number of displayed posts should be set.<\/p>\n\n\n\n

\"pagination<\/a><\/div>\n\n\n\n

After selecting and adjusting the needed Query Type<\/strong>, the Geo Search <\/strong>tab should be opened.<\/p>\n\n\n\n

Here, one should select the map center on the map located under the Select location <\/strong>label. It will be a starting point for the search.<\/p>\n\n\n\n

In the Address Field<\/strong>, one should insert the meta field<\/a> key containing the address.<\/p>\n\n\n\n

Also, the Distance <\/strong>field should be completed with the radius for a search around the indicated map center. Then, the Units <\/strong>applied to the provided distance should be specified.<\/p>\n\n\n\n

To save the result, the \u201cAdd Query<\/strong>\u201d button should be pressed.<\/p>\n\n\n\n

\"geo<\/a><\/div>\n\n\n\n

Now, the filter can be placed on the page edited with Gutenberg or Elementor.<\/p>\n<\/div><\/div>\n\n\n\n

Location & Distance Filter Widget in Elementor<\/h2>\n\n\n\n
\n

In Elementor, the corresponding Location & distance <\/strong>widget can be placed on the page.<\/p>\n\n\n\n

Content<\/h3>\n\n\n\n

Right away, the Content <\/strong>tab with the main settings is opened:<\/p>\n\n\n\n

\"location<\/a><\/div>\n\n\n\n