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 nosotros preferimos utilizar éste plugin para agregar un buscador de productos), etc.
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 el servicio de activación de licencias de Rapihosting (Nuestro servicio de Hosting WordPress de confianza), desde aquí. Sumamente recomendado.
Divi Flash
Divi Machine
Divi Bodycommerce
Divi Plus
Tema Divi
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.
Veámos como hacer todo paso a paso:
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 necesitas una licencia para 1 sitio web, puedes adquirirla a un muy buen precio, siguiendo éste enlace.
Ahora sí, empecemos con el paso a 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:
Módulo Tienda en plantilla Vicommerce
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.
Para que puedan visualizar el snippet de éste tutorial, solo dejen su correo en el formulario de abajo y hagan click al botón: “Ver códigos”.
Y automáticamente serán visibles…
Adicionalmente, se te enviará a tu bandeja de entrada un mail de confirmación para ser añadido a mi lista de correos. Es opcional, pero déjame decirte que con la comunidad de mi lista comparto nuevos trucos geniales cómo éste, códigos, tutoriales, promociones y sorteos de productos de la sección de Recursos Premium. Además que tenemos una comunicación más directa para compartir y resolver dudas. 🙂
Gracias por solicitar suscribirte, pero aún falta un paso…
IMPORTANTE – ¡Aún no estás suscrito a mi lista!
Revisa tu bandeja de entrada, se te ha enviado un correo de confirmación. Confirma tu correo para ser parte de la comunidad de mi lista y compartirte nuevos tutoriales, artículos, códigos, recursos, promociones y comunicarnos directamente 🙂
Pdta: Ya puedes ver los códigos del tutorial debajo de éste mensaje
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
(function( $ ) {
$(document).ready(function(){
const $cod =document.querySelectorAll('.vic-carrusel .products li');
var i;
for (i = 0; i < $cod.length; i++) {
$cod[i].classList.add('clasevic');
}
$('.vic-carrusel .products').slick({
/* Configuración del carrusel */
autoplay:true,
autoplaySpeed:3000,
speed:800,
infinite: true,
arrows: true,
dots: false,
slidesToShow: 3,
slidesToScroll: 1,
pauseOnHover: true,
responsive: [
{
breakpoint: 980,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
})( jQuery );
</script>
<style>
@media(max-width:980px){
.vic-carrusel.et_pb_shop ul.products li.clasevic.product {
width:100% !important;
}
}
.vic-carrusel .slick-slide {
margin: 0 25px;
}
.vic-carrusel li img {
width:100%;
}
.vic-carrusel li .woocommerce-loop-product__title{
margin-top:15px;
}
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 40px;
height: 40px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: #979797;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
outline: none;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-family: 'etmodules';
font-size: 30px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left:0px;
z-index: 99;
}
[dir='rtl'] .slick-prev
{
right: 16px;
left: auto;
}
.slick-prev:before
{
content: '\34';
}
[dir='rtl'] .slick-prev:before
{
content: '\35';
}
.slick-next
{
right: 0px;
z-index: 99;
}
[dir='rtl'] .slick-next
{
right: auto;
left: 16px;
}
.slick-next:before
{
content: '\35';
}
[dir='rtl'] .slick-next:before
{
content: '\34';
}
</style>
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.
Carrusel instalado en la plantilla Vicommerce- Layout para Divi y Woocommerce
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.
¿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í.
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