Setup and Configuration ↑ Back to top
How To set up Store Finder For WooCommerce:
- Download the .zip file from your WooCommerce account.
- Go to: WordPress Admin > Plugins > Add New and Upload Plugin with the file you downloaded with Choose File.
- Install Now and Activate the extension.
- Go to → Store Finder For WooCommerce.
- Go to General Setting → Make changes as per your requirement
- Click Save Changes.
Introduction ↑ Back to top
Store Finder For WooCommerce is a Google map based extension that is easy to use with numerous working functionalities like; It works in any country, shows store categories, customizable map markers, map languages, radius options, and distance units.
Store Finder for WooCommerce is highly utilizing for all those WooCommerce customers who want to purchase your products from a local store in their vicinity. It boosts your revenue, saves shipment cost & time, and fulfills a customer need to examine things physically before purchasing.
Key Features ↑ Back to top
- Display Store locator on any page using shortcode: Create a Page/Post to add a shortcode, to display stores on the frontend, you have to Insert this shortcode [woo_store_locator].
- Works in any country: WooCommerce customers can search for stores in any country around the world to purchase your items.
- Custom markers: Choose between 6 attractive colors ready markers for start location and store location.
- On map Get Directions: Click Find Directions, and the tool will display the route you need to take to get from your starting location to your end location. The turn by turn directions will be displayed below the map and will contain the distance and approximate time it will take to get from one location to the other.
- Store categories and filter: WooCommerce customers can search for particular stores with relevant categories and filtration processes to narrow their search results.
- Find in store button: To enable the option of ‘Display Find in Store Button,’ you will see the ‘Find in Store’ button on a single product page.
- Map view: Manage (latitude and longitude) values of each store
- Mobile-Friendly: Store Locator For WooCommerce is highly mobile responsive in any device.
Getting Started ↑ Back to top
Store Locator Shortcode: ↑ Back to top
- Create a Page/Post to add a shortcode.
- In order to display stores on the frontend, you have to Insert this shortcode [woo_store_locator]
Store Locator General Settings: ↑ Back to top
- Go to WooCommerce > Settings
- You can see the “Store Locator” tab inside WooCommerce core settings page.
- Select the “General Settings” from Store Locator tab.
General Settings contain the following sections: ↑ Back to top
- Google Maps API
- Search Options
- Map Options
Google Maps API: ↑ Back to top
- Choose “Map Language”
- Select “Map Region” from dropdown list.
Search Options: ↑ Back to top
- Show the search Radius Dropdown: Enable this option to show the list of radius on your map.
- Show the Store Category: Enable this option to show the drop down list of the store categories.
- Show Max Search Result Field: Define search options here. The default one will be Square Brackets.
- Show Radius Option: Insert Radius Value here. The default one will be Square Brackets.
Map Options: ↑ Back to top
- Locate User: Enable this option to get the user current location automatically
- Start Point: Enter your Starting Point
- Distance Unit: Set the search unit to measure the distance in kilometers or miles
- Show the map type control: Enable the user to change the map type from front end
- Show Street view control: This feature show street control icon on the map for front end
- Enable Scroll wheel zooming: This option will allow you to zoom the map with the scrolling wheel
Permalink: ↑ Back to top
- You can enable or disable the Permalink by clicking on the checkbox.
- You can change the value of “Stores Slug” and “Stores Categories slug” at any time.
Markers: ↑ Back to top
- Start Location Marker: Select any color marker for your “Default Location”.
- Store Location Marker: Select any color marker for your “Store Locations”.
- Do not forget to click on the “Save Changes” button.
Store Locator | Single Product: ↑ Back to top
- Enable this option to “Display Find in Store Button” you’ll see the “Find in Store” button on a single product page.
- You can hide/remove the “Add to Cart” button from a single product page.
- You can change your Store button label.
- Select the page from the drop down list of “Store Locator Shortcode” where you entered the [woo_store_locator] shortcode.
- Click on the “Save Changes” button.
Store Locator | Labels: ↑ Back to top
- All “Labels Options” are customizable. You can change all of them according to your requirements.
- Save your changes.
How to Create WSL Stores: ↑ Back to top
- Go to Products > WSL Stores
- Click on the “Add New Store” button that is appearing on the top left corner.
- Enter store details in the “Store Info” module.
- Enter the store area info in the “Address Info” module.
- You have an option available to add categories to your store. It will help the customer to find stores.
Connect Stores with WooCommerce Products: ↑ Back to top
- Go to “All Products” and
- Add or edit any product
- Then select the “Stores” that you want to associate with the particular product.
- View your product on the Single/Shop page.
Select Default Product ↑ Back to top
Option to select a default product. If a user accesses the map page directly then the map will load according to the default product saved in settings.
- Go to WooCommerce > Settings
- Go to Store Locator tab
- Select General Settings
- Select Default Product from the drop down menu
If there is no product selected as default product, and the page where shortcode is placed is accessed directly then this message will appear:
“You need to access the map from product page or you need to add a default product from settings.”
Front end View Of Store Locator For WooCommerce: ↑ Back to top
Single Product Page: By clicking on the “Find in Store” button you will be redirected to the store locator page that shows you only those stores which you have added earlier in the product.
Store Map View: ↑ Back to top
Store Finder Gutenberg Block ↑ Back to top
The purpose of this integration is to introduce a Gutenberg block for Store Finder so that the user can display their Store Locations via Google Maps Cloud Platform on the front end using that block, making it easier to display the store map on the required page hence canceling the need to paste shortcode on every individual page.
Gutenberg Block Features
- Dedicated Gutenberg block to display the Store Location.
- Support for multiple pages.
- Drag and drop approach no need to paste shortcodes anymore.
- Store Finder
- Gutenberg Editor
- Go to Dashboard > WooCommerce > Settings > Store Locator
- There are 3 sections, In the General Settings section set the API key and select your marker of the store and start location.
- In Single Product Settings, set your store locator shortcode.
- In Labels, set the labels of all the options available according to your desire.
- Go to Dashboard > WooCommerce > Products > WSL Stores
- You can view all the stores here and can edit them and add new stores.
- Go to Dashboard > WooCommerce > Products > All Products
- Select any product and click on edit.
- Select the store in which you want to showcase this item and then click on update.
Page Setting – Gutenberg Block
- Go to Dashboard > Page > Add new/ All pages(To edit the existing page)
- Add a new block (Click “ + ” to add a new block) and select Woo Store Finder and publish/update the page.
- Click or drag the block to add it to the page.
- Once done, click on Publish/ Update to save your changes.
- The plugin will automatically fetch and display the store locator shortcode.
- After using the block on the page click on publish to get the results on the front end.
Front End Impact
- Woo Store Locator
- Woo Store List
- Single Product Select from Shop