Cómo añadir iconos de lista de deseos a los listados de productos de Elementor WooCommerce: Guía detallada

Image [1] - Cómo Añadir Icono Wishlist a Elementor WooCommerce Listado de Productos: Guía Detallada - photonwave.com | Professional WordPress Repair Service, Worldwide, Fast Response

Añadir una lista de deseos puede ayudarle a aumentar la participación de los clientes y las conversiones. La función de lista de deseos permite a los clientes guardar los productos que desean pero que aún no han comprado, y volver a la tienda para realizar la compra más adelante. En este artículo se explica cómo añadir la función de lista de deseos a tu tienda mediante el constructor de páginas Elementor y la función Complementos Premium Pro añádalo a la lista de productos de WooCommerceIconos de la lista de deseosy mejorar aún más la funcionalidad de su tienda.

I. Preparativos preliminares

Antes de empezar, asegúrese de que los siguientes plugins están instalados y habilitados en su sitio WordPress:

  1. Elementor ProElementor es un potente plugin constructor de páginas, y Elementor Pro ofrece funciones aún más avanzadas que te dan aún más flexibilidad para personalizar las páginas de tu tienda WooCommerce.
  2. Complementos Premium ProEste plugin proporciona a Elementor una gran cantidad de funciones adicionales, incluido el widget de listado de productos de WooCommerce. Con este widget, es fácil mostrar productos de WooCommerce y añadir funciones más avanzadas, como iconos de lista de deseos.
  3. Lista de deseos MC plug-in (componente de software)MC Wishlist es un plugin fácil de usar diseñado para añadir la funcionalidad de lista de deseos a WooCommerce. Permite a los clientes añadir productos a una lista de deseos y puede mostrar la lista de deseos a través de un widget o shortcode.
Imagen [2] - Cómo Añadir Icono Wishlist a Elementor WooCommerce Listado de Productos: Guía Detallada - photonwave.com | Professional WordPress Repair Service, Worldwide, Fast Response

Añadir una lista de productos WooCommerce en Elementor

Después de instalar y activar el plugin anterior, puedes empezar a añadir widgets de listas de productos de WooCommerce a tus páginas a través del constructor de páginas de Elementor y configurar el icono de la lista de deseos.

1. Añadir widget de producto Woo para Premium Addons

En primer lugar, abra el Editor Elementorademásentrar enQuienes deseen mostrar una lista de productospágina web. Añade el widget Lista de Productos WooCommerce para Premium Addons siguiendo estos pasos:

  • Buscar Productos Woo en el Editor de Elementor: En el cuadro de búsqueda del menú de la izquierda, escriba "Productos Woo"y, a continuación, arrastre el widget a la página.
  • Configuración de los ajustes de visualización del productoDiseño: elija un diseño adecuado (cuadrícula, rotación o mampostería) y ajuste la forma en que se muestran los productos según sus necesidades. Puedes configurar el número de productos que se mostrarán por fila, el tamaño de las imágenes de los productos, la forma en que se muestran los títulos y los precios, etc.

2. Activar el plugin MC Wishlist

Imagen [3] - Cómo Añadir Icono Wishlist a Elementor WooCommerce Listado de Productos: Guía Detallada - photonwave.com | Professional WordPress Repair Service, Worldwide, Fast Response

MC Wishlist plugin es la herramienta clave que te permite añadir iconos de lista de deseos a tus productos WooCommerce. Después de instalar y activar el plugin, añadirá automáticamente el icono "Añadir a la lista de deseos". A continuación se explica cómo configurar aún más el plugin MC Wishlist:

  • integración automáticaCuando se activa el plugin MC Wishlist, se añade automáticamente un icono de lista de deseos a la lista de productos de WooCommerce sin ninguna configuración adicional. Los clientes pueden hacer clic en el icono para añadir productos a su lista de deseos.
  • Personalizar el aspecto y la posición de los botonesSi no está satisfecho con el botón predeterminado de la lista de deseos, puede personalizarlo accediendo a la página de configuración del complemento MC Wishlist. Puede ajustar el color, el texto, la posición y otras propiedades del botón para que coincida con el estilo de diseño de su sitio web.
Imagen [4] - Cómo añadir iconos de lista de deseos a Elementor WooCommerce Product Listings: Una guía detallada - photonwave.com | Professional WordPress Repair Service, Worldwide, Fast Response

3. Utilización de funciones avanzadas: MC Multilist

