{"id":7124,"date":"2026-07-14T20:48:58","date_gmt":"2026-07-14T18:48:58","guid":{"rendered":"https:\/\/consultoriaehero.com\/?post_type=product&p=7124"},"modified":"2026-07-15T08:43:15","modified_gmt":"2026-07-15T06:43:15","slug":"ehero-woo-swatches-visual-swatches-for-woocommerce-variations","status":"publish","type":"product","link":"https:\/\/consultoriaehero.com\/en\/product\/ehero-woo-swatches-visual-swatches-for-woocommerce-variations\/","title":{"rendered":"EHERO Woo Swatches \u2013 Visual swatches for WooCommerce variations"},"content":{"rendered":"
\n

Visual swatches for WooCommerce variations<\/h2>\n

The native WooCommerce dropdown selectors hide your variants behind a gray menu. The customer can\u2019t 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.<\/p>\n

EHERO Woo Swatches solves this problem with visual swatches for WooCommerce variations<\/strong>. The plugin automatically intercepts WooCommerce\u2019s 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.<\/p>\n

In addition, these visual swatches for WooCommerce variations<\/strong> 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.<\/p>\n

\n
\n
\n
More visual conversion<\/div>\n
From gray dropdown to visual store in 3 steps<\/div>\n
Set up the visual swatches for WooCommerce variations<\/strong> without writing a single line of code.<\/div>\n<\/div>\n
\n\n\n\n\n\n\n
1. Define the type by attribute<\/td>\nIn Products \u2192 Attributes you choose whether each attribute (Color, Size, Material) is shown as color, image, label, or two-tone; it applies to all its terms at once.<\/td>\n<\/tr>\n
2. Assign a color, image, or gradient to each term<\/td>\nFor each attribute term you save its hex color, second color for two-tone, thumbnail, predefined gradient (gold, silver, ocean\u2026) or badge, all with the native WordPress color picker.<\/td>\n<\/tr>\n
3. Adjust the design and enable the shop<\/td>\nFrom the Design page you control shape, size, border, selected and out-of-stock swatch; you enable swatches in the listing and let the plugin replace the dropdowns across the site.<\/td>\n<\/tr>\n
Documentation<\/td>\nOnline manual (ES\/EN) available here<\/a>. Questions before buying? Write to us at soporte@consultoriaehero.com<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n
\n

Five swatch types configurable by attribute<\/h3>\n

Each attribute in your catalog is shown in the format that best represents it, without mixing criteria.<\/p>\n