<li class="pol-lg-4 pol-md-6 pol-sm-12 sl-item" data-id="{{:id}}" tabindex="0" accesskey="{{:id}}">

If you’d like to customize the number of columns, you can easily do this by modifying the Bootstrap column classes.

Steps to Customize:

• Go to ASL Settings > Customizer.
• Select Template 4 from the dropdown.
• Click the “Load Template” button to load the template HTML.
• In the List Section, locate the <li> element that looks like:

<li class="pol-lg-4 pol-md-6 pol-sm-12 sl-item" ...>

Replace the pol-lg-4 class to adjust the number of columns:

• Use pol-lg-3 for 4 columns
• Use pol-lg-6 for 2 columns
• Use pol-lg-12 for 1 column

Example (4-column layout):

<li class="pol-lg-3 pol-md-6 pol-sm-12 sl-item" ...>

• Click Save Template after making changes.

This allows you to tailor the grid layout to better fit your design preferences or available screen space.

How to Set Map Above the Listing:

1. Navigate to your WordPress dashboard.
2. Go to Agile Store Locator > ASL Settings.
3. Click on the UI Tab.
4. Locate the option labeled “Map & List Order”.
5. Choose “Map Top” from the dropdown.
6. Click the Save Settings button.

Clear Your Cache:

After changing this setting, make sure to refresh your page cache. If you’re using a caching plugin (like WP Super Cache, W3 Total Cache, or any server-level caching), clear it to ensure the updated layout appears correctly on mobile devices.

Version 4.10.13 of the Agile Store Locator plugin introduces a new feature that allows you to customize the column layout of your store locator and search filter using Bootstrap 4’s grid system. This feature provides flexibility in creating responsive layouts that adapt beautifully to different screen sizes.

Shortcode Attributes

With this update, you can use the following shortcode attributes to control the layout:

• md: Defines the column configuration for medium screens (≥ 768px).
• lg: Defines the column configuration for large screens (≥ 992px).

Each attribute can accept up to two comma-separated values:

• The first value specifies the width of the search filter (list column).
• The second value specifies the width of the store locator (map column).

If only one value is provided, the remaining columns will automatically fill the space to ensure a total width of 12 columns, as per Bootstrap’s grid system.

Default Configuration

If you do not specify any attributes, the plugin uses the following default configuration:

• md (Medium Screens): 5 columns for the list, 7 columns for the map.
• lg (Large Screens): 4 columns for the list, 8 columns for the map.

Usage Examples

Example 1: Default Layout

If you use the shortcode without any attributes, the default layout will be applied:

[ASL_STORELOCATOR]

Result:

• On medium screens: 5 columns for the list and 7 columns for the map.
• On large screens: 4 columns for the list and 8 columns for the map.

Example 2: Custom Medium Screen Layout

You can customize the layout for medium screens by providing a single value:

[ASL_STORELOCATOR md="6"]

Result:

• On medium screens: 6 columns for the list and 6 columns for the map (since 12 - 6 = 6).
• Large screens will follow the default layout.

Example 3: Full-Width Map on Large Screens

To make the map full-width on large screens:

[ASL_STORELOCATOR md="12" lg="12"]

Result:

• On large screens: The map takes up all 12 columns, and the list is drop to the next row.
• Medium screens will also be full width as 12 columns value.

Example 4: Custom Layout for Both Medium and Large Screens

You can specify custom layouts for both medium and large screens:

[ASL_STORELOCATOR md="4,8" lg="6,6"]

Conclusion

This new feature in version 4.10.13 of the Agile Store Locator plugin makes it easier than ever to create custom, responsive layouts using the familiar Bootstrap 4 grid system. Whether you want a balanced layout or a full-width map, you have complete control over the design of your store locator.

1. Using Label (Single-Language Site): If your website is in a single language, you can conveniently modify all labels through the Labels section, as detailed in section 1 of the documentation. This is a straightforward approach and doesn’t require a translation plugin.
2. Using Translation (Multi-Language Site): If your website uses multiple languages, it’s advisable to bypass the Labels section and instead utilize a translation plugin. With this method, you can add translations to the language files, ensuring that your labels are correctly displayed in various languages. This approach is more suitable for multilingual websites as it allows for precise language management.

