Configure WR Mapper
To open WR Mapper, go to Dashboard > WR Mapper. Then you can either add a new product map, or manage your existing product maps by clicking on appropriate tabs.
Add new product map
There are 2 ways to add a new product map.
You can either going to Dashboard > WR Mapper > Add New.
or click on “Add New” on WR Mapper list.
Then you can see the initial screen to add a product map.
This is a product map sample.
To set up a map like this, you have to configure
Map title
Enter the name for your title here. You can use this name to manage your product maps.
General settings
General settings include all options to styling the overall look of your product map.
Click this icon to open general settings.
Here you can customize styles for all elements of your product map, including popup and mapping image.
Mapping image
Mapping image is used to add your pins. There is only one mapping image for each product map.
You can upload or pick an image for your mapping image here.
Then you can see your image on the mapping builder.
To change mapping image, click on “Change Image” button.
Pin
A pin is a special button that will show a content popup on mouse click.
To add a new pin, click on a position that you want to add a new pin.
You can also delete, move duplicate pins.
Please notice that you can only add pins when already having mapping image. If not yet, you have to upload or pick up a mapping image first. And you can only add only one popup for a single pin.
After adding a new pin, you have to start adding content and settings for the pin to get it displayed on your product map.
Types of content
There are 4 types of content to a pin that you can use in WR Mapper:
To pick up a content type, click on the pin that you want to add content, then you can choose a content type on General tab.
Note: you can only see settings for content type after adding a new pin. If not yet, you have to add a new pin first.
WooCommerce
With this content type, you can add a product popup to your pin. This popup includes “Add To Cart” button to let your customers purchase products included on product map.
Below are all settings for a WooCommerce popup.
Here you can select a product to show on popup. You can show or hide product thumbnail, description, and rating.
Please notice that you can only choose only one product for a single pin. If you want to add another product, please create a new pin.
Image
With this content type, you can add an image popup to your pin.
Below are all settings for an image popup.
Here you can enter your popup title, select an image, or insert link for the image. You can also choose link target (either redirect to another web page, or open link in a new tab).
Please notice that you can only choose only one image for a single pin. If you want to add another image please create a new pin.
Text
With this content type, you can add a text popup to your pin.
Below are all settings for a text popup.
Here you can enter popup title, as well as insert text content for the popup.
Link
Similarly, you can add a link to your popup
Icon settings
To open icon settings, open Icon Settings tab on Pin Settings popup window. Here you can customize all settings for the current pin.
You can either choose a pin type (icon or image), or customize color, size, border, etc. for your pin.
Popup settings
To open popup settings, open Popup Settings tab on Pin Settings popup window.
Here you can change width and height for your popup. You can also change the position for your popup.
Manage all product map items
To manage all product map items, go to Dashboard > WR Mapper > All Items. Then you can see all product maps that you have created before.
In this section, you can see all details for your maps, including number of pins, mapping image, map shortcode, and published date. You can also add a new product map, filter map list based on published date, or delete one or multiple maps.
Display product map
You can easily display product map anywhere you like on your site by using shortcode.
There are 2 ways to get the shortcode for your map, either on mapping builder, or on product map management.
On mapping builder
On mapping builder screen for a specific product map, click on Copy Shortcode button to add the shortcode to clipboard.
On product map management
On product map management, copy the shortcode that you want to pick up.
Note: you can only generate shortcode after successfully saving your map. And this shortcode is permanently generated, which means that you don’t have to re-copy the shortcode after saving further modifications for your product map.