Carrusel de productos para Divi y WooCommerce

Actualizado el 14/01/2021 | Publicado el 04/01/2021 | 1 comentario

¿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:

Boutique WooCommerce Basique
Tienda básica de WooCommerce

¡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:

Achat Plugin Product Carousel
Obtenga el plugin Product Carousel
  1. Desde su cuenta en Aspen Grove o Divi Space, descargue el plugin Product Carousel.
  2. También puede aprovechar esta oportunidad para recopilar los diseños que están a su disposición.
  3. En los detalles de su cuenta, recupere también su clave de licencia (cópiela).
Installer le plugin et activer la licence
Instalar el plugin y activar la licencia
  1. 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.
  2. 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 :

  1. Ir a la Divi > Biblioteca Divi > Importar y exportar
  2. En la ventana emergente, seleccione el Importar
  3. 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.
Importer les démos de carrousels
Importar demos de carrusel

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:

Page Boutique avec le Divi Thème Builder
Página de la tienda con el constructor de temas Divi
  1. 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.
  2. 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.
  3. En la pestaña Pestaña "Añadir desde la biblioteca"debería encontrar las 9 secciones preconstruidas que importamos antes.
9 démo de Product Carousel
El carrusel de productos viene con 9 demos para importar

¡¡¡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.

Module Woo Carousel
Módulo Woo Carousel

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:

Boutique avant-après
Antes y después 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.

Carrousel de produits WooCommerce avec Divi
Carrousel de produits WooCommerce
Product Carousel For Divi Woocommerce

1.371 palabras

5

Puede que a ti también te guste:

DiviFlash : 31 modules supplémentaires pour Divi !

DiviFlash: ¡31 módulos adicionales para Divi!

He probado DiviFlash, una extensión premium para añadir nuevos módulos al Divi Visual Builder. En este artículo, te presento sus características. No se pierda el vídeo de demostración.

1 Commentaire

  1. Daniel

    I bought divi last year and it’s great

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto