This guide walks you through adding multiple phone numbers and emails for a store and displaying them in your locator using the Template Customizer.

What This Does

By default, each store can have one phone and one email. If you need more than one of each, follow these steps:

• Create extra contact fields
• Enter the additional data
• Update your template to display the extra contacts

Step 1 — Create Additional Contact Fields

1. Go to ASL Settings > Manage Additional Fields in your WordPress admin.
2. Click Add New Field to create a second phone number field:
   • Label: Phone 2
   • Control Name: phone_2
3. Add another field for a second email:
   • Label: Email 2
   • Control Name: email_2
4. Click Save Fields.

Step 2 — Enter Additional Contact Data

1. Go to Stores and edit the store(s) where you want the extra contacts.
2. You will now see the new Phone 2 and Email 2 fields.
3. Enter the extra phone numbers and emails you want.
4. Save the store(s).

Step 3 — Update Your Template

To display the new contact fields:

1. Go to ASL Settings > Customizer.
2. Select the template you are using from the dropdown.
3. Click Load Template to load its HTML into the editor.

Locate the section where phone and email are output.

Version A — Each Contact on Its Own Line

If you want each phone/email on its own line with individual icons:

{{if phone}}
<li class="sl-phone">
    <i class="icon-mobile"></i>
    <a href="tel:{{:phone}}">{{:phone}}</a>
</li>
{{/if}}

{{if phone_2}}
<li class="sl-phone-2">
    <i class="icon-mobile"></i>
    <a href="tel:{{:phone_2}}">{{:phone_2}}</a>
</li>
{{/if}}

{{if email}}
<li class="sl-email">
    <i class="icon-mail"></i>
    <a href="mailto:{{:email}}">{{:email}}</a>
</li>
{{/if}}

{{if email_2}}
<li class="sl-email-2">
    <i class="icon-mail"></i>
    <a href="mailto:{{:email_2}}">{{:email_2}}</a>
</li>
{{/if}}

Version B — Phones Together, Emails Together (Single Icon Per Line)

If you want the phones on the first line with one phone icon and the emails on a second line with one email icon, use this:

{{if phone || phone_2}}
<li class="sl-phones">
    <i class="icon-mobile"></i>

    {{if phone}}
    <a href="tel:{{:phone}}" class="mr-2">{{:phone}}</a>
    {{/if}}

    {{if phone_2}}
    <a href="tel:{{:phone_2}}" class="mr-2">{{:phone_2}}</a>
    {{/if}}
</li>
{{/if}}

{{if email || email_2}}
<li class="sl-emails">
    <i class="icon-mail"></i>

    {{if email}}
    <a href="mailto:{{:email}}" class="mr-2">{{:email}}</a>
    {{/if}}

    {{if email_2}}
    <a href="mailto:{{:email_2}}" class="mr-2">{{:email_2}}</a>
    {{/if}}
</li>
{{/if}}

Step 4 — Save Your Template

After adding either version of the code:

1. Click Save Template.
2. Visit your store locator on the front end to confirm the new layout displays correctly.

Step 1: Add a Custom Field for Online Stores

1. Go to ASL Settings > Manage Additional Fields.
2. Click Add New Field.
3. Set the following values:
   • Field Key: online_store
   • Label: Online Store
   • Type: Checkbox
4. Save the field.

This checkbox will now appear in the “Add/Edit Store” form.

Step 2: Use the Checkbox When Adding or Editing a Store

When adding a store via Manage Stores, check the Online Store checkbox for stores that do not have a physical location and are purely digital (e.g., eCommerce, marketplaces).

Step 3: Differentiate Online Stores in the Store Listing

Using the {{if online_store}} condition in your JSRender template, you can apply styles and behaviors that highlight online stores visually. Below are several customization ideas:

1- Change Background Color

Highlight online listings with a distinct background.

<li class="sl-item {{if online_store}}asl-online-store{{/if}}">

.asl-online-store {
  background-color: #f0f8ff !important;
}

