Muestras de variación en WooCommerce: colores y etiquetas

Quien en una página de producto de WooCommerce elige un color o una talla se encuentra, para ambos, con el mismo control: un desplegable. Funciona, pero oculta precisamente lo que el cliente quiere comparar. Un color se convierte en una palabra dentro de una lista, y una talla se sitúa detrás de un clic que primero hay que abrir antes de poder leer siquiera una opción. Las muestras transforman esa elección en algo visible y directamente cliqueable. Esta guía explica qué son las muestras de variación, por qué los desplegables ralentizan la decisión de compra, qué debe hacer realmente bien un plugin de muestras y cómo el plugin gratuito Swatch las añade sin frenar tu tienda.

Qué son las muestras de variación

Un producto variable de WooCommerce se compone de atributos. Una camiseta tiene un atributo de color y otro de talla; una funda de móvil, un color y un modelo. Cada atributo se muestra por defecto en la página del producto como un desplegable <select>, y el cliente elige una opción de cada uno para llegar a una variación concreta con su propio precio, stock e imagen. Este modelo es sólido. El problema reside únicamente en cómo se presenta la elección.

Un desplegable obliga al cliente a hacer tres cosas seguidas: abrir la lista, leer los nombres de las opciones y elegir una, antes de que el resto se pueda ver. Con una talla, eso solo molesta ligeramente. Con un color, es seriamente poco útil, porque un color que aparece como la palabra “Zafiro” o “Verde bosque” no dice nada sobre cómo se ve realmente el producto. Se elige a ciegas y se confía en que el nombre encaje con la imagen.

Las muestras de variación reemplazan esos desplegables por controles visuales:

• Puntos de color para un atributo de color, para que el color real sea visible en lugar de su nombre.
• Píldoras de botón o etiqueta para tallas y otros atributos, de modo que cada opción sea visible de un vistazo y un toque la seleccione.

Nada queda oculto detrás de un clic. El cliente recorre la fila, ve lo que hay disponible y elige. La decisión se toma más rápido, y la tienda se siente más cercana a los grandes comercios con los que el cliente la compara de todos modos, donde las muestras son más la regla que la excepción.

Por qué los desplegables ralentizan la decisión

El coste de un desplegable de variación es pequeño por interacción y grande en conjunto. Cada paso adicional entre abrir un producto y añadirlo al carrito es una ocasión para titubear, y titubear en una página de producto es justo el punto donde las conversiones se pierden en silencio.

Con los desplegables van mal tres cosas en concreto. Primero, las opciones solo son visibles tras abrir, de modo que el cliente no advierte de un vistazo cuántos colores o tallas hay ni si el que quiere se ofrece siquiera. Segundo, un color presentado como texto es ambiguo, de modo que el cliente o adivina o vuelve a desplazarse a la galería para cotejar, lo que interrumpe el flujo de lectura. Tercero, un select nativo en el móvil abre una superposición de selección aparte, lo que genera más fricción que tocar una muestra visible in situ.

Nada de esto significa que los desplegables estén rotos. Significa que son la herramienta equivocada para atributos que el cliente quiere ver. El color es el caso evidente, pero la misma lógica se aplica a todo aquello en lo que desplegar las opciones en plano resulta más claro que anidarlas en un menú.

Qué necesita un buen plugin de muestras

Las muestras se implementan mal con facilidad. Muchos plugins pintan controles bonitos por encima de WooCommerce y crean más problemas de los que resuelven. Tres cosas distinguen a un plugin de muestras en el que puedes confiar de uno que te dará quebraderos de cabeza más tarde. Utilízalas como lista de verificación, ya desarrolles tú mismo, compres o instales.

• Controla el formulario de variación nativo. La muestra debería ser una entrada dentro de la propia lógica de variación de WooCommerce, no un sistema paralelo acoplado al lado. Si la muestra alimenta el formulario real, el precio, el estado de stock, la imagen de galería y el botón de añadir al carrito se actualizan a través de la ruta de código probada de WooCommerce. Si no es así, esas cosas se desincronizan y aparecen los errores clásicos: un precio que no corresponde a la selección, un botón de añadir al carrito que sigue desactivado, un stock que miente.
• No frena la tienda. Muchos plugins de muestras cargan jQuery y toda una pila de bibliotecas adicionales en cada página, tanto si un producto las necesita como si no. Un script pequeño que se engancha a los eventos de variación existentes de WooCommerce hace lo mismo sin ese lastre y, en el mejor de los casos, no carga nada en las páginas que no tienen muestras que mostrar.
• Es accesible. Las muestras construidas como elementos <div> cliqueables sin etiqueta dejan por completo fuera a quienes usan teclado y lector de pantalla, y convierten un select nativo antes perfectamente accesible en un control que nadie puede manejar con tecnología de asistencia. Una semántica de radiogroup correcta, la navegación con las teclas de flecha, el foco visible y las etiquetas para lector de pantalla mantienen el control utilizable para todos, lo que es a la vez lo correcto y, cada vez más, una expectativa legal.

