Introducción
Introduction
EHERO Woo Swatches transforma los aburridos selectores desplegables de WooCommerce en muestras visuales atractivas: colores, imágenes, etiquetas personalizadas y bicolor. Mejora la experiencia de compra y aumenta la conversión de tu tienda.
Compatible con productos variables estándar, WooCommerce Subscriptions y EHERO Subscriptions. Funciona con cualquier tema y con Bricks Builder.
Funcionalidades principales
Colores y Bicolor
Muestras de color sólido o combinaciones bicolor en diagonal. Perfecto para ropa, accesorios y decoración.
Imágenes
Miniaturas para estampados, texturas o materiales. Con fallback automático a imagen de variación o producto.
Etiquetas Pro
Botones con texto, color de fondo, color de texto, imágenes e iconos. Gradientes predefinidos incluidos (oro, plata, bronce).
Price Delta
Muestra la diferencia de precio directamente en cada swatch. El cliente ve el coste extra o descuento antes de seleccionar.
Swatches en Archivo
Muestra swatches en la tienda y páginas de archivo. Añade al carrito por AJAX directamente o enlaza al producto.
Bricks Builder
Shortcode dedicado para integración perfecta con Bricks Builder y sus query loops personalizados.
EHERO Woo Swatches transforms boring WooCommerce dropdown selectors into attractive visual swatches: colors, images, custom labels and bicolor. Improves the shopping experience and increases your store's conversion.
Compatible with standard variable products, WooCommerce Subscriptions and EHERO Subscriptions. Works with any theme and with Bricks Builder.
Main Features
Colors & Bicolor
Solid color swatches or diagonal bicolor combinations. Perfect for clothing, accessories and decor.
Images
Thumbnails for patterns, textures or materials. With automatic fallback to variation or product image.
Pro Labels
Text buttons with background color, text color, images and icons. Predefined gradients included (gold, silver, bronze).
Price Delta
Shows the price difference directly on each swatch. Customers see the extra cost or discount before selecting.
Archive Swatches
Show swatches on shop and archive pages. Add to cart via AJAX directly or link to the product.
Bricks Builder
Dedicated shortcode for seamless integration with Bricks Builder and its custom query loops.
Requisitos
Requirements
| Requisito | Requirement | Mínimo | Minimum | Recomendado | Recommended |
|---|---|---|---|---|---|
| WordPress | 5.8+ | 6.0+ | |||
| WooCommerce | 6.0+ | 8.0+ | |||
| PHP | 7.4+ | 8.0+ |
Instalación
Installation
- Descarga el archivo
.zipdesde tu cuenta en consultoriaehero.com. - En tu WordPress, ve a Plugins → Añadir nuevo → Subir plugin y selecciona el archivo ZIP descargado.
- Haz clic en Instalar ahora y después en Activar plugin.
- Ve a EHERO → Woo Swatches → Licencia e introduce tu clave de licencia para activar el plugin.
- Download the
.zipfile from your account at consultoriaehero.com. - In your WordPress, go to Plugins → Add New → Upload Plugin and select the downloaded ZIP file.
- Click Install Now and then Activate Plugin.
- Go to EHERO → Woo Swatches → License and enter your license key to activate the plugin.
Licencia
License
El plugin requiere una licencia activa para funcionar. Sin licencia, las funcionalidades estarán bloqueadas y verás un aviso en el panel de administración.
Activar licencia
- Ve a EHERO → Woo Swatches → Licencia.
- Introduce tu clave de licencia (la recibes por email tras la compra).
- Introduce el email con el que realizaste la compra.
- Haz clic en Activar licencia.
Desactivar licencia
Si necesitas mover el plugin a otro dominio, primero desactiva la licencia en el dominio actual pulsando Desactivar licencia. Esto libera la activación para poder usarla en otro sitio.
The plugin requires an active license to work. Without a license, features will be blocked and you'll see a notice in the admin panel.
Activate License
- Go to EHERO → Woo Swatches → License.
- Enter your license key (you receive it by email after purchase).
- Enter the email you used for the purchase.
- Click Activate License.
Deactivate License
If you need to move the plugin to another domain, first deactivate the license on the current domain by clicking Deactivate License. This frees the activation so you can use it on another site.
Ajustes generales
General Settings
En EHERO → Woo Swatches → Ajustes puedes configurar el comportamiento global del plugin:
Swatches
| Opción | Descripción |
|---|---|
| Activar Swatches | Activa o desactiva los swatches en todo el sitio. |
| Comportamiento sin stock | Qué hacer con las variantes sin stock: tachar, atenuar u ocultar. |
| Tooltips | Muestra el nombre del término al pasar el ratón sobre un swatch. |
| Cambio de galería | Cambia la imagen de la galería del producto al seleccionar una variación. |
Stock y urgencia
| Opción | Descripción |
|---|---|
| Indicador de stock bajo | Muestra un mensaje tipo "¡Solo quedan 3!" cuando el stock es bajo. |
| Umbral de stock bajo | Número de unidades por debajo del cual se muestra el aviso. |
Precio y auto-selección
| Opción | Descripción |
|---|---|
| Price Delta | Muestra la diferencia de precio respecto a la variación más barata. |
| Formato del delta | Formato del precio delta: +10€, +10.00€, etc. |
| Auto-selección | Selecciona automáticamente una variación al cargar: ninguna, primera, más barata o más cara. |
| Sufijo de precio | Texto que aparece después del precio (ej: "IVA no incluido"). Dejar vacío para ocultar. |
| Image Fallback | Qué imagen usar si un swatch de tipo imagen no tiene imagen: ninguna, imagen de variación o imagen de producto. |
Archivo / Tienda
| Opción | Descripción |
|---|---|
| Swatches en archivo | Muestra swatches en las páginas de tienda y archivo. |
| Máximo visible | Número máximo de swatches visibles por atributo en archivo. |
| Posición | Dónde mostrar los swatches: antes del título, después del título o después del precio. |
| Añadir al carrito | Comportamiento del botón: enlace al producto o añadir por AJAX directamente. |
| Auto-selección en archivo | Selección automática de variación en páginas de archivo. |
In EHERO → Woo Swatches → Settings you can configure the global plugin behavior:
Swatches
| Option | Description |
|---|---|
| Enable Swatches | Enable or disable swatches across the entire site. |
| Out of Stock Behavior | What to do with out-of-stock variants: cross out, fade or hide. |
| Tooltips | Show the term name when hovering over a swatch. |
| Gallery Swap | Change the product gallery image when selecting a variation. |
Stock & Urgency
| Option | Description |
|---|---|
| Low Stock Indicator | Shows a message like "Only 3 left!" when stock is low. |
| Low Stock Threshold | Number of units below which the warning is shown. |
Price & Auto-select
| Option | Description |
|---|---|
| Price Delta | Show the price difference relative to the cheapest variation. |
| Delta Format | Price delta format: +10€, +10.00€, etc. |
| Auto-select | Automatically select a variation on load: none, first, cheapest or most expensive. |
| Price Suffix | Text that appears after the price (e.g. "Tax not included"). Leave empty to hide. |
| Image Fallback | Which image to use if an image swatch has no image: none, variation image or product image. |
Archive / Shop
| Option | Description |
|---|---|
| Archive Swatches | Show swatches on shop and archive pages. |
| Max Visible | Maximum number of visible swatches per attribute on archive. |
| Position | Where to show swatches: before title, after title or after price. |
| Add to Cart | Button behavior: link to product or add via AJAX directly. |
| Archive Auto-select | Auto-select variation on archive pages. |
Atributos
Attributes
En EHERO → Woo Swatches → Atributos asignas un tipo de swatch a cada atributo de WooCommerce y configuras los valores individuales de cada término.
Tipos de swatch
| Tipo | Descripción | Configuración por término |
|---|---|---|
| Color | Muestra de color sólido. | Selector de color (hex). |
| Imagen | Miniatura de imagen. | Subida de imagen desde la biblioteca de medios. |
| Etiqueta | Botón de texto enriquecido. | Color de fondo, color de texto, imagen/icono, gradientes predefinidos, CSS personalizado. |
| Bicolor | Dos colores en diagonal. | Color primario y color secundario. |
Configurar términos
- En la tabla de atributos, selecciona el tipo de swatch deseado para el atributo.
- Haz clic en el botón Configurar en la fila del atributo.
- Se despliega la configuración de cada término. Asigna los valores (color, imagen, etc.) según el tipo seleccionado.
- Haz clic en Guardar cambios para persistir la configuración.
Opciones avanzadas por término
- Badge: Añade una etiqueta tipo "Best Value" o "Popular" a swatches individuales.
- Gradientes: Los swatches de tipo etiqueta admiten gradientes predefinidos (oro, plata, bronce, etc.) como fondo.
- CSS personalizado: Cada término de tipo etiqueta acepta CSS adicional para personalización total.
In EHERO → Woo Swatches → Attributes you assign a swatch type to each WooCommerce attribute and configure the individual values for each term.
Swatch Types
| Type | Description | Per-term Configuration |
|---|---|---|
| Color | Solid color swatch. | Color picker (hex). |
| Image | Image thumbnail. | Upload from media library. |
| Label | Rich text button. | Background color, text color, image/icon, predefined gradients, custom CSS. |
| Bicolor | Two colors in diagonal. | Primary and secondary color. |
Configure Terms
- In the attributes table, select the desired swatch type for the attribute.
- Click the Configure button on the attribute row.
- The configuration for each term will expand. Assign the values (color, image, etc.) according to the selected type.
- Click Save Changes to persist the configuration.
Advanced Per-term Options
- Badge: Add a label like "Best Value" or "Popular" to individual swatches.
- Gradients: Label-type swatches support predefined gradients (gold, silver, bronze, etc.) as background.
- Custom CSS: Each label-type term accepts additional CSS for full customization.
Diseño
Design
En EHERO → Woo Swatches → Diseño personaliza la apariencia visual de los swatches con vista previa en tiempo real:
Forma y tamaño
| Opción | Descripción |
|---|---|
| Forma | Cuadrado, redondeado o círculo. |
| Ancho / Alto | Tamaño en píxeles de cada swatch. |
| Separación (Gap) | Espacio entre swatches en píxeles. |
| Radio del borde | Redondeo personalizado en píxeles. |
Estados visuales
| Opción | Descripción |
|---|---|
| Estilo seleccionado | Cómo se ve el swatch seleccionado: borde resaltado, check o escala. |
| Color de borde highlight | Color del borde cuando el swatch está seleccionado. |
| Estilo desactivado | Apariencia de swatches sin stock: tachado o atenuado. |
Etiquetas de atributo
| Opción | Descripción |
|---|---|
| Mostrar label | Muestra u oculta el nombre del atributo (ej: "Plan", "Duración") en el frontend. |
| Color del label | Color del texto de la etiqueta del atributo. |
| Tamaño del label | Tamaño de fuente en píxeles. |
| Grosor del label | Peso de la fuente (normal, bold, etc.). |
Efectos de texto
Para mejorar la legibilidad del texto en swatches de tipo etiqueta con fondos claros u oscuros, puedes activar efectos de texto:
- Sombra: Añade una sombra suave detrás del texto.
- Trazo: Añade un contorno al texto para mayor contraste.
CSS personalizado
Para ajustes avanzados, puedes añadir CSS personalizado directamente desde la página de diseño.
In EHERO → Woo Swatches → Design customize the visual appearance of swatches with real-time preview:
Shape & Size
| Option | Description |
|---|---|
| Shape | Square, rounded or circle. |
| Width / Height | Size in pixels of each swatch. |
| Gap | Space between swatches in pixels. |
| Border Radius | Custom rounding in pixels. |
Visual States
| Option | Description |
|---|---|
| Selected Style | How the selected swatch looks: highlighted border, check or scale. |
| Highlight Border Color | Border color when the swatch is selected. |
| Disabled Style | Appearance of out-of-stock swatches: crossed or faded. |
Attribute Labels
| Option | Description |
|---|---|
| Show Label | Show or hide the attribute name (e.g. "Plan", "Duration") on the frontend. |
| Label Color | Text color for the attribute label. |
| Label Size | Font size in pixels. |
| Label Weight | Font weight (normal, bold, etc.). |
Text Effects
To improve text readability on label-type swatches with light or dark backgrounds, you can enable text effects:
- Shadow: Adds a soft shadow behind the text.
- Stroke: Adds an outline to the text for better contrast.
Custom CSS
For advanced adjustments, you can add custom CSS directly from the design page.
Archivo / Tienda
Archive / Shop
Los swatches pueden mostrarse en las páginas de archivo (tienda, categorías, etiquetas) para que los clientes puedan ver y seleccionar variaciones directamente sin entrar en la ficha del producto.
Posición de los swatches
- Antes del título: Los swatches aparecen encima del nombre del producto.
- Después del título: Los swatches aparecen justo debajo del nombre.
- Después del precio: Los swatches aparecen debajo del precio.
Añadir al carrito desde archivo
Tienes dos opciones:
- Enlace al producto: Al seleccionar todas las variaciones y pulsar "Añadir al carrito", se redirige a la ficha del producto con la variación preseleccionada.
- AJAX directo: Añade la variación directamente al carrito sin salir de la página. El mini-carrito se actualiza automáticamente.
Labels de atributo en archivo
Puedes mostrar el nombre del atributo (ej: "Plan:", "Color:") delante de cada grupo de swatches en archivo, con opciones de alineación (izquierda, centro, derecha) y un ancho fijo para que los swatches queden alineados verticalmente.
Swatches can be displayed on archive pages (shop, categories, tags) so customers can view and select variations directly without entering the product page.
Swatch Position
- Before title: Swatches appear above the product name.
- After title: Swatches appear right below the name.
- After price: Swatches appear below the price.
Add to Cart from Archive
You have two options:
- Link to product: When all variations are selected and "Add to Cart" is clicked, it redirects to the product page with the variation preselected.
- Direct AJAX: Adds the variation directly to the cart without leaving the page. The mini-cart updates automatically.
Attribute Labels on Archive
You can show the attribute name (e.g. "Plan:", "Color:") before each swatch group on archive, with alignment options (left, center, right) and a fixed width so swatches are vertically aligned.
Bricks Builder
EHERO Woo Swatches es totalmente compatible con Bricks Builder. Si usas plantillas personalizadas con Bricks para tus fichas de producto o archivos de tienda, el plugin se adapta automáticamente.
Swatches en ficha de producto
En la ficha de producto individual, los swatches se renderizan automáticamente donde WooCommerce coloca el formulario de variaciones. No necesitas configuración adicional.
Shortcode para archivos
Si usas un query loop personalizado en Bricks para la tienda o archivo, utiliza el shortcode:
[ehero_archive_swatches]Colócalo dentro de tu template de Bricks usando un elemento de tipo Shortcode o Code. El shortcode detecta automáticamente el producto del loop actual.
Compatibilidad
El plugin utiliza MutationObserver y eventos personalizados para re-inicializarse cuando Bricks carga contenido dinámicamente (AJAX, filtros, paginación). No necesitas añadir código adicional.
EHERO Woo Swatches is fully compatible with Bricks Builder. If you use custom Bricks templates for your product pages or shop archives, the plugin adapts automatically.
Swatches on Product Page
On the single product page, swatches render automatically where WooCommerce places the variation form. No additional configuration needed.
Shortcode for Archives
If you use a custom query loop in Bricks for the shop or archive, use the shortcode:
[ehero_archive_swatches]Place it inside your Bricks template using a Shortcode or Code element. The shortcode automatically detects the product from the current loop.
Compatibility
The plugin uses MutationObserver and custom events to re-initialize when Bricks loads content dynamically (AJAX, filters, pagination). No additional code needed.
FAQ
Sí, funciona con cualquier tema que use los hooks estándar de WooCommerce para productos variables. Es compatible con temas populares como Astra, GeneratePress, Kadence, OceanWP y Bricks Builder.
Yes, it works with any theme that uses standard WooCommerce hooks for variable products. Compatible with popular themes like Astra, GeneratePress, Kadence, OceanWP and Bricks Builder.
Sí, es compatible tanto con WooCommerce Subscriptions como con EHERO Subscriptions. Los swatches funcionan con productos de tipo variable-subscription y ehero_variable_subscription.
Yes, it's compatible with both WooCommerce Subscriptions and EHERO Subscriptions. Swatches work with variable-subscription and ehero_variable_subscription product types.
No. El plugin usa JavaScript vanilla (sin dependencias pesadas como jQuery), IntersectionObserver para carga lazy, y CSS custom properties que el navegador optimiza de forma nativa. El impacto en rendimiento es mínimo.
No. The plugin uses vanilla JavaScript (no heavy dependencies like jQuery), IntersectionObserver for lazy loading, and CSS custom properties that the browser optimizes natively. Performance impact is minimal.
Sí, el plugin se re-inicializa automáticamente en contenido cargado dinámicamente gracias a MutationObserver. Los swatches aparecerán en Quick View, modales y cualquier contenido AJAX.
Yes, the plugin automatically re-initializes on dynamically loaded content thanks to MutationObserver. Swatches will appear in Quick View, modals and any AJAX content.
Sí. Primero desactiva la licencia en el dominio actual desde EHERO → Woo Swatches → Licencia, y después actívala en el nuevo dominio.
Yes. First deactivate the license on the current domain from EHERO → Woo Swatches → License, then activate it on the new domain.
Sí. El plugin incluye un sistema de auto-actualización integrado. Cuando haya una nueva versión disponible, la verás en Panel → Actualizaciones y podrás actualizar con un clic, igual que cualquier plugin del repositorio de WordPress.
Yes. The plugin includes a built-in auto-update system. When a new version is available, you'll see it in Dashboard → Updates and can update with one click, just like any WordPress repository plugin.
Soporte
Support
¿Necesitas ayuda o tienes alguna pregunta? Estamos aquí para ayudarte:
- Email: soporte@consultoriaehero.com
- Web: consultoriaehero.com
Al contactar con soporte, incluye:
- Tu clave de licencia o email de compra.
- URL de tu tienda.
- Descripción detallada del problema.
- Capturas de pantalla si es posible.
- Versión de WordPress, WooCommerce y PHP.
Need help or have a question? We're here to help:
- Email: soporte@consultoriaehero.com
- Web: consultoriaehero.com
When contacting support, include:
- Your license key or purchase email.
- Your store URL.
- Detailed description of the issue.
- Screenshots if possible.
- WordPress, WooCommerce and PHP versions.