EHERO Woo Swatches – Visual swatches for WooCommerce variations

Visual swatches for WooCommerce variations

The native WooCommerce dropdown selectors hide your variants behind a gray menu. The customer can’t see which colors are available, has to open the dropdown size by size, and often leaves the product without really understanding what you sell. In a fashion, footwear, or decor catalog, that dropdown is a direct conversion blocker.

EHERO Woo Swatches solves this problem with visual swatches for WooCommerce variations. The plugin automatically intercepts WooCommerce’s standard dropdown and replaces it with solid color swatches, image thumbnails, text buttons, diagonal two-tone swatches, and premium gradients. The customer sees all options at once, with tooltip on hover, product image change when selecting the variant, updated price in real time, and stock notice by variant.

In addition, these visual swatches for WooCommerce variations also appear in the shop listing: the customer chooses color or size without entering the product page and can add to cart directly from the archive. Everything is configurable by attribute and by term, with a design panel that controls shape, size, borders, shadows, and the style of the selected or out-of-stock swatch, inheriting your theme colors through CSS custom properties.

Five swatch types configurable by attribute

Each attribute in your catalog is shown in the format that best represents it, without mixing criteria.

• Solid color with swatch based on the hex saved in the term
• Image/thumbnail for prints, textures, or materials
• Text label (S, M, L, XL) with background color, text color, and optional icon
• Diagonal two-tone swatch at 135º and predefined premium gradients (gold, silver, bronze, ocean…)

Product page that converts

The plugin replaces the native WooCommerce dropdown and syncs with the Woo variations form.

• Selected swatch marked with a configurable border or visual check
• Out-of-stock variant crossed out, semi-transparent, or hidden depending on the setting
• Gallery image change when selecting the variant (gallery swap)
• Real-time price, ‘Only X left’ stock notice, and price delta between variants

Swatches also in the shop listing

Customers choose a variant without entering the product page, directly from the archive or shop.

• Configurable position: before the image, after the title, or after the price
• Product image change when clicking a swatch in the listing
• Limit of visible swatches with a ‘+N’ indicator to avoid clutter
• Add variation to cart via AJAX with mini-cart update

Design panel with CSS custom properties

You control the appearance of the swatches from the panel, inheriting your theme colors.

• Square, round, or rounded shape and swatch size in pixels
• Border, radius, spacing (gap), and hover scale
• Style of the selected swatch (border/check) and the out-of-stock swatch (cross/opacity/hidden)
• –ehero-swatch-* variables and custom CSS for advanced adjustments

Real compatibility with your stack

Designed to work with the themes and builders that stores actually use.

• Compatible with HPOS (WooCommerce high-performance order tables)
• Automatic reinitialization in Bricks Builder and content loaded by AJAX (quick view)
• Lazy loading in listings with IntersectionObserver to avoid hurting performance
• Supports variable products, variable-subscription, and ehero_variable_subscription

Labels, price suffixes, and auto-selection

Details that fine-tune the presentation of the price and options for each product.

• Configurable price suffix on product page and in listing (e.g. ‘VAT not included’) with color and size
• Style of attribute labels: color, size, and font weight, or hide them
• Tooltip with the variant name on hover
• Image fallback (variant, product, or none) when a term has no thumbnail of its own

Ideal for

If you’re looking for visual swatches for WooCommerce variations, this is your tool. Best fit for:

📋 System requirements

Compatibility tested with current versions of WordPress and WooCommerce.

🛟 Technical support

Email support in Spanish* at soporte@consultoriaehero.com and online manual (ES/EN), with automatic updates from your dashboard.

⚖️ Comparison: why EHERO Woo Swatches?

What sets Woo Swatches apart from the alternatives.

How many sales do you lose every day because your customers never get to open the color and size dropdowns?

Activate visual swatches for WooCommerce variations today and turn your dropdowns into a shopping experience that truly converts.

Discover all our WooCommerce plugins or visit the Consultoría EHERO store.

*Support covers incidents, errors, and plugin installation; it does not include consulting, custom configurations, or custom development. Terms and conditions apply.