View Categories

Store Locator Template Customizer

Since version 4.7.10, the store locator has added its template customizer through which you can easily customize the UI of the list or the infobox of any provided template, anything that is added through the customizer will not be lost even if the plugin is upgraded or deleted, so you don’t need to worry about the changes and you can easily upgrade to the latest version.

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

customizer tab
Customizer Tab in the ASL Settings

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.

customizer panel
Customizer Panel

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.