Revisado por Instalas un plugin de lista de deseos en tu tienda Woostify y cargas la página de la tienda. El botón está en un lugar extraño. Abarrota el botón 'Añadir al carrito' o se oculta detrás de la imagen de un producto. A veces desaparece al pasar el ratón por encima de una tarjeta de producto.
Eso no es un pequeño problema cosmético. Un botón de Woostify wishlist que nadie puede encontrar es un guardado que nunca ocurre. Y un guardado que nunca ocurre es un comprador al que no puedes hacer volver.
Aquí están las buenas noticias: SaveTo Wishlist Lite se encarga del estilo en el momento en que detecta Woostify. Lo que no puede decidir por ti es dónde debe colocarse el botón.
Así que esta guía cubre ambas partes. Primero, lo que la integración hace por sí sola. Luego, las opciones de ubicación que tomarás para lograr un diseño sin fisuras, incluyendo dos posiciones específicas que querrás evitar.
Tabla de Contenidos
- Por qué la ubicación del botón de lista de deseos decide si los compradores guardan
- Lo que la integración de SaveTo Wishlist y Woostify realmente hace
- Qué necesitas antes de empezar
- Cómo configurar tus botones de Woostify Wishlist
- Las dos ubicaciones a evitar en Woostify
- Cómo confirmar que los estilos de Woostify se están cargando
- Las listas de deseos de invitados importan más que el estilo
- Directrices de Alcance y Compatibilidad
- Preguntas frecuentes: SaveTo Wishlist y Woostify
- Dale al botón de guardar un lugar donde vivir
Por qué la ubicación del botón de lista de deseos decide si los compradores guardan
Una lista de deseos solo vale la pena si los compradores la usan realmente, y la ubicación juega un papel importante. La evidencia de la industria destaca cuánto margen hay para destacar con un gran diseño.
El benchmark de UX de páginas de producto del Instituto Baymard se actualizó en marzo de 2026. Encontró que el 52% de los principales sitios de comercio electrónico de escritorio tienen un rendimiento mediocre o peor en las páginas de producto. En móvil, esa cifra aumenta al 62%. El benchmark cubre 155 o más sitios y más de 30.000 puntuaciones calificadas manualmente.
Las listas de productos ofrecen una oportunidad aún mayor. El benchmark de Baymard encontró que el 80% de los sitios de comercio electrónico dejan un margen significativo para mejorar la usabilidad en las listas de productos. Esto significa que un diseño limpio e intencional distinguirá inmediatamente tu tienda.
Luego está la división por dispositivos. Adobe Analytics informó que el móvil generó el 56,4% de las transacciones en línea durante la temporada navideña de 2025, frente al 54,5% del año anterior. Probar tu ubicación tanto en pantallas de escritorio como móviles garantiza una experiencia fluida para todos los compradores.
🔍️ Una cosa que vemos repetidamente: un propietario de tienda elige una ubicación, la revisa una vez en un portátil y sigue adelante. Los problemas casi siempre aparecen en otro lugar. Normalmente en un archivo de categoría, en un producto variable o en un teléfono. Comprueba los tres antes de darlo por terminado.
¿Quieres una visión más amplia de los compradores que miran y se van? Nuestra guía sobre abandono de navegación en WooCommerce cubre ese patrón en detalle.
Lo que la integración de SaveTo Wishlist y Woostify realmente hace
La integración funciona automáticamente como una hoja de estilos de compatibilidad ligera, manteniendo tu tienda rápida y ahorrándote tener que rebuscar en complejas pantallas de configuración.
SaveTo Wishlist Lite 1.1.1 comprueba el identificador de plantilla activa de WordPress. Cuando lee exactamente woostify, el plugin carga una hoja de estilos adicional. Esa hoja de estilos se sitúa encima de la hoja de estilos base de frontend que hayas seleccionado. Luego ajusta la apilamiento, la alineación y el espaciado para que el botón encaje en el marcado de Woostify.
Aquí tienes lo que cambia y lo que deliberadamente deja igual.
| Contexto | Lo que ajusta la hoja de estilos de Woostify |
|---|---|
| Tienda y archivo, ubicaciones en la imagen | Eleva el contenedor del botón a z-index: 3, para que se apile sobre la imagen del producto |
| Tienda y archivo, ubicaciones en línea | Establece un diseño flex vertical con un margen superior de 10 píxeles. También coincide con la alineación izquierda, central y derecha de Woostify. |
| Resumen de producto único | Añade un margen superior de 12 píxeles para crear un espaciado limpio y equilibrado con el elemento anterior. |
| Colores, tipografía, bordes, tamaño | Conservado tal cual. Permanecen totalmente personalizables a través de la configuración de tu plugin y tema. |
Nuestra guía sobre la personalización del botón de lista de deseos cubre los ajustes que sí controlan la apariencia.
Lo que la integración no hace
La lista de cosas que la integración de SaveTo Wishlist y Woostify no hace es igualmente útil. No añade JavaScript, ni puntos finales REST, ni registros en la base de datos. No procesa datos de usuario. Tampoco registra ganchos de renderizado específicos de Woostify, ni añade una página de configuración de Woostify.
Dado que la integración se ejecuta automáticamente en segundo plano, no necesitarás buscar una pestaña de configuración dedicada de Woostify ni un interruptor. La detección es automática y ninguna configuración activa o desactiva la hoja de estilos de Woostify por sí sola.
Los temas hijos también están cubiertos. Ejecuta un tema hijo cuyo identificador principal siga siendo woostify, y la hoja de estilos se cargará de la misma manera. El propio identificador del tema hijo no se utiliza para la detección.
Incluso si una configuración personalizada impide la detección automática, tu sitio permanece completamente funcional. SaveTo Wishlist Lite recurre sin problemas a su hoja de estilos estándar para garantizar que tus botones sigan funcionando sin problemas.
Qué necesitas antes de empezar
Los requisitos son breves y cada uno es esencial para que la integración funcione.
| Componente | Requisito |
|---|---|
| SaveTo Wishlist Lite | 1.1.1 o posterior |
| WordPress | 5.8 o posterior, probado hasta 7.0 |
| PHP | 7.4 o posterior |
| WooCommerce | 4.0 o posterior, probado hasta 10.2 |
| Tema activo | Woostify, o un tema hijo basado en Woostify |
SaveTo Wishlist Lite verifica automáticamente que WooCommerce esté activo antes de inicializarse, manteniendo tu panel de control funcionando de manera fluida y segura.
Dos cosas que no necesitas: un plan de pago y una versión específica de Woostify. La hoja de estilos de compatibilidad se incluye en SaveTo Wishlist Lite, la versión gratuita. Además, el código no comprueba ninguna versión de Woostify, licencia o plugin complementario. Tampoco hay distinción entre la versión gratuita y Pro en el lado de Woostify.
Esto te proporciona una amplia compatibilidad entre diferentes versiones de Woostify. Siempre recomendamos realizar una comprobación visual rápida de tus páginas en tu versión de tema activa para asegurarte de que todo encaja como esperas.
Cómo configurar tus botones de Woostify Wishlist
La integración de Woostify funciona directamente, por lo que puedes centrarte por completo en seleccionar la ubicación que le dé a tu tienda el aspecto más pulido.
La ubicación es una de las palancas que cubrimos en nuestra guía de optimización de la conversión de listas de deseos.
Todo vive en una pantalla: SaveTo Wishlist → Ajustes → Ubicación y Estilos del Botón. Necesitarás permisos de administrador (manage_options) para acceder a esta pantalla, asegurando que la configuración de estilo de tu sitio permanezca segura.
Configura la ubicación de tu tienda y archivo
En Página de Tienda, abre el desplegable Ubicación del Botón. Este único control cubre tu página principal de tienda, las páginas de categorías de productos y otros archivos de productos. Se documenta que cinco opciones funcionan bien con las tarjetas de producto de Woostify.
Advanced Coupons tiene una excelente regla general para esto en su guía para optimizar un sitio de comercio electrónico: ¿puedes ver el botón desde el otro lado de la habitación?
- Parte superior derecha de la imagen del producto: La hoja de estilos apila el botón encima de la imagen.
- Parte superior izquierda de la imagen del producto: Mismo manejo que la esquina derecha. Elige la esquina que tus insignias de oferta no utilicen ya.
- Encima del título del producto: Se sitúa en el área de contenido de la tarjeta de Woostify y hereda la alineación de tu tarjeta.
- Debajo del título del producto: Se sitúa debajo del título, por lo que los títulos largos lo empujan hacia abajo en lugar de agobiarlo.
- Encima del botón Añadir al carrito: Mantiene la acción de guardar al lado de la acción de comprar sin competir con ella.
Las tres ubicaciones del área de contenido heredan la alineación de Woostify automáticamente. Configura tus tarjetas de producto con texto centrado y el botón se centra. Las tarjetas alineadas a la izquierda y a la derecha se comportan de la misma manera.
Configura la ubicación de tu producto individual
Debajo de Página de producto, encontrarás un segundo desplegable de Ubicación del botón. Las dos configuraciones funcionan de forma independiente, por lo que cambiar una no afecta a la otra.
Se documentan cuatro ubicaciones que funcionan bien en las páginas de producto de Woostify.
- Encima del botón Añadir al carrito: Pone la opción de guardar delante de los compradores antes de que se comprometan.
- Debajo del botón Añadir al carrito: El valor predeterminado de la propia pantalla de configuración, y recoge el margen superior de 12 píxeles.
- Encima del título del producto: Útil cuando el resumen de tu producto es largo y quieres que la acción de guardar sea visible pronto.
- Debajo del título del producto: Se sitúa con el bloque del título en lugar de los controles de compra.
Hay una quinta opción: Alineado con el botón Añadir al carrito. Siéntete libre de probar esta posición con tu diseño de producto personalizado para ver si se adapta al diseño de tu tema.
Ambos desplegables también tienen una opción de No mostrar. Elegirla evita que el gancho de renderizado del botón se registre en ese contexto. Es más limpio que ocultar el botón con CSS.
Elige cuántos estilos cargar
Aún en la misma pantalla, encuentra Estilo frontal y la configuración etiquetada como Carga de CSS frontal. Elige qué hoja de estilos base se carga. La hoja de estilos de Woostify se carga encima de la que elijas.
- Estilo completo: Utiliza los propios colores y fuentes del plugin. Este es el valor predeterminado de fábrica.
- Estilo mínimo: Permite que tu tema anule los colores y las fuentes.
- Sin estilo: Carga solo la posición y hereda todo lo visual de Woostify.
Ya has ajustado la tipografía y los colores de Woostify? Entonces Minimal o Sin estilo suelen dar un resultado más nativo. Es importante destacar que las reglas de diseño de Woostify permanecen activas en los tres modos. No estás renunciando a la integración para obtener los colores del tema.
Cada modo carga un archivo de hoja de estilos diferente, por lo que tu elección también cambia lo que descarga el navegador. Si el peso del frontend te importa, nuestra prueba de velocidad del plugin de lista de deseos de WooCommerce mide lo que SaveTo Wishlist realmente añade a una página.
Las dos ubicaciones a evitar en Woostify
Para garantizar el diseño más limpio desde el primer momento, aquí tienes dos opciones de ubicación que querrás evitar para Woostify.
- En las páginas de tienda y archivo, evita Debajo del Botón Añadir al Carrito. Woostify renderiza esa fila dentro de un área animada de altura fija en las tarjetas de producto de escritorio. El botón de la lista de deseos puede quedar recortado allí, ocultando parte o la totalidad.
- En las páginas de producto individual, evita las dos ubicaciones sobre la imagen. Woostify utiliza una galería de productos personalizada y los botones de la esquina superior no se muestran de forma fiable dentro de ella.
Estas recomendaciones son específicas del contexto. Las esquinas de la imagen quedan geniales en las tarjetas de tienda, pero no son ideales para las galerías de productos, mientras que Debajo del Añadir al Carrito funciona mejor en las páginas de producto individual. Configurar cada contexto de forma independiente mantiene tus botones con un aspecto limpio en todas las plantillas.
⚙️ Paso de Configuración Importante: SaveTo Wishlist Lite 1.1.1 no aplica las opciones de ubicación automáticamente al activarse. Si se dejan sin tocar, ambos contextos utilizan los valores predeterminados: Esquina Superior Derecha de la Imagen del Producto en las páginas de producto y Debajo del Botón Añadir al Carrito en las páginas de tienda. En Woostify, actualizar estos valores predeterminados asegura que tus botones se alineen perfectamente con el diseño del tema.
La corrección lleva segundos: Abre ambos menús desplegables de ubicación, selecciona las opciones recomendadas y pulsa Guardar, incluso si los valores en pantalla ya parecen correctos. Guardar escribe las opciones en la base de datos y elimina las conjeturas.
Cómo confirmar que los estilos de Woostify se están cargando
Dado que no hay una configuración que comprobar, la verificación se realiza en el navegador. Lleva aproximadamente un minuto.
- Confirma que Woostify, o un tema hijo de Woostify, está activo en Apariencia → Temas.
- Carga cualquier página del frontend y abre las herramientas de desarrollador de tu navegador.
- Busca en el código fuente de la página
savetowishlist-woostify.css. Ese archivo es la integración. - Comprueba el orden. Debe cargarse después de la hoja de estilos principal de frontend de SaveTo Wishlist, ya que depende de ella.
- Inspecciona un botón. Con una ubicación en esquina, el contenedor debería resolverse a
z-index: 3. - En un resumen de producto individual, ese contenedor debería tener un margen superior de 12 píxeles.
Si el archivo no aparece, vuelve a comprobar el identificador de tu tema. La detección coincide exactamente con woostify, por lo que un tema que haya sido renombrado o bifurcado de ese identificador no activará la hoja de estilos.
Dado que la detección se ejecuta silenciosamente en segundo plano sin ventanas emergentes para el administrador, una rápida comprobación en las herramientas de desarrollador confirma que sus activos se cargan perfectamente.
¿Trabajando más profundamente en el código? Nuestra guía de la API REST de la lista de deseos cubre el acceso programático.
Las listas de deseos de invitados importan más que el estilo
Una configuración hace más por su tasa de guardado que cualquier decisión de estilo. Es si los compradores que no han iniciado sesión pueden usar el botón o no.
El control es Deshabilitar lista de deseos para invitados, y está desactivado por defecto. Eso significa que los invitados pueden guardar. Actívalo y SaveTo Wishlist Lite deja de registrar sus ganchos de botón de tienda y producto para visitantes que no han iniciado sesión. El botón no aparece en absoluto.
Recomendamos encarecidamente mantener esta configuración predeterminada habilitada. El análisis comparativo de páginas de productos de Baymard encontró que el 89% de los sitios no hacen que las funciones de guardado sean fácilmente accesibles para los invitados, lo que significa que tiene una gran oportunidad de destacar. Mientras tanto, el 21% de los compradores encuestados dicen que dependen de las funciones de guardado. Esa brecha es la oportunidad.
La misma lógica impulsa el pago de invitados de WooCommerce: hacer que las acciones clave sean fluidas para los invitados aumenta la participación y las conversiones.
La integración de Woostify no se ramifica según el estado de inicio de sesión. Los invitados y los clientes registrados obtienen las mismas ubicaciones y las mismas reglas de diseño. No hay un estilo separado para invitados que configurar.
Directrices de Alcance y Compatibilidad
La hoja de estilos se dirige al marcado estándar de WooCommerce y Woostify. Donde su tienda se desvía de ese marcado, las reglas dejan de coincidir.
- Constructor de páginas y cuadrículas de productos de bloques: Diseñado para el marcado de tarjetas Woostify estándar; las cuadrículas de bloques personalizadas deben verificarse visualmente.
- Interfaces de vista rápida: Utiliza la colocación estándar de botones; revise el diseño de su modal para asegurar la alineación correcta.
- Bucles de productos personalizados: Un bucle construido en una plantilla personalizada queda fuera del alcance probado.
- Módulos premium de Woostify y plugins complementarios: No se ha establecido compatibilidad para estos.
- Comportamiento de la página del carrito: Los diseños del carrito se manejan por separado y no se ven afectados por esta integración específica de Woostify.
Esta hoja de estilos se centra específicamente en los diseños principales de la lista de deseos en SaveTo Wishlist Lite. Si utiliza extensiones avanzadas (como WooCommerce Wishlist Pro o las funciones del Complemento de registro de regalos), una revisión visual rápida asegura que todo se renderice según lo previsto.
Mientras que las funciones principales se someten a pruebas automatizadas continuas, el estilo de tema personalizado se verifica mejor con una rápida comprobación visual en su tienda en vivo.
Los diseños personalizados y los tipos de productos especiales (como artículos agotados o no comprables) simplemente merecen una rápida comprobación visual en su tienda en vivo para asegurarse de que el botón se renderice exactamente donde lo desea.
¿Su tienda depende de alguno de los contextos no cubiertos? Nuestra guía de integración de tablas de productos muestra cómo se maneja un contexto de diseño diferente.
Preguntas frecuentes: SaveTo Wishlist y Woostify
¿Necesito activar la integración de Woostify?
No. No existe una página de configuración de Woostify, ni un interruptor, ni una opción que controle la hoja de estilos por sí sola. SaveTo Wishlist Lite comprueba el identificador de la plantilla activa al cargar los recursos del frontend. Si lee woostify, la hoja de estilos se pone en cola automáticamente.
Funciona con un tema hijo de Woostify?
Sí. La detección se basa en el identificador de la plantilla padre, no en el identificador del tema hijo. Siempre que el padre siga siendo woostify, la hoja de estilos de compatibilidad se carga normalmente.
¿Necesito SaveTo Wishlist Pro para esto?
No. La hoja de estilos de compatibilidad de Woostify se incluye en SaveTo Wishlist Lite, la versión gratuita, a partir de la versión 1.1.1. Los planes de pago añaden análisis de la lista de deseos, alertas de bajada de precios y alertas de reposición de stock. Ninguna de estas opciones es necesaria para la compatibilidad con el diseño de Woostify.
¿Qué versión de Woostify es compatible?
SaveTo Wishlist Lite es compatible automáticamente con las versiones actuales de Woostify mediante la identificación de plantillas, lo que te da total flexibilidad ante las actualizaciones del tema. Siempre recomendamos revisar visualmente la versión activa de tu tema al ajustar los diseños.
Dale al botón de guardar un lugar donde vivir
La integración de Woostify está diseñada para ser ligera, rápida y sin esfuerzo. Elimina la fricción del diseño para que tus botones de guardar parezcan una parte natural y nativa de tu tema, funcionando silenciosamente en segundo plano sin añadir hinchazón innecesaria.
Todo lo que queda es elegir las ubicaciones que mejor destaquen tus productos y se adapten al estilo de tu tienda.
- Confirma los requisitos y que Woostify es la plantilla activa (lo que necesitas).
- Abre ambos desplegables de ubicación y guárdalos explícitamente, incluso si parecen correctos (cómo configurar).
- Selecciona las posiciones de diseño recomendadas para los archivos de la tienda y las páginas de productos individuales (ubicaciones a evitar).
- Comprueba que la hoja de estilos de compatibilidad se está cargando para verificar la configuración de tu tema (cómo confirmar).
- Mantén habilitadas las listas de deseos para invitados para maximizar los guardados de los compradores (listas de deseos para invitados).
- Revisa las cuadrículas del constructor de páginas, las vistas rápidas y los bucles personalizados en tu sitio en vivo (límites).
Los botones de tu lista de deseos de Woostify deberían parecer diseñados junto con tu tema, no añadidos después. Nuestra guía de configuración de Woostify repasa la pantalla de configuración. O compara lo que incluye cada plan en la página de precios de SaveTo Wishlist.
