Customize the Store Detail Page

Agile Store Locator has a store detail page that is auto-generated for each store with user-friendly URLs, to customize that template view, you must have a basic understanding of the PHP and HTML, the view file is located in the path given below.

/agile-store-locator/public/partials/asl-store-page.php

All the fields and the custom fields are accessible via the PHP object as given below.

echo $store_data->title;        // title of the page
echo $store_data->website;      // website link
echo $store_data->facebook_url; // a custom field

How to add a gallery for each store? #

For the gallery example, we are using a FooGallery plugin, that is available on WordPress.org, first, download and install that plugin and add the create gallery for each store, each gallery will have a unique id that we will add through our Custom Field Manager in the ASL Settings, rest of the steps are as follows.

• Create a custom field in the Custom Field Manager named gallery_id.

• Add the gallery id in that field so that will be assigned to the store for which you want to create a gallery.

• Now the last step is to customize the store detail page so that the gallery can appear on it, for that please add the following code where you want the gallery to appear.

<?php 
  if($store_data->gallery_id) {
    echo do_shortcode('[foogallery id="'.$store_data->gallery_id.'"]');
  } 
?>

Once you have added the code in the template file, please save the file, you can see the store detail page the gallery should appear if you have followed the steps correctly.

Add a WhatsApp Call-to-Action #

To create a WhatsApp call to action on the store detail page, you can add the given code below.

<?php if(isset($store_data->whatsapp) && $store_data->whatsapp): ?>
    <div class="pol-md-6">
        <a target="_blank" href="https://wa.me/<?php echo $store_data->whatsapp ?>?text=Hello" class="btn whatsapp-btn"><span class="d-flex text-center"><i class="ico-whatsapp mt-1 mr-2"></i> <span><?php echo esc_attr('WhatsApp', 'asl_locator'); ?></span></span></a>
    </div>
<?php endif; ?>

The best position to add this CTA is next to the website button.

Now as we have customized the plugin template file, we need to back up the file to avoid losing it in updates.

How Can I Add Styling to the Store Detail Page? #

The Store Detail page of the Agile Store Locator plugin is built using Bootstrap 4, which makes it highly customizable with CSS. To enhance the appearance of this page, you can add custom CSS in a couple of ways depending on your setup:

Using WordPress Customizer #

1. Navigate to your WordPress dashboard.
2. Go to Appearance > Customize.
3. Click on Additional CSS.
4. Here, you can add your custom CSS rules to style the Store Detail page. For example:

.asl-cont.asl-store-pg {
    background-color: #f0f0f0;
    color: #333;
}

Using a Page Builder (like Elementor) #

1. Open the page where the store locator is embedded with your Page Builder.
2. Locate the section or widget where you want to add the CSS.
3. Most builders have a custom CSS option in the advanced settings of the element or section. Add your CSS rules here.

These methods allow you to seamlessly integrate the store locator’s style with your site’s aesthetics without altering plugin files, ensuring your changes remain intact even after plugin updates.