EHERO Woo Swatches – Mostres visuals per a variacions de WooCommerce

Mostres visuals per a variacions de WooCommerce

Els selectors desplegables natius de WooCommerce amaguen les teves variants darrere d’un menú gris. El client no veu quins colors hi ha, ha d’obrir el desplegable talla a talla i, moltes vegades, abandona el producte sense arribar a entendre què vens. En un catàleg de moda, calçat o decoració, aquest desplegable és un fre directe a la conversió.

EHERO Woo Swatches resol aquest problema amb mostres visuals per a variacions de WooCommerce. El plugin intercepta automàticament el desplegable estàndard de Woo i el reemplaça per swatches de color sòlid, miniatures d’imatge, botons de text, swatches bicolor en diagonal i degradats premium. El client veu totes les opcions alhora, amb tooltip en passar el ratolí, canvi d’imatge del producte en seleccionar la variant, preu actualitzat en temps real i avís d’estoc per variant.

A més, aquestes mostres visuals per a variacions de WooCommerce també apareixen al llistat de la botiga: el client tria color o talla sense entrar a la fitxa i pot afegir al carret des del mateix archive. Tot és configurable per atribut i per terme, amb un panell de disseny que controla forma, mida, vores, ombres i l’estil del swatch seleccionat o esgotat, heretant els colors del teu tema mitjançant CSS custom properties.

Cinc tipus de swatch configurables per atribut

Cada atribut del teu catàleg es mostra amb el format que millor el representa, sense barrejar criteris.

• Color sòlid amb mostra a partir de l’hex desat al terme
• Imatge/miniatura per a estampats, textures o materials
• Etiqueta de text (S, M, L, XL) amb color de fons, color de text i icona opcional
• Swatch bicolor en diagonal a 135º i degradats premium predefinits (or, plata, bronze, oceà…)

Fitxa de producte que converteix

El plugin reemplaça el desplegable natiu de WooCommerce i sincronitza amb el formulari de variacions de Woo.

• Swatch seleccionat marcat amb vora o check visual configurable
• Variant esgotada ratllada amb una creu, semitransparent o oculta segons l’ajust
• Canvi de la imatge de la galeria en seleccionar la variant (gallery swap)
• Preu en temps real, avís d’estoc ‘Només en queden X’ i price delta entre variants

Swatches també al llistat de la botiga

Els clients trien variant sense entrar a la fitxa, directament des de l’archive o el shop.

• Posició configurable: abans de la imatge, després del títol o després del preu
• Canvi d’imatge del producte en prémer un swatch al llistat
• Límit de swatches visibles amb indicador ‘+N’ per no saturar
• Afegir variació al carret per AJAX amb actualització del mini-carret

Panell de disseny amb CSS custom properties

Controles l’aparença dels swatches des del panell, heretant els colors del teu tema.

• Forma quadrada, rodona o rounded i mida de swatch en píxels
• Vora, radi, separació (gap) i escala en passar el ratolí
• Estil del swatch seleccionat (vora/check) i del esgotat (creu/opacitat/ocult)
• Variables –ehero-swatch-* i CSS personalitzat per a ajustos avançats

Compatibilitat real amb el teu stack

Pensat per funcionar amb els temes i constructors que de veritat fan servir les botigues.

• Compatible amb HPOS (taules de comandes d’alt rendiment de WooCommerce)
• Reinicialització automàtica a Bricks Builder i contingut carregat per AJAX (quick view)
• Càrrega diferida en llistats amb IntersectionObserver per no penalitzar el rendiment
• Suporta productes variables, variable-subscription i ehero_variable_subscription

Etiquetes, sufixos de preu i auto-selecció

Detalls que afinen la presentació del preu i les opcions de cada producte.

• Sufix de preu configurable a la fitxa i al llistat (ex: ‘IVA no inclòs’) amb color i mida
• Estil de les etiquetes d’atribut: color, mida i pes de font, o amagar-les
• Tooltip amb el nom de la variant en passar el ratolí
• Fallback d’imatge (variant, producte o cap) quan un terme no té miniatura pròpia

Ideal per a

Si busques mostres visuals per a variacions de WooCommerce, aquesta és la teva eina. On encaixa més:

📋 Requisits del sistema

Compatibilitat provada amb les versions actuals de WordPress i WooCommerce.

🛟 Suport tècnic

Suport per email en espanyol* a soporte@consultoriaehero.com i manual en línia (ES/EN), amb actualitzacions automàtiques des del teu panell.

⚖️ Comparativa: per què EHERO Woo Swatches?

El que distingeix Woo Swatches davant de les alternatives.

Quantes vendes perds cada dia perquè els teus clients no arriben a obrir el desplegable de colors i talles?

Activa avui les mostres visuals per a variacions de WooCommerce i transforma els teus desplegables en una experiència de compra que de veritat converteix.

Descobreix tots els nostres plugins per a WooCommerce o visita la botiga de Consultoria EHERO.

*El suport cobreix incidències, errors i instal·lació del plugin; no inclou consultoria, configuracions a mida ni desenvolupaments personalitzats. S’hi apliquen condicions.