Installation
After you download the plugin from Codecanyon you need 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.
Go to “Plugins > Add New > Upload Plugin” and browse to your CodeCanyon file
Upload a WooMapper.zip file that you have downloaded.
Go back to “Plugins” and activate “WooCommerce Image Mapper”
Creating New 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.
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.
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.
Adding a 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.
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
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
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
Are you ready to give your customers more?