Skip to content

Radius Filter Element

Add the filter by dragging or selecting the Radius Filter element into your search results template in Elementor.

The element is in the SRP category — place it on your search results page, in the filter bar alongside your other listing filters. It renders the ZIP / postal input, the distance dropdown, and (unless hidden) the Near me button.

What the visitor can do

  • Type a ZIP or postal code. The search filters as they type, once three or more characters are entered. US ZIP codes and Canadian postal codes are both understood; see postal code accuracy.
  • Tap Near me. The browser asks permission to share location. On success the results filter to the chosen distance from where they are, and the sort switches to nearest first. Tapping it again turns it back off.
  • Change the distance. The dropdown limits results to that radius.

The last action wins

If a visitor uses Near me and then types a ZIP, the ZIP takes over. If they type a ZIP and then tap Near me, their location takes over. Whichever they did last is what the distance is measured from.

Near me needs a secure page

Browsers only allow location access on https:// pages. On an insecure page the button reports that the location is unavailable.

While the browser's permission prompt is open, the current results are hidden behind the loading indicator, so the visitor never sees unfiltered listings settle and then jump once location is granted. If they dismiss or deny the prompt the results come back unchanged.

Settings

Setting Description Default
ZIP Placeholder Placeholder text inside the input. Set it to something like ZIP or postal code when your inventory covers both countries. Enter ZIP code
Radius Options The distance values in the dropdown. Add one row per value. The same numbers are used whether the unit is miles or kilometres. 5, 10, 25, 50, 100
Radius Options → Default Toggle on one row to pre-select it. If more than one is marked, the first wins. first row
Miles / KM Toggle Adds a small mi/km switch next to the dropdown so visitors can change the unit themselves. Their choice is remembered in their browser. The type's Distance Unit setting is the starting value. off
Hide "Near me" Button Removes the browser-location button, leaving only the ZIP / postal input. off

With the toggle on, the dropdown shows bare numbers

When Miles / KM Toggle is enabled the distance options read 5, 10, 25 … and the unit is shown once, on the toggle. With it off they read 5 mi, 10 mi and so on.

Style

Two style tabs mirror the two kinds of control in the element.

ZIP Input

  • Width
  • Background
  • Border
  • Border Radius
  • Padding
  • Typography

Select Inputs (the distance dropdown, the unit toggle, and the sort dropdown)

  • Background
  • Border
  • Border Radius
  • Padding
  • Typography

Sorting by distance

The extension adds a Distance option to your listing order-by dropdown.

  • If your search results template already has an order-by dropdown, Distance appears in it. Choosing it when no location is set prompts the visitor for their browser location, then sorts nearest first.
  • If there is no order-by dropdown, a small Nearest first / Farthest first select appears inside the filter element once a location or ZIP is active.

Shortcode

The element is registered as dms_radius_filter, so it also works anywhere DMS shortcodes are supported:

[dms_radius_filter placeholder="ZIP or postal code" show_unit_toggle="yes" hide_locate="no"]

Radius values and their default come from the Elementor element settings; when used as a bare shortcode the built-in defaults (5, 10, 25, 50, 100) apply.