SW Image Layer for YITH Product
Su cliente ve la personalización antes de comprar
El plugin superpone la imagen que elige el cliente, por ejemplo un logotipo, sobre la primera foto del producto, en el lugar y con el tamaño que usted defina.
Personalización que se ve antes de comprar
Un nombre en una lista no basta para decidir. Cuando el cliente ve su logotipo en la prenda, compra con más seguridad.
El cliente ve el resultado
La imagen elegida aparece al momento sobre la foto del producto, en su sitio y a su tamaño.
Menos dudas y errores
Menos preguntas antes de comprar y menos pedidos con la opción equivocada.
YITH sigue al mando
Precio, carrito y pedido los gestiona YITH como siempre. El plugin solo añade la visualización.
Así funciona en una tienda real
Ropa, accesorios o cualquier otro producto: un bordado, un logotipo, un estampado o la imagen que usted necesite.
Qué ve el comprador
- Marca «Sí» en la opción de personalización. El precio se actualiza.
- Busca su opción en la lista. Las tildes y mayúsculas no importan.
- Al elegirla, la imagen aparece sobre la primera foto del producto.
- Si cambia de color, la foto cambia y la imagen sigue en su sitio.
Todo lo que puede ajustar
Una configuración general para toda la tienda y ajustes propios solo en los productos que lo necesiten.
Visualización
- Posición y tamaño en %: igual en ordenador, tableta y móvil
- Posición por defecto y ajuste propio por producto
- La imagen se mantiene al cambiar de color
- En el móvil, la galería vuelve sola a la primera foto
Lista de opciones
- Buscador sin importar tildes ni mayúsculas
- Lista compacta con desplazamiento, aunque haya cien opciones
- Texto de ayuda en lugar del error estándar de YITH
- Color de acento a juego con su tienda
Integración
- Funciona sobre YITH sin cambiar precio ni pedido
- Vista previa de la posición en el escritorio
- Estilo ajustable con variables CSS
- Ajustes en español, inglés y ruso, actualizaciones en un clic
Qué necesita su tienda
| WordPress | 6.5 o superior |
|---|---|
| PHP | 7.4 o superior |
| WooCommerce | 8.0 o superior |
| YITH Product Add-ons | Versión Premium, actualizada. Es la que tiene lógica condicional e imágenes en cada opción. |
| Tema | Probado con Woodmart. Funciona con otros temas si la galería del producto es la estándar de WooCommerce. |
Imágenes de las opciones: recomendaciones
No son obligatorias, pero con ellas todas las imágenes quedan del mismo tamaño y en su sitio.
- Cuadradas, 400 × 400 px, en WebP o PNG
- Fondo totalmente transparente, sin sombras
- Dibujo centrado, con el mismo margen en todas (≈3 %)
- Hasta 80 KB cada una, para que la lista cargue rápido
La misma imagen sirve de miniatura en la lista y de superposición en la foto: no hace falta preparar dos.
Listo en tres pasos
Como cualquier otro plugin de WordPress. No necesita cuenta ni clave de licencia.
Descargue el archivo
Pulse «Descargar gratis». Obtendrá sw-image-layer-for-yith.zip. No lo descomprima.
Súbalo a WordPress
Plugins → Añadir nuevo → Subir plugin. Elija el archivo, pulse «Instalar ahora» y después «Activar».
Configúrelo
Siga los tres pasos de «Configuración»: el bloque en YITH, los ajustes generales y, si hace falta, el producto.
Las nuevas versiones llegan a «Plugins» como las de cualquier otro plugin. Si lo elimina, borra sus ajustes; los campos de YITH no se tocan.
Tres pasos, en este orden
Primero monte y pruebe el bloque en YITH. Si en YITH no hay un campo con imágenes, el plugin no tiene nada que mostrar.
01Bloque de opciones en YITH
Los nombres de los campos de YITH están en inglés, como en su interfaz.
El bloque
| Block name | Nombre interno, por ejemplo «Bordado logotipo». El cliente no lo ve. |
|---|---|
| Show this block of options in | Productos o categorías donde aparecerá la opción. Elija el producto general, no sus variaciones. |
| Show options to | All users |
Campo «Sí / No» con precio
| Title | «Bordado logotipo». Lo ve el cliente y aparece en el carrito. |
|---|---|
| Opción 1 | «No», marcada con Selected by default, sin cambio de precio. |
| Opción 2 | «Sí», Product price increase, importe fijo, por ejemplo 6 €. |
| Selection type | Single |
Campo con las imágenes
| Title | «Logotipo» |
|---|---|
| Cada opción | Label con el nombre y Add image con su imagen. Sin cambio de precio. |
| Force user to select | Activado, At least 1: sin imagen elegida no se añade al carrito. |
| Display & Style | Imagen a la izquierda (Left side), una opción por fila, precios ocultos. |
| Conditional logic | Mostrar solo si «Sí» está seleccionado. |
Compruébelo en la ficha del producto: con «No» no hay lista, con «Sí» aparece la lista y el precio sube. Ya puede pasar al plugin.
02Ajustes generales del plugin
| Campo con imágenes | El campo de YITH cuyas imágenes se superponen. Imprescindible: sin él, el plugin no hace nada. |
|---|---|
| Buscador | Muestra un buscador sobre la lista. |
| Textos | Del buscador («Busque su logotipo…»), de «sin resultados» y el texto de ayuda sobre la lista. |
| Filas visibles | De 2 a 20. El resto se desplaza dentro de la lista. |
| Color de acento | Opción elegida, borde del buscador y texto de ayuda. |
| Posición por defecto | X, Y y ancho en %. Se aplica a todos los productos sin posición propia. Ejemplo: 50 / 35 / 18. |
03Ajustes en el producto
Solo para excepciones: una camiseta sin bolsillo, un pantalón, un producto sin bordado en la foto.
| No mostrar imagen | En este producto no se superpone nada. La opción y el precio de YITH siguen igual. |
|---|---|
| Horizontal (X, %) | Centro de la imagen a lo ancho: 0 izquierda, 100 derecha. Vacío: por defecto. |
| Vertical (Y, %) | Centro de la imagen a lo alto: 0 arriba, 100 abajo. |
| Ancho (%) | Respecto al ancho de la foto. En el pecho de una camisa suele bastar con 9–13 %. |
| Vista previa | La foto principal con la imagen encima. Se mueve mientras escribe los números. |
La posición vale para todos los colores del producto. Haga las fotos de todos los colores con el mismo encuadre y tamaño.
Si algo no funciona
Revise en este orden: primero YITH, después los ajustes del plugin y por último la pestaña del producto.
No aparecen ni el buscador ni la imagen
En los ajustes del plugin no está elegido el campo con imágenes. Vaya a WooCommerce → Ajustes → SW Image Layer, elija el campo y guarde.
El producto no tiene la opción de personalizar
El bloque de YITH no está asignado a ese producto o a su categoría. Revíselo en Options Blocks → bloque → Show this block of options in. Al elegir categorías, marque también las subcategorías.
El buscador funciona, pero la imagen no aparece en la foto
En el producto está marcado «No mostrar imagen», o esa opción de YITH no tiene imagen. Desmarque la casilla o active Add image en la opción.
La imagen está mal colocada o es demasiado grande
La posición por defecto no le va a ese producto. Ajuste X, Y y ancho en la pestaña del producto mirando la vista previa.
En uno de los colores la imagen se desplaza
La foto de ese color tiene otro encuadre u otro tamaño. Repita o recorte la foto igual que las de los demás colores.
La lista se ve como círculos o botones, sin imágenes
El CSS de su plantilla de producto afecta a todos los campos de YITH a la vez. Aplique ese CSS solo a su campo, por su id, por ejemplo #yith-wapo-addon-12.
Para desarrolladores: estilo de la lista
Ajuste el aspecto de la lista con variables CSS, sin tocar los archivos del plugin. Péguelas en Apariencia → Personalizar → CSS adicional.
:root {
--swil-accent: #A9801F; /* opción elegida, buscador, ayuda */
--swil-border: #dcdcdc; /* borde de la lista y del buscador */
--swil-divider: #efefef; /* líneas entre filas */
--swil-text: #222222; /* nombres en la lista */
--swil-muted: #777777; /* icono de búsqueda, «sin resultados» */
--swil-hover: #f7f7f7; /* fila bajo el cursor */
--swil-thumb: 44px; /* tamaño de la miniatura */
--swil-row-h: 64px; /* alto de cada fila */
}
Los botones «No / Sí» son un campo normal de YITH: su aspecto se define en YITH → Style o con su propio CSS.
¿Necesita un plugin a medida para su web?
Desarrollo plugins para WordPress y WooCommerce que resuelven la tarea concreta de su negocio.