1- Using Labels (Single-Language Site)

We have introduced a new Labels section in the ASL Settings, allowing you to easily update the frontend store locator labels. To change the labels, please follow the steps outlined below:

1. Ensure that you are using version 4.8.29 or above of the plugin. If you are using an older version, please upgrade to the latest version first.
2. Access the ASL Settings in your WordPress dashboard and navigate to the Labels section.
3. Enable the Labels to switch and save the settings.
4. In the Labels section, locate the specific label that you want to translate or modify. Provide the desired alternate text or label for that specific element.

Once you have changed a label for a store, it will be displayed accordingly on the frontend of your website. If you do not see the changes immediately, please remember to refresh the page cache to ensure the updated labels are applied.

In the example, we have changed the text Search Location to Find Dealers.

The front-end results of the store locator are displayed in the following format.

2- Using Translation (Multi-Language Site)

Agile Store Locator provides the option to translate the text on the map. Furthermore, this guide will show you how to manually translate the text on the Store Locator Map into other languages, please make sure the above Label is switched off if you want to change the text via translation files.

Firstly, to translate the text a user will first need to manually add the translation for each word that appears on the map.

Steps to Translate the Text

In the below guide, we will be translating the words “Search Location” on the map from English to Italian

1. Install the “Loco Translate” Plugin from WordPress and activate it

2. On the “Settings” tab, change the site language to the translated language. For example, English to Italian, if you need to translate the text to Italian.

3. Go to the “Loco Translate” Plugin and navigate to “plugins”
4. Select “Agile Store Locator” on the “Translate Plugins” page
5. Choose the language file that needs to be modified (in our case: Italian)
6. Manually add the translated word(s) to the language file. We have translated the “Search Location” text using google translate and added it to the language file as shown below

7. Save the file and Refresh the Store Locator. The text for “Search Location” will now be translated into Italian

How to Add a New Word That is Missing From the Language File.

A user might come across a situation where the source text to be translated is missing from the language file. In this case, the user can add the source text to the template file or the view customization and this will make the source text available to be translated into the language file.

For example, we will be locating the “Discounts” source text in the template file, to make it available for translation, for if you have that in the customization template that you are editing through ASL Settings > Customizer, you have to wrap that text into square brackets as given below.

1. Go to the “Loco Translate” plugin and select “Plugins”
2. Choose “Agile Store Locator” on the “Translate Plugins” page
3. Click on “Edit Template” to access the template file

4. In the Template file, click on the “Sync”  button, and the source text (“Discounts”) will be available in the template file, then press save

5. Go to the “Loco Translate” plugin and select “Plugins”
6. Choose “Agile Store Locator” on the “Translate Plugins” page and select a language page (for example English (United States))
7. On the language page, press the “Sync” button and the new source text (“Discounts”) will be available for translation when it’s typed in the search bar

How can I translate the Country name with WPML?

Yes, the countries list is rendered from the database, it can also be translated via any translation plugin such as Loco Translate or WPML, if the country name doesn’t exist in the Translation pot file, you can easily modify it and sync your language file with the template.

How to Display the Store Data in Multiple Languages

Users of Agile Store Locator can display data on their website in multiple languages for the following categories:

1. Stores
2. Brands
3. Categories
4. Specialties

The data in each of these sections can be changed using the multiple language drop-down menu to change the data from one language to another (provided that there is data entered for the selected language).

For example, let’s suppose a user has two sets of store data one in English and one in German, that are both entered into Agile Store Locator. Furthermore, let’s say the user is displaying the English version on the store data on his/her website, and they want to change it to German. Furthermore, to do this the user can simply use the multiple Languages drop-down menu in the “Manage Stores” section to replace the English store data with the German store data (provided a CSV file was imported with German store data).

Note: The multiple language drop-down menu does NOT automatically translate the data from one language to another. Rather, it replaces the current data with another data set that is in a different language.

How to Add a New Language to the Language Drop-Down Menu?

