Cómo usar plantillas predefinidas para estilizar los botones de la lista de deseos

¿Tu tienda necesita una renovación de diseño, pero no tienes tiempo para retocar manualmente cada píxel? Elegir el aspecto adecuado para tus botones de Añadir a la lista de deseos no debería ser una tarea que consuma tiempo.

Con los ajustes del Modo de Configuración en SaveTo Wishlist, puedes estilizar profesionalmente tus botones de lista de deseos en segundos. Ya sea que desees usar Plantillas de Estilo instantáneas o sumergirte en Ajustes Personalizados, ahora tienes control total sobre cómo aparecen tus botones en las páginas de Producto, Tienda y Carrito.

Al final de esta guía, sabrás cómo alternar entre los modos de diseño y darle a tu tienda un aspecto coherente y profesional que coincida perfectamente con tu marca.

Requisitos previos

• SaveTo Wishlist Lite instalado y activo.
• Acceso de administrador a tu panel de WordPress.
• WooCommerce instalado y configurado.

¿Por qué usar ajustes preestablecidos de estilo de botón?

La velocidad y la consistencia son vitales para cualquier tienda WooCommerce en crecimiento. Cuando tus botones se ven geniales y funcionan de manera idéntica en todas las páginas, genera confianza con tus compradores.

Los ajustes preestablecidos ahorran tiempo. Puedes cambiar la apariencia de los botones al instante sin necesidad de CSS manual ni selección de colores. Y como cada ubicación de página es independiente, puedes aplicar diferentes diseños a las páginas de Producto, Tienda y Carrito por separado.

💡 Consejo:
Si prefieres un aspecto completamente único, ¡aún puedes usar una plantilla como "base" y luego personalizar los colores!

1. Accede a las pestañas de estilo de botón

Hemos organizado la configuración en categorías fáciles de administrar para que puedas estilizar cada parte de tu tienda individualmente.

1. Navega a SaveTo Wishlist → Ajustes.
2. Ve a la pestaña Ubicación y Estilos de Botones.
3. Aparecen tres secciones: Producto, Tienda y Carrito. Haz clic en la que deseas editar.

2. Elige tu modo de configuración

Cada ubicación tiene un selector de radio Modo de Configuración. Aquí es donde decides cuánto control deseas:

1. Selecciona Usar Plantillas para ver la galería de plantillas de botones de lista de deseos.
2. Alternativamente, selecciona Ajustes Personalizados si prefieres omitir las plantillas y usar los selectores de color manuales.

3. Aplica una plantilla predefinida

Dentro de cada sección, selecciona la pestaña Usar Plantillas debajo de la opción Modo de Configuración.

1. Explora las plantillas disponibles (por ejemplo, "Clásico Rojo", "Minimalista Oscuro" o "Morado Moderno").
2. Haz clic en una plantilla para aplicarla. La herramienta actualizará automáticamente la forma, el borde y el diseño predeterminado del botón.

4. Ajusta tus colores

Si eliges Ajustes Personalizados, el selector de plantillas se reemplaza por controles de diseño individuales. Úsalos para construir tu botón desde cero o personalizar una "base" de plantilla.

1. Tipografía y Tamaño: Establece el Tamaño del Texto y el Tamaño del Icono exactos.
2. Selectores de color: Elige manualmente tu Color de fondo, Color de texto y Color de icono.
3. Borde y forma: Ajusta el ancho del borde, el color y la redondez de las esquinas.
4. Icono del botón: Elige el glifo que usa el botón. Las opciones son Corazón, Estrella, Marcador, Más e Imagen personalizada. Corazón es el predeterminado, y el tipo de botón todavía controla el diseño y el grosor, por lo que esto solo cambia la forma.
5. Icono de botón personalizado: Aparece una vez que eliges Imagen personalizada y te permite subir tu propio glifo. Elegir Imagen personalizada también oculta la configuración de color del icono, ya que no se pueden aplicar a una imagen subida. El botón sigue mostrando un corazón hasta que realmente elijas una imagen, así que sube una para completar el cambio.
6. El selector de color permanece abierto mientras trabajas, lo que permite comparar rápidamente diferentes tonalidades sin cerrar el menú repetidamente.

5. Aplica estilos independientes

¡Recuerda que puedes mezclar y combinar estilos para diferentes contextos!

1. Utiliza un botón grande Personalizado en tu Página de producto para que sea la llamada a la acción principal.
2. Aplica el Ajuste preestablecido Minimalista en tu Página de tienda para mantener tu cuadrícula de productos limpia y ordenada.
3. Selecciona el Ajuste preestablecido Moderno en la Página del carrito para animar a los clientes a guardar artículos para más tarde en lugar de abandonarlos.

6. Guarda y revisa tus cambios

1. Haz clic en Guardar Cambios en la parte inferior de la página.
2. ¡Visita tu tienda y una página de producto para ver tus nuevos estilos de botón en acción!

Solución de problemas comunes

⚠︎ El ajuste preestablecido no cambió el color de mi botón.
Los ajustes preestablecidos controlan principalmente la estructura y la plantilla del botón. Si previamente estableciste un "Color personalizado", ese color se reemplazará. Actualiza la configuración del selector de color directamente desde la pestaña secundaria Configuración personalizada para asegurar que los colores de tu marca se apliquen a la nueva plantilla.

⚠︎ El botón se ve diferente en mi teléfono móvil.
Algunos temas de WordPress tienen "Estilos globales" muy potentes que intentan anular los botones del plugin. Si tu botón se ve "encajonado" o la fuente es demasiado pequeña, prueba un ajuste preestablecido diferente o revisa la configuración de botones de tu tema.

Si el diseño de tu página no se actualiza después de guardar, borra la caché de tu sitio. Para más información, consulta la guía oficial de WooCommerce sobre cómo borrar cachés.

Preguntas frecuentes

¿Cuándo debo usar el modo Preestablecido en lugar del modo Personalizado?
Usa el modo Preestablecido si deseas un diseño “bueno” garantizado rápidamente. Usa el modo Personalizado si tu marca utiliza colores no estándar o si necesitas que el botón tenga un tamaño muy específico.

¿Cambiar el ajuste preestablecido de la Página de Tienda afecta a la Página de Producto?
No. Cada ubicación de página (Producto, Tienda, Carrito) es 100% independiente, por lo que puedes ajustar cada área de tu tienda por separado.

¿Seleccionar un nuevo ajuste preestablecido eliminará mis colores personalizados anteriores?
Sí, si confirmas el cambio, tu configuración actual será reemplazada por los estilos predeterminados del ajuste preestablecido seleccionado. Después de aplicar el ajuste preestablecido, aún puedes actualizar los colores desde la pestaña secundaria Configuración personalizada.

Qué hacer a continuación

Los ajustes preestablecidos mantienen el estilo de los botones consistente en toda tu tienda sin editar colores manualmente, y cada ubicación de página permanece independiente para que puedas ajustarlas por separado.

Una vez que los botones se vean bien, puedes cambiar lo que sucede cuando un cliente hace clic en uno. Establece la acción del botón desde la sección Acción de la lista de deseos de la pestaña General, descrito en Cómo habilitar las notificaciones de desvanecimiento “Añadir a la lista de deseos”.