QODE Variation Swatches for WooCommerce


1. Getting Started

Hi, and welcome to the QODE Variation Swatches for WooCommerce User Guide. The User Guide covers all the information needed to use the QODE Variation Swatches for WooCommerce plugin with your theme to build an amazing eCommerce website.

If you need any additional assistance while using our plugin, you can always submit a topic to the support forum at wordpress.org/support/plugin/qode-variation-swatches-for-woocommerce and our support team will be glad to help you out. You can also send us an email at [email protected]

You can navigate through different sections of the User Guide by clicking on the links in the menu to the left of your screen. You will also notice that we have highlighted certain parts of the text throughout the User Guide, such as important pieces of information and useful tips.

This user guide covers the full set of options that the plugin provides, including both its Free and Premium versions. 

The QODE Variation Swatches for WooCommerce is designed to provide you with a straightforward way to present all your potential customers with detailed product variations in lists and on product single pages. 

The plugin is designed to work in tandem with the free WooCommerce plugin, so in order to ensure proper plugin functioning, please make sure you have installed and activated your copy of the WooCommerce plugin. 

Installing QODE Variation Swatches for WooCommerce plugin

First off, here's a list of minimum requirements as well as recommended hosting parameters for running QODE Variation Swatches for WooCommerce plugin: 

Minimum Requirements

Recommended Hosting Parameters

There are two ways you can go about installing the QODE Variation Swatches for WooCommerce plugin: 

Installing From Your WordPress Dashboard

  1. Navigate to your WordPress Dashboard -> Plugins -> Add New
  2. Search for QODE Variation Swatches for WooCommerce
  3. Install and Activate Qode Essential Addons from your Plugins page.

Installing Directly From wordpress.org

  1. Locate and download QODE Variation Swatches for WooCommerce on wordpress.org
  2. Upload the qode-variation-swatches-for-woocommerce directory to your ‘/wp-content/plugins/’ directory, using your preferred method (ftp, sftp, scp, etc…)
  3. Install and Activate QODE Variation Swatches for WooCommerce from your Plugins page.

Creating Attributes

In order to display different product variants with the help of swatches, you first need to create and define product attributes. In order to do so, you should navigate to Products > Attributes. There you'll be presented with a a number of intuitive options for configuring each attribute you wish to create. 

You can create the following attributes: color, image, label, radio button, and tab switch. 

In the following sections of the User Guide you'll find a comprehensive overview of all the settings available in the plugin's QODE Addons for WooCommerce section of your WordPress admin panel once you have installed and activated the QODE Variation Swatches for WooCommerces plugin.

To access these settings, you should navigate to QODE Addons for WooCommerce > Variation Swatches Options > Global.

The settings found here are applied globally and will affect the entirety of your website. 

You can look up any of the available global options by typing in the keyword or a part of the option name in the search field located at the top of the screen in the Variation Swatches Options section. 

 

2. Global

In the Global section of the plugin options you are presented with options for making general adjustments to the plugin funcionalities. 

Here you can choose whether you wish to automatically convert dropdowns to labels, and select whether you wish to generate shareable URLs for selected product variation attributes or not.

Next up, you can enable displaying variations on shop and archive pages, enable AJAX-powered instant data loading on archives and shop pages, input a custom label for the "Add to Cart" button, and you can decide if you wish to apply a predetermined, plugin-defined stylization to the swatches or not. 

 

3. Content

This section provides you with a selection of options related to the Variation Swatches content and its appearance, and it is divided into two sub-tabs, GENERAL and STYLES. 

GENERAL

Here you can choose where you wish to position the variation form on archive and shop single pages, enable displaying attribute descriptions on product single pages, and enable displaying names of selected values on product single pages. 

In addition to this, you can choose whether you wish to show the product availability info on shop and archive pages, you can prevent out of stock variations from being selected, select how you wish to display disable variations (they can be either crossed out, blurred or hidden), choose whether you wish to change product images on hover, and enable custom attributes to be shown in the Additional Information tab instead of the simple text. 

Following this, you can enable tooltips for product attributes which get displayed over the mouse pointer when an attribute is hovered over. 

The set of options that follows allows you to choose the tooltip position, and enable image previews for tooltips. 

The final set of options found here lets you input the maximum number of variations you wish to show for variable products, as well as limit the number of variations displayed on shop pages. 

 

STYLES

Here you can configure the size of the space between swatches, and on top of that you get a number of customization options which you can adjust for the color, image, label, and tab switch attribute types, as well as the tooltips if you enabled displaying them from the Content tab GENERAL. 

Color and Image attribute types let you choose from five attribute type layouts, while the Label attribute type lets you choose from two layout styles available. 

You can also set up variation option width, height, border color, and active border color for each of the attribute types here. 

The final set of options found here allows you to set a background color and text color for tooltips. 

4. Single Variations

This is where you can make general adjustments to single variations. 

First up, you can choose whether you wish to display single variations in loops (shop pages, archives, and everywhere else where the WooCommerce product loops are shown). 

The remaining two options relating to single variations let you choose whether you wish to hide parent products in loops when displaying single variations, and you can also order products by their IDs in all WooCommerce loops.