How to Setup Variation Swatches in WooCommerce Using SellKit

Understanding Product Variations and Attributes in WooCommerce

WooCommerce allows you to offer a variety of products through the use of variations and attributes. This capability is particularly useful for stores that sell products with multiple options, such as color, size, or any other differentiating factor.

Product Attributes: The Foundation

Attributes are the basis for product variations. They define the characteristics of a product. For example, if you're selling t-shirts, relevant attributes might include "Color" and "Size". Attributes can be created globally, which allows them to be applied to multiple products, or they can be defined on a per-product basis.

• Global Attributes: Navigate to WooCommerce > Products > Attributes. Here you can add attributes that you plan to use across several products. Once created, you can add the specific values (e.g., for "Color", values might be "Red", "Blue", "Green").
• Product-specific Attributes: Within the product editing screen, you can also define attributes specific to that product. Go to the Product Data box, select the Attributes tab, and then you can add new attributes and their values directly.

What are Attribute Variation Swatches?

Attribute Variation Swatches in WooCommerce are a visual enhancement to the product selection process, allowing customers to see options such as colors, sizes, or patterns through swatches instead of traditional dropdown menus. These swatches can be configured to display as buttons, colors, images, buttons, etc. making it easier for customers to understand and select product variations at a glance.

How to Add Variation Swatches Using SellKit

Understanding Swatch Types Supported by SellKit

SellKit supports various types of swatches that can be used to showcase product variations, each serving a unique purpose and providing a different visual experience:

• Dropdown: The standard selection method, allowing customers to choose from a list.
• Color Swatch: Enables color blocks to be displayed, ideal for products where color is a variation.
• Image Swatch: Allows the use of custom images to represent different variations, such as patterns or designs.
• Radio Swatch: Displays options as radio buttons, which can be a good choice for simple choice variations.
• Text Swatch: Uses text buttons for variation selection, which can be beneficial for displaying variations such as sizes or dimensions.

Assigning Swatches Globally

To assign swatches globally across products:

1. Navigate to the WooCommerce > Products > Attributes section in your WordPress dashboard.
2. Here, you will see a list of your created attributes or you can create a new one.
3. Scroll down to find the Swatch type option. This is where you can select the type of swatch you want to apply to a new attribute globally.

4. Choose your desired swatch type from the dropdown menu. For instance, select Color Swatch for a color attribute to display color blocks.
5. Save your changes to apply the swatches globally to all products using this attribute.

Swatch Options in the Product Data Tab

For product-specific swatch configuration:

1. Open the individual product page by navigating to WooCommerce > Products and selecting a product to edit.
2. Scroll down to the Product Data panel and select the Swatches tab.
3. Here, you can configure swatches specifically for this product. Select the Swatch type from the dropdown menu, such as Color Swatch, to apply to the product variations.
4. There are different settings for each swatch type. Choose options according to your needs.
5. Decide wether you want to show the swatch in the product catalog or not.
6. After configuring all the settings, save the product to update the changes.

After saving the new swatch options, check the product catalog page to confirm the swatch has been added. For example, this is how a typical color swatch would look like in product catalog: