Drop-Down Menus for Address

Agile Store Locator can provide users with the ability to quickly filter stores in certain areas by using drop-down menus to select the following address lines:

  1. Country
  2. State
  3. City
Address Drop-Down Menus
Address Drop-Down Menus

Using these drop-down menus will allow users to quickly search for specific stores in certain countries, states, and cities.

To enable this feature, please follow the below steps:

  1. Go to “ASL Settings”
  2. Under the “General” tab, enable “Address Dropdowns”

Once this feature is enabled users will be able to use the address drop-down menu on the store locator map.

Enable Address Dropdowns
Enable Address  Dropdowns

How to Disable it via Shortcode attribute? #

In order to remove the address dropdowns via the shortcode attribute, please use the shortcode below.

[ASL_STORELOCATOR address_ddl="0"]

Why the Cities and States are disabled at first? #

The city will appear when the state is selected first, there are a few reasons for it.

  • If you select the city Denver, you will still see the rest of the States such as NY or Georgia when you will select NY, it will not be fine as it will not serve any stores due to the wrong State and city selection.
  • Users have a long list of states and cities, when there are 100+ cities from all states, it will not be fine to list them all together, so it is better to select a state first.
  • If you don’t want the state filter, and just the cities, it is possible, by keeping the state field empty for all the stores and the state filter will not be created and only the cities will show up, for states you can create a custom field to show up.

In case you still want to have just the cities dropdown, you can utilize the brand or the special filter for this purpose, or use our custom search filter which can do the same filtering.

Remove the City Dropdown #

You can hide the city dropdown by adding the given CSS to your Appearance > Customizer > Additional CSS.

.asl-cont .sl-ddl-city {display: none !important;}

Remove the State Dropdown #

Similarly, you can also hide the state dropdown with the following CSS.

.asl-cont .sl-ddl-state {display: none !important;}
additional css
Additional CSS under the Appearance