New Woo brand announcement v2 | Feb 4, 2025

Added by Mahrie - https://woomarketingstudio.wordpress.com/2024/12/20/studio-request-logo-rollout-customer-comms/

QODE Variation Swatches for WooCommerce Pro

The QODE Variation Swatches for WooCommerce Pro allows your WooCommerce store to provide all your shoppers and potential customers with detailed product variations alongside products in lists and on product single pages. 

Installation

  1. Download the qode-variation-swatches-pro.zip file from your WooCommerce account.
  2. Go to: WordPress Admin > Plugins > Add New > Upload and select the ZIP file you just downloaded.
  3. Install Now and Activate the QODE Variation Swatches for WooCommerce Pro extension.

More information at: Install and Activate Plugins/Extensions.

Updates

Connect your site to its WooCommerce account to receive extension updates automatically via the WordPress admin. We recommend installing updates as soon as they become available.

Creating Attributes

↑ Back to top

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 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 Plugins for WooCommerce section of your WordPress admin panel once you have installed and activated the QODE Variation Swatches for WooCommerce Pro plugin.

To access these settings, you should navigate to QODE Plugins 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. 

Global Settings

↑ Back to top

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

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.

In addition to this, you can 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. 

Content Settings

↑ Back to top

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 disabled variations (they can be either crossed out, blurred or hidden). 

You can also 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

Single Variation Settings

↑ Back to top

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.