La página de tu lista de deseos suele ser la última parada de un cliente antes de decidirse a comprar. Si esa página parece un plugin genérico que desentona con los colores y fuentes de tu marca cuidadosamente elegidos, puede crear una "desconexión" que daña la confianza.
Por defecto, la página de la lista de deseos utiliza una combinación de colores azules que no siempre coincide con todos los temas de WordPress. Los ajustes de Personalización del estilo de la página de lista de deseos de SaveTo Wishlist te permiten cambiar la tipografía y los colores de la página de la lista de deseos para que coincida con la marca de tu tienda, sin necesidad de escribir ningún CSS.
Esta guía detalla la configuración de estilo disponible y cómo aplicarla.
💡 Nota:
Estos ajustes afectan específicamente a la página principal de la lista de deseos (donde los clientes ven sus artículos guardados) en lugar de a los botones "Añadir a la lista de deseos" que se encuentran en las páginas de los productos.
🔗 Recurso externo:
Si no estás seguro de qué colores usar, te recomendamos consultar Adobe Color para obtener inspiración sobre paletas accesibles.
Requisitos previos
Antes de empezar, asegúrate de tener:
- SaveTo Wishlist Lite instalado y activado en tu tienda
- Una página de lista de deseos ya configurada (el plugin crea una automáticamente al activarse)
Paso a paso: Diseña tu página de lista de deseos personalizada
1. Localiza los ajustes de estilo
Todas tus herramientas de diseño están agrupadas para facilitar el acceso.
- Ve a SaveTo Wishlist → Ajustes.
- Haz clic en la pestaña Página de lista de deseos y desplázate hacia abajo hasta la sección Estilos.
2. Personaliza encabezados y títulos
El encabezado es lo primero que ven tus clientes. Haz que destaque:
- Tamaño y color del título del encabezado: Ajusta el Tamaño del título del encabezado y el Color del título del encabezado para que coincidan con las etiquetas H1 o H2 principales de tu sitio.
- Tamaño y color del texto del encabezado: Controla el subtexto o el área de descripción para asegurarte de que sea legible y coincida con el color de la fuente de cuerpo de tu marca.
3. Diseña la tabla de la lista de deseos
Aquí es donde residen los datos del producto. Ahora puedes ajustar el aspecto "técnico" de la lista:
- Tamaño del texto de las columnas de la tabla: Cambia el tamaño del texto de los encabezados como "Nombre del producto" o "Precio".
- Tamaño del texto de las filas de la tabla: Ajusta el tamaño de fuente de los detalles del artículo dentro de la lista para una mejor legibilidad en escritorio y móvil.
4. Diseña el modal emergente
Si utilizas la acción emergente, asegúrate de que la ventana coincida con la estética de tu sitio:
- Tamaño y color del título emergente: Establece el tamaño de fuente y el color del título de tu ventana emergente.
- Tamaño y color del texto emergente: Utiliza estos controles para asegurarte de que las instrucciones sean claras.
- Botones Guardar y Cancelar emergentes: Utiliza los selectores de color para los botones Guardar y Cancelar.
💡 Nota:
Utiliza el color principal de tu marca para el botón Guardar, ya que atrae la atención hacia la acción.
5. Estiliza los botones
Ajusta el tamaño y los colores de los botones en la página de la lista de deseos:
- Tamaño del texto del botón: Haz que tu botón “Añadir a la cesta” sea más grande o más pequeño para que encaje con tu lenguaje de diseño.
- Color del texto del botón: Asegura un alto contraste (por ejemplo, texto blanco sobre un fondo oscuro) seleccionando un color personalizado.
- Color de fondo del botón: Cambia el azul predeterminado por el color principal de tu marca.
6. Previsualiza y guarda
- Haz clic en Guardar Cambios en la parte inferior de la página.
- Abre tu página de lista de deseos en una nueva ventana de incógnito para ver los cambios exactamente como los verán tus clientes.
✨ Consejo extra: Coincidencia de los enlaces de tu lista de deseos
Por defecto, los enlaces de tu página de Lista de Deseos (como los títulos de los productos) suelen heredar la configuración global de enlaces de tu tema. Si deseas cambiar estos colores para que coincidan mejor con tus nuevos estilos de botón, normalmente puedes encontrar esta configuración en tu Panel de WordPress en Apariencia → Personalizar → Tipografía → Color de enlace / Acento.
💡 Nota:
¡Cada tema se construye de forma diferente! Dependiendo del tema que tengas instalado, esta configuración también podría encontrarse en “Colores globales” o “Estilos de botón y enlace”.
Dejar que tu tema controle el estilo
La configuración de Estilo anterior te da control a través de las propias opciones de color y fuente del plugin. Pero si prefieres dejar que tu tema dicte todo eso, o si el CSS de tu tema ya está haciendo el trabajo pesado, puedes indicarle a SaveTo Wishlist que se aparte.
Ve a SaveTo Wishlist → Ajustes → Colocación y estilos de botones → Estilos del frontend. Allí encontrarás la configuración de Carga de CSS del frontend con tres opciones:
- Estilo completo: usa los colores y fuentes del plugin (predeterminado). El plugin carga su hoja de estilos completa de colores y fuentes. Esta es la experiencia estándar.
- Estilo mínimo: deja que tu tema anule los colores y fuentes. La hoja de estilos todavía se carga, pero no se usa
!importanten propiedades decorativas como color, fondo y borde, por lo que el CSS de tu tema puede ganar la cascada. - Sin estilo: hereda colores y fuentes del tema activo. Los tamaños, posiciones y diseño de los botones se conservan en todos los modos. Solo cambian los estilos visuales.
💡 Nota:
Los estilos de administrador no se ven afectados por esta configuración. Solo controla cómo se carga la hoja de estilos del frontend para tus clientes.
Antes y después: Coincidencia de la página de lista de deseos con tu marca
A continuación, se muestra una comparación del antes y el después que muestra cómo se puede personalizar la página de lista de deseos para que coincida mejor con el tema de tu tienda.
Cambiar entre vista de tabla y cuadrícula
Tus clientes no están limitados a un solo diseño. En la página de lista de deseos, verán un selector de vista junto a la barra de búsqueda. Un clic cambia entre el diseño de tabla estándar y un diseño de cuadrícula (mosaico).
La vista de cuadrícula muestra los artículos de la lista de deseos como mosaicos de productos receptivos. El diseño se adapta al ancho de la pantalla, mostrando una sola columna en pantallas móviles pequeñas y aumentando a dos, luego tres y finalmente cuatro columnas en las pantallas más anchas. Cada mosaico muestra la imagen del producto, el nombre, el precio, el estado del stock, la cantidad y un botón Añadir al carrito. Todas las acciones habituales de los artículos (el menú de tres puntos) siguen disponibles.
La vista que elija un cliente se guarda en su navegador, por lo que seguirá ahí la próxima vez que visite desde el mismo dispositivo.
Solución de problemas de tu diseño
Mis cambios no se muestran en el sitio
Esto se debe casi siempre al almacenamiento en caché. Si utilizas un plugin como WP Rocket, LiteSpeed Cache o una CDN como Cloudflare, asegúrate de Borrar/Purger la Caché después de guardar tus estilos. También puedes consultar la guía oficial de WooCommerce sobre almacenamiento en caché.
El estilo de fuente no coincide exactamente con mi tema
El plugin utiliza la familia de fuentes heredada de tu tema por defecto. Estos ajustes te permiten cambiar el tamaño y el color. Si la familia de fuentes en sí se ve mal, asegúrate de que la CSS global de tu tema se esté cargando correctamente.
Los colores se ven diferentes en el móvil
Comprueba si tu teléfono tiene activado el "Modo Oscuro", ya que algunos navegadores intentan invertir los colores automáticamente. Los colores que establezcas en la configuración de estilos están diseñados para anular la mayoría de estos ajustes automáticos del navegador.
Preguntas frecuentes
➤ ¿Necesito saber CSS para cambiar estos colores?
¡En absoluto! Hemos creado una interfaz fácil de usar con selectores de color y deslizadores, para que nunca tengas que tocar una línea de código.
➤ ¿Estos ajustes ralentizarán mi página?
No. Estos estilos son ligeros y no afectarán notablemente la carga de la página.
¿Necesitas ayuda?
- Usuarios premium: envía un ticket de soporte y nuestro equipo te ayudará.
- Usuarios gratuitos: publica en el foro de soporte de WordPress.org.
