Si tienes una tienda online con Divi y WooCommerce, seguramente quieres que la experiencia de tus clientes sea lo más fluida y agradable posible. Dos funcionalidades que aportan mucho valor a cualquier ecommerce son los iconos de wishlist (lista de deseos) y quick view (vista rápida). Estas herramientas permiten a los usuarios guardar productos para comprar después y consultar detalles sin salir de la página de catálogo, facilitando la navegación y mejorando la conversión.

En este post te explicaré, paso a paso, cómo configurar estas funcionalidades utilizando plugins compatibles con Divi, cómo personalizarlas para que encajen con tu diseño y te daré consejos prácticos para que tu tienda online luzca profesional y funcione a la perfección.

Explora nuestro curso de Woo Essential, un poderoso addon para Divi que potencia al máximo el diseño de ti tienda online echa con Divi.

Por qué implementar wishlist y quick view en tu tienda Divi

Las listas de deseos permiten que tus clientes marquen productos de interés para comprarlos más adelante, fomentando que regresen y aumentando la posibilidad de ventas futuras. La vista rápida, por su parte, ayuda a los usuarios a obtener información del producto sin tener que cargar una nueva página, acelerando la toma de decisiones y reduciendo la tasa de abandono.

Estas funcionalidades mejoran la usabilidad y brindan una experiencia más atractiva, aspectos clave para destacar en un mercado competitivo.

Plugins recomendados para wishlist y quick view

Para implementar estas funciones en Divi, recomiendo usar dos plugins que funcionan muy bien juntos:

• WooCommerce Essential (Woo Essential): un plugin premium que añade módulos avanzados para construir layouts de tienda con funcionalidades extra, incluyendo quick view.
• WooCommerce Wishlist: plugin gratuito que agrega la funcionalidad de lista de deseos, integrándose con Woo Essential.

Si eres suscriptor de UXDivi, tienes acceso para descargar Woo Essential gratis y puedes aprovechar nuestro curso completo donde explicamos su uso a fondo.

Paso 1: Instalar y configurar Woo Essential para quick view

Primero instala y activa Woo Essential en tu WordPress. Si tu tienda está construida con Divi Theme Builder, abre la plantilla que controla la página de tienda. Elimina el módulo de tienda estándar y añade el módulo Woo Essential Product Grid o Woo Product Read.

En la configuración del módulo, activa la opción de Quick View para mostrar el icono y habilitar esta funcionalidad. Puedes elegir entre varios layouts para la visualización de productos, incluso usar diferentes diseños para desktop y móvil aplicando condicionales.

Ajusta también la cantidad de productos por página y los elementos visibles como precio, categorías o valoraciones.

Consejo UXDivi: Escoge layouts de quick view que sean intuitivos y funcionales en dispositivos móviles para mejorar la experiencia de tus usuarios.

Paso 2: Personalizar iconos y botones

Woo Essential ofrece muchas opciones para personalizar el aspecto de los botones y iconos de quick view, wishlist y añadir al carrito. Puedes modificar colores de fondo, texto, tamaño, padding, y efectos hover para que encajen con la identidad visual de tu tienda.

Personalizar estos elementos es fundamental para que se integren bien y generen confianza en el usuario.

Paso 3: Instalar y configurar WooCommerce Wishlist

Luego, instala el plugin gratuito WooCommerce Wishlist. Actívalo y asegúrate que Woo Essential lo detecte para una integración correcta. En su configuración, habilita mostrar el icono de wishlist en la página de tienda y en la página de producto individual.

Personaliza la posición del icono, así como los textos relacionados, por ejemplo, “Añadir a la lista de deseos”. Este plugin crea automáticamente una página de wishlist que puedes editar con Divi Builder para adaptar su diseño a tu tienda.

Paso 4: Verificación y pruebas finales

Con ambos plugins configurados, visita la página de tienda para confirmar que los iconos de quick view y wishlist aparecen y funcionan correctamente. Haz clic en quick view para probar que el popup muestre la información adecuadamente y se adapte a dispositivos móviles.

Añade productos a la lista de deseos y verifica que el proceso funcione sin errores. Finalmente, ajusta estilos globales en el personalizador de Divi para que los botones mantengan coherencia visual.

Ejemplo práctico para una tienda con Divi

En uno de mis proyectos, usé el layout número 2 para el módulo Woo Essential Product Grid porque equilibra muy bien funcionalidad y diseño. Los iconos de wishlist tienen fondo blanco con icono rojo, con inversión de colores al pasar el cursor, lo que genera una interacción visual clara.

Para la vista rápida, utilicé un popup limpio con fondo blanco y botones rojos, facilitando la consulta rápida sin distraer al usuario. Esta combinación resulta muy atractiva y profesional.

Beneficios de esta integración para tu tienda Divi

Esta combinación entre Woo Essential y Woo Wishlist ofrece:

• Una solución integrada, estable y sin conflictos.
• Configuración sencilla y personalización total sin necesidad de código.
• Mejora significativa en la experiencia de usuario y la tasa de conversión.
• Gestión fácil para que tus clientes guarden sus productos favoritos.

Cursos recomendados en UXDivi para potenciar tu tienda

Para dominar estas herramientas y maximizar el potencial de tu tienda Divi con WooCommerce, te recomiendo estos cursos en uxdivi.com/cursos:

• Curso completo de Woo Essential para Divi: aprende a utilizar todos los módulos y funcionalidades avanzadas.
• Curso de tienda online con WooCommerce Divi: para crear tiendas profesionales y optimizadas.

Recomendaciones finales para wishlist y quick view

Realiza pruebas en distintos dispositivos para garantizar que quick view y wishlist funcionen correctamente en todos los formatos. Personaliza los estilos para que mantengan coherencia con la identidad de tu marca. Usa condicionales para adaptar la visualización según dispositivo. Mantente actualizado con cursos y tutoriales para sacar el máximo provecho a las nuevas funcionalidades de Divi y WooCommerce.

Agregar iconos de wishlist y quick view en tu tienda Divi es una estrategia sencilla pero poderosa para mejorar la experiencia de compra y aumentar tus ventas. Gracias a Woo Essential y Woo Wishlist, esta integración es accesible, personalizable y profesional.

Si quieres seguir creciendo como diseñador y administrador de tiendas con Divi, no dudes en explorar los recursos y cursos de UXDivi para estar siempre a la vanguardia.