Does your business have multiple physical locations? If so, adding a store locator feature to your WordPress website will help you tremendously.
Letting your website’s visitors find the right branch for them, based on their needs, will keep them happy and improve your foot traffic.
This article will teach you how to use a plugin to add a store locator in WordPress.
Why Use Store Locator
Store locator plugins for WordPress use Google Maps to display the different locations of your business.
The Google Maps module comes with many excellent perks, such as the different map views, geolocation, and directions to reach the nearest store.
In addition, clicking on a store location will open a modal window with relevant information about the specific branch. Some extra information can be hours of operation, phone number, or special instructions like where to park.
The extra provided information will reduce the number of questions your customers may have and save your workers valuable time to move on with their job tasks.
When the customer is ready to visit his chosen branch, he can click on the branch on his smartphone. Clicking on the store location will automatically open the Google Maps app, ready to navigate them to the destination.
The seamless integration between your website and Google Maps will improve your overall customer experience and brand reputation.
There are two requirements to fill before embedding a store locator on our website. The first one is to install a dedicated plugin, and the second is to generate a Google Maps API key.
- Generate the Google Maps API key.
- Install a store locator plugin.
Regardless of your plugin of choice, we will need to generate a Google Maps API key to display it on our site.
Generate Google Maps API Key
Displaying Google Maps on our WordPress website requires us to create a unique API key.
Note: you must have a Google account with billing enabled to generate a key.
If you only want to display a few locations individually, you can bypass generating the API key process. You can read more about our embedded Google Map in Divi article.
However, to fully enjoy any store locator plugins, you must obtain a valid API key. Here is how you do it:
- Navigate to the Google Maps Platform website.
- Click on the Get Started button.
- Once inside the Google cloud platform, click on the create billing account link and enter your payment details (Google asks for your payment details for safety reasons, and you won’t be charged automatically).
- Navigate into the APIs & Services -> Credentials screen.
- Click on the Create credentials button and choose the API key option.
- A popup window will open up with your new API key.
Great, your API key is ready to be used. You can copy it to the clipboard. We will use it shortly, but let’s talk about store locator plugins for now.
Store Locator Plugin for WordPress
There are multiple store locator plugins that we can use to embed a map on our website. There are all very similar in their features.
A store locator plugin will create two components:
- Dedicated custom post type page for every store you’ll add.
- Search page with Google Map to display some or all locations.
When choosing which store locator plugin to use, consider all the plugin’s features.
The WordPress store locator plugin has many great features to help us style the map and create advanced filters and categories for every store.
In addition, it can easily integrate with your WooCommerce store and let your visitors check if a particular product is in stock and which location.
More on that later, but let’s install the plugin for now.
Install the Store Locator plugin for WordPress
First, we need to install and activate the store locator plugin on our website.
The downloaded zip file contains two plugins. One is the weLaunch Framework, and the second one is the store locator plugin. We need to install and activate them both.
From your WordPress website, navigate to Plugins -> Add New -> Upload plugin and install the weLaunch framework plugin first.
Once activated, repeat the process and install the store locator plugin.
Once both plugins are active, we can now enter the Google API key we generated in the last step.
To do that, navigate to Store Locator -> Settings -> General, fill in the Google API key field, and save the changes.
After saving, move on to the next step and create store categories and filters.
Categories and filters
WordPress taxonomies such as categories and tags can help us filter the results and find the right branch based on their exact needs.
If all your locations are identical, adding categories and filters is an optional step and not required.
For example, let’s take an individual who owns a few food industry businesses. One stream of his can be dining-in restaurants with a full-blown menu, while a different business can be coffee shops that only serve coffee with limited menu options.
In a case like the above, it will be wise to assign different categories to the businesses. One category can be ‘Restaurants’, while the other is ‘Coffee Shops’.
To create new categories, navigate to Store Locator -> Categories, enter a category name and click on the add new category button.
Once added, you’ll see all the category names on the right side.
Categories are helpful for more complex types of businesses, and in most cases, you probably won’t even need to create different varieties.
If all your locations are essentially operating similarly, with minor differences, it’s better to use filters instead.
Let’s retake our coffee shop example and assume that all locations have the same menu but different features offered. One place can have Wifi while the other doesn’t. Another branch can be pet-friendly while others aren’t, and so on.
The ability to let our customers filter the locations on the map based on their specific needs will make deciding which branch to go to much more straightforward.
To create filters, navigate to Store Locator -> Filters and enter your desired parent filters.
Only the 2nd level filters will be shown as checkboxes inside the store locator. The 1st level filters will be used as the filter top names.
In our example, we will create a parent filter named ‘Features’ and enter Wifi, parking, pet-friendly, and delivery into it.
Great job. When our list of filters is ready, it’s time to move on and start adding store locations.
Add store locations
We reach the fun part where we can start adding our store locations.
Every store you’ll add will be registered as a custom post type and have its page.
To create a store, navigate to Store Locator -> All Stores and click on the New Store button.
Adding a new store is similar to creating any other custom post type, such as a WooCommerce product.
You’ll need to add a title and description and other details unique to stores, such as an address, contact information, and hours of operation.
Let’s continue with the same scenario and add a new coffee shop location.
The title can be the address itself or a short description of the place. Something that can differentiate between this location to the others. A title like ‘iBean Waterfront’ will work great.
Then, keep adding the other relevant information asked on that page. Fill in descriptions, addresses, and operation hours.
Enable all the features this location offers on the right sidebar, such as parking and Wifi, and set a featured image.
Publish the store and repeat the process to add additional stores when done.
Once we have entered all addresses, it’s time to display the map with pins of the different locations.
Display the map with the store’s locations
We will need to use the plugin’s native shortcode to display the Google Map with the various locations we entered.
Thus, create a new page, enter the
[wordpress_store_locator] in a Gutenberg shortcode block, and click on publish.
Once published, visit the page to view what the map looks like. The sidebar with the search bar, filters, and store locations will be positioned on the left, while the map with pins will be placed on the right.
The client will need to enable the browser to use his current location or enter one manually inside the address field.
Then, the map will display a pin with your location and all the available stores near you in the distance range.
Feel free to test the filters by selecting your desired options and waiting for the map to update with the relevant results.
You can also hover over the store in the search results to see its location on the map and more details such as an address and phone number.
Once everything is working as expected, we can keep moving and customize the map’s look and functionality.
Customize the Store Locator Plugin
One of the reasons why this store locator is our plugin of choice is thanks to the unlimited options to style and customize every aspect of it.
You can modify every part of the plugin by navigating to the relevant tab inside the Store Locator -> Settings screen.
Because there are so many different settings that we can tweak, it’s impossible to cover them all. However, there are some that we would like to point out.
You can change the default layout of the store locator shortcode to a different template or a custom design.
Navigate to Settings -> Layout, and choose one of the many other available options.
By default, the map’s height will be automatically determined by the search results height. If you only have a few locations, you can keep them.
However, to make it more visually appealing, I recommend setting a maximum height instead. Thus, navigate the map tab, uncheck the map auto height box, and set a specific number.
Another option you may like to change on this page is the distance unit. The default distance unit is set to KM, but you can change it to miles.
Data to show
When hovering over a location from the search results list, the popup window will display a lot of information regarding the store.
Some of the data is irrelevant and better to be left out. In my opinion, the full description of each store is unnecessary and, therefore, should be hidden.
You can decide what to display or hide from inside the data to show tab. Many options are checked by default, but you can uncheck them based on your preferences.
Single store page
As mentioned earlier, every store will have a designated page with its URL. The store page will display all the information you entered, including descriptions, hours, and featured images.
Navigate the single store page tab and uncheck the boxes if you want to hide some elements.
Alternatively, you can also disable the single store page altogether. The stores will still be displayed on the map, but clicking on them won’t open the store page.
There are so many more options than you can change. I recommend you to go through them and adjust them based on your business requirements.
When done, save the changes and revisit the store locator page to test the results.
This article taught you how to use the store locator plugin to display all your store locations on your WordPress website.
Leave us a comment and tell us if you have any questions regarding the process. We will be happy to help as much as possible.