Consigue Divi desde la web oficial a un precio especial
Ver Más

patrocinado

La mejor membresía para DiviFans

Aprovecha el plan más completo para DiviFans. Con una membresía de 1 AÑO de Guaupress obtienes: Descarga de +1000 plugins y temas WordPress, incluído +20 plugins Divi premium, por 1 año; API KEY del tema Divi para sitios Ilimitados, Pack de +500 plantillas Premium para Divi, listas para importar. La mejor membresía para DiviFans. Mira a detalle lo que ofrecemos haciendo click al botón de abajo:

Crear carrusel de productos Woocommerce en Divi sin plugins

PATROCINADO

El Mejor Hosting WordPress Divi. Estable, Seguro y Rápido.

Prueba el servicio de hosting más confiable y conocido del mercado: BANAHOSTING, sin riesgos con un Súper Descuento del 95% en cualquier plan. Cupón de descuento: BH1D

Crear carrusel de productos Woocommerce en Divi sin plugins

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)

Mejor plugin buscador de productos para Woocommerce

Uno de los elementos que tus clientes más agradecerán que esté presente en tu tienda online (sobretodo si ésta cuenta…

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:

Generador de carruseles de Productos para Woocommerce

En nuestro artículo «Muestra los productos que quieras con el shortcode products«, vimos lo versátil que era ese shortcode de…

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:

Módulo Tienda en plantilla Vicommerce

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:

Quiero Registrarme

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.

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.

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:

Tienda de Elementos y Layouts para Divi

Si te gustó el contenido

Apóyanos compartiendo en tus redes, nos ayudarías muchísimo. Y haz click en la quinta estrella de abajo, para saber que éste tema te interesa y hacer artículos similares.

5/5 - (4 votos)

No olvides que subo trucos nuevos cada semana suscríbete a mi canal y dale a la campanita para que te enteres cuando suba uno nuevo.

Hasta la próxima!!

Artículos Relacionados

Victor Aquino

Experto en WordPress y Divi, entusiasta del SEO, Copywriting, Marketing Digital y Negocios Online en general. Amante de la vida y tu webmaster de confianza.

Contactar

¿Quieres invitarme un cafécito?

Así podré estar más despierto para crear más contenido gratuito como éste 😛

Click Aquí

¿Tienes dudas?

9 Comentarios

  1. David

    Hola, he seguido tus pasos al pie de la letra y no funciona. ¿Puedes ayudarme a ver el porqué no funciona? Muchas gracias.

    Responder
    • Victor Aquino

      Hola amigo, ¿cual es el enlace de tu web dónde haz intentado instalar el carrusel?

      Responder
      • Jesus Guerra

        yo tampoco logro entender donde debo copiar esos codigos, ¿podrias ayudarme?

        Responder
        • Victor Aquino

          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.

          Responder
  2. Leandro

    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?

    Responder
    • Victor Aquino

      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

      Responder
  3. Leandro

    Gracias lo voy a probar!

    Responder
  4. Mauro Rampoldi

    Seco! gracias.

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Hosting WordPress

El mejor Hosting Premium optimizado para WordPress y Divi, al mejor precio.

Licencias 1 Sitio

Divi Theme/ Builder

Ver Más

Divi Machine

Ver Más

Divi Bodycommerce

Ver Más

Divi Flash

Ver Más

Últimos Artículos

Q

¿Quieres Desbloquear TODO el contenido?

Registrándote en nuestra web tendrás acceso a TODO el contenido gratuito oculto. Deja tu correo aquí abajo para que te enviemos un mail con el formulario de registro gratuito.