¿Estás creando tus páginas de producto en Elementor y el botón de la lista de deseos no se coloca donde quieres? SaveTo Wishlist incluye un widget nativo de Elementor, para que puedas arrastrar el botón exactamente donde pertenece en lugar de depender de la colocación automática del plugin. Esta guía cubre cómo añadir el widget, darle estilo, usarlo dentro de cuadrículas de productos y solucionar los problemas que surgen con más frecuencia.
Lo que necesitarás
- Elementor, gratuito o Pro.
- SaveTo Wishlist versión Lite 1.1.3 o posterior. Las versiones anteriores no incluyen el widget.
- WooCommerce, con al menos un producto publicado.
- Una plantilla o página que tenga un producto con el que trabajar, como una plantilla de producto individual o un bucle de productos.
El widget lee la configuración de tu lista de deseos existente, por lo que no hay nada que configurar primero. Colócalo en una plantilla y renderizará el mismo botón que tu tienda muestra actualmente.
Añadir el widget a una plantilla de producto
- Abre la plantilla o página de producto que deseas editar en Elementor.
- En el panel de widgets, busca Guardar en la lista de deseos.
- Arrastra el widget a tu diseño donde quieras que aparezca el botón.
- Haz clic en Actualizar para guardar.
El widget aparece tanto en las categorías WooCommerce como General del panel, por lo que cualquiera de las dos funciona si prefieres navegar a buscar.
El botón se renderiza de inmediato utilizando la configuración actual de tu lista de deseos. Si no aparece nada, consulta la sección de solución de problemas a continuación.
Elegir el tipo de botón
Abre la sección Botón de lista de deseos en la pestaña Contenido. Contiene una configuración.
- Establece Tipo de botón al estilo que desees.
- Por defecto, utiliza el estilo de botón de producto que tengas configurado en los ajustes de la lista de deseos.
- Cambiarlo aquí solo afecta a este widget, no al resto de tu tienda.
Hay diez estilos disponibles:
- Solo texto
- Solo icono
- Icono y texto
- Píldora de icono y texto
- Icono sólido
- Icono sólido y texto
- Píldora de icono sólido y texto
- Icono mínimo
- Icono mínimo y texto
- Píldora de icono mínimo y texto
Las variantes Pill usan esquinas completamente redondeadas. Solid rellena la forma del icono y Minimal usa un contorno más claro.
Establecer la alineación
La alineación se encuentra en la pestaña Style, donde Elementor mantiene la alineación para sus propios widgets.
- Abre la sección Layout en la pestaña Style.
- Establece Alignment en Left, Center o Right.
La alineación se establece por defecto en Left.
Cambiar los colores del botón
Abre la sección Colors en la pestaña Style. Tienes ocho controles de color, cada uno con un estado normal y otro al pasar el ratón por encima:
- Text Color y Text Color (Hover)
- Background Color y Background Color (Hover)
- Border Color y Border Color (Hover)
- Icon Color y Icon Color (Hover)
Cada uno comienza con el color ya guardado en la configuración de tu lista de deseos, por lo que un widget sin tocar se ve exactamente igual que el resto de tu tienda. Cambia uno y anula ese color solo para este widget.
Los colores son lo único que el widget anula. El tamaño del botón, el relleno, el ancho del borde y la forma del icono siguen proviniendo de la configuración de tu lista de deseos, así que cámbialos en SaveTo Wishlist > Settings > Button Placement & Styles.
Los selectores de color solo aceptan colores sólidos. No hay control deslizante de transparencia ni pestaña de colores globales, porque el botón de la lista de deseos almacena colores hexadecimales simples.
Mostrar el botón en Loop Grid y Loop Carousel
Si usas Elementor Pro, el botón de la lista de deseos también funciona dentro de los widgets Loop Grid y Loop Carousel. Tienes dos maneras de incluirlo allí.
Déjalo en manos del plugin. La ubicación del botón de tu página de tienda ya se aplica a las tarjetas de bucle, por lo que el botón aparece en cada tarjeta sin que tengas que añadir nada.
Colócalo tú mismo. Edita la plantilla del elemento de bucle y luego añade el widget Save to Wishlist al diseño de la tarjeta. Esto te da control sobre dónde exactamente en la tarjeta se sitúa el botón.
Cuando colocas el widget tú mismo dentro de un elemento de bucle, el plugin deja de renderizar su propio botón automático en esas tarjetas, por lo que obtienes un botón por tarjeta en lugar de dos. La única excepción es cuando la ubicación del botón de tu tienda está configurada en Don’t show. En ese caso, el plugin deja las tarjetas en paz, porque quitar el botón automático sin poner uno de vuelta sería un paso atrás.
¿Qué método deberías usar?
SaveTo Wishlist te ofrece tres formas de poner funciones de lista de deseos en una página, y hacen trabajos diferentes. La diferencia más importante: el widget de Elementor coloca el botón en un producto, mientras que el shortcode y el bloque muestran la lista de deseos en sí. La mayoría de las tiendas usan ambos.
El widget de Elementor pone el botón Guardar en la lista de deseos dondequiera que lo coloques. Úsalo cuando crees plantillas de producto en Elementor. Es el único de los tres que tiene sus propios controles de estilo.
El shortcode [saveto_wishlist] muestra la lista de deseos de un cliente. Úsalo cuando la lista de deseos necesite aparecer fuera de una disposición de Elementor, como una página de editor clásico, un widget de texto o un constructor sin elemento nativo. Consulta Cómo usar el shortcode de la lista de deseos.
El bloque de la lista de deseos hace el mismo trabajo que el shortcode, en el editor de bloques de WordPress. Úsalo cuando edites páginas con bloques en lugar de un constructor de páginas. Consulta Cómo usar el bloque de Gutenberg de la lista de deseos.
Solución de problemas
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, o una plantilla no vinculada a un producto, no le da nada que renderizar, por lo que permanece vacía. Colócalo en 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á habilitado en la configuración de tu lista de deseos y estás viendo el sitio desconectado, el botón se oculta a propósito. Inicia sesión o desactiva esa configuración para verlo.
- SaveTo Wishlist es anterior a la versión 1.1.3. El widget no existe en versiones anteriores. Actualiza el plugin.
Aparecen dos botones de lista de deseos en la página del producto
Esto generalmente se resuelve solo. Cuando tu plantilla de producto de Elementor contiene el widget, el plugin anula el registro de su propia ubicación de producto único, por lo que solo se renderiza el botón que colocaste.
Los productos relacionados, las ventas adicionales y las ventas cruzadas se dejan deliberadamente solos, porque esas tarjetas se renderizan a través de la ubicación de la tienda. Si ves un segundo botón en esas, es la ubicación de la tienda haciendo su trabajo. Cámbialo en SaveTo Wishlist > Ajustes > Ubicación y estilos del botón.
Los selectores de color no tienen efecto
Dos configuraciones desactivan los controles de color, y cada una muestra un mensaje en el panel explicando por qué.
Si el modo de botón de producto está configurado en Predeterminado del tema, el botón hereda el estilo de botón de tu tema y el plugin no aplica ningún color propio. Cambia el modo de botón de producto a Preestablecido en la configuración de tu lista de deseos para controlar los colores.
Si el icono de tu lista de deseos es una imagen subida personalizada, Color del icono y Color del icono (al pasar el ratón) no hacen nada, porque una imagen subida no se puede teñir. Cámbiala por una forma de icono integrada en la configuración de tu lista de deseos si deseas control de color.
Aparece un diseño de blog en lugar de la lista de deseos
Si abres un enlace de lista de deseos y ves el diseño de tu archivo de publicaciones en lugar de la lista de deseos, una plantilla de archivo de Elementor Theme Builder está ocupando la página. Esto sucede cuando la condición de visualización de esa plantilla apunta al archivo de publicaciones, que también coincide con las vistas individuales de la lista de deseos.
Para solucionarlo:
- 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 entradas como una página independiente en lugar de una plantilla de Theme Builder.
Preguntas frecuentes
¿Necesito Elementor Pro para usar el widget?
No. El widget Guardar en lista de deseos funciona en Elementor gratuito. Elementor Pro solo es necesario para los widgets Loop Grid y Loop Carousel y para las plantillas de Theme Builder.
¿El widget anulará la configuración de mi lista de deseos?
Solo los ocho colores, y solo para ese widget. El tipo y la alineación del botón también son por widget. Todo lo demás, incluido el tamaño, el relleno, el ancho del borde y la forma del icono, sigue proviniendo de la configuración de tu lista de deseos.
¿Puedo usar el widget y la colocación automática juntas?
Sí. El plugin se encarga de la superposición por ti. En una plantilla de producto que contenga el widget, desactiva su propia colocación de producto único, y dentro de los elementos del bucle se desactiva para que cada tarjeta muestre un botón.
¿Por qué no hay un control deslizante de transparencia en los selectores de color?
El botón de lista de deseos solo almacena colores hexadecimales sólidos. Un color transparente o global se previsualizaría correctamente en el editor y luego volvería al color guardado en la página en vivo, por lo que esas opciones se desactivan en lugar de dejar que te engañen.
¿Necesitas ayuda?
Si tienes alguna pregunta o encuentras algún problema, estamos aquí para ayudarte.
- Usuarios premium: Abrir un ticket de soporte
- Usuarios gratuitos: Visita nuestro foro comunitario