Un cuarto requisito, más discreto: el repliegue suave. Un plugin de muestras nunca debería romper una página de producto solo porque un atributo no se configuró por completo. Un atributo sin colores asignados debería conservar simplemente su desplegable, de modo que puedas desplegar las muestras atributo por atributo sin riesgo.

Cómo lo implementa Swatch

Swatch for WooCommerce es un plugin gratuito y de código abierto que reemplaza los desplegables de variación en la página de producto individual por muestras visuales, construido precisamente en torno a los puntos anteriores. Es deliberadamente enfocado: hace bien la tarea de las muestras, en lugar de agrupar una docena de funciones inconexas.

• Dos tipos de muestra. Puntos de color y píldoras de botón o etiqueta. Eliges el tipo para cada atributo de forma independiente, de modo que el color puede aparecer como puntos y la talla como píldoras, todo en el mismo producto.
• Color y etiqueta por término. Fijas para cada término un color, saneado a través de sanitize_hex_color, o una etiqueta personalizada, guardada como meta de término. Una etiqueta de botón adopta por defecto el nombre del término, de modo que solo fijas una etiqueta propia cuando quieres algo más corto que el valor completo del atributo.
• Formulario de variación nativo. Las muestras alimentan el propio formulario de variación de WooCommerce, de modo que el precio, el stock y el botón de añadir al carrito se actualizan exactamente igual que con los desplegables. Los estados seleccionado y no combinable se reflejan automáticamente, de modo que quien elige un color sin talla compatible ve esa combinación tratada igual que la trataría WooCommerce de todos modos.
• Manejable con teclado. Semántica de radiogroup y navegación con las teclas de flecha, con etiquetas para lector de pantalla, de modo que la muestra se comporta como un grupo de radios nativo.
• Estética accesible. Anillos de foco visibles, contraste suficiente y soporte para el movimiento reducido, sin desplazamiento del diseño cuando se renderizan las muestras.
• Repliegue limpio. Un atributo sin datos de muestra conserva el desplegable estándar, de modo que durante la configuración nunca se rompe nada.
• JavaScript puro. El frontend se engancha a los eventos de variación de WooCommerce sin dependencia de jQuery y, si las muestras están desactivadas, no se cargan ni los estilos ni los scripts de Swatch.

Es autónomo: sin servicios externos, sin cuenta, sin clave de API, sin scripts, fuentes o recursos de CDN remotos y sin telemetría. Todo reside en tu propia base de datos. El tipo de muestra por atributo y los valores predeterminados globales se guardan en las opciones del plugin, y el color y la etiqueta de cada término se almacenan como meta de término swatch_color y swatch_label en tus términos de atributo de WooCommerce existentes.

Configuración

Hasta que las muestras están en vivo transcurren solo unos minutos:

1. Instala el plugin a través de Plugins → Añadir nuevo, o súbelo a /wp-content/plugins/swatch. WooCommerce debe estar instalado y activo.
2. Actívalo. Las muestras funcionan de serie, de modo que a estas alturas ya aparece una muestra en estilo botón en tus productos variables.
3. Abre WooCommerce → Swatch para fijar los valores predeterminados globales: si las muestras están activadas y qué tipo de muestra predeterminado (botón o color) rige para cada atributo al que no le hayas asignado un tipo propio.
4. Abre en Productos → Atributos un atributo y fija su tipo de muestra, si quieres anular el predeterminado. Para muestras de color, abre cada término de ese atributo y fija un color de muestra; para muestras de botón, fija opcionalmente por término una etiqueta de muestra corta.

La página de ajustes lleva bajo cada campo una ayuda directa, así como una pequeña vista previa de los dos estilos de muestra, de modo que durante la configuración no necesitas consultar la documentación. Como los colores y las etiquetas residen en cada atributo en lugar de en una página de ajustes central, se mantienen correctos a medida que tu catálogo crece. La configuración está limitada al permiso manage_woocommerce, de modo que los gestores de tienda pueden configurar las muestras sin acceso completo de administrador.

