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 choca con los controles propios del tema. En algunos diseños se recorta dentro de la tarjeta del producto.
Eso no es un pequeño problema cosmético. Un botón de lista de deseos de Woostify 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 por ti en el momento en que detecta Woostify. Lo que no puede decidir por ti es dónde debe ir el botón.
Así que esta guía cubre ambas partes. Primero, lo que hace la integración por sí sola. Luego, las opciones de ubicación que elegirás para conseguir un diseño impecable, 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 lista de deseos de Woostify
- 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 experiencia de usuario en 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.
Los listados de productos ofrecen una oportunidad aún mayor. El benchmark de listas de productos de Baymard encontró que el 80% de los sitios de comercio electrónico tienen serios problemas en las listas de productos. Un diseño limpio y deliberado es una forma fácil de destacar.
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: el propietario de una tienda elige una ubicación, la comprueba 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 es una hoja de estilo de compatibilidad que se carga por sí sola. No hay ningún paso de configuración, ni una pantalla de ajustes que buscar.
SaveTo Wishlist Lite 1.1.1 comprueba el identificador de la plantilla activa de WordPress. Cuando lee exactamente woostify, el plugin carga una hoja de estilo adicional. Esa hoja de estilo se superpone a la hoja de estilo base del frontend que hayas seleccionado. Luego ajusta la pila, 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 estilo de Woostify |
|---|---|
| Tienda y archivo, ubicaciones sobre 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 del producto individual | 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 | Se conservan 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 de 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 comprueba que WooCommerce esté activo antes de iniciarse. Si WooCommerce no está activo, el plugin muestra un aviso de error en tu panel y no carga su controlador principal.
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 la versión de Woostify, la licencia ni el plugin complementario. Tampoco hay distinción entre gratuito y Pro en el lado de Woostify.
La otra cara de la moneda es que no se ha declarado ni probado ninguna versión de Woostify para esta integración. La detección se basa únicamente en el identificador del tema. Así que echa un vistazo rápido a tus páginas en cualquier versión de Woostify que ejecutes, y de nuevo después de actualizarla.
Cómo configurar tus botones de lista de deseos de Woostify
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 acceso de administrador (manage_options) para abrirla.
Configura la ubicación de tu tienda y archivo
En Página de la tienda, abre el desplegable Ubicación del botón. Este único control cubre tu página principal de la 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.
- Arriba a la izquierda de la imagen del producto: Mismo manejo que la esquina derecha. Elige la esquina que esté libre en el diseño de tu tarjeta.
- 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: Coloca la acción de guardar directamente encima de la acción de comprar.
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: En línea con el botón Añadir al carrito. La documentación no la recomienda para Woostify, y tampoco la descarta. Pruébala con tu propio diseño de producto antes de decidirte por ella.
Ambos menús desplegables también incluyen una opción No mostrar. Elegirla evita que el hook de renderizado del botón se registre en ese contexto. El botón nunca se crea en primer lugar, en lugar de crearse y luego ocultarse.
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.
Observa que el consejo cambia entre los dos contextos. Las esquinas de la imagen se recomiendan en las páginas de tienda y archivo, pero se desaconsejan en las páginas de producto individuales. Debajo del botón Añadir al carrito es al revés. Esa es exactamente la razón por la que los dos menús desplegables están separados, así que configura cada uno por su cuenta.
⚙️ Paso de configuración importante: SaveTo Wishlist Lite 1.1.1 no guarda las opciones de ubicación de la tienda y del producto al activarlo. Eso deja dos respuestas diferentes a la pregunta "¿cuál es el valor predeterminado?" La pantalla de configuración muestra Debajo del botón Añadir al carrito para ambos contextos. Pero mientras la opción aún no se ha guardado, el frontend vuelve a Arriba a la derecha de la imagen del producto para ambos. En Woostify, uno de esos dos valores es una ubicación a evitar en cada contexto, así que no asumas que la pantalla de configuración te muestra lo que los compradores ven realmente.
La solución lleva segundos: abre ambos menús desplegables de ubicación, elige la ubicación que deseas y pulsa Guardar, incluso si el valor en pantalla ya parece correcto. Guardar escribe la opción en la base de datos y, a partir de entonces, la pantalla y el frontend coinciden.
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.
- En una página de tienda o archivo que utilice una ubicación en esquina, inspecciona el botón. Su contenedor debería resolverse en
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.
Una coincidencia fallida es completamente silenciosa. Sin errores, sin advertencias, sin avisos de administrador. Las herramientas de desarrollador son el único lugar donde aparece, por eso esta comprobación vale la pena un minuto de tu tiempo.
¿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.
Lo dejaríamos desactivado. El análisis de páginas de producto de Baymard encontró que el 89% de los sitios que estudió no facilitan el acceso y uso de las funciones de guardar. En una encuesta separada de 1.193 compradores, el 21% dijo que confía en las funciones de guardar. Esa brecha es tu 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 rejillas de productos de bloques: Las reglas se dirigen al marcado de tarjetas estándar de Woostify. Las rejillas creadas en un constructor de páginas o ensambladas a partir de bloques de productos quedan fuera de eso, así que revísalas visualmente.
- Interfaces de vista rápida: No existe un manejo específico de Woostify para las modales de vista rápida, así que revísalas visualmente.
- 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: La página del carrito queda fuera de esta integración. Ningún código de carrito específico de Woostify forma parte de ella.
La documentación cubre SaveTo Wishlist Lite. No establece la compatibilidad de Woostify para SaveTo Wishlist Pro ni para el Gift Registry Addon, así que revísalos visualmente si los ejecutas.
Una cosa más que vale la pena saber: ninguna prueba automatizada en el conjunto de pruebas del plugin activa Woostify ni verifica estas reglas de compatibilidad. Las pruebas generales de botones se ejecutan en un tema estándar. El diseño de Woostify se confirma al mirarlo.
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?
El plugin no verifica ninguna versión de Woostify. Solo verifica que el identificador del tema sea woostify, por lo que no se declara una versión mínima, máxima o probada para esta integración. Esto hace que funcione en las actualizaciones del tema, y también es la razón por la que una rápida comprobación visual después de una actualización vale la pena.
Dale al botón de guardar un lugar donde vivir
La integración de Woostify es deliberadamente pequeña. Una hoja de estilo, sin JavaScript, sin puntos finales REST, sin registros de base de datos, sin página de configuración. Maneja el diseño para que tu botón de guardar parezca parte de tu tema en lugar de algo añadido después.
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.
