1.1 Installation

After you download the plugin from Codecanyon you ned to install the plugin to your wordpress website. Unpack a .zip file that you have downloaded from Codecanyon and in there you will find another zip archive named "WooMapper.zip", this is the file that you need to upload to your wordpress website and install as you would with any other plugin.

1. Go to "Plugins > Add New > Upload Plugin"

2. Upload a WooMapper.zip file that you have downloaded.

3. Go back to "Plugins" and active WooMapper

2.1 Creating Your First WooMapper

After you have successfully installed WooMapper on your website it is time to create your first WooMapper.

1. On your left side in the wordpress backend you should be able to see "Woo Image Mapper" as a separate link in the sidebar. Once you click on this link you will be taken to a page where you can see all of the WooMappers that you have created. Since this is your first WooMapper, the area should be empty. Click on the "Add New" button on the top left of your screen.

2. Once that you have clicked the "Add New" button you will be redirected to a new page with limited settings. First thing that you should do here is to name your WooMapper.

2.2 Basic Settings

After you have named your WooMapper, you are ready to start with the basic options. Right below the name of your new WooMapper you will find "General Options" section. Below is the list of the settings and what they represent:


Image Overlay - This option allows you to display an overlay over the image once the pin is clicked thus highlighting the pin and the content of the pin. You can turn this option on or off.

Image Overlay Color - You can choose the color of the overlay.

Image Overlay Transparency - You can set the amount of transparency that the overlay will have when displayed.

2.3 Adding An Image

Below the "General Options" you will find a "No Image" field with a button on top of it that says "Change Image". Click here to open up a wordpress media uploader and choose or upload an image that you want. WooMapper will not scale your image in any way, so you can import any size of the image that you want. This image will act as a background image that you will later on add pins to.

2.4 Adding a WooCommerce Product

Once you have successfully added an image to your WooMapper you want to add pins to your image. You do this by clicking anywhere on an image. Once you click on an image the pin will appear and all settings for that pin will be available below the image.

Next thing that you need to do is to asign a WooCommerce product to that pin. You do this by typing the name of your product in the "Woocommerce Product" field below the image. Once you start typing the name of your product the auto-complete kicks in and suggests products based on your typing. At this point you can save your WooMapper and insert it as a shortcode in your website.

3.1 Pin Settings

After you have added a pin to your image you will see options for customizing that pin below the image.


Add Custom Icon - If you want to use your own custom icon for the WooMapper you can do so by clicking this button and adding your own image (one of the styling options for the pin will have effect if you load your own pin).

WooCommerce Product - You type in the name of your WooCommerce product here that you want to assign to that specific pin

Background Color - Change the color of the default pin

Background Transparency - Change the transparency of the default pin

Enable Border - Choose if you want to have a border on your default pin or not

Pin Line Color - Choose the color for the border

Enable Dot - Choose if you want to enable the dot in the middle of the default pin

Pin Dot Color - Choose the color for dot in the middle

Pin Hover Background Color - Change the color of the pin when it is hovered

Hover Background Transparency - Change the transparency of the pin when it is hovered

Background Color - Change the color of the default pin

Pin Hover Line Color - Change the color of the border when it is hovered

Pin Hover Dot Color - Change the color of the dot in the middle when the pin is hovered

3.2 Hover Pop-up Settings

These settings allow you to customize the "Pop-up" field that is displayed whenever you hover over a pin.


Select "In" Animation - Choose the intro animation for the Pop-up element

Select "Out" Animation - Choose the outro animation for the Pop-up element

Background Color - Change the background color of the Pop-up element

Enable Shadow - You can choose to display the shadow around the Pop-up element or not

Shadow Color - Choose the color for the shadow

Shadow Transparency - Choose the amount of transparency for the shadow around the Pop-up Element

Title Color - Choose the color of the title for the Pop-up element

Title Font - Choose the font type, size, style and weight for the title of the Pop-up element

3.3 Quick View Settings

These settings apply for the Quick View element. This element appears when you click on a certain pin. Everything in this element is taken directly from your WooCommerce product (Image, title, price, description) but can also be overrided with your own custom description or title.


Select "In" Animation - Choose the intro animation for the Quick View element

Select "Out" Animation - Choose the outro animation for the Quick View element

Background Color - Change the background color of the Quick View element

Line Color - Choose the color for the line below the title (the separator)

Enable Shadow - Choose to display the shadow around Quick View element or not

Shadow Color - Choose the color for the shadow around Quick View element

Shadow Transparency - Choose the amount of transparency for the shadow around Quick View element

Close Color - Choose the color for the "Close" button on top right of the Quick View

Close Hover Color - Choose the hover color for the "Close" button on top right of the Quick View

Enable Image - Choose if you want to enable image for the Quick View (the image is taken directly from your WooCommerce product as a featured image)

Box Width - Choose the width of the Quick View box

Box Height - Choose the height of the Quick View box

Select Quick Position - Choose where you want the Quick View box to open (top, left, right or bottom)


Price Font - Choose the font type, size, style and weight for the price in the Quick View

Price Font Color - Choose the color for the price font

Override Title Text - You can override the default title of your WooCommerce product with your own title

Title Font - Choose the font type, size, style and weight for the title in the Quick View

Title Font Color - Choose the color for the title font

Override Description Text - You can override the default description of your WooCommerce product with your own description

Description Font - Choose the font type, size, style and weight for the description in the Quick View

Description Font Color - Choose the color for the description font


Button 1 Text - Choose the text for the left button on the Quick View element (this button links to the WooCommerce product that you have assigned for this pin)

View Item Open - You can choose if you want this link to open in a new window or in the same window.

Button 1 Font - Choose the font type, size, style and weight for the left button in the Quick View

Button 1 Font Color - Choose the color for the button 1 font

Button 1 Font Hover Color - Choose the hover color for the button 1 font

Button 1 Background Color - Choose the background color for the button 1

Button 1 Background Hover Color - Choose the background hover color for the button 1

Button 2 Text - Choose the text for the right button on the Quick View element (this button adds a product to your shopping cart using AJAX)

Button 2 Font - Choose the font type, size, style and weight for the right button in the Quick View

Button 2 Font Color - Choose the color for the button 2 font

Button 2 Font Hover Color - Choose the hover color for the button 2 font

Button 2 Background Color - Choose the background color for the button 2

Button 2 Background Hover Color - Choose the background hover color for the button 2