1. Home
  2. Docs
  3. Variation Suite
  4. Getting Started
  5. Setting Up Variation Swatches

Setting Up Variation Swatches

In Variation Suite, you can enhance your product pages by displaying variations using attractive swatches. Follow these steps to set up a variation swatch layout:

1: Accessing Variation Display Settings

  • In the left-hand menu, click on WooCommerce.
  • Select Settings.
  • Click on the Variation Suite tab.

2: Configuring Swatches Layout

  • Under Variation Display, choose Swatches from the options.
  • This setting allows you to display product variations using colorful buttons, images, or labels.
  • Customize the shape and appearance of swatches by adjusting options such as label shape, color shape, and image shape.
  • Configure specific sizes for label, color, and image swatch shapes to match your design preferences (be sure to check the front end to verify).

3: Setting Up Attributes for Swatches

  • Go to Products > Attributes.
  • Create or edit an attribute that you want to use for swatches (e.g., Color, Size).
  • Set the Swatch Type (it can be a “Color” or “Image” or the default “Label”).
  • Add or edit terms for the attribute, you can add an image or a color (or both, one will be selected automatically depending on the attribute type).

Remember, you can assign this layout to specific categories by editing each category and setting the “Variations Display Mode” option accordingly. This flexibility allows you to tailor the shopping experience based on product categories and customer preferences.

How can we help?