Product Variation Swatches in Flatsome Theme

Learn how to elevate your product pages in Flatsome 3.14 with the new Product Variation Swatches feature! This update gives your customers a more engaging way to select product options using color, size, and image swatches—without needing additional plugins.

Steps to Enable and Customize Product Variation Swatches in Flatsome

1. Activate Product Variation Swatches

• Navigate to WordPress Dashboard: Go to the backend of your WordPress site.
• Open Flatsome Settings: Select Flatsome > Advanced > WooCommerce.
• Enable Swatches: Scroll down to the “Product Variation Swatches” section and activate it.
• Save Changes: Click Save to apply the settings.

2. Set Up Attributes (e.g., Color and Size)

• Access Attributes: Go to Products > Attributes.
• Add or Edit an Attribute: Choose or create attributes like colors and sizes.
• Configure Attribute Type: Select between UX Color, UX Image, or UX Label depending on your needs.
  • UX Color allows users to pick a color swatch.
  • UX Image displays a small image for each product variation.
  • UX Label creates text-based labels (great for sizes).
• Save Changes: Ensure you save after each adjustment.

3. Customize Swatch Appearance

• Set Swatch Size and Shape:
  • Go to the attribute (e.g., Colors), and select Edit.
  • Adjust Swatch Size (small, medium, large).
  • Choose Swatch Shape (square, rounded, or circle) based on your theme style.
• Save Updates and preview changes on the product page.

4. Assign Images to Variations

• Navigate to the Product Editor: Go to Products and open a product with variations.
• Assign Images to Each Variation: Under each variation, add specific images for color or style.
• Enable Use Variation Image: This option lets Flatsome replace the swatch color with the product image when selected.
• Save Product Changes to preview the effect.

5. Explore Additional Swatch Options

• Product Page Layout:
  • Go to Flatsome Theme Options > WooCommerce > Product Page > Swatches.
  • Adjust the layout (label on the side or above the swatches).
  • Enable or disable tooltips, and set the color of the selection outline.
• Shop/Catalog Page Display:
  • To show swatches on category or shop pages, go to WooCommerce > Product Catalog > Swatches.
  • Select one primary attribute to display, adjust swatch size, and choose the hover or click trigger for changing the product image.
• Auto-Reset Swatch: Set a timer to automatically reset the swatch selection after a few seconds.

Now your products are set up with Flatsome’s latest swatches feature, making it easy and attractive for customers to select the perfect product variation. Enjoy the flexibility and seamless experience without needing external plugins!