Carrusel de productos para Divi y WooCommerce

Actualizado el 14/01/2021 | Publicado el 04/01/2021 | 0 comentarios

¿Quizás estás buscando una solución para mostrar tus productos de WooCommerce como un elegante carrusel? Perfecto, he probado "Product Carousel for Divi and WooCommerce" para ti. Esta extensión permite efectivamente desplazarse por los productos de tu tienda WooCommerce y ofrece muchas personalizaciones. Echemos un vistazo más de cerca...

Anuncio: 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 sus clientes se sientan cómodos en su tienda.

Obviamente, esto requiere una buena experiencia de usuario (accesibilidad, UX, facilidad de navegación, clasificación de productos), 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 actuar, 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 ninguna personalización hecha:

Boutique WooCommerce Basique
Tienda WooCommerce básica

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 propósito de este artículo...

¿Sabías que puedes probar Divi gratis? Ir a esta página y haz 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 hacerlo 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 tiene el mismo aspecto que los demás módulos de Divi, por lo que no se perderá en su uso...

2.1 - Instalación y activación del plugin

Dado que Product Carousel es una extensión premium, deberá adquirirla 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 layouts 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. Aproveche esta oportunidad para obtener los diseños que tiene 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 el archivo .ZIP (archivo descomprimido). Tras su activación, encontrará una nueva pestaña en Divi > Carrusel de productos.
  2. Sólo tendrá que pegar su clave de licencia para que el plugin sea funcional.

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 está presente en la carpeta (carpeta descomprimida, esta vez) de las demos proporcionadas por el proveedor del plugin. Al elegir este archivo, se importan las 9 demos disponibles a la vez. Es muy conveniente.
Importer les démos de carrousels
Importar demos de carrusel

Unos segundos más tarde, 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 porque 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 además de este artículo.

En resumen, si aún no has creado esta plantilla, aquí tienes una guía rápida paso a paso:

Page Boutique avec le Divi Thème Builder
Página de la tienda con Divi Theme Builder
  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 necesitas formarte, descubre 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 el En la pestaña "Añadir desde la biblioteca"debería encontrar las 9 secciones preconstruidas que importamos anteriormente.
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 dentro de 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 establecer 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, podrá 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 en algunos de los 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 algunos colores de la tienda pero no siempre es suficiente. Los desarrolladores de este plugin han pensado en ello.

2.5 - Diseño de la tienda: antes y después

Así pues, he aquí en dos clics 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 esperes más. 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 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 publicaciones en el blog, deberías mirar el Módulo Divi Gear CarouselTendrá 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 consultar 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

A ti también te debería gustar:

Popups for Divi : un plugin gratuit très malin !

Popups para Divi: ¡un plugin inteligente y gratuito!

Los plugins gratuitos para Divi son bastante raros, pero "Popups for Divi" es bastante efectivo y fácil de usar. Este plugin convierte cualquier sección de Divi en una ventana emergente. Te explico cómo usarlo.

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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