2. Add an “Online Store” Tag

Display a label on the top-right of the listing item.

{{if online_store}}
<span class="asl-tag-online">Online Store</span>
{{/if}}

.asl-tag-online {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #007bff;
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
}

3. Hide Directions Button

Skip directions for online-only stores.

{{if !online_store}}
<a class="btn btn-asl s-direction">[Directions]</a>
{{/if}}

4. Show “Shop Now” Instead of Visit

Replace default “Visit Website” button with a strong CTA.

{{if online_store}}
<a class="btn btn-asl btn-shop-now" href="{{:link}}" target="{{:target}}">Shop Now</a>
{{else}}
<a class="btn btn-asl btn-asl-outline s-visit-website" href="{{:link}}" target="{{:target}}">[Website]</a>
{{/if}}

5- Add a Corner Ribbon

{{if online_store}}
<div class="asl-ribbon"><span>Online</span></div>
{{/if}}

.asl-ribbon {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: absolute;
  top: -5px;
  right: -5px;
}
.asl-ribbon span {
  position: absolute;
  width: 140px;
  background-color: #ff5e5e;
  color: white;
  text-align: center;
  transform: rotate(45deg);
  top: 20px;
  right: -40px;
  font-size: 11px;
}

6- Add Tooltip or Note

{{if online_store}}
<div class="pol-12">
  <p class="text-muted"><i class="icon-info"></i> This is an online-only store.</p>
</div>
{{/if}}

7- Add Badge on Store Logo

<div class="pol-sm-4 {{if online_store}}asl-logo-online{{/if}}">

.asl-logo-online::after {
  content: 'Online';
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0,123,255,0.7);
  color: white;
  font-size: 10px;
  padding: 2px 5px;
}

8- Animate Listings (Pulse Effect)

<li class="sl-item {{if online_store}}asl-highlight{{/if}}">

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,123,255, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(0,123,255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0,123,255, 0); }
}
.asl-highlight {
  animation: pulse 3s infinite;
}

Summary

Create a custom field named online_store.

Use {{if online_store}} in the HTML from ASL Settings > Customizer > Template.

Add CSS to Appearance > Customize > Additional CSS.

Modify button labels, layout, and visuals to suit your online stores.

Our example dataset for stores is as follows.

{
  "id": 3,
  "title": "Astro Club",
  "description": "not available",
  "street": "15 Heartly Road, Parsons Hill",
  "city": "Port Elizabeth",
  "state": "Eastern Cape",
  "postal_code": "45553",
  "country": "South Africa",
  "lat": -33.947128,
  "lng": 25.591169,
  "phone": "123 226 2222",
  "fax": "",
  "email": "",
  "website": "",
  "logo_id": 0,
  "path": null,
  "marker_id": "1",
  "description_2": "",
  "open_hours": null,
  "ordr": 0,
  "slug": "45553-port-elizabeth-eastern-cape-astro-club",
  "brand": ["37"],
  "special": [],
  "event_format": [],
  "institute": [],
  "categories": [
    {
      "id": "11",
      "name": "Fitness",
      "icon": "default.png",
      "ordr": "0",
      "children": [
        {
          "id": "55",
          "name": "Gyms",
          "icon": "default.png",
          "ordr": "0",
          "children": [],
          "value": ["55", "11"],
          "len": 0
        }
      ],
      "len": 5,
      "value": ["11"]
    },
    {
      "id": "12",
      "name": "Nightlife",
      "icon": "default.png",
      "ordr": "0",
      "children": [],
      "len": 4,
      "value": ["12"]
    }
  ],
  "days_str": null,
  "address": "15 Heartly Road, Parsons Hill <br>Port Elizabeth, Eastern Cape, 45553",
  "c_ids": ["11", "12"],
  "c_names": "Fitness, Nightlife",
  "str_brand": "Nike",
  "desc_link": false,
  "link": "http://domain.com/store-details/45553-port-elizabeth-eastern-cape-astro-club/",
  "target": "_self"
}

