How to add CSS class to the store locator?

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.