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:
- Configuración del botón: etiqueta del botón de lista de deseos, la etiqueta que se muestra después de agregar un producto y los interruptores de activación/desactivación para plugins compatibles como Quick View for WooCommerce (estos solo aparecen mientras ese plugin está activo).
- Estilo del frontend: la configuración de Carga de CSS del frontend que controla cuánto del CSS del plugin se carga en tu tienda (cubierto en la sección 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 tienda: ubicación y estilo del botón en los listados de productos.
- Página de carrito: estilo y etiqueta para el botón “Guardar carrito en lista de deseos”.
Después de cambiar cualquier ajuste en esta pestaña, haz clic en Guardar Cambios.
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.
Acción del botón de lista de deseos seleccionada controla lo que sucede cuando un comprador hace clic en el botón de un producto que ya está en su lista de deseos. El valor predeterminado es Eliminar de la lista de deseos, que saca el producto con un solo clic. Cámbialo a Ver lista de deseos para enviar al comprador a su página de lista de deseos en su lugar.
Si un plugin compatible como Quick View for WooCommerce está activo, esta sección también muestra un interruptor de activación/desactivación para él. Consulta Uso del botón con Quick View for WooCommerce a continuación.
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 Arriba a la derecha de la imagen del producto, pero también puedes elegir Arriba a la izquierda de la imagen del producto, Encima del botón Añadir al carrito, Debajo del botón Añadir al carrito, Alineado con el botón Añadir al carrito, Encima del título del producto o Debajo del título del producto. Para ocultar el botón de la lista de deseos en las páginas de productos individuales por completo, elige No mostrar.
Elegir Alineado con el botón Añadir al carrito revela un campo Espaciado del botón, la separación en píxeles entre el botón Añadir al carrito y el botón de la lista de deseos. Por defecto es 16px y se puede configurar de 0 a 60px. Tu valor se aplica en todos los dispositivos. En pantallas táctiles, una separación inferior a 8px se eleva a 8px, para que los clientes no toquen el botón incorrecto.
⚠️ Productos sin precio o sin stock: A partir de la versión 1.0.7, las ubicaciones Encima del botón Añadir al carrito, Debajo del botón Añadir al carrito e En línea con el botón Añadir al carrito también muestran el botón de lista de deseos en productos que no tienen precio, están sin stock 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 recurre a un lugar cercano en el resumen del producto en lugar de desaparecer.
El siguiente ajuste es Modo de configuración. Elija Usar preajustes para seleccionar entre combinaciones de estilos listas para usar, Configuración personalizada para definir usted mismo los colores, bordes y texto, o Predeterminado del tema para heredar la apariencia de botón propia de su tema activo.
Establecer colores y bordes del botón
Los campos de color y borde aparecen en Personalizar el botón de la lista de deseos en la página del producto, y solo cuando Modo de configuración está establecido en Configuración personalizada. Cada campo de color abre un selector de color.
| Campo | Lo que cambia | Por defecto |
|---|---|---|
| Color del texto del botón | El color del texto del botón. Se aplica a los tipos de botón que muestran texto. | #1F2937 |
| Color del texto del botón al pasar el ratón | El color del texto mientras un comprador pasa el ratón sobre el botón. | #DC2626 |
| Color de fondo del botón | El color de relleno detrás del botón. | #FFFFFF |
| Color de fondo al pasar el ratón | El color de relleno mientras un comprador pasa el ratón sobre el botón. | #F9FAFB |
| Color del borde del botón | El color del borde del botón. | #E5E7EB |
| Color del borde al pasar el ratón | El color del borde mientras un comprador pasa el ratón sobre el botón. | #DC2626 |
| Ancho del borde del botón | El grosor del borde en píxeles, de 0 a 5. | 1 |
| Radio del borde del botón | Qué tan redondeadas son las esquinas del botón, en píxeles, de 0 a 50. Use 0 para esquinas cuadradas. | 4 |
| Relleno vertical del botón | El espacio arriba y abajo del contenido del botón, en píxeles, de 0 a 30. | 3 |
| Relleno horizontal del botón | El espacio a la izquierda y a la derecha del contenido del botón, en píxeles, de 0 a 40. | 8 |
No todos los campos se aplican a todos los tipos de botón. El color y el ancho del borde solo se muestran en Solo texto y los tres tipos de botón Píldora. Los colores de fondo, el radio del borde y el relleno no se aplican a Solo icono, Icono sólido o Icono mínimo.
Elige el tipo de botón y el estilo del texto
Tres campos más se encuentran en la parte inferior de la configuración personalizada. Tamaño del texto del botón establece el tamaño del texto del botón en píxeles, de 10 a 24 (predeterminado 14). Estilo del texto del botón cambia el texto entre Normal (predeterminado) y Cursiva.
Tipo de botón decide qué muestra el botón y cómo se ve. El valor predeterminado es Icono y texto mínimos. Las opciones son:
- Solo texto
- Solo icono
- Icono y texto
- Píldora de icono y texto
- Icono sólido
- Icono sólido y texto
- Píldora de icono sólido y texto
- Icono mínimo
- Icono mínimo y texto
- Píldora de icono mínimo y texto
Solo icono, Icono sólido e Icono mínimo muestran solo el icono, por lo que el texto, el fondo, el borde y los campos de relleno no tienen nada que cambiar para ellos. Para elegir la forma del icono en sí, consulta Elegir un icono de botón a continuación.
Consejo Pro: Con Configuración personalizada seleccionada, usa la vista previa en vivo para ver cómo se ve tu botón en los estados normal y de pasar el ratón antes de guardar tus 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 es la esquina superior derecha de la imagen del producto, pero también puedes colocarlo en la esquina superior izquierda, encima o debajo del botón Añadir al carrito, o encima o debajo del título del producto. Las posiciones en las esquinas superiores se adaptan mejor a las páginas de cuadrícula. Para ocultar el botón de lista de deseos en las páginas de tienda, categoría y archivo, elige No mostrar.
Al igual que la sección de Página de producto, tiene la opción Modo de configuración. Elige Usar preajustes para una configuración rápida con combinaciones listas para usar, 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, o Predeterminado del tema para heredar la apariencia del botón de tu tema activo. Los campos personalizados coinciden con los de la Página de producto, excepto que Tipo de botón se llama Estilo de botón aquí.
Consejo Pro: Para una página de tienda elegante y moderna, selecciona Configuración personalizada, establece Estilo del botón en Solo icono y usa una ubicación en la esquina superior. Ahorra espacio manteniendo visible la opción de lista de deseos.
Uso del botón con constructores de páginas
Si creas el diseño de tu tienda o categoría con los widgets Loop Grid o Loop Carousel de Elementor Pro, el botón de la lista de deseos se renderiza automáticamente dentro de cada tarjeta de producto, utilizando la ubicación que estableciste anteriormente en Página de tienda. No se necesita una configuración separada, pero Elementor Pro debe estar activo.
Las cuadrículas y carruseles de productos de Premium Addons for Elementor también obtienen el botón automáticamente, siguiendo la ubicación de tu Página de tienda. Arriba a la derecha de la imagen del producto y Arriba a la izquierda de la imagen del producto muestran el botón en la parte superior del área de detalles de la tarjeta en lugar de en la imagen. Consulta Cómo añadir el botón de la lista de deseos con el widget de Elementor para obtener más detalles.
Si estás colocando el botón tú mismo con los widgets o módulos de tu constructor en lugar de estas configuraciones, consulta la guía dedicada para tu constructor: Cómo añadir el botón de lista de deseos con el widget de Elementor, Cómo añadir la lista de deseos a los diseños de Divi Builder, o Cómo añadir la lista de deseos a una página con el Constructor UX de Flatsome.
Uso del botón con Blocksy
Si tu tienda utiliza el tema Blocksy o un tema hijo de Blocksy, no necesitas CSS personalizado. SaveTo Wishlist carga su propio estilo de Blocksy automáticamente, por lo que el botón encaja en las páginas de tienda, archivo y producto individual de Blocksy.
En la Página de Tienda, cada ubicación funciona así en Blocksy:
- Arriba a la derecha de la imagen del producto, la opción predeterminada, es la que mejor encaja, porque Blocksy utiliza la esquina superior izquierda de la tarjeta para su etiqueta de Oferta.
- Arriba a la izquierda de la imagen del producto mueve el botón hacia abajo, debajo de una etiqueta de Oferta, sin stock o personalizada de Blocksy, para que no la cubra. Si la etiqueta es muy grande, o muestras más de una etiqueta en esa esquina, usa Arriba a la derecha de la imagen del producto.
- Encima del Título del Producto y Debajo del Título del Producto muestran ambos el botón entre la imagen del producto y el título, porque Blocksy renderiza su propio título. Encima del Botón Añadir al Carrito lo muestra directamente debajo del título. Debajo del Botón Añadir al Carrito lo muestra después del botón Añadir al Carrito. Los cuatro siguen la alineación de tu tarjeta Blocksy: izquierda, centro o derecha.
En la Página de Producto, las siete ubicaciones funcionan. En línea con el Botón Añadir al Carrito se sitúa al lado del botón Añadir al Carrito en escritorio y se mueve debajo en pantallas estrechas. Arriba a la izquierda de la imagen del producto también se mueve hacia abajo debajo de una etiqueta en esa esquina, lo mismo que en la página de tienda.
Uso del botón con Quick View for WooCommerce
Si tu tienda utiliza Reno Quick View de ShapedPlugin (anteriormente Quick View for WooCommerce), el botón Guardar en lista de deseos también se muestra dentro de la ventana emergente de vista rápida. Los clientes pueden guardar un producto sin abrir su página de producto. Esto requiere SaveTo Wishlist Lite 1.1.7 o posterior.
La ventana emergente utiliza la ubicación y el estilo de tu Página de Producto, por lo que no hay nada adicional que configurar. Algunas cosas funcionan de manera un poco diferente en la ventana emergente:
- Arriba a la derecha de la imagen del producto y Arriba a la izquierda de la imagen del producto muestran el botón encima del título del producto, no en la imagen.
- En un producto variable, el botón sigue la variación que el cliente elige en la ventana emergente.
- Si la ubicación de la Página de Producto está en No mostrar, la ventana emergente tampoco muestra el botón.
Para mantener el botón fuera de la ventana emergente pero dejarlo en tus páginas de producto:
- Ve a SaveTo Wishlist → Ajustes → Ubicación y estilos del botón → Ajustes del botón.
- Desactiva Mostrar en Vista Rápida para WooCommerce.
- Haz clic en Guardar cambios.
El interruptor está activado por defecto. Solo aparece mientras Vista Rápida para WooCommerce está activo.
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 del botón del carrito tiene como valor predeterminado "Guardar carrito en la lista de deseos". Puedes cambiarlo a algo más amigable como Guardar carrito para más tarde o ♥ Guardar mi carrito. El mismo estilo de botón, color, borde y opciones de texto disponibles en las páginas de producto y tienda se aplican aquí, por lo que puedes 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, Configuración personalizada para controlar tú mismo los colores, bordes y texto, o Predeterminado del tema para heredar la apariencia del botón de tu tema activo. Al igual que en la Página de tienda, Tipo de botón se llama Estilo de botón aquí.
Elegir un icono para el botón
Cambiar el Modo de Configuración a Ajustes Personalizados en la página de Producto, Tienda o Carrito revela un ajuste de Icono del Botón para esa página. Elige entre Corazón (predeterminado), Estrella, Marcador o Más, o selecciona Imagen Personalizada para revelar un cargador de Icono de Botón Personalizado. El botón sigue mostrando un corazón hasta que se sube una imagen.
La misma configuración personalizada también incluye Color del icono del botón y Color del icono al pasar el ratón (ambos #DC2626 por defecto), y Tamaño del icono del botón, de 12 a 40 píxeles (predeterminado 20). Los campos de color del icono están ocultos cuando eliges Imagen personalizada, porque no pueden cambiar una imagen cargada.
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 entre en conflicto. Prueba esto primero si el botón de la lista de deseos choca con tu tema. - Sin estilo: hereda los colores y las fuentes del tema activo. Descarta los colores y las 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, posiciones y CSS de diseño del botón del plugin se conservan en todos los modos.
Resumen
Usa Acción de Lista de Deseos (Ajustes → General) para controlar qué sucede después de hacer clic. Usa Ubicación y Estilos del Botón para establecer etiquetas, ubicación, colores y carga de CSS para cada página donde aparece el botón.
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.
Botón de lista de deseos que falta en la ventana emergente de vista rápida
Ve a SaveTo Wishlist → Ajustes → Ubicación y estilos del botón → Ajustes del botón y comprueba que Mostrar en Vista Rápida para WooCommerce esté activado. Luego, comprueba que la ubicación de Página de Producto no esté configurada como No mostrar. Si solo los compradores que no han iniciado sesión no pueden verlo, es probable que Desactivar lista de deseos para invitados en Ajustes → Opciones para invitados esté activado, lo que oculta el botón a los invitados en todas partes.
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