<li class="sl-item" data-id="{{:id}}">
  <div class="sl-addr-sec">
    <div class="sl-row addr-loc">
      <div class="{{if path}}pol-sm-8 pol-8 pr-0{{else}}pol-12{{/if}}">
        <p class="sl-addr-list-title">{{:title}}</p>
        <ul>
          <li class="sl-addr">
            <i class="icon-location-1"></i>  
            <span>{{:address}}</span>
          </li>
          {{if c_names}}
          <li class="sl-categories">
             <i class="icon-tag"></i>
             <ul class="inner-cat-list">
                {{for categories}}
                <li>
                   <span>{{:name}}</span>
                </li>
                {{/for}}
             </ul>
          </li>
          {{/if}}
        </ul>
      </div>
      {{if path}}
      <div class="pol-sm-4 pol-4">
        <div class="sl-logo-cont">
          <div class="sl-logo-box">
            <img alt="store-logo" alt="store-logo" src="{{:URL}}Logo/{{:path}}">
          </div>
        </div>
      </div>
      {{/if}}
    </div>
    {{:social_icons}}
    <div class="sl-act-btns mt-3">
      <a class="btn btn-asl s-direction">[Directions]</a>
      {{if link}}
      <a target="{{:target}}" class="btn btn-asl btn-asl-outline s-visit-website" href="{{:link}}">[Website]</a>
      {{/if}}
      {{if dist_str}}
      <div class="sl-miles">
        <span class="s-distance">{{:dist_str}}</span>
      </div>
      {{/if}}
    </div>
  </div>
</li>

Conditional Rendering of Store Offerings based on Categories

{{if c_names.indexOf('Fitness') !== -1}}
  <div class="fitness-location">
    This location offers fitness services.
  </div>
{{/if}}

{{if c_names.indexOf('Nightlife') !== -1}}
  <div class="nightlife-location">
    This location offers nightlife activities.
  </div>
{{/if}}

{{if c_names.indexOf('Fitness') !== -1 && c_names.indexOf('Nightlife') !== -1}}
  <div class="fitness-and-nightlife-location">
    This location offers both fitness services and nightlife activities.
  </div>
{{/if}}

In this above example:

• We’re using indexOf() to check if a specific category exists in the c_names array.
• If the category exists, we render the corresponding section.
• You can customize the HTML content within each condition block to suit your needs.

Looping through Categories and Subcategories

{{for categories}}
  <div class="category">
    <h2>{{:name}}</h2>
    <ul class="subcategories">
      {{for children}}
        <li>{{:name}}</li>
      {{/for}}
    </ul>
  </div>
{{/for}}

In this example, we’re iterating over the categories and displaying each category’s name along with its subcategories.

Categories name in the String Format for InfoBox Content

{{if c_names}}
<div class="pol-6">
   <div class="info-addr-inner">
      <i class="icon-tag"></i>
      {{:c_names}}
   </div>
</div>
{{/if}}

Conditional Rendering based on Store Description

{{if description}}
  <div class="store-description">
    <p>{{:description}}</p>
  </div>
{{else}}
  <div class="no-description">
    <p>No description available.</p>
  </div>
{{/if}}

Here, we’re checking if the store has a description. If it does, we display it. Otherwise, we show a default message indicating that no description is available.

Highlight the Brand Names

{{if str_brand}}
  <div class="store-brand">
    <h3>Prominent Brand</h3>
    <p>{{:str_brand}}</p>
  </div>
{{/if}}

Enhanced Address Display

<div class="store-address">
  <h3>Address</h3>
  <p>{{:street}}, {{:city}}, {{:state}}, {{:postal_code}}, {{:country}}</p>
</div>

This example presents a comprehensive view of the store’s address, including street, city, state, postal code, and country, ensuring users have all the necessary information for locating the store.

Content Customization

With the customizer above, you can easily create new content or update/remove existing content that includes the text custom fields, custom call-to-action buttons, add WhatsApp button, or any other content-related changes to these two sections, here is the list of documents that can be helpful in customization of the content.

