Revisado por Creas tus páginas de producto en Elementor, y todo se ve bien. Luego notas que falta el botón de la lista de deseos de Elementor. No está mal ubicado. Desaparecido.
La configuración de tu plugin promete un botón. Tu página de producto no muestra nada. Ni siquiera hay un error que perseguir.
Ese silencio te cuesta. Un botón de lista de deseos que nadie puede ver es un guardado que nunca ocurre. Y un guardado que nunca ocurre es un comprador al que no puedes traer de vuelta.
SaveTo Wishlist incluye dos integraciones de Elementor que cierran la brecha. Te guiaremos a través de la configuración de ambas, la elección de la correcta y qué hacer con los guardados después.
Saltar a:
- Por qué el botón de la lista de deseos desaparece en las páginas de productos de Elementor
- Qué hacen realmente las dos integraciones de Elementor
- Qué necesitas antes de empezar
- Cómo agregar el botón de la lista de deseos con el widget de Elementor
- Cómo mostrar el botón de la lista de deseos en Loop Grid y Loop Carousel
- Dónde poner el botón para que los compradores lo usen realmente
- Cinco formas de poner a trabajar los guardados de la lista de deseos de Elementor
- Problemas de la lista de deseos de Elementor y cómo solucionarlos
- Preguntas frecuentes: Botón de lista de deseos de Elementor
- Conclusión
Por qué el botón de la lista de deseos desaparece en las páginas de productos de Elementor
El botón requiere un paso manual porque Elementor se basa en widgets visuales personalizados en lugar de las plantillas PHP tradicionales de WooCommerce.
SaveTo Wishlist coloca su botón utilizando los ganchos de acción de WooCommerce. Una plantilla de producto estándar activa esos ganchos en puntos definidos. Así, el plugin siempre sabe dónde inyectar el botón.
Sin embargo, una plantilla de Elementor se ensambla a partir de widgets de Elementor. Si la tuya utiliza un botón de añadir al carrito personalizado, esos ganchos nunca se activan. Como resultado, el plugin no tiene nada a lo que adjuntarse.
Las páginas de archivo se enfrentan a las mismas limitaciones de ganchos, solo que a una escala más amplia. Un Loop Grid de Elementor Pro no renderiza el bucle de la tienda clásico en absoluto. En su lugar, renderiza la plantilla del elemento del bucle que diseñaste. Debido a que utiliza un diseño personalizado en lugar de los ganchos de bucle de tienda predeterminados, el botón requiere una colocación manual.
Lo que hace que esto sea difícil de diagnosticar es que sucede silenciosamente. No aparece ningún error. No se muestra ninguna advertencia en tu administrador. Y ninguna configuración en el plugin lo soluciona.
Esta tampoco es una configuración de nicho. Según W3Techs, Elementor se ejecuta en el 12,8% de todos los sitios web.
🔍️ Lo que hemos visto: Los propietarios de tiendas a menudo contactan con soporte preocupados porque el plugin no funciona. La realidad es solo una diferencia en la arquitectura. El renderizado del botón funciona bien, pero necesita ser colocado explícitamente dentro de la plantilla de Elementor.
Qué hacen realmente las dos integraciones de Elementor
SaveTo Wishlist cubre Elementor en dos partes separadas. Cuál necesitas depende de tu licencia de Elementor.
| Capacidad | Lo que hace | Elementor necesario | Añadido en |
|---|---|---|---|
| Widget Guardar en la lista de deseos | Un widget nativo de Elementor que arrastras a cualquier plantilla para colocar el botón manualmente | Elementor gratuito o Pro | 1.1.3 |
| Colocación en Loop Grid y Loop Carousel | Colocación automática del botón en cada tarjeta de producto, impulsada por tu configuración de página de tienda existente | Elementor Pro | 1.1.2 |
Ambos se envían en SaveTo Wishlist Lite, el plugin gratuito, por lo que los titulares de licencias Pro también los heredan. Actualiza a la versión 1.1.3 o posterior y tendrás ambos.
Tu ruta depende de tu licencia. Si creas páginas de producto en Elementor gratuito, el widget es tu opción. Loop Grid, Loop Carousel y Theme Builder son todas características de Elementor Pro.
En la práctica, la mayoría de las tiendas Pro terminan usando ambos. La colocación automática se encarga de los archivos. El widget se encarga de la plantilla de producto individual.
Una distinción ahorra mucha confusión más adelante. El widget de Elementor coloca el botón de la lista de deseos en un producto. No muestra la lista de deseos en sí. Para eso, usa el bloque de lista de deseos o el shortcode [saveto_wishlist].
Qué necesitas antes de empezar
Cuatro cosas deben estar en su lugar antes de que el widget renderice algo.
- Elementor, gratis o Pro: el widget funciona en ambos. Loop Grid y Loop Carousel necesitan Elementor Pro.
- SaveTo Wishlist Lite 1.1.3 o posterior: las versiones anteriores no incluyen el widget. Comprueba tu versión en Plugins.
- WooCommerce con un producto publicado: el widget solo se renderiza donde hay un producto con el que trabajar.
- Una plantilla vinculada a un producto: una plantilla de producto individual, una plantilla de elemento de bucle o una página que reconozca productos.
Más allá de eso, no hay un paso de configuración separado. El widget lee tu configuración de lista de deseos existente. Por lo tanto, uno insertado sin cambios renderiza el mismo botón que tu tienda ya muestra.
Cómo agregar el botón de la lista de deseos con el widget de Elementor
Añadir el widget lleva cuatro pasos. Estilizarlo lleva tres más.
Arrastra el widget a tu plantilla
- Abre la plantilla o página de producto que deseas editar en Elementor.
- Busca en el panel de widgets Save to Wishlist.
- Arrastra el widget a tu diseño, donde quieras que esté el botón.
- Haz clic en Actualizar para guardar.
El widget se encuentra en las categorías WooCommerce y General. Por lo tanto, navegar funciona tan bien como buscar. Escribir wishlist, save, favorite o favourite también lo muestra.
Se renderiza de inmediato utilizando tu configuración de lista de deseos actual. Eso significa que ves el botón real en el lienzo, no un marcador de posición gris.
Elegir el tipo de botón
Tipo de botón se encuentra en la sección Botón de lista de deseos en la pestaña Contenido. Es la única configuración allí.
Diez estilos vienen con el widget:
- Solo texto, Solo icono y Icono y texto
- Píldora de icono y texto, Icono sólido e Icono sólido y texto
- Píldora de icono y texto sólido, Icono mínimo e Icono mínimo y texto
- Píldora de icono mínimo y texto
Las variantes de píldora usan esquinas completamente redondeadas. Sólido rellena la forma del icono, mientras que Mínimo utiliza un contorno más claro.
El control por defecto es tu estilo de botón de producto de la configuración de la lista de deseos. Cambiarlo aquí afecta a este widget, no a toda tu tienda.
Establecer la alineación
La alineación se encuentra en la pestaña Estilo, en Diseño. Ahí es donde Elementor guarda la alineación para sus propios widgets.
Abre Diseño y luego establece la Alineación en Izquierda, Centro o Derecha. Por defecto es Izquierda.
Cambiar los colores del botón
La sección Colores en la pestaña Estilo te da ocho controles. Cada uno tiene un estado normal y otro al pasar el ratón: Color del texto, Color de fondo, Color del borde y Color del icono.
Cada selector comienza con el color ya guardado en tu configuración de lista de deseos. Por lo tanto, un widget sin tocar coincide con el resto de tu tienda.
Cambia uno y anula ese color solo para este widget. Eso ayuda cuando una plantilla individual se encuentra en una sección oscura o un fondo de foto.
Los colores son lo único que el widget anula. El tamaño, el relleno, el ancho del borde y la forma del icono se encuentran en otro lugar.
Los encontrarás en SaveTo Wishlist > Settings > Button Placement & Styles. Así los rediseñas una vez y cada botón sigue el mismo estilo.
Una limitación que vale la pena conocer de antemano. Los selectores solo aceptan colores sólidos, sin control deslizante de transparencia ni pestaña de colores globales.
Eso se debe a que el botón de la lista de deseos almacena valores hexadecimales simples. Un color global se previsualizaría correctamente, pero no se transferiría a la página en vivo, por lo que la opción está deshabilitada para garantizar que tu configuración sea precisa.
Para ver el mismo tutorial con todas las pantallas capturadas, consulta nuestra guía de la base de conocimientos sobre el widget de Elementor.
Cómo mostrar el botón de la lista de deseos en Loop Grid y Loop Carousel
Con Elementor Pro tienes dos rutas para las tarjetas de producto. Se adaptan a diferentes niveles de control.
Deja que el plugin lo coloque por ti
La ubicación existente de tu página de tienda ya se aplica a las tarjetas Loop Grid y Loop Carousel.
Ve a SaveTo Wishlist > Settings > Shop Page, elige una ubicación y guarda. El botón aparece en cada tarjeta sin que tengas que tocar la plantilla.
En segundo plano, la integración se ancla a cuatro widgets de Elementor en tu plantilla de elemento de bucle:
- Product Image: aplica las ubicaciones ancladas en la imagen del producto.
- Product Title: aplica las ubicaciones ancladas en el título.
- Product Add To Cart: aplica las ubicaciones encima o debajo del botón.
- Add To Cart: la segunda variante de añadir al carrito de Elementor, tratada de la misma manera.
Tu plantilla de elemento de bucle necesita al menos una de esas cuatro. Cuando una tarjeta se crea completamente con widgets personalizados, el plugin simplemente necesita que coloques el botón manualmente.
Si una plantilla contiene ambas variantes de añadir al carrito, el anclaje se activa una vez por tarjeta. Así, el botón nunca se duplica de esa manera.
¿No usas una cuadrícula? Cubrimos el mismo botón en tablas de productos de WooCommerce.
Coloca el widget tú mismo
Edita la plantilla del elemento de bucle y arrastra el widget Save to Wishlist al diseño de la tarjeta. Obtienes un control exacto sobre dónde se coloca el botón en cada tarjeta.
Hay un comportamiento a tener en cuenta aquí. Dentro de un elemento de bucle, el plugin trata tu widget como un botón por tarjeta en lugar de un duplicado. La ubicación de tu tienda sigue renderizándose junto a él.
Así que elige una ruta u otra. Si colocas el widget manualmente, configura la ubicación de tu página de tienda en Don’t show. De lo contrario, cada tarjeta terminará con dos botones.
🔍️ Lo que hemos visto: la página de producto único funciona de manera diferente, y eso confunde a la gente. Coloca el widget en una plantilla de producto de Elementor y el plugin desactivará su propia ubicación en la página de producto por ti. Los elementos de bucle son la excepción, por lo que necesitan el paso manual anterior.
Dónde poner el botón para que los compradores lo usen realmente
Una vez que puedas poner el botón en cualquier lugar, la pregunta más difícil es dónde consigue más guardados.
Empieza por el motivo por el que los compradores se van. Según el Instituto Baymard, la tasa media documentada de abandono de carritos en 50 estudios es de 70,22%.
Aún más revelador, el 42% de los compradores en línea de EE. UU. dicen que abandonaron porque solo estaban navegando. Esas personas no están rechazando tu producto. Tienen mal momento.
Advanced Coupons tiene una guía sobre cómo reducir los carritos abandonados si también quieres el lado del pago.
Una lista de deseos es lo único en la página diseñado para atraparlos. Eso redefine el propósito del botón. Es la segunda llamada a la acción para todos los que no compran hoy.
Tres reglas de ubicación funcionan bien en la mayoría de las tiendas:
- Mantenlo dentro del cuadro de compra: coloca el botón junto al precio y Añadir al carrito. Un comprador que decide irse está mirando justo ahí.
- Dale menos peso visual que a Añadir al carrito: los tipos Minimal e Icono solamente existen para esto. Un botón de lista de deseos con un estilo demasiado llamativo compite con la venta que deseas hoy.
- En las tarjetas, prefiere la esquina de la imagen o debajo del título: el espacio de la tarjeta es limitado. Un botón de ancho completo debajo de Añadir al carrito rompe la alineación de la cuadrícula en pantallas pequeñas.
Profundizamos en ambas superficies en nuestras guías de mejores prácticas para páginas de producto y mejores prácticas para páginas de tienda.
Colocar el botón en las tarjetas de Loop Grid importa más de lo que parece a primera vista. La mayor parte del abandono por navegación ocurre en el archivo, antes de que un comprador abra una página de producto.
Por lo tanto, si tu único botón vive en la plantilla del producto, estás capturando a los pocos que hacen clic. Todos los demás se escapan.
Cinco formas de poner a trabajar los guardados de la lista de deseos de Elementor
Un guardado vale exactamente lo mismo que lo que haces a continuación con él. Cinco jugadas convierten una lista de deseos en crecimiento en ingresos.
- Activa alertas de bajada de precio: cuando el precio de un producto guardado baja, el comprador se entera de un artículo que ya quería. Ve cómo funcionan las alertas de bajada de precio de la lista de deseos.
- Envía notificaciones de reposición de stock: un producto agotado en una lista de deseos es un pedido en cola. Decirle a ese comprador cuándo vuelve el stock es mejor que esperar que vuelva a consultar.
- Lee los guardados como datos de demanda: los productos guardados a menudo y comprados raramente te dicen algo sobre el precio, el envío o el texto de la página. Las analíticas de la lista de deseos hacen visible el patrón.
- Segmenta por intención: un comprador con cinco guardados y ningún pedido necesita un correo electrónico diferente al de un comprador recurrente. La actividad de la lista de deseos te da un segmento que el historial de pedidos nunca te daría.
- Planifica campañas de temporada en torno a los artículos guardados: las temporadas de regalos recompensan a las tiendas que saben lo que cada cliente quiere. Una lista de deseos es esa lista, ofrecida voluntariamente en lugar de adivinada.
Vale la pena ser claro sobre qué partes son gratuitas. Todo lo anterior sobre la colocación del botón de lista de deseos de Elementor se envía en el plugin Lite gratuito.
Las analíticas, las alertas de bajada de precio, los correos de reposición de stock y las webhooks son funciones Pro. Comienzan en el plan Growth.
Sean cuales sean las jugadas que hagas, la tasa de conversión de la lista de deseos es el número a observar. Te dice si los guardados se están convirtiendo en pedidos.
Visser Labs se encarga de leer los informes de tu tienda si quieres una visión más amplia.
Problemas de la lista de deseos de Elementor y cómo solucionarlos
Cuatro problemas explican la mayoría de lo que sale mal aquí. Cada uno tiene una causa específica.
El botón no aparece en absoluto
Procede con estos en orden.
- Sin producto en contexto. El widget solo se renderiza donde WooCommerce tiene un producto con el que trabajar. Una página simple no le da nada, por lo que permanece vacía. Muévelo a una plantilla de producto individual, una plantilla de elemento de bucle o una página que establezca un producto.
- Las listas de deseos de invitados están desactivadas. Si Desactivar lista de deseos de invitados está activado y has cerrado sesión, el botón se oculta a propósito. Inicia sesión o reconsidera si permitir listas de deseos de invitados se adapta a tu tienda.
- El plugin es anterior a la versión 1.1.3. El widget no existe en versiones anteriores. Actualiza SaveTo Wishlist y aparecerá en el panel.
Se muestran dos botones de lista de deseos en la página del producto
Este suele resolverse solo. Cuando tu plantilla de producto de Elementor contiene el widget, el plugin anula el registro de su propia ubicación de producto individual.
Los productos relacionados, las ventas adicionales y las ventas cruzadas se dejan deliberadamente en paz. Esas tarjetas se renderizan a través de la ubicación de tu tienda en su lugar.
Así que un segundo botón allí es la configuración de la tienda haciendo su trabajo. Lo cambias en SaveTo Wishlist > Ajustes > Ubicación y estilos del botón.
Los selectores de color no hacen nada
Dos ajustes desactivan los controles de color. Cada uno muestra un mensaje en el panel de Elementor explicando por qué.
Si el modo de botón de tu producto está configurado como Predeterminado del tema, el botón hereda el estilo de tu tema. El plugin no aplica ningún color propio. Cambia el modo a Preestablecido para tomar el control.
Si el icono de tu lista de deseos es una imagen personalizada subida, los dos controles de color del icono no hacen nada. Una imagen subida no se puede teñir. Cámbiala por una forma de icono integrada si el control de color te importa más.
Aparece un diseño de blog en lugar de la lista de deseos
Si un enlace de lista de deseos abre el diseño de tu archivo de publicaciones, es probable que una condición de visualización del Creador de temas de Elementor se aplique de forma demasiado amplia. Ocurre cuando la condición de visualización de esa plantilla se dirige al archivo de publicaciones.
Esa condición también coincide con las vistas individuales de la lista de deseos. Aquí está la solución:
- Abre Plantillas > Theme Builder y selecciona tu plantilla de archivo.
- Abre sus Condiciones de visualización.
- Elimina la condición que apunta al archivo de entradas.
- Crea tu archivo de publicaciones como una página independiente en su lugar.
Preguntas frecuentes: Botón de lista de deseos de Elementor
¿Necesito Elementor Pro para usar el widget de la lista de deseos?
No. El widget Guardar en lista de deseos funciona en Elementor gratuito.
Elementor Pro solo es necesario para las plantillas de cuadrícula de bucle, carrusel de bucle y creador de temas. En Elementor gratuito, el widget es cómo colocas el botón.
¿El widget anulará la configuración de mi lista de deseos?
Solo los ocho colores, y solo para ese único widget. El tipo de botón y la alineación también son por widget.
Todo lo demás todavía proviene de la configuración de tu lista de deseos. Eso cubre el tamaño, el relleno, el ancho del borde y la forma del icono. Por lo tanto, un rediseño en toda la tienda sigue siendo un solo cambio en un lugar.
¿Puedo usar el widget y la colocación automática juntas?
Sí, aunque las dos superficies se comportan de manera diferente.
En una plantilla de producto que contiene el widget, el plugin desactiva su propia colocación en la página de producto. Obtienes un botón.
Dentro de un elemento de plantilla de bucle, se renderizan tanto el widget como la ubicación de tu tienda. Establece la ubicación de la tienda en No mostrar si solo deseas el widget.
¿Por qué no hay un control deslizante de transparencia en los selectores de color?
El botón de la lista de deseos almacena solo colores hexadecimales sólidos.
Un color transparente o global se previsualizaría correctamente y luego se aplicaría en la página en vivo. Esas opciones se desactivan en lugar de dejarse para engañarte.
¿Qué versión de SaveTo Wishlist necesito?
Loop Grid y Loop Carousel se añadieron en la versión 1.1.2. El widget de Elementor llegó en la 1.1.3.
Ejecutar la versión 1.1.3 o posterior te da ambas. Ambas se incluyen en el plugin Lite gratuito, por lo que ninguna necesita una licencia Pro.
¿El widget muestra la lista de deseos en sí?
No. El widget coloca el botón Guardar en la lista de deseos en un producto.
Para mostrar la lista de deseos real de un cliente en una página, usa el bloque de lista de deseos o el shortcode [saveto_wishlist] en su lugar.
Conclusión
Mostrar el botón de lista de deseos de Elementor nunca se trató realmente de estilo. Se trataba de cerrar la brecha entre los ganchos tradicionales de WordPress y los constructores visuales personalizados.
Ambas mitades de esa brecha están cerradas ahora, en Elementor gratuito y en Elementor Pro.
La configuración es la parte fácil y lleva minutos. El trabajo real es decidir dónde se coloca el botón. Después de eso, es decidir qué sucede una vez que un comprador lo usa.
Esto es lo que debes hacer a continuación:
- Actualiza a la versión 1.1.3 o posterior, luego comprueba qué ruta de Elementor se adapta a tu licencia.
- Arrastra el widget Guardar en la lista de deseos a tu plantilla de producto y elige un tipo de botón.
- Activa las tarjetas de Loop Grid y Loop Carousel a través de la ubicación de tu página de tienda.
- Coloca el botón dentro del cuadro de compra y en las tarjetas de tus productos, no solo en uno.
- Pon los guardados a trabajar con alertas, segmentos y datos de demanda.
¿Listo para poner un botón de lista de deseos de Elementor en cada producto de tu tienda? Empieza gratis con SaveTo Wishlist Lite, o ve lo que los planes Growth, Plus y Business añaden.
