Tu tienda tiene su propio aspecto, con sus propios colores, fuentes y diseño. Esta guía te muestra cómo hacer que el botón SaveTo Wishlist coincida con él, en las páginas de productos, de la tienda y del carrito, sin tocar ningún código.
Requisitos previos
- WooCommerce instalado y configurado.
- SaveTo Wishlist Lite instalado y activo.
- Acceso de administrador a tu panel de WordPress.
Acción de la lista de deseos
El ajuste Botón para añadir a la lista de deseos controla lo que sucede cuando un cliente hace clic en el botón de la lista de deseos. Lo encontrarás en SaveTo Wishlist → Ajustes → General → Acción de la lista de deseos.
Hay tres opciones:
- Redirigir: envía al cliente directamente a su página de lista de deseos después de hacer clic. Bueno para tiendas donde quieres que los clientes revisen su lista de deseos de inmediato.
- Ventana emergente: muestra una ventana emergente de confirmación sin navegar. Útil cuando quieres que los compradores permanezcan en la página y sigan navegando.
- Desvanecer: un pequeño mensaje de confirmación aparece junto al botón para confirmar que el producto se ha guardado, sin navegación ni ventana emergente. Es la opción más sutil, ideal cuando quieres una interrupción mínima en el flujo de compra.
Dónde encontrar los ajustes
Ve a tu Panel de WordPress → SaveTo Wishlist → Ajustes → Ubicación y estilos del botón.
Verás cinco secciones principales:
- Ajustes del botón – etiqueta del botón de la lista de deseos y la etiqueta que se muestra después de añadir un producto
- Estilos del frontend – el ajuste Carga de CSS del frontend que controla cuántos CSS del plugin se cargan en tu tienda (cubierto en la sección de carga de CSS del frontend a continuación)
- Página de producto – ubicación y estilo del botón en las páginas de productos individuales
- Página de la tienda – ubicación y estilo del botón en los listados de productos
- Página del carrito – estilo y etiqueta para el botón “Guardar carrito en la lista de deseos”
Ajustes del botón
Etiqueta del botón de la lista de deseos establece el texto predeterminado para todos los botones de la lista de deseos en tu tienda. El valor predeterminado es Guardar en la lista de deseos, pero puedes cambiarlo por lo que mejor se adapte, como Añadir a favoritos o Guardar para más tarde. Mantenlo corto y claro.
Etiqueta del botón de lista de deseos seleccionado te permite mostrar una etiqueta diferente una vez que un producto ha sido añadido a la lista de deseos. El valor predeterminado es Eliminar de la lista de deseos, lo que permite a los compradores eliminar el artículo con un solo clic. Puedes cambiarlo por lo que mejor se adapte a tu tienda.
Consejo profesional: Mantén las etiquetas de los botones cortas y orientadas a la acción para que sea fácil para los compradores actuar.
Página de producto
La sección Página de producto controla cómo aparece el botón de la lista de deseos en las páginas de productos individuales donde los compradores ven un solo producto antes de comprar.
Ubicación del botón decide dónde aparece el botón en la página del producto. El valor predeterminado es Debajo del botón Añadir al carrito, pero también puedes elegir Encima del botón Añadir al carrito, Encima del título del producto, Debajo del título del producto, Arriba a la derecha de la imagen del producto o Arriba a la izquierda de la imagen del producto.
⚠️ Productos sin precio o agotados: A partir de la versión 1.0.7, las ubicaciones Encima del botón Añadir al carrito y Debajo del botón Añadir al carrito también muestran el botón de lista de deseos en productos que no tienen precio, están agotados o están en modo catálogo. Estos productos normalmente ocultan el formulario Añadir al carrito de WooCommerce, por lo que el botón ahora recurre a un lugar cercano en el resumen del producto en lugar de desaparecer.
La siguiente configuración es la opción Modo de configuración. Elige Usar preajustes para seleccionar entre combinaciones de estilos listas para usar, o elige Configuración personalizada para acceder manualmente al selector de color completo, fuentes y controles de tamaño.
Consejo profesional: Usa la vista previa en vivo para ver cómo queda tu botón tanto en estados normal como al pasar el ratón antes de guardar los cambios.
Página de la tienda
La sección Página de la tienda controla cómo aparecen los botones de lista de deseos en tus cuadrículas de productos, páginas de categorías y páginas de archivo, dondequiera que los compradores naveguen por varios productos a la vez.
Ubicación del botón, por defecto, está debajo del botón Añadir al carrito, pero también puedes colocar el botón en las esquinas superiores de las imágenes del producto o encima/debajo de los títulos del producto. Para un aspecto limpio y moderno en las páginas de cuadrícula, la posición en la esquina superior tiende a funcionar muy bien.
Al igual que la sección Página del producto, tiene la opción Modo de configuración. Elige Usar preajustes para una configuración rápida con combinaciones listas para usar, o Configuración personalizada para ajustar cada color, tamaño de fuente, ancho del borde y estilo de texto para que coincida con la marca de tu tienda.
Consejo profesional: Para una página de tienda elegante y moderna, prueba los botones Solo icono en las esquinas superiores. Ahorra espacio manteniendo visible la opción de lista de deseos.
Página del carrito
La sección Botón del carrito es para el botón “Guardar carrito en lista de deseos”, el botón que permite a los compradores guardar todo su carrito a la vez. Es genial para los clientes que quieren volver más tarde o compartir sus selecciones.
La etiqueta Etiqueta del botón del carrito tiene por defecto “Guardar carrito en lista de deseos”. Puedes cambiarla a algo más amigable como Guardar carrito para más tarde o ♥ Guardar mi carrito. Las mismas opciones de estilo, color, fuente y tamaño disponibles en las páginas de producto y de tienda se aplican aquí, para que puedas mantener la coherencia en toda tu tienda.
Esta sección también tiene la opción Modo de configuración: elige Usar preajustes para una configuración rápida, o Configuración personalizada para controlar tú mismo los colores, fuentes y tamaños.
Carga de CSS del frontend
El ajuste Carga de CSS del frontend controla cuánto de la hoja de estilos del plugin se carga en tu tienda. Lo encontrarás en SaveTo Wishlist → Ajustes → Colocación y estilos del botón → Estilos del frontend.
Hay tres opciones:
- Estilo completo: usa los colores y fuentes del plugin (predeterminado). Carga la hoja de estilos completa del plugin. Funciona directamente para la mayoría de las tiendas.
- Estilo mínimo: deja que tu tema anule los colores y las fuentes. Carga colores y fondos sin anulaciones
!important, para que el CSS de tu tema pueda prevalecer donde haya conflictos. Prueba esto primero si el botón de la lista de deseos choca con tu tema. - Sin estilo: hereda colores y fuentes del tema activo. Descarta los colores y fuentes del plugin para que el botón los tome de tu tema. Lo mejor para desarrolladores que realizan una personalización completa. Los tamaños de botón, posiciones y CSS de diseño del plugin se conservan en todos los modos.
Resumen
Usa Acción de la lista de deseos (Ajustes → General) para controlar qué sucede después de hacer clic. Usa Colocación y estilos del botón para establecer etiquetas, colocación, colores y carga de CSS para cada página donde aparezca el botón, con Redirección, Ventana emergente o Desvanecimiento controlando qué sucede después de hacer clic.
Mejores prácticas
- Combina los colores y el estilo del botón con el tema de tu tienda
- Mantén las etiquetas cortas y orientadas a la acción
- Prueba los botones en el móvil para ver la legibilidad y el tamaño del toque
- Usa la vista previa en vivo para confirmar tus ajustes antes de guardar
Solución de problemas
El estilo del botón no se actualiza después de guardar
Si cambias los ajustes y el botón se ve igual en el frontend, prueba a cambiar el Modo de configuración de Usar preajustes a Ajustes personalizados (o viceversa) y guarda de nuevo. Borra también cualquier plugin de caché o caché de CDN. El CSS en caché puede impedir que se muestren los cambios de estilo.
El botón de la lista de deseos choca con el CSS del tema
Si el botón se ve roto o entra en conflicto con los estilos de tu tema, ve a SaveTo Wishlist → Ajustes → Colocación y estilos del botón → Estilos del frontend y cambia Carga de CSS del frontend de Estilo completo a Estilo mínimo. Esto permite que el CSS de tu tema anule los colores y las fuentes donde haya conflictos. Para una personalización completa, Sin estilo te da una base en blanco.
Preguntas frecuentes
¿Cuál es la diferencia entre Usar preajustes y Ajustes personalizados?
Los preajustes te ofrecen un conjunto de combinaciones de estilos listas para usar, por lo que un clic aplica un aspecto coordinado. Los ajustes personalizados desbloquean controles individuales para el color, el tamaño de fuente, el ancho del borde, el icono y los efectos al pasar el ratón, para que puedas ajustar todo manualmente.
¿Qué hace Fade visualmente?
En las páginas de producto y de tienda, al hacer clic en el botón de la lista de deseos aparece un pequeño mensaje de confirmación (un icono de marca y “Añadido a [nombre de la lista de deseos]”) que aparece gradualmente junto al botón, permanece unos dos segundos y luego desaparece gradualmente. El botón en sí permanece visible todo el tiempo. En la página del carrito, el botón Guardar carrito en lista de deseos se desvanece brevemente para confirmar la acción. No hay ventana emergente ni redirección de página.
¿Mis personalizaciones se mantendrán si cambio de tema?
Sí. Los estilos de los botones se guardan en la configuración del plugin, no en tu tema. Cambiar de tema no restablecerá el texto de las etiquetas, los colores ni las opciones de ubicación. Dicho esto, algunos temas anulan los estilos de los botones con su propio CSS, por lo que vale la pena comprobar la apariencia después de un cambio de tema.
¿Necesitas ayuda?
- Usuarios premium: Abrir un ticket de soporte
- Usuarios gratuitos: Visita nuestro foro comunitario
