How To Add a Store Locator Page For WooCommerce Store

1
290 views
store-locator

Hi, everyone! What are you doing? Are you ready to continue to build your online store with us? Today I am gonna introduce you about an extremely useful plugin and it is absolutely free. This can help you mark your store on the Google so that every customer can easily find your store. It also shows them the way to your store. So  don’t miss it. 

First of all, you need API keys. It is mandatory from Google to help them track your usage and contact you when your usage exceeds the daily limits.
In this case, your map is loaded in the admin area so Browser API key is a requirement. You can navigate to here to create.  A server API key is also needed.
Creating these two API keys is completely free and doesn’t take too much time.
Now let’s turn to the main part right now!

Part 1: Setting information in wp store locator.

First, you need to install WP store locator plugin. Actually, there are many other store locator plugins. However, the reason why I choose this plugin is its high responsiveness and easily customizable. WP Store Locator allows the customer to search your store in any country. Moreover, it can work on all devices. According to the latest statistics, there are over 20.000 active installations. The rate is 4.9/5 stars. These things above sold me!
Now let’s go to the WordPress plugins, click on Add new and simply search for WP Store Locator. Then you just to install and activate it.

wp-store-locator

Click on the Store Locator, you will see five selections:

store-locator

All stores: The place shows you all the store you created.
The New store is a where you go and add a new store on the map.
Store Categories contain your stores according to different categories.
Settings allows you to set information.
Add-Ons: You can add more features for the plugin at here.
Selecting the New Store to create the first locator for your store.
Remember to enter your store title. And then answer the information about your address below. Click on Preview location on the map to see what everything looks like before publishing.

store-locator

store-locator

You can also announce the opening hours on this page and add more information such as telephone number, email or fax.

store-locator

After that, click on the Publish.
Now you navigate to the Settings and customize some options.

store-locator

Enable auto complete: This option will help you add autocomplete support to the search input field.
Show the max results dropdown: It allows users to limit the returned search results.
Show the search radius dropdown: It is used to set the preferred search radius.
Distance unit is used to calculate the distance between the start point and the store locations.You can change it from km to mi depending on where your store is located.
And as for max search results, let’s add parentheses [ ] between the value you want. It is used in the max result dropdown. Search radius option is the same, being used in the search radius dropdown.
Another important box that you need to fill in is the Start Point. The default location is used as the Start Point on the map.

store-locator

In addition, you can edit factors related to displaying locations on Google map such as Initial zoom level, Max auto zoom level.
And don’t remember to choose one of the favorite map types you want to use. There are four types:
Road map: Displaying the default map road.
Satellite: Displaying satellite images.
Hybrid: Displaying combinations of normal and satellite views.
Terrain: Displaying a normal street map based on terrain information.
Finally, click on save change after finishing your each setup stage.

Part 2: Create a map page.

Go to Pages then click on Add new
On the title, the page can be named whatever you like, Store Locator for example. The important thing is that you need to type this single line on your page, or else the map will be not able to be shown up on the page.

store-locator

Next, click on the publish button to end the part two.

Part 3: Add the map page to menu.

You go to Appearance and drag the page you have recently located to the menu and save. You can also add the icon for the page at here.

store-locator

After all, the result is shown below:

store-locator

Conclusion

Now your store is marked on the map! If you have any question, don’t hesitate to ask us on the comment below.

Leave a Reply

1 Comment on "How To Add a Store Locator Page For WooCommerce Store"

Notify of
avatar
Sort by:   newest | oldest | most voted
John Travolta
Guest

This post is Great , I’ve bookmarked it and shared on facebook. Thanks A lot

wpDiscuz