Getting Started

Thank you for purchasing our plugin, We’ve put in lots of love in developing this WordPress plugin and are excited that you’ve chosen this plugin for your website. We hope you find it easy to use our plugin. This documentation guides you through the main features of the plugin and guides you how to use and customize plugin.

Although every effort has been made to ensure the plugin is bug free and easy to use there is always a chance errors may occur. If you find a problem please notify us immediately through our help center so we can ensure it gets fixed as quickly as possible.

Contact     Demo     Free Version    

Requirements & WordPress set up

You need to have a WordPress installation on your web-site to use our plugin.

General steps to install WordPress CMS to your site

  1. Download the latest WordPress version from https://wordpress.org/download/
  2. Upload zip file to your web-site root folder and unzip
  3. Create database (using your hosting panel)
  4. Set up wordpress. Detailed instructions

Here the list of useful links to install WordPress CMS

  1. How to install WordPress
  2. https://codex.wordpress.org/Installing_WordPress
  3. Installation guide

Recommended PHP Configuration Limits

Sometimes you may get some errors while installing our theme, importing content or activating plugins like white screen or PHP errors. They may be caused by low PHP configurations limits. In this case you need to increase some values. You can do this by your own or contact your hosting providers with the following requrements:

  1. memory_limit 128M
  2. post_max_size 32M
  3. upload_max_filesize 32M

Download Plugin

Installing the theme can be done in some ways. You can find plugin in Plugin Manager or upload the theme ZIP file using the built in WordPress theme upload, or copy the files through an FTP client.



Using WordPress Plugin Upload

  1. Download Plugin Here
  2. Login your WordPress admin
  3. In the Plugins -> Add New menu click the tab Upload Plugin
  4. Choose the file that you downloaded then click Install Now
  5. Then Active plugin


Using WordPress Plugin Search

  1. Login your WordPress Admin
  2. In the Plugins -> Add New menu search by keyword "c4d woo variation swatches"
  3. Click Install Now then Active plugin


Uploading by FTP

  1. Login to your FTP server and navigate to your WordPress themes directory.
  2. Normally this would be wp-content/plugins
  3. Download Plugin Here
  4. Extract the files from the zipped plugin.
  5. Copy the folder c4d-woo-variation-swatches to your plugins directory.
  6. After the files finish uploading, login to your WordPress admin.
  7. In the Plugins menu click Installed Plugins
  8. Click Activate for the plugin

Premium Plugin

  1. Backup your site first
  2. Login your account and download premium version -> Your Account
  3. Deactive current free version
  4. Delete or Rename Free version
  5. Using WordPress Plugin Upload to install premium version

Create Product

First you have to create new attribute or edit exist attribute and set arrtibute's Type to Image

Create Attribute

  1. Go to WordPress admin -> Products -> Attributes to create new attribute with image type

  2. Or edit exist atribute and change Type to Image


Create Variable Product

  1. Go to WordPress admin -> Products -> Add New and create new variable product or edit variable product.
  2. Choose Product Data: Variable Product
  3. Click Attribute tab and add color attribute to product
  4. Check Used for variations
  5. Select color to Values field
  6. Click Save Attributes
  7. Open Variations tab and add variation


Add Images for Swatch Gallery

  1. Move to Swatch Images box on right sidebar
  2. Click Add product gallery images button
  3. Select multi images then click Add Gallery button
  4. Click Update product

Creat Custom Attribute

If you use custom attribute in product, please follow below steps
  1. Go to your admin and create new variable product or edit a variable product
  2. Go to attributes tab and insert a custom attribute
  3. Insert attribute Name
  4. Insert attibute Value, seperate by |
  5. Check Used for variations
  6. Click Save Attributes button
  7. Click Update product on right top corner
  8. After product is saved, go to Variation Swatches tab
  9. In Custom Attribute Setting set the new custom attribute type to Image
  10. Click Update product on right top corner
  11. After product is saved, move to Swatch Images box on right sidebar
  12. Move to Swatch Images box on right sidebar
  13. Click Add product gallery images button
  14. Select multi images then click Add Gallery button
  15. Click Update product

Listing Page

Please install and active C4D Plugin Manager to enable Setting Pages.
Download


Global

  1. Show On Listing Page: Display color/image swatch on lising page
  2. Flip Thumbnail: change image to second image in gallery when hover
  3. Swatch Align: you can set align left/center/right for swatch
  4. Color/Image Box Dimensions: change size of item in swatch box


Tooltip

  1. Tooltip Background Color: change background color
  2. Tooltip Text Color: change text color
  3. Tooltip Font Size: change font size
  4. Tooltip Padding: change padding tooltip

Single Page

Global

  1. Default Gallery: create default gallery and replace theme's gallery
  2. Variation Gallery: create gallery for each variations
  3. Main Gallery Class: selector to find the main gallery of theme, then plugin can replace variation gallery into this selector


Variation Popup

  1. Image Popup: show popup with bigger image of variation when hover variation
  2. Width/Height Popup: change width/height of popup box
  3. Box Color: change color of box


Zoom Settings


  1. Zoom & Pan: allow open gallery's images in fullscreen mode with zoom & pan effect. Enable this function will disable Zoom in Box and Zoom Out Box
  2. Zoom Out box: show zoom box on right side of main gallery
  3. Width/Height Zoom Out Box: change size of Zoom Out Box
  4. Box Color: change color of Zoom Out Box


Color/Image Button

  1. Typo: change typo for color/image label
  2. Desktop Dimensions: change size of image/color label on desktop
  3. Mobile Dimensions: change size of image/color label on mobile
  4. Margin: change margin of image/color label
  5. Border: change border size and color
  6. Border Hover: size and color of border when hover/active
  7. Shape: shape of color/image label. Default is circle.


Text Button

  1. Typo: change typo for text label
  2. Hover Color: color of text when hover
  3. Background Color: background of label
  4. Background Hover Color: background of label when hover
  5. Border: change border size and color
  6. Border Hover: size and color of border when hover/active


Tooltip

  1. Tooltip Background Color: change background color of tooltip
  2. Tooltip Text Color: change text color of tooltip
  3. Tooltip Font Size: change font size of tooltip
  4. Tooltip Padding: change padding of tooltip

Gallery Slider

  1. Hide Left/Right Button: hide next/previous button on main slider

Gallery NAV

  1. Nav Type: change nav type from slider to grid
  2. Nav Display: hide/show the NAV
  3. Hide Left/Right Button: hide next/previous button of NAV

Update Plugin

Premium Version

Before updating we suggest you to do a back up (save the copy of all your files) and make sure that you are using the latest version of WordPress, WooCommerce and other plugins.

To update our theme you need to download the latest version, rename or delete your current plugin folder and Upload it from the admin panel or FTP client.


Free Version

Just click update in WordPress Dasboard when you see a notice about new version of plugin

Translation

Our plugin is ready for translation with Poedit. POT file in languages folder and translate strings with Loco Translate plugin

Or you can use WPML plugin, this tool is completely supported by our plugin.

Still no luck? We can help!

Contact us and we’ll get back to you as soon as possible.

Submit A Request