Usted puede estar buscando una solución para Vea sus productos WooCommerce como un elegante carrusel Perfecto, te he probado. "Product Carousel para Divi y WooCommerce". Esta extensión le permite desplazar los productos de su tienda WooCommerce y ofrece muchas personalizaciones. Echemos un vistazo más cerca...
1 - La importancia de personalizar su tienda WooCommerce
Si vende sus productos y/o servicios en línea directamente en su sitio, ya sabe lo importante que es para los usuarios sentirse bien en su tienda.
Esto obviamente pasa por una buena experiencia de usuario (accesibilidad, UX, navegación fácil, clasificación de productos, función de visualización, etc.) pero también por un diseño elegante y atractivo.
Por supuesto, las imágenes de sus productos son muy importantes, esta es una de las primeras obras para hacer que los usuarios quieran tomar acción, pero la estética de la tienda es tan importante...
Mira cómo es una página de WooCommerce con Divi, sin que se haga ninguna personalización:
Seamos honestos, es asqueroso. 🤣 ¡Oye!
Pero por suerte Divi Theme Builder permite personalizar casi toda esta página muy importante para su negocio... Sin embargo, una de las cosas que no es posible hacer nativamente con Divi es una producto carousel, y eso es precisamente el propósito de este artículo ...
¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"
2 - Optimize the shop page with the "Product Carousel" extension
Acabamos de ver que no era posible crear un nativo producto carrusel con Divi pero la extensión Carousel te permite hacer esto fácilmente...
La buena noticia es que esta extensión no requiere ajustes adicionales, una vez que la activa, simplemente añade un nuevo módulo en el lista de módulos Divi, este es el módulo Woo Carousel.
Este módulo se parece a otros módulos Divi, por lo que no te perderás en su uso...
2.1. - Instalación y activación del plugin
Desde Carousel es una extensión premium, tendrá que adquirirla en una de las plataformas oficiales (enlaces al final del artículo).
Por mi parte, tengo una licencia de Lifetime en Aspen Grove Studios Desde 2018, es por lo tanto de mi cuenta en esta plataforma que recupero el plugin oficial, así como los diseños (fuentes) listos para usar:
- Desde su cuenta en Aspen Grove o Espacio Divi, plugin de descarga Carousel.
- También aproveche para recuperar los diseños a su disposición.
- En los detalles de su cuenta, también obtener su clave de licencia (copiarlo).
- Luego instala el plugin Carousel desde la administración de su sitio, hasta la pestaña Prórrogas Añádase Descargar extensión. Asegúrese de importar el . Carpeta ZIP. Después de su activación, encontrará una nueva pestaña en Carousel.
- Sólo pega tu clave de licencia para hacer el plugin funcional.
2.2. - Importación de las demos carrusel
Luego puede simplificar su vida importando diseños preconstruidos proporcionados por la extensión:
- Vaya a la pestaña Bibliothèque divi > Import " Export
- En el pop-up, seleccione la pestaña Importación
- Elija el archivo Demo Carousel All.json : este está presente en la carpeta (carpeta no comunicada, esta vez) demos proporcionados por el proveedor del plugin. Al elegir este archivo, usted importa el 9 demos disponiblesEs muy conveniente.
Aquí, 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 Theme Builder
Si aún no has personalizado tu página de compras, sabes que el Constructor de Temas Divi será muy útil para ti ya que te permite cambiar toda la apariencia de esta página.
Un tutorial anterior te explica en detalle cómo crear la página de la tienda con el Theme Builder... Te invito a consultarlo además de este artículo.
En resumen, si aún no ha creado este modelo, aquí está el procedimiento:
- Vaya a la pestaña Divi Ø Theme Builder > click "+" añadir un nuevo modelo y asignarle la página Tienda. Tenga en cuenta que esta plantilla sólo está disponible si WooCommerce ya está instalado y activo en su sitio. Si necesitas entrenar, descubre mi ebook WooCommerce que acaba de actualizarse.
- Utilice el Editor para insertar todos los módulos que necesita su página. Haga clic en "+" azul para añadir una nueva sección.
- En la pestaña "Agregar biblioteca", usted debe encontrar las 9 secciones preconstruidas que hemos importado previamente.
TaDaa !!! Como puedes ver desde la imagen anterior, me divertí importando varios diseños y el resultado es sorprendente: en 2 clics mi página de tienda muestra mis productos en forma de carrusel. Todo estaba listo.
See demos de estos carrusels en "live".
2.4. - Alternativa: crea el carrusel desde cero
Si ahora quieres controlar completamente la apariencia de tu producto carouselpuede añadir el módulo Woo Carousel dentro de tu página de compras.
De hecho, puede insertar este módulo donde quiera, no sólo en la página de la tienda! Por ejemplo, puede insertarlo en su Pie de página mundial para que un producto destacado esté disponible en todo el sitio, o en el centro de sus entradas de blog si desea agregar llamadas a la acción, etc.
Como se puede ver en la imagen anterior, los parámetros del módulo Woo Carousel utilizar la misma estructura que otros módulos Divi:
- En la pestaña Índice, usted será capaz de decidir los elementos a mostrar: el título del producto, la imagen principal, el precio, los votos, etc. Aquí también se puede configurar la velocidad de desplazamiento del producto, el juego automático, el título para mostrar en los botones, el tipo de productos para mostrar, etc.
- En la pestaña Estilo, puede definir colores, tamaños, márgenes y espaciados, etc. cada elemento como los botones de apuesta en la cesta, las flechas carrusel e incluso la posición de la placa de promoción.
En resumen, además de proponer un producto carousel, la extensión permite mejorar algunas opciones que son cruelmente carentes de nativo en Divi. Muchos de ustedes comentan sobre algunos artículos en este blog o contacten conmigo para preguntarme cómo cargar el color o texto del botón de añadir al carrito por ejemplo. Utilización CSS a veces permite corregir ciertos colores de la tienda Pero eso no siempre es suficiente. Uf, los desarrolladores de este plugin han pensado en esto!
2.5. - Diseño de tienda: antes y después
Así que aquí hay dos clics cómo el diseño de la página de la tienda ha mejorado:
¡No te demores! Descubre el tema Divi aquí. !
3 - ¿Dónde encontrar "Product Carousel para Divi y WooCommerce"?
Esta extensión premium (paying) es compatible con Divi y temas adicionales y sitios de WordPress con la extensión WooCommerce. Así que para utilizarlo, necesitarás tener un sitio con WooCommerce y Divi (o Extra).
Puedes conseguirlo en:
La tasa comienza a partir de 39$/año para 1 sitio, otras licencias están disponibles para toda la vida o número ilimitado de sitios.
4 - Otras ideas para ir más lejos...
La extensión Carousel no es el único que existe. ¡Elegí probar esto porque tengo la licencia pero hay muchos más! Además, si miras el ElegantThemes Official MarketPlace, verás que otros plugins del género no son malos tampoco...
Por otro lado, si usted está buscando una extensión para crear carrusels de imágenes, comentarios de clientes, logos o artículos de blog, es más bien en el lado de la Divi Carousel Módulo Divi GearTendremos que buscar. Porque el que se presenta en este artículo es sólo funcional para los productos de la tienda.
Para ir más lejos, no dude en navegar por los demás artículos dedicados a WooCommerce y Divi.
I bought divi last year and it’s great