Does your business have multiple physical locations? If so, adding a store locator feature to your WordPress website will be tremendously helpful.
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 has many excellent perks, such as different map views, geolocation, and directions to 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 information will reduce the number of questions your customers may have and save your workers valuable time so they can 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.
- Search for stores or service centers by location or category
- Get directions easily via Google Maps integration
- Filter locations based on tags such as hospital, clinic, or retail store
- View detailed information like contact numbers, hours, and emails
This is an indispensable tool for driving foot traffic and improving customer satisfaction for businesses managing multiple outlets, clinics, or service points.
Integrating your website and Google Maps will improve your overall customer experience and brand reputation.
Store Locator Types
There are different ways to display store locators on a map on your website. One option requires working with Google Maps and, therefore, using their API, and the second one doesn’t.
This tutorial will show you both ways, and you can choose your desired one.
To use a Google Maps locator, we must install a dedicated plugin and 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.
The following section will walk you through embedding a store locator map using Google Maps. If you would rather do it without Google Maps, jump over to this section.
Method #1: Store Locator With Google Maps
Displaying Google Maps on our WordPress website requires creating 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. The Divi article explains more about our embedded Google Map.
However, you must obtain a valid API key to enjoy any store locator plugins fully. Here is how you do it:
- First, navigate to the Google Maps Platform website.
- Then, click on the Get Started button.
- Once inside the Google Cloud platform, click 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 discuss store locator plugins.
Store Locator Plugin for WordPress
We can use multiple store locator plugins to embed a map on our website. They 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 Maps to display some or all locations.
When choosing which store locator plugin to use, consider all the plugin’s features.
We tested the store locator plugins using YITH, wpexpertsio, and agilelogix. They are all excellent choices. However, we prefer the WordPress store locator plugin by weLaunch.
The WordPress store locator plugin has many great features to help us style maps 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 in which location.
More on that later, but let’s install the plugin for now.
Install the Store Locator plugin for WordPress
First, we must install and activate the store locator plugin on our website.
You can download the store locator plugin from the official Welaunch website or us for only $4.99.
The downloaded zip file contains two plugins: the weLaunch Framework and the store locator plugin. We need to install and activate 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 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 users’ needs.
If all your locations are identical, adding categories and filters is optional 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 company 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. For example, 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 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 operate similarly, with minor differences, it’s better to use filters instead.
Let’s retake our coffee shop example and assume all locations have the same menu but different features. For example, one place can have Wifi while the other doesn’t. Another branch can be pet-friendly while others aren’t, and so on.
Letting 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 second-level filters will be shown as checkboxes inside the store locator. The first-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.
Great job. When our list of filters is ready, we can move on to adding store locations.
Add store locations
We reach the fun part, where we can add store locations.
Every store you 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 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, 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 differentiates this location from the others. A title like ‘iBean Waterfront’ will work great.
Then, keep adding the other relevant information asked on that page. For example, 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 for each location.
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] 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 must 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 works 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 we can tweak so many different settings, it is impossible to cover them all. However, we would like to point out some.
Layout
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.
Map height
By default, the map’s height is automatically determined by the height of the search results. You can keep only a few locations.
However, to make it more visually appealing, I recommend setting a maximum height instead. To do so, navigate to 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 is KM, but you can change it to miles.
Data to show
When hovering over a location from the search results list, a popup window displays extensive information about 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 inside the data to show the tab. Many options are checked by default, but you can uncheck them based on your preferences.
Single store page
As mentioned earlier, every store has a designated page with its URL. The store page displays 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 disable the single store page altogether. The stores will still be displayed on the map, but clicking on them will not open the store page.
There are so many more options than you can change. I recommend you review them and adjust them based on your business requirements.
Save the changes and revisit the store locator page to test the results.
Method #2: Store Locator Without Google Maps
The StoreLocator WP plugin is a robust solution that utilizes Mapbox maps instead of Google Maps. It provides a competitive alternative with attractive pricing and features.
The plugin allows you to manage your store data efficiently through a Google Sheet, which syncs with your WordPress site.
This means you only need to maintain your store locations in one place, and the plugin automatically updates your website’s store locator map.
One of the significant advantages of this plugin is its simplicity and speed—no complex coding or map API configurations are required.
It also comes with a free plan, which limits map loads and searches, making it ideal for small—to medium-sized businesses. Upgrading to a paid plan unlocks additional features and higher usage limits for larger enterprises.
Step 1: Install the StoreLocator WordPress Plugin
Begin by logging into your WordPress dashboard. Navigate to the Plugins section and click on Add New. In the search bar, type Store Locator and look for the plugin developed by Micro. Company. Click Install, then Activate the plugin.
Step 2: Install the Store Locator Google Sheets Add-On
The plugin requires a Google Sheets add-on to manage your locations easily. Head over to the store locator site and click on the link to download the Google Sheets add-on. This takes you to the Google Workspace Marketplace, where you can install the add-on by connecting it to your Google account and granting the necessary permissions.
Step 3: Set Up Your Store Locator Map in Google Sheets
Open a new Google Sheet. In the menu, click Extensions, navigate to Store Locator Map, and select Get Started. This action populates your sheet with sample data and automatically matches columns to the appropriate data fields, such as store name, address, phone number, etc. You can adjust these mappings later if needed.
Next, select a primary color for your store locator map that matches your brand’s theme. Click Get Map to generate your store locator. Once done, click Open Map to view the locator in a new tab. This URL is your unique store locator link.
Step 4: Link Your Store Locator URL to WordPress
Return to your WordPress dashboard and navigate to the Store Locator plugin settings. Paste the store locator URL you copied from Google Sheets into the required field. You must also define a path for your store locator page, such as location. This path determines where the store locator will be accessible on your WordPress site.
You can add this path as a menu option under your theme’s customized options for better user navigation. For instance, linking it to a “Visit Us” button in your menu makes it easy for visitors to locate your store.
Step 5: Create and Customize the Store Locator Page
The plugin automatically creates a Store Locator page under your WordPress Pages. You can edit this page to change the title or add additional content that better suits your website’s style and messaging. After making changes, update the page and reload it on the front end to confirm your edits are reflected correctly.
Step 6: Add Your Actual Store Locations in Google Sheets
Now comes the critical part: entering your real store data. In your Google Sheet, replace the sample information with your business locations. For each entry, include:
- Store or location name
- Street address
- State or region
- Country
- Contact number
- Email address
- Business hours
- Any other relevant details
After adding or updating your locations, navigate to Extensions → Store Locator Map and click ‘Update Map.’ This action generates the geographic coordinates (latitude and longitude) required for accurate map placement.
Step 7: Verify Your Store Locator on WordPress
Please return to your WordPress store locator page and refresh it. You should now see all your newly added locations on the map, each with its marker. The store locator features search functionality, enabling users to locate locations by name or apply filters, such as hospitals or clinics. Users can also get directions directly to any location via Google Maps integration.
Advanced Features and Customization
The Google Sheet format is flexible. You can add columns for more information about each location, such as special services or tags. In the plugin settings, specify which columns are active and mark them accordingly (for example, which column contains the phone number or email address). This enables the store locator to display more detailed information to your visitors.
You can also create custom filters based on tags or categories to help users effectively narrow down their search results.
Customizing Colors and Appearance
The store locator’s appearance can be tailored to match your website’s branding. In the settings, you can specify a custom HEX color code to change the primary color of the map markers and interface elements.
Conclusion
This article taught you how to use the store locator plugin on your WordPress website to display all your store locations.
By following the simple steps outlined—from installing the plugin and Google Sheets add-on to customizing your locator page and adding your store data—you can have a fully functional and visually appealing store locator up and running on your WordPress site in just a few minutes.
Leave us a comment, and let us know if you have any questions regarding the process. We will be happy to help as much as possible.
Also, make sure to subscribe to our YouTube channel and like our page on Facebook.