1- Add Custom Fields to the template

2- Add Call to Action buttons to the Store List

3- Add Call to Action buttons to the Store Info box.

4- Change the Format of the Address

5- Add CSS Selector to Store List

6- Remove Elements from the Store List

7- Remove Elements from the Info-box

Conditional Logic

To create a simple IF-condition to create logical conditional code, here is an example:

{{if str_special=='New'}}
Speciality: {{:str_special}}
{{/if}}

To see some more detailed examples of working with content customization can be seen in the link about how to utilize the JSRender with the content.

Available Font Icons

We have provided a list of icons that can be used in the ASL Settings > Customizer, as the list is limited you can always use Font Awesome or any other library after installing it, here is the guide link about how you can add icons in the customizer.

Changing Labels of the Store Locator

The Store Locator plugin supports complete UI text changes, allowing you to customize the text throughout the interface. To change the text in the Store Locator, you can refer to the label and text change document provided.

UI Related Customization

We have provided a color customization tool that supports all our templates, using that you can match the colors of your website via multiple color pickers.

How to Change the Font Family?

If you are looking to match the store locator font family with your site fonts, or some different fonts, you can follow the following guide document about how to change the font family of the store locator.

How to Change the Columns Proportions?

Since version 4.10.13, we have introduced the shortcode attributes to change the column proportions easily via specifying the columns for the list and the map section, please follow the guide about how to change the store locator columns proportions.

Adjust the Font Sizes

To adjust the font sizes of the store locator widget, we have provided a font size tool using which you can increase or decrease the font sizes of multiple elements just as headings, titles, or content text, the following document can be followed about how to change the font sizes of the store locator.

In case you have your own UI design for the Store Locator or if you want to customize the positions of the controls, you can implement these customizations by modifying the template file of the chosen template. For instance, if you have selected Template 0 (the default template), you can customize its template file located at the following path:

/agile-store-locator-pro/public/partials/template-frontend-0.php

Customization of Template View File

Each of the Template has its own PHP view file that can be managed and customized based on your needs, the templates are built with Bootstrap 4, in our templates we have used the sl- prefix to avoid conflicts with other Bootstrap files and for the col- we have renamed it to pol-and the rest of the CSS classes are the same.

To customize a template view file, first make sure which template you are using, in case you are using Template 4 you will be modifying the file template-frontend-4.php and similarly for the <a href="https://agilestorelocator.com/demos/locator-list-template/">List Template</a>, it will be template-frontend-list.php, the complete file path will be as follows.

agile-store-locator-pro/public/partials/template-frontend-4.php

The file editing can be done either via Plugin Editor or via some File Manager plugin.

Select Agile Store Locator, and drill down to Public > Partials > [Your Template File].

UI Changes Implemented By AgileLogix Team

Please note that the regular license of our Store Locator plugin does not include support for UI-related customizations. This means that if you have your own design template and you want us to implement it for you, it would require a separate customization request.

To request a UI customization, you can fill out our customization form, providing details about your desired design and any specific requirements you may have. Our team will review your design and provide you with a quote for the customization cost and an estimated timeline for completion. We strive to offer flexibility and cater to your specific needs, so we encourage you to reach out to us for customization inquiries, and we’ll be happy to assist you further.

To open the customizer tab, go to the ASL Settings in your WordPress Sidebar, and click on the Customizer Tab.

Now you need to select the template that you are using from the template dropdown, also please select either you are customizing the infobox or the list of the store locator, and click on the Load Template button.

Now, once you will click on the Load Template button, the HTML code of the template will appear in the editor where you can do all the required changes, such as adding new content or adding a custom field value, or creating a new call to action button in the list, existing code will appear like this.

{{if c_names}}
<li class="sl-categories">
   <ul class="inner-cat-list">
      {{for categories}}
      <li><a><img src="{{:URL}}svg/{{:icon}}" alt="{{:name}}" width="60"></a></li>
      {{/for}}
   </ul>
