How to create Store Locator and how does it works?

This documentation outlines the complete process for setting up a Store Locator feature on your WordPress website using CubeWP. The setup involves creating a new post type, defining custom fields, adding listings, designing post cards, and building a dynamic front-end locator page with map and search functionality.

 Step 1: Create the “Store Locator” Post Type

1.      Log into your WordPress Admin Dashboard

2.      Navigate to CubeWP > Post Types > Add New

3.      Create a new post type named “Store Locator”

Once created, “Store Locator” will appear in the left menu of your dashboard for easy access.

Step 2: Add Custom Fields for Store Details

1.      Go to CubeWP > Custom Fields > Add New Field Group

2.      Assign the field group to the “Store Locator” post type

3.      Create and add the following fields:

o    Store Address 

o    Phone Number 

o    Operating Hours 

These fields allow you to enter detailed information about each store including its location, contact, and timings.

Step 3: Add Store Listings

1.      In the WordPress dashboard, go to Store Locator > Add New

2.      Fill in the following information:

o    Title (e.g., “Downtown Branch”)

o    Store Address

o    Phone Number

o    Operating Hours

3.      Click Publish to save the listing

Repeat this process to add all your store locations.

 Step 4: Create Custom Post Cards for Store Locator

➤ Step 4.1: Define Post Card Styles

1.      Navigate to CubeWP > Settings > Post Settings

2.      Under Create Post Card Styles, select the “Store Locator” post type

3.      Add style names as comma-separated values (e.g., Style1,
Style2)

This step initializes custom layout options for your store listings.

➤ Step 4.2: Configure Post Card Layouts

1.      Go to CubeWP > Post Cards

2.      Set the following options:

o    Select a Post for Preview

o    Choose Post Type: “Store Locator”

o    Select Loop Style (choose from styles defined above)

This defines how your store listing cards will visually appear on the front end.

Step 5: Create the Store Locator Page

1.      Go to Pages > Add New, name it “Store Locator”

2.      Edit the page using Elementor or your preferred page builder

3.      Add the following components:

o    Archive Map – Displays store locations on a map

o    Archive Post Display – Lists the store post cards; select “Store Locator” as the post type

o    Search & Filter Form – (Optional) Enables advanced search/filter options for users

Customize the layout using Elementor’s containers, sections, or your theme’s design system.

Video Tutorial (Optional)

If available, include a video link demonstrating the full setup:
[Insert video link here]

Additional Notes

·         Ensure Google Maps API or your chosen map service is properly set up in CubeWP settings.

·         Use Elementor’s design controls to tailor the layout, spacing, and appearance.

·         You can link your Store Locator page from any menu or button on your site for easy access.