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:
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.