Si bien, los carruseles no son elementos imprescindibles dentro de una tienda online, si se tiene que admitir que le da un toque más dinámico a nuestro layout woocommerce.
Hoy veremos cómo crear un carrusel de productos en Divi, de forma gratuita, sin plugins.
Y para los que desean soluciones más completas y fáciles de usar, les mostraremos el plugin premium que recomendamos para ésta función.
¿Qué plugin recomendamos para añadir un carrusel de productos a Divi?
Hay varios plugins premium con los que se pueden crear carruseles de productos, entre ellos: Divi Machine (En caso quieras agregar términos de campos personalizados), Divi Bodycommerce (En caso ya estés utilizando éste plugin que amplía la personalización de Woocommerce), Divi Plus (Éste incluso agrega un módulo buscador avanzado, aunque para agregar un buscador de productos nosotros preferimos utilizar éste plugin)
Todas son opciones viables, aunque, si tuviésemos que mencionar un plugin en particular a grosso modo, últimamente nos estamos inclinando más hacia Divi Flash. No sólo porque agrega un módulo carrusel de productos muy completo, sino porque los otros módulos que agrega (Más de 38 Módulos), nos parecen sumamente interesantes.
En fin, si desean utilizar éste genial plugin en su web (o cualquiera de los otros), con una licencia oficial lifetime, a un muy buen precio, pueden utilizar nuestro servicio de activación de licencias.
Cómo crear un carrusel de productos Woocommerce en Divi sin plugins
Crearemos un carrusel de manera “artesanal” utilizando un poco de buen código. Para ello, vamos a hacer uso de una librería de Javascript llamada “Slick”.
¿Y de dónde sacaremos los productos? Pues del clásico módulo tienda que viene en Divi por defecto. En resumen, lo que hará el código es llamar a la librería Slick, reordenar los productos del módulo tienda en forma de carrusel y agregar algunos estilos para que todo funcione correctamente.
Por cierto, si no quieres depender del módulo tienda de Divi o te queda corto, tengo un artículo premium dónde he agregado una herramienta que genera códigos para carruseles de productos a partir del shortcode products de woocommerce.
Además puedes elegir en vivo el aspecto de la flecha del carrusel y cuántas columnas quieres que tenga en escritorio, tablet y móvil. Una locura. Dale un vistazo:
Y aquí profundizamos sobre el uso del shortcode product de Wocommerce:
Antes de empezar, ¿Ya tienes el tema Divi con licencia?
Divi es sin lugar a dudas el mejor tema para WordPress y la mejor inversión que puedes hacer para tu web. Si deseas adquirir licencias de Divi para sitios ilimitados y con el soporte de Elegant Themes, puedes obtenerlo desde la web oficial con un 20% de descuento desde aquí.
Por otro lado, si sólo deseas activar la licencia en un sitio web, puedes utilizar nuestro servicio de activación de licencias para que tu sitio cuente con una licencia lifetime, a un excelente precio.
Si eres miembro premium tienes, además, un descuento adicional.
¡Vuélvete un miembro VIP!
Accede a la descarga de Plugins Premium, 20% de descuento en activación de licencias y acceso a los tutoriales premium, volviéndote un miembro VIP
Ahora sí, empecemos con el primer paso para crear un carrusel de productos sin plugins…
Paso 1: Desactivar Defer Jquery en performance de Divi
La librería de carruseles “Slick”, trabaja con Jquery. Así que, para que funcione correctamente, debemos DESACTIVAR la opción de “Defer Jquery and Jquery Migrate”. Para que permita que se ejecute.
Como se ve en la imagen de abajo, puedes encontrar esa opción en la pestaña “performance” de las opciones de Divi.
Paso 2: Mostrando los productos con el Módulo Tienda de Divi
Los productos que se mostrarán en el carrusel serán los del módulo tienda de Divi. Así que, agreguen ese módulo a su diseño. Pueden configurarlo para que muestre lo que deseen. (últimos productos, Productos destacados, Categorías, etc).
Para que el código que usaremos más adelante reconozca a éste módulo tienda, necesitamos agregarle una clase CSS. Para ello, dentro de la configuración del módulo, deberán ir a la pestaña avanzado y a la sección llamada “ID y clases de CSS”. En la casilla “Clase CSS” agreguen: “vic-carrusel”. Tal y como se muestra en la imagen de abajo:
Psst. Tenemos más articulos relacionados a carruseles:
Paso 3: Agregando el Código que creará el carrusel de productos Woocommerce Divi
Bien, aquí por fin agregaremos el código. Para ello debemos añadir un módulo código (valga la redundancia) y pegarlo en él. Tan simple como eso.
Aquí tienes el código listo para copiar y pegar:
Contenido Gratuito bloqueado
Para desbloquear el contenido oculto de los tutoriales gratuitos, simplemente inicia sesión. Si no tienes una cuenta, solicita el enlace de registro desde el botón de abajo:
Te puede Interesar:
Crea un carrusel de publicaciones con el módulo Blog de Divi y sin Plugins
Una vez pegado el código, debería quedar de la siguiente manera:
Luego de guardar cambios, ya estará todo listo.
Aún no se verá el efecto mientras se encuentren dentro del constructor visual, pero cuando salgan, verán como la magia ocurre.
Si te gusta el estilo del header de tienda del ejemplo de arriba; Puedes encontrar ese, junto a otros layouts necesarios en una tienda Woocommerce, en la Plantilla Vicommerce. Todo listo para importar en un par de minutos.
Configuraciones adicionales al Carrusel de productos Woocommerce
En la parte del código Javascript que utilizamos, que se puede ver en la imagen de abajo, se observan varias opciones de configuración. Busquen la sección que dice: “Configuración del carrusel”.
Cabe mencionar, que con las opciones con las que está configurado es suficiente para tener un carrusel funcional, pero te menciono algunas de éstas por si quieres personalizarlo aún más.
autoplay: true/false Activa o desactiva el avance automático.
autoplaySpeed:Tiempo en milisegundos de pausa entre movimiento y movimiento del autoplay. Determina su velocidad.
speed: Determina el tiempo en ms que demora en transicionar de un slide a otro.
infinite: true/false Activa o desactiva la generación de un loop infinito.
arrows: true/fasle Activa o desactiva la aparición de los controles de flechas.
dots: true/fasle Activa o desactiva la aparición de los controles de puntos inferiores.
slidesToShow: Defines el número de elementos del carrusel que se visualizarán a la vez.
slidesToScroll: Define el número de elementos que moverá cada vez que avanza.
pauseOnHover: true/fasle Activa o desactiva la función que hace que el carrusel se pause cuando se le pasa el mouse por encima
breakpoints: Nos sirve para cambiar de opciones dependiendo el tamaño de pantalla, para hacer nuestro carrusel responsive.
Yo he trabajado con los tamaños de 980px y 767px que son los tamaños que usa divi para tablet y móvil. He configurado un slidesToShow de 2 elementos para Tablets y de 1 elemento para Móvil.
Si te está gustando el artículo, éstos otros te van a encantar:
¿Deseas carruseles de productos en tu web, con más opciones y más fáciles de usar?
Como mencionamos al inicio del artículo, hay varios plugins premium que añaden un módulo de carrusel de productos a los que ya vienen por defecto en Divi. Siendo Divi Flash, el plugin que recomendamos.
Ya que es un módulo de Divi, permite personalizar las opciones y los estilos mucho más fácilmente. (Esto te viene bien si no quieres complicarte con el CSS o Javascript del código de arriba).
Otro punto a su favor es que permite añadir más elementos a cada producto del carrusel. Normalmente sólo se muestra: Título, Imagen, Precio y starRatings. Con el Carrusel de Divi Flash, puedes agregar además: Las categorías, Etiquetas, Botón de añadir al carrito, Textos personalizados, entre otras cosas más. Y claro, en el orden que tú desees.
Recuerda que si deseas que se te instale el plugin con una licencia Lifetime, en 1 sitio web, a un buen precio, puedes hacerlo desde aquí.
Te puede Interesar:
Hola, he seguido tus pasos al pie de la letra y no funciona. ¿Puedes ayudarme a ver el porqué no funciona? Muchas gracias.
Hola amigo, ¿cual es el enlace de tu web dónde haz intentado instalar el carrusel?
yo tampoco logro entender donde debo copiar esos codigos, ¿podrias ayudarme?
Hola amigo Jesús. Como dice el tutorial, una vez que haz agregado la clase vic-carrusel al módulo tienda, deberás agregar un módulo «código» y dentro de éste pegar los códigos copiados. Guardar cambios, y al salir del constructor visual.
Hola como estas Victor, te hago una consulta, el artículo cambió? porque veo que cambiaron las clases css, antes eran vic-splide splide. Será por eso que me dejó de funcionar?
Hola amigo Leandro, sí, he renovado el tutorial porque varios usuarios me mencionaban que estaban ocurriendo errores en la versión móvil del carrusel. Todo eso sumado a que ahora con la nueva actualización de Splide, los productos desaparaceian en el modo cosntructor visual, me hizo buscar otras opciones de librerías javascript para carruseles.
He actualizado el tutorial (y el de carruseles para el módulo blog) utilizando ahora, la librería Slick. Que veo que está funcionando mejor. Dale un repaso a ésta nueva versión del tutorial, Notarás que los pasos y las configuraciones son similares. Y lo mejor, conseguiremos unos carruseles más estables. Saludos
Gracias lo voy a probar!
Gracias! funciona genial. Eres un maestro
Seco! gracias.