Add Call to Action buttons in Infobox

In this guide article, we will explain how you can add one or more call-to-action buttons in the infobox of the Store Locator, the addition is just like the addition in the list template, here is the screenshot of the default infobox of our Store Locator plugin.

blank
Infobox Default Layout

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

blank
Website Field of Stores

Hide the Default Website Call to Action #

In case you want to hide the default website call to action button, you can use the CSS below to hide it.

.asl-p-cont a.action.a-website,
.asl-cont a.action.a-website {display: none !important}

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.

blank
Image of Manage Additional Field in the ASL Settings

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.

blank
Field Data for new Booking Field

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

blank
Infobox Dropdown in Customizer

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

{{if booking}}
<a target="_blank" href="{{:booking}}" class="action">[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.

blank
Pasted the code in the template

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

Create a Big Call to Action #

If you want to create a full-width infobox button, please copy and paste the HTML code instead of the above code.

{{if booking}}
<div class="sl-row mt-2">
  <div class="pol">
    <a href="{{:booking}}" class="btn-asl btn d-block w-100">[Booking]</a>
  </div>
</div>
{{/if}}

You will paste the above code after the asl-buttons HTML unlike Step 5 where we have pasted it within the asl-buttons HTML tag.

blank
Full-width code pasted

This is how the infobox should appear once it is added properly.

blank
Infobox with button

How to add a WhatsApp Call to Action? #

Creating a WhatsApp button call to action is just exactly the same procedure as described above, we will list the points again.

1- Create a custom field named as “whatsapp” in the Custom Field Manager.

blank

2- Add Whatsapp number to any of your store through the Edit Store.

blank

3- Add the given code below to the Template Customizer, for detail please check store locator template customizer.

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

Once you save the customizer, the end results will be list this based on the infobox you have selected.

blank
blank