Para ofrecer a sus clientes funciones de gestión de listas de deseos más completas, considere la posibilidad de utilizar el plugin Wishlist de MCversión avanzadaMC Multilist. Esta función permite a los clientes categorizar los productos y almacenarlos en diferentes listas de deseos, lo que mejora la experiencia del usuario y la interactividad del sitio.

  • Activar MC MultilistLista de deseos de MC: Al activar la opción Multilista en la página de configuración de la Lista de deseos de MC, los clientes pueden añadir productos a varias listas diferentes, como "Lista de deseos de cumpleaños", "Lista de compras navideñas", etc.
  • Listas personalizadasLos administradores pueden personalizar los ajustes relacionados con Multilist a través del backend, como permitir a los clientes crear nuevas listas, gestionar listas existentes, etc.
Imagen [5] - Cómo añadir iconos de lista de deseos a Elementor WooCommerce Product Listings: Una guía detallada - photonwave.com | Professional WordPress Repair Service, Worldwide, Fast Response

III. Personalización del botón wishlist en Elementor

Elementor ofrece una serie de opciones de personalización para optimizar aún más el aspecto y la interacción del botón de la lista de deseos siguiendo los pasos que se indican a continuación:

1. Añadir efectos de animación

En Elementor, puede añadir una variedad de botones de lista de deseos a la secciónefecto de animaciónpara hacerla más atractiva. Esto se hace de la siguiente manera:

  • Seleccione el botón Lista de deseos: ClickCapas para el botón de lista de deseosSeleccione la opción "Avanzado" en el menú de la izquierda.
  • Seleccionar un efecto de animación: En "alto nivel"busque la pestaña "efecto de movimiento", entre los que podrá elegir el efecto de animación que mejor se adapte a sus necesidades, como un ligero zoom al pasar el ratón por encima, parpadeo, etc.
Imagen [6] - Cómo añadir iconos de lista de deseos a Elementor WooCommerce Product Listings: Una guía detallada - photonwave.com | Professional WordPress Repair Service, Worldwide, Fast Response

2. Ajustar la configuración de estilo

Elementor permite ajustar la configuración de estilo del botón de lista de deseos para hacerlo más acorde con tu imagen de marca:

  • Cambiar el color de los botones: Los colores de fondo, borde y texto de los botones pueden modificarse en las opciones de estilo para armonizarlos con otros elementos de la página.
  • Configuración de bordes y sombrasBotón de lista de deseos: puede añadir efectos de borde y sombra al botón de lista de deseos para aumentar su jerarquía visual.

IV. Liberación y pruebas

Una vez que haya completado los ajustes anteriores, guarde y publique su página. Asegúrate de probar la función de lista de deseos en diferentes dispositivos para comprobar que funciona tanto en dispositivos móviles como de escritorio.

1. Pruebas de compatibilidad de los equipos

Pruebe la visualización y funcionalidad del botón de la lista de deseos utilizando varios dispositivos (por ejemplo, móvil, tableta y ordenador de sobremesa) para asegurarse de que funciona bien en diferentes resoluciones.

Image [7] - Cómo Añadir Icono Wishlist a Elementor WooCommerce Listado de Productos: Guía Detallada - photonwave.com | Professional WordPress Repair Service, Worldwide, Fast Response

2. Pruebas de rendimiento

Compruebe si la función de lista de deseos afecta a la velocidad de carga de la página. Si ves que se carga lentamente, considera la posibilidad de optimizar las imágenes, reducir los plugins innecesarios o utilizar un plugin de caché.

V. Resumen

Con Elementor y el plugin Premium Addons Pro, es fácil añadir iconos de lista de deseos a los listados de productos de WooCommerce. Esto no solo mejora la experiencia de compra de los clientes, sino que también aumenta la interactividad de la tienda, lo que a su vez ayuda a aumentar las conversiones.

La perfecta integración del plugin MC Wishlist con Elementor hace que añadir la funcionalidad de lista de deseos sea fácil e intuitivo. Con su versión avanzada de la función Multilist, sus clientes también pueden categorizar y almacenar sus productos deseados con gran efecto.


Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas
Servicio de atención al cliente WeChat
Servicio de atención al cliente WeChat
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) Correo electrónico: info@361sale.com
Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres
© Declaración de reproducción
Este artículo fue escrito por: xiesong
EL FIN
Si le gusta, apóyela.
felicitaciones0 compartir (alegrías, beneficios, privilegios, etc.) con los demás
comentarios compra de sofás

Por favor, inicie sesión para enviar un comentario

    Sin comentarios