In addition, to add a new language to the multi-language drop-down menu, please follow the below steps:

1. Go to the “Settings” section on Agile Store Locator
2. Under “General Settings”, scroll down to the “Site Language” options
3. Enter a language you wish to enter the data in

4. Click on “Save Changes”

Now the selected language will be available in the language drop-down menu.

Note: Any new entries made will automatically be saved in the same language that was selected in the drop-down menu.

For example, in the below screenshot, the entered store data will be saved in German.

How to Import/Export as a CSV file With a New Language?

Moreover, to Import a CSV file with a different language, you will simply need to create an extra column with the header “lang” and fill this column with the corresponding language code. Furthermore, leaving the “lang” parameter blank will result in the usage of the default language of the site.

How to Enforce the Store Locator to Render a Specific Language?

Lastly, to force the store locator to use or display the data in a specific section and a certain language, users can use the below shortcode to do so:

[ASL_STORELOCATOR lang="fr_FR"]

Where “fr_FR” can be replaced with any language code.

Translate Categories & Attributes without enabling Data WPML

If you only want to translate Category names and Attributes (e.g., Brand, Special)—without turning on Data WPML—you can do it with two WordPress filters.

Workflow in short:

1. Add the filter(s) below to your theme’s functions.php (or a small helper plugin).
2. Make sure each source word exists in the asl_locator translation file. Add it and Sync via Loco Translate.

A) Translate Categories with a Hook

/**
 * Translate ASL categories using PO/MO (no Data WPML needed).
 * Domain: asl_locator (same domain used by the plugin).
 */
add_filter('asl_filter_locator_categories', function ($categories) {
    foreach ($categories as $cat) {
        // Ensure the category name is picked from the .po/.mo translation
        $cat->name = esc_attr__($cat->name, 'asl_locator');
    }
    return $categories;
});

Remember: Add each category label to your asl_locator language file and Sync in Loco Translate so the strings are available to translate.

B) Translate Attributes (Brand, Special, etc.) with a Hook

The example below does two things:

1. (Optional) Keeps only brands that are actually used by stores (so your dropdown isn’t bloated).
2. Translates the visible labels (e.g., Brand names) via your PO/MO file before returning the attributes.

/**
 * Translate attribute labels (Brand, Special, etc.) via PO/MO.
 * Works without Data WPML. Text domain: asl_locator
 */
add_filter('asl_filter_locator_attributes', function ($attributes) {
    // Only translate the visible labels; preserve array keys and objects.
    foreach (['brand', 'special'] as $key) {
        if (!empty($attributes[$key]) && is_array($attributes[$key])) {
            foreach ($attributes[$key] as $id => $obj) {
                if (is_object($obj) && isset($obj->name)) {
                    // Pass through translation and escape for safe output
                    $obj->name = esc_attr__($obj->name, 'asl_locator');
                }
            }
        }
    }
    return $attributes;
});

C) Make the strings translatable (Loco Translate)

1. Open Loco Translate ➜ Plugins ➜ Agile Store Locator.
2. Pick your language (or create one), then Sync so your new source strings appear.
3. Search for your Category/Brand/Special labels and enter their translations.
4. Save, then refresh the Store Locator frontend to see the translated labels.

1- Via Translation

WordPress itself works and recommends changing the text via translation so none of the files are being changed and the translation can be available in multiple languages. To change the text via the translation, first of all, you have to make sure that you are changing the site translation file, that can be done via any translation plugin, we recommend Loco Translate which is a free plugin, so once you are done with change text you can simply remove/deactivate that plugin.

To check your language, go to your WordPress admin panel, select “Settings”, then “General”, and check your “Site Language”, as shown in the image.

To read the full detail about changing it, please follow the guide article Store Locator WordPress Translation.

2- Via WordPress Hooks

Any Store Locator text can also be modified via some WordPress available hooks, for that you have to add the given code to your active theme functions.php file, here we have WordPress filter gettext to modify the text of the button from Website to Booking.

/**
 * [asl_filter_text Changing text of the Store Locator]
 * @param  [type] $translation [description]
 * @param  [type] $text        [description]
 * @param  [type] $domain      [description]
 * @return [type]              [description]
 */
