From Uncode 2.7.0, Uncode users can benefit from advanced Variation Swatches options without buying extra paid plugins.

WooCommerce shops have to draw their customers in for high conversions. If users have accessible experiences when looking for the specific products they want online, they are likelier to complete purchases. One of the best ways to give your users a good shopping experience is to avail of products with variations in sizes, prices, photos, and colors.

Unfortunately, the default interface of WooCommerce offers only a too simple and inadequate dropdown element to present the product variations.

With Variation Swatches, visitors can select and purchase products based on sizes and prices that attractively fit their specifications. Then, you can impress them with colors and images and make them buy – on impulse – items that excite them.

From Uncode 2.7.0, it's, in fact, possible to replace the standard variation dropdowns with color, image, and text swatches. Help customers make decisions more quickly with a visual and user-friendly experience.

Please find here an example:

• Product with Variation Swatches

Variation Swatches types

Four types of Swatches determine how attribute's values are displayed, and this can be selected when creating an attribute, screenshot .

• Select: used for the classic dropdown;
• Color: used for color variations;
• Image: used for brands or fabric variations;
• Label: used for text variations.

How to create a Variation Swatch

You can manage any attribute globally with WooCommerce Variation Swatches. All you have to do is follow the following quick, simple steps:

1. Navigate to Products → Attributes;
2. Create a new attribute. In this example, name it 'Color' and select the Type 'Color', screenshot ;
3. Once the new attribute has been created, navigate to the Terms configuration, screenshot ;
4. Add a new term and select the value; in this case, select a hexadecimal color code, screenshot ;
5. Repeat for as many terms as you need to implement your variations;
6. To use the newly created Variation Swatch, apply the variations you created to your variable products by following these simple steps.

Swatches with Thumbnails

Uncode presents an advanced option that allows creators to display images chosen for the product variations as the Variation Swatch element. In a nutshell, if you have created a color swatch, you can present the image of the corresponding variation instead of showing the color swatch, screenshot ;

Please find this option in Theme Options → WooCommerce → Swatches with Thumbnails, screenshot .

How to use Swatches with the Post Module

In Uncode, we implemented advanced options that generally can only be realized through premium paid plugins. One is the ability to preview the Product Variations on the product thumbnail in the Shop Page (or Catalog), screenshot ;

By adding swatches to the shop and catalog pages, customers will be able to see what's available, even before visiting the product page. Moreover, they can change the product image when clicking a swatch or link through and pre-select the variation.

Please note that these features are only available for the Posts module. This means they do not work on the default layout but must be enabled through the Posts module with Automatic Query functionality and a Content Block. Here is a short tutorial on creating a Content Block for your shop.

Variations in the Posts module

Activating Variation Swatches in the Posts module is simple:

1. Open the Posts module settings;
2. Navigate to the Module tab and scroll down to the Elements list;
3. Insert the Variations element and configure its options, screenshot .

Posts Variations element options

• Position: choose whether to display the swatches in the relative position or above the image;
• Attributes: choose whether to show all swatches or only a specific one. On the analysis of many e-commerce websites, we recommend choosing a single swatch significant of its variations (such as color). However, you can evaluate it yourself based on the needs of your store;
• Number of items: choose whether to show all variations or a specific number.
• Variation change: choose whether the change of variation applies to the click or hover event;
• Title: choose whether the title remains the original or must change to include the name of the variation as well. Be careful because if the new title is longer and exceed on a new line, this also involves a mandatory shift of the layout:
• Size: choose three different sizes for swatches;
• Visibility: select the visibility depending on the device in use.

Notes

• Variation Swatches in archive (and category) pages work only with custom layouts created via a Content Block using the Posts module (not with the default simple layout).
• Please note that if you are using the Variations element of the Posts module with the Content Overlay layout, you need to set the Posts Settings → Blocks → Multiple Click Areas to Yes.
• Please note that in a single installation, it's not possible to have Variation Swatches as both Color (colored dots) and Image (thumbnail). In our demo, we use special tricks, but this is to show clients the various possibilities.
• To take full advantage of the features, when creating product variations, please create all variations with all combinations. For example, pay attention not to use automatic variations like 'Any + attribute name'. Instead, using the 'Create variations from all attributes' option is always recommended.