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.

Getting Installed

First install the Kadence WooCommerce Shop Kit plugin, which is available in the product downloads area once you are logged in on 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.

1 Find Swatches-min

2 VariationSwatches-min

Configure Product Variations

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

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

Variation Styles

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


Dropdown Selection-min

Radio Box:

Radio Boxes-min

Color and Image Swatches:

Color and Image Swatches-min