Table of Contents
Store locator has a shortcode attribute named as css_class that can be applied in the shortcode to add additional CSS class on the store locator, see the example below.
[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;
}
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.