¿Quizás estás buscando una solución para mostrar tus productos de WooCommerce en un elegante carrusel? Perfecto, he probado "Product Carousel for Divi and WooCommerce" para ti . Esta extensión sí permite desplazarse por los productos de tu tienda WooCommerce y ofrece muchas personalizaciones. Echemos un vistazo más de cerca...
Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.
1 - La importancia de personalizar tu tienda WooCommerce
Si vende sus productos y/o servicios en línea directamente en su sitio web, ya sabe lo importante que es que los visitantes se sientan cómodos en su tienda.
Obviamente, esto requiere una buena experiencia de usuario (accesibilidad, UX, facilidad de navegación, clasificación del producto), rendimiento de la pantallaetc.) pero también por un diseño elegante y atractivo.
Por supuesto, las imágenes de sus productos son muy importantes, es una de las primeras cosas que hay que hacer para que sus clientes quieran pasar a la acción, pero la estética de la tienda es igual de importante...
Echa un vistazo a cómo se ve una página de tienda de WooCommerce con Divi, sin que se haya hecho ninguna personalización:
¡Seamos sinceros, es bastante asqueroso 🤣 !
Pero afortunadamente el Constructor de temas Divi le permite personalizar casi toda esta página tan importante para su negocio... Sin embargo, una de las cosas que no es posible hacer de forma nativa con Divi es un carrusel de productos, y ese es el tema de este artículo...
¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "PRUEBA GRATUITA
2 - Optimizar la página de la tienda con la extensión "Carrusel de productos
Acabamos de ver que no era posible crear un carrusel de productos de forma nativa con Divi pero el Carrusel de productos le permite hacer esto fácilmente...
La buena noticia es que esta extensión no requiere ninguna configuración adicional, una vez que la activas, simplemente añade un nuevo módulo al lista de módulos Divies el módulo Carrusel Woo.
Este módulo es similar a los demás módulos de Divi, por lo que no se perderá al utilizarlo...
2.1 - Instalación y activación del plugin
Como Product Carousel es una extensión premium, tendrás que comprarla en una de las plataformas oficiales (enlaces al final del artículo).
Por mi parte, tengo una licencia de por vida con Aspen Grove Studios desde 2018, por lo que es desde mi cuenta en esta plataforma que obtengo el plugin oficial así como los diseños listos para usar:
- Desde su cuenta en Aspen Grove o Divi Space, descargue el plugin Product Carousel.
- También puede aprovechar esta oportunidad para recopilar los diseños que están a su disposición.
- En los detalles de su cuenta, recupere también su clave de licencia (cópiela).
- A continuación, instale el plugin Product Carousel desde la administración de su sitio, en la sección Extensiones > Añadir > Subir extensión. Asegúrese de importar la carpeta .ZIP (carpeta descomprimida). Tras la activación, encontrará una nueva pestaña en Divi > Carrusel de productos.
- Sólo tienes que pegar tu clave de licencia para que el plugin funcione.
2.2 - Importación de demos de carrusel
A continuación, puede simplificar su vida importando los diseños preconstruidos proporcionados por el programa :
- Ir a la Divi > Biblioteca Divi > Importar y exportar
- En la ventana emergente, seleccione el Importar
- Elija el archivo Demo Carousel All.json Este archivo se encuentra en la carpeta (carpeta descomprimida) de las demos proporcionadas por el proveedor del plugin. Al elegir este archivo, se importan las 9 demos disponibles a la vez. Esto es bastante práctico.
En unos segundos, su biblioteca Divi se ha enriquecido con 9 nuevas secciones listas para usar...
2.3 - Creación de la página de la tienda con el Theme Builder
Si aún no has personalizado la página de tu tienda, el constructor de temas Divi te será muy útil ya que te permite cambiar todo el aspecto de la página.
Un tutorial anterior explica en detalle cómo crear la página de la tienda con el Theme Builder... Le invito a consultarlo como complemento de este artículo.
En resumen, si aún no has creado este modelo, aquí tienes una guía rápida:
- Ir a la Divi > Theme Builder > haz clic en "+" para añadir una nueva plantilla y asignarle la página de la tienda. Tenga en cuenta que esta plantilla sólo está presente si WooCommerce ya está instalado y activo en su sitio. Si necesita formación, infórmese sobre mi ebook WooCommerce que acaba de ser actualizado.
- Utilice el constructor para insertar todos los módulos que su página necesita. A continuación, haga clic en el "+" azul para añadir una nueva sección.
- En la pestaña Pestaña "Añadir desde la biblioteca"debería encontrar las 9 secciones preconstruidas que importamos antes.
¡¡¡TaDaaa!!! Como puedes ver en la imagen de arriba, me divertí importando varios diseños y el resultado es increíble: en 2 clics mi página de la tienda mostró mis productos como un carrusel. Todo estaba preparado.
Ver el demostraciones en vivo de estos carruseles.
2.4 - Alternativa: crear el carrusel desde cero
Si ahora quieres controlar totalmente la apariencia de tu carrusel de productos, puedes simplemente añadir el módulo Woo Carousel a la página de tu tienda.
De hecho, puede insertar este módulo donde quiera, no sólo en la página de la tienda. Por ejemplo, puede insertarlo en el pie de página global para que un producto destacado esté disponible en todo el sitio, o en medio de las entradas de su blog si quiere añadir llamadas a la acción, etc.
Como puedes ver en la imagen de arriba, la configuración del módulo Woo Carousel utiliza la misma estructura que los otros módulos Divi:
- En la pestaña Contenido, puede decidir qué elementos mostrar: el título del producto, la imagen principal, el precio, los votos, etc. Aquí también se puede configurar la velocidad de desplazamiento de los productos, la reproducción automática, el título que se mostrará en los botones, el tipo de productos que se mostrarán, etc.
- En la pestaña Estilo puede definir los colores, tamaños, márgenes y espaciado, etc. de cada elemento, como los botones del carrito de la compra, las flechas del carrusel e incluso la posición de la insignia de la promoción.
En definitiva, además de ofrecer un carrusel de productos, la extensión permite mejorar algunas opciones que faltan cruelmente en Divi de forma nativa. Muchos de vosotros habéis comentado algunos artículos de este blog o habéis contactado conmigo para preguntar cómo cargar el color o el texto del botón de añadir al carrito, por ejemplo. El uso de El CSS permite a veces corregir ciertos colores en la tienda pero eso no siempre es suficiente. Los desarrolladores de este plugin han pensado en ello.
2.5 - Diseño de la tienda: antes y después
Por lo tanto, aquí hay dos clics sobre cómo se podría mejorar el diseño de la página de la tienda:
No se demore. Descubra el tema Divi aquí !
3 - ¿Dónde puedo encontrar "Product Carousel for Divi and WooCommerce"?
Esta extensión premium (de pago) es compatible con los temas Divi y Extra y los sitios de WordPress con la extensión WooCommerce. Así que para usarlo, necesitarás tener un sitio con WooCommerce y Divi (o Extra).
Puedes conseguirlo en :
Los precios comienzan en $39/año para 1 sitio, otras licencias están disponibles para sitios de por vida o ilimitados.
4 - Otras ideas para ir más allá...
La ampliación Carrusel de productos extensión no es la única que existe. Elegí probar este porque poseo la licencia, pero hay muchos otros. Por cierto, si miras en el MarketPlace oficial de ElegantThemesVerás que otros plugins de este tipo tampoco están mal...
Sin embargo, si lo que buscas es una extensión para crear carruseles de imágenes, reseñas de clientes, logotipos o entradas de blog, deberías mirar Módulo Divi Carousel de Divi GearTendrá que buscarlo. Porque el presentado en este artículo sólo es funcional para los productos de la tienda.
Para ir más allá, no dude en navegar por los otros artículos dedicados a WooCommerce y Divi.
I bought divi last year and it’s great