</li>
{{/if}}

In this example, we will replace the category names with the category icons in the store locator list

The above code can be copied down here below to use.

{{for categories}}
  <li>
    <a><img src="{{:URL}}svg/{{:icon}}" alt="{{:name}}" width="60"></a>
  </li>
{{/for}}

Display Category Name with the Icon

In order to display the icon with the category name, replace with the code given below.

{{if c_names}}
<li class="sl-categories">
    <ul class="inner-cat-list list-unstyled">
        {{for categories}}
        <li class="d-flex align-items-center mb-2">
            <img src="{{:URL}}svg/{{:icon}}" 
                 alt="{{:name}}"  
                 class="mr-2">

            <span class="category-name">{{:name}}</span>
        </li>
        {{/for}}
    </ul>
</li>
{{/if}}

Once you have added your code, you can press the Save Template button to apply the changes, in case your changes are not appearing make sure you are updating the correct template file from the template dropdown.

Note: Since version 4.7.10, you should customize templates in the Customizer tab under ASL Settings, not by editing plugin files directly.

How to Apply a Custom Address Format

1. Go to: ASL Settings > Customizer.
2. Open the template you want to edit (e.g., store listing or infobox).
3. Find the current address field, usually: {{:address}}
4. Replace it with the address format you need (examples below).
5. Click Update File and refresh your Store Locator page to see the new format.

Template Variables You Can Use

You can arrange them in any order to match local conventions.

Popular Address Formats

USA (Domestic)

{{:street}}
{{:city}}, {{:state}} {{:postal_code}}
{{:country}}

or shortened:

{{:street}}, {{:city}} {{:state}} {{:postal_code}}

US addresses typically place street first, then city, state, and ZIP code.

US (International Mail)

{{:street}}
{{:city}}, {{:state}} {{:postal_code}}
UNITED STATES

When sending from abroad, write the country name in full on the last line.

Common European Formats

European countries vary widely, but most follow this structure: street first, then postal code + city, and optionally country.

General EU Format

{{:street}}
{{:postal_code}} {{:city}}
{{:country}}

France

{{:street}}
{{:postal_code}} {{:city}}
FRANCE

Postal code goes before the city name.

Germany

{{:street}}
{{:postal_code}} {{:city}}
GERMANY

UK

{{:street}}
{{:city}}
{{:postal_code}}
UNITED KINGDOM

In several EU countries, the postal code often precedes city names.

Other International Formats

Canada

{{:street}}
{{:city}} {{:state}} {{:postal_code}}
CANADA

Australia

{{:street}}
{{:city}} {{:state}} {{:postal_code}}
AUSTRALIA

Japan

{{:postal_code}}
{{:state}}{{:city}}{{:street}}
JAPAN

General International (recommended for mail)

{{:street}}
{{:city}} {{:state}} {{:postal_code}}
{{:country}}

Putting the country on the last line helps ensure correct routing by postal services

In the default store list, there is already a call to action button which serves the data of the website field of the store.

Hide the Default Website Call to Action

In order to hide the default CTA from the list can be done from the UI tab of the ASL Settings, disable the switch and save the settings.

Add a New Call to Action Button

1- To add a new call to action button, first, you have to decide on which field you are going to bind it, so most probably you will create a custom field through the ASL Settings as shown below.

2- once you have added the additional fields, now you should add data to that field, so only then the button will appear for those stores that have the field data available.

3- As you have added the field data, now it is time to add that to the template, go to the ASL Settings > Customizer, select the template that you are using from the Template Dropdown and select list from the Section Dropdown.

4- Click on the Load Template, to load the existing HTML template of the list, and copy the given HTML code to make a new call to action.

{{if booking}}
<a target="_blank" href="{{:booking}}" class="btn btn-asl">[Booking]</a>
{{/if}}

