Agile Store Locator for WordPress has a default category dropdown that can be viewed in the form of multi-select dropdowns or tabs, however, in case some users want to add additional dropdowns such as brand or special they can easily add them via ASL Settings > General tab.
Dropdowns using Shortcode Attributes #
To add the brand dropdown, follow the shortcode below.
[ASL_STORELOCATOR filter_ddl="brand"]To add the Special dropdown, follow the shortcode below.
[ASL_STORELOCATOR filter_ddl="special"]In order to add both of them together to make up to three dropdowns, use the shortcode filter_ddl with the comma-separated special, brand as provided below.
[ASL_STORELOCATOR filter_ddl="brand,special"]How to show them in the listing or infobox? #
To show the brand or the special attribute tag in the list is quite easy, all you need is to add the code below anywhere in the template where you want to display them through the ASL Customizer.
Once you add the above code in the ASL Customizer, you need to save the template via the Save Template button, the copy of the above code is as follows.
{{if str_brand}}
<li class="sl-brand">
{{:str_brand}}
</li>
{{/if}}
{{if str_special}}
<li class="sl-special">
{{:str_special}}
</li>
{{/if}}Similarly, if you have Font-Awesome installed on your site, you can add icons to your lines as follows.
{{if str_brand}}
<li class="sl-brand">
<i class="fa-solid fa-hashtag"></i>
<span>{{:str_brand}}</span>
</li>
{{/if}}
{{if str_special}}
<li class="sl-special">
<i class="fa-regular fa-comment-dots"></i>
<span>{{:str_special}}</span>
</li>
{{/if}}Similarly, we can add the code below in the infobox, so here is how it will appear in that.
{{if str_brand}}
<div class="pol-12">
<div class="info-addr-inner">
<i class="fa-solid fa-hashtag"></i>
<span class="txt-hours">{{:str_brand}}</span>
</div>
</div>
{{/if}}
{{if str_special}}
<div class="pol-12">
<div class="info-addr-inner">
<i class="fa-regular fa-comment-dots"></i>
<span class="txt-hours">{{:str_special}}</span>
</div>
</div>
{{/if}}