function asl_filter_text($translation, $text, $domain) {

	$asl_domain = 'asl_locator';

	if($domain == $asl_domain) {

		if($translation == 'Website') {

			$translations = get_translations_for_domain($asl_domain);			

			return $translations->translate( 'Booking' );
		}
	}

	return $translation;
}

add_filter('gettext', 'asl_filter_text', 10, 4);

Moreover, a user is able to remove the store count if they want to. To do so simply add the below CSS line to remove the store count.

#asl-storelocator.asl-cont .Num_of_store span,
#asl-storelocator.asl-p-cont .Num_of_store span {opacity: 0;}

The below image shows the result of using the above shortcode. Moreover, the store count is removed in the below image

Furthermore, to change the font family, please follow these steps:

1- On the main dashboard of WordPress go to “Appearance”

2- Select “Customize” and then go to “Additional CSS”

Paste the below code in “Additional CSS” and click on the Publish button.

.asl-cont * {font-family: 'Oswald',Helvetica,Arial,Lucida,sans-serif !important;}

Alternatively, you can paste the above code into the theme style.css, this is located under “Theme Editor” in the “Appearance” menu.

[ASL_STORELOCATOR css_class="my-second-locator"]

How it can be useful?

The above shortcode attribute can be useful when you have more than one store locator and you want to personalize with the your own CSS class and styles.

.my-second-locator#asl-storelocator {--sl-primary: #FF0000;}

With the CSS rule given above, the store locator color scheme can be changed easily by adding the CSS rule.

Hide the Map on a Specific Page

You can also use the css_class attribute to hide the map on certain pages. Here’s how:

[ASL_STORELOCATOR css_class="no-map-include"]

Then apply the following CSS:

.no-map-include.asl-cont {
  overflow: hidden !important;
}
.no-map-include.asl-cont .asl-map {
  visibility: hidden; 
  position: absolute; 
  left: 100% !important;
}
.no-map-include.asl-cont .asl-panel {
  position: relative !important; 
  display: block !important; 
  width: 100% !important; 
  max-height: unset !important; 
  min-height: unset !important; 
  height: 300px !important;
}
#asl-storelocator.no-map-include.asl-cont #asl-panel {
  position: relative !important; 
  max-height: 100% !important; 
  min-height: 300px !important; 
  flex: 0 0 100% !important; 
  max-width: 100% !important;
}

Hide the Maps on Mobile Device

@media (max-width: 768px) {
    .asl-cont .asl-map {
        display: none !important;
    }
}

Alternative: Use the list Template (No Map by Default)

Instead of hiding the map with CSS, you can also use a built-in map-free template:

[ASL_STORELOCATOR template="list"]

This template is designed to only show the list of stores where a map isn’t needed.

Example for Template 3 (Multiple Color Schemes)

Template 3 supports full color customization through CSS variables.
If you want to apply a separate color scheme to one instance of the locator using Template 3, target your custom wrapper class along with the template class (asl-template-3).

/* Custom color scheme for Template 3 */
body .my-second-locator.asl-cont.asl-template-3 {
    --sl-primary: #b24a59;
    --sl-header: #f7f7f7;
    --sl-header-color: #555d66;
    --sl-infobox-color: #555d66;
    --sl-infobox-bg: #ffffff;
    --sl-infobox-a: #b24a59;
    --sl-action-btn-color: #ffffff;
    --sl-action-btn-bg: #b24a59;
    --sl-color: #555d66;
    --sl-list-bg: #ffffff;
    --sl-list-title: #32373c;
    --sl-list-sub-title: #6a6a6a;
    --sl-highlighted: #f7edee;
    --sl-highlighted-list-color: #b24a59;
    --asl-mrk-infobox-clr: #b24a59;
}

To remove the search bar simply add the below CSS line to the “Additional CSS” section. This can be reached by going to the “Appearance” tab and selecting the “Customize” option.

Add this CSS line to remove the search bar.