5- We will paste the above HTML code into the template where we want to add the button, please note that we have created a field named booking that is in the code, if you have named it differently, you should replace it before pasting the above HTML code, the name should be in a small case without any space or dash, as we want to place them below the last line, we have wrapped the buttons in the row and column container.

{{if booking}}
  <a target="_blank" href="{{:booking}}" class="btn btn-asl">[Booking]</a>
{{/if}}

6- In case you want to add more buttons, make just add them inside the same container div as given below.

{{if booking}}
  <a target="_blank" href="{{:booking}}" class="btn btn-asl">[Booking]</a>
{{/if}}
{{if contact_url}}
  <a target="_blank" href="{{:contact_url}}" class="btn btn-asl ml-2">[Contact Us]</a>
{{/if}}

6- Once you have added the code, click on the Save button to apply the changes.

Example of WhatsApp Button Code

If you want to add the WhatsApp code to the listing, the steps will be the same as above except the button code is a bit different, you can copy it below.

  {{if whatsapp}}
        <a href="https://wa.me/{{:whatsapp}}?text=Hello" class="btn btn-asl btn-green whatsapp-btn">
            <span class="d-flex align-items-end"><i class="ico-whatsapp"></i> <span>[WhatsApp]</span></span>
        </a>
  {{/if}}

Create a Big Call to Action

If you want to create a full-width CTA button, please add btn-block class next to the btn-asl as given below.

{{if booking}}
      <a target="_blank" href="{{:booking}}" class="btn asl-btn btn-block mt-2">[Booking]</a>
{{/if}}

If users of Agile Store Locator want to remove store hours from the store list, they can do so from the “Customizer” tab.

To remove the store hours from the store list, please follow the below steps:

1. Go to “ASL Setting”, and select the “Customizer” tab
2. Select the Template you are using from the “Template” drop-down menu
3. Select “list” from the “Section” drop-down menu
4. Click on “Load Template”
5. Remove the code line shown in the below screenshot from the “Template Editor”

Once you delete the above code, the store hours will no longer appear on the store list.

How to Add Store Hours in the Infobox

To show store hours (opening/closing) in the infoboxes of the store locator, users will need to add the {{:open_hours}} HTML snippet in the infobox “Template Editor”.

Please follow the below steps to add the store hours to a store infobox:

1. Go to “ASL Setting”, and select the “Customizer” tab
2. Select the Template you are using from the “Template” drop-down menu
3. Select “Infobox” from the “Section” drop-down menu
4. Click on “Load Template” 
5. Paste the below code into the Template Editor and click on “Save Template”

{{if open_hours}}
<div class="phone"><span class="glyphicon icon-clock-1"></span>{{:open_hours}}</div>
{{/if}} 

The above code can also be taken from the following link.

Once you have added this code and saved the template you will be able to add store hours in the store infobox from “ASL Settings”.

Overall there are two methods to remove the label from the store listing.

Method 1

The logo appears when you have dummy data. Therefore, if you want to remove this label from the store list, please leave the “logo_name” column empty in the CSV file you intend to import. As a result, all the stores in the CSV file will not have logos.

Method 2

Firstly, select the template of the store locator which you are using, all the templates are located under the “partials” folder. Moreover, the complete path of the directory is /wp-content/plugins/codecanyon-16973546-agile-store-locator-google-maps-for-wordpress/public/partials/.

Once the right template is selected (Template 0, etc.) open it in the WordPress Plugin Editor. Next, search for the text “public/Logo/{{:path}}”. Lastly, to remove the listing label from your Store Locator, remove the selected text as shown in the image below from your template file.

Once the selected text is removed, update the file with the “Update File” button. Finally, refresh your Store Locator to see the changes.

 

Image of Agile Store Locator Template File

• Go to the ASL Settings in the WP Admin Panel, and select the Customizer Tab.
• Select the Template you are using and the Section that can be either the List or Infobox, that you want to reset, and click on the Load Template button.
• Once the template is loaded, please click on the Reset Template button.
• You will notice that the template has been changed.
• Click on Save Template to save it.