Variation Swatches – Kadence WooCommerce Shop Kit

Kadence WooCommerce Shop Kit (formerly known as Kadence Woo Extras) gives you powerful options to help drive your eCommerce sales.  One great feature of Kadence Shop Kit is the added ability to personalize the way your product variations are displayed. Through customizable drop downs and radio buttons, you’ll be given an array of options that will help you better connect your customer to the product.

[hr style=”line” size=”1px”]

Getting Installed

First install the Kadence WooCommerce Shop Kit plugin, which is available in the product downloads area once you are logged in on KadenceWP.com. Once installed and activated, go into the “Shop Kit” menu in the bottom left corner of your screen.

There you can click on “Variation Swatches” and enable them for your site. Once enabled, configure the default settings for your site.

[columns] [span6]

1 Find Swatches-min


2 VariationSwatches-min


[hr style=”line” size=”1px”]

Configure Product Variations

[columns] [span6]

Before you can show variations on your single-product page, you first must configure a set of variations in “Attributes” under “Product Data.”  For example, see the variation below:

3 GraphicColor Variation-min


After you’ve setup your product variations, you’ll need to set the price for each of your variations:

set variation pricing-min


[hr style=”line” size=”1px”]

Swatch Attributes

After you’ve configured your variations, you can save the product, and the variation will use your default settings.  There are, however, options to setup the swatches to display differently for individual products.  By clicking on the “Variation Swatches” tab under “Product Data,” you will open up the swatch options for each single-product.

5 SwatchSettings-min

Once you have your swatches configured, preview your product to make sure your settings are reflected:

Variations w:labels-min

[hr style=”line” size=”1px”]

Variation Styles

Displayed below are the styling options available for your product variations.

[columns] [span4]


Dropdown Selection-min


Radio Box:

Radio Boxes-min


Color and Image Swatches:

Color and Image Swatches-min