Choosly – WooCommerce Product Variations Swatches

Product variations that look better and are easier to select

The attribute dropdowns WooCommerce shows by default don't communicate information clearly or attractively: customers have to open the selector, read the text and guess what each option actually looks like. Choosly – WooCommerce Product Variations Swatches replaces those dropdowns with visual swatches (colors, images, buttons or labels) that let shoppers identify and pick variations at a glance, both on the product page and in the shop listing.

What Choosly actually does

The plugin automatically converts existing variations into swatches as soon as it's activated, with no need to reconfigure products from scratch. From the settings panel you manage both WooCommerce's global attributes and custom attributes, defining for each one the display style (horizontal or vertical), the swatch type (button, color, image, variation image, radio or dropdown list) and the swatch profile applied to it.

You can also decide whether each attribute is shown in the product listing or only on the individual product page, and whether switching variations should also update the product image.

Customizable swatch profiles

Choosly ships with three ready-to-use swatch profiles, but isn't limited to those: you can duplicate, edit or delete them to create as many profiles as you need, each with its own style. Customization covers the default state (name, size, color, background, border), the hover state, the selected state and the tooltip that appears when hovering over a swatch, with control over color, border, font size and position.

Visibility across the whole store

• Single product page: swatches integrated into WooCommerce's usual selection flow.
• Shop and category listings: option to show the add-to-cart button after attributes are selected, display the attribute name, and choose where the swatches appear.
• Filter widgets: let visitors filter products by color, size or other attributes directly from listing pages, without having to open each product page.
• Quick views and other product sections: swatches stay visible wherever the theme or store needs them.

Flexible configuration by attribute and category

For custom attributes, Choosly applies rules based on the attribute name and the assigned product categories: if an attribute matches those conditions, the type, style and swatch profile defined in the rule are applied automatically. This avoids having to configure products one by one when managing large catalogs with attributes repeated across different categories.

One thing worth noting: the option to show swatches on specific pages using WordPress Conditional Tags relies on the eval() function to interpret them, so this field should only be filled in with validated conditions from trusted sources.

What kind of store it's for

It's especially useful for stores with products that have many color, size or material combinations (fashion, footwear, accessories, home decor), where a clear visual presentation reduces friction in the buying decision. It also fits multi-vendor catalogs, since it's compatible with Dokan, letting each vendor edit the swatches for their own products from their dashboard.

Compatibility

• Works correctly on mobile devices, with touch interaction for selecting attributes.
• Compatible with WooCommerce and with additional themes and plugins such as Flatsome, VillaThem, VARGAL and Dokan.
• Admin interface designed for quick setup, with no long learning curve.

Frequently asked questions about Choosly

Can I use different swatch styles for different attributes?

Yes. Each attribute, whether global or custom, is configured independently with its own display type (button, color, image, radio, etc.) and its own swatch profile.

Are swatches shown on category pages too, or only on the product page?

They can be enabled both on the individual product page and in the shop and category listings, with control over the exact position where they appear.

Do I need to touch any code to customize how the swatches look?

No. All the styling (color, size, borders, hover and selected states) is adjusted from the swatch profiles in the admin panel, though it also supports custom CSS for additional tweaks.

Does it work with custom attributes, not just WooCommerce's global ones?

Yes, through rules that combine the attribute name with the product categories it applies to, letting you use different configurations depending on the product type.