#asl-storelocator.asl-p-cont .Filter_section,
#asl-storelocator.asl-cont .Filter_section,
#asl-storelocator.asl-cont .sl-main-row .asl-panel .search_filter,
#asl-storelocator.asl-cont.asl-template-3 .sl-filter-sec {display: none !important;}

Use the CSS rule below for a compact layout to bring the list to the top.

#asl-storelocator.asl-cont .sl-main-row .asl-panel .asl-panel-inner {
    top: 0px !important;
}

Remove Search in the Template 4

To remove the search from the Template 4, use the CSS line below, and paste that to your Additional CSS.

.asl-cont .search_filter {display: none;}

Center Search Control for Template 0

To move the search control to the center while hiding the other controls, use the CSS lines below, and paste that to your Additional CSS.

.asl-cont .Filter_section .search_filter + div {
    display: none;
}
#asl-storelocator.asl-cont .asl-wrapper .Filter_section .search_filter, #asl-storelocator.asl-cont .asl-wrapper .Filter_section .asl-name-search {
 margin: auto;   
}

Apples are green,Mangoes are yellow,Grapes are purple

To show the above field data in the list format, we can add such a tag through the Template Customizer.

<div class="sl-row sl-desc">
 <div class="pol-12">{{list description}}{{/list}}</div>
</div>

Adding the above code will render the description in a list format based on ul and li tags of the HTML.

How to add more custom tags?

Our store locator plugin uses the JSRender which is a very handy and powerful templating engine. Through JSREnder many functionalities can be achieved by creating new custom script template tags.

In this guide article, we will show how you can make use of a custom script. For the demo, we are considering a comma-separated field which we will modify into UL LI tags by using commas as the separator. Furthermore, each item will list in a new HTML LI element.

We are considering that we have a custom field named “food”. Moreover, this field has multiple items comma-separated which we will render into the list, such as this.

[{"id":"1","title":"Amanda Food Court","description":"not available","street":"45 North Street","city":"Uitenhage","state":"Eastern Cape","postal_code":"5043","country":"South Africa","lat":"-33.749771","lng":"25.405823","phone":"041 111 3964","fax":"","email":"support@agilelogix.com","website":"https:\/\/google.com","logo_id":"1","path":"default.png","marker_id":"1","description_2":"","open_hours":"{\"mon\":\"1\",\"tue\":\"1\",\"wed\":\"1\",\"thu\":\"1\",\"fri\":\"1\",\"sat\":\"1\",\"sun\":\"1\"}","ordr":"0","brand":"","product":"","slug":"amanda-food-court-uitenhage","categories":null,"days_str":"Mon, Tues, Wed, Thur, Fri, Sat, Sun","foods":"Cakes, Beverages, BBQ, Steak"}]

First of all, we have to register a new js file, which we will name sl-tmpl-script.js. Furthermore, this file will be placed under the theme js directory with the script content as follows.

//  Validate if the jquery views are initialized to be used?
if(window['asl_jQuery'] && asl_jQuery.views) {
  
  //  list Template
  asl_jQuery.views.tags("list", function(_field) {
    
    var list_html  = '';
    
    if(_field) {

      var list_items = _field.split(',');

      if(list_items.length) {
        
        list_html  = list_items.forEach(function(item){
          return '<li>' + item + '</li>';
        });
        list_html  = '<ul class="sl-list-props">' + list_html.join('') + '</ul>';
      }
    }
    return list_html;
  });
}

Once we have saved the js file, under the theme js directory, now we need to add these lines to our theme functions.php file. These lines can be placed anywhere but it is preferred to be at the top of the file.

/**
 * [asl_tmpl_update description]
 * @return [type] [description]
 */
function asl_tmpl_update() {
    
  wp_enqueue_script( 'asl-template-update', get_template_directory_uri() . '/js/sl-tmpl-script.js', array('agile-store-locator-lib'), '1.0.0'  );
}

add_action( 'wp_enqueue_scripts', 'asl_tmpl_update' );

As of now, our customization is complete. Therefore, we can simply use this newly created custom tag named like the list in our template file, as in the code below.

Once we have saved the template file, the custom field should appear in the list format, as in the screenshot below.