Consejos prácticos

Un plugin aporta el mecanismo, unos cuantos hábitos mejoran el resultado.

• Usa muestras de color solo para colores. Los puntos de color se ganan su lugar cuando la opción es un color que el cliente quiere ver. Para tallas, materiales o capacidades, las píldoras de botón son más claras, porque un punto coloreado para “Grande” no dice nada. Mezclar los dos tipos por atributo es justo el propósito del ajuste de tipo por atributo.
• Fija colores reales, no aproximaciones. Una muestra “Marino” que aparece como azul puro vende el producto por debajo de su valor y arriesga una devolución si el artículo llega más oscuro de lo que sugería el punto. Extrae el valor hexadecimal, en lo posible, de la fotografía del producto, para que la muestra corresponda a lo que el cliente recibe de verdad.
• Mantén las etiquetas cortas. Las muestras de botón se leen mejor cuando la etiqueta abarca una o dos palabras. Si tus términos de atributo son largos, fija por término una etiqueta propia y concisa, en lugar de dejar que el nombre completo del término se parta de forma poco elegante.
• Despliega un atributo tras otro. Como los atributos no configurados vuelven al desplegable, puedes reconvertir primero el atributo de color de tus productos más visitados, comprobar que se ve correctamente y ampliar desde ahí, sin arriesgar nunca una página rota.
• Cuida el contraste en colores casi blancos y casi negros. Una muestra blanca sobre fondo blanco desaparece. El estilizado accesible de Swatch ayuda, pero merece la pena revisar con tus propios ojos los términos más claros y más oscuros, para que el punto siga siendo visible.

Swatch en comparación con el estándar de WooCommerce

WooCommerce muestra de serie cada atributo de variación como desplegable. Así se ve la diferencia específicamente para la elección de variación:

Función	WooCommerce estándar	Swatch
Visualización del atributo de color	Desplegable con nombres	Puntos de color
Talla y otros atributos	Desplegable con nombres	Píldoras de botón o etiqueta
Tipo de muestra por atributo	no disponible	Elegible de forma independiente por atributo
Precio, stock, añadir al carrito	Formulario nativo	Controla ese mismo formulario nativo
Estados no combinables	Gestión nativa	Se reflejan automáticamente
Teclado y lector de pantalla	Lista de selección nativa	Radiogroup, teclas de flecha, etiquetas
Dependencia de jQuery	no disponible	Ninguna, JavaScript puro
Atributo no configurado	Desplegable	Vuelve al desplegable
Coste	Gratis (núcleo)	Gratis; PRO añade muestras de imagen, galerías, vistas previas de archivo

Gratis en comparación con PRO

La edición gratuita cubre por completo las muestras de color y de botón y etiqueta: los dos tipos de muestra, la selección de tipo por atributo, un color o etiqueta por término, la conexión con el formulario nativo, la accesibilidad y el repliegue limpio al desplegable. Es una herramienta de muestras completa para páginas de producto individuales, no un aperitivo.

Swatch PRO se apoya en ello, para tiendas que quieren sacar más de las muestras. Las muestras de imagen por término, las imágenes de galería por variación, de modo que la galería cambia con la selección, las muestras en los bucles de tienda y categoría, para que el cliente pueda elegir un color antes de abrir el producto, los tooltips al pasar el ratón y los tamaños y formas de muestra personalizados forman parte de PRO. El plugin gratuito proporciona filtros en los que se enganchan PRO y otros complementos, de modo que la ruta de mejora es aditiva y no una reconstrucción.

En resumen

Las muestras de variación hacen que una página de producto de WooCommerce sea más fácil de leer, al transformar los desplegables de color y talla en controles visibles y cliqueables, lo que acelera la decisión y elimina las conjeturas al elegir un color por su nombre. Las variantes recomendables siguen controlando el formulario de variación nativo de WooCommerce, prescinden de jQuery, vuelven al desplegable cuando un atributo no está configurado y se mantienen manejables con teclado y lector de pantalla. Swatch for WooCommerce hace todo eso gratis con muestras de color y etiqueta, funciona de serie y deja las muestras de imagen, las vistas previas de galería y las muestras de archivo para la versión PRO, en cuanto estés listo para ello.