En nuestro artículo «Muestra los productos que quieras con el shortcode products«, vimos lo versátil que era ese shortcode de Woocommerce, y cómo podemos mostrar los productos que se nos dé la gana dónde se nos dé la gana.

En éste artículo Premium aprenderás cómo convertir el shortcode products en un carrusel de productos. (Como el que puedes ver aquí debajo)

Para éste artículo, he preparado una herramienta dónde podrás fácilmente ingresar el shortcode que quieres convertir, vas a poder definir cuántas columnas quieres que se muestren en escritorio, tablet y celular, así como definir el color de fondo y el color del ícono de las flechas del carrusel.

Completas tus ajustes, le das click a generar, y ya aparecerá el código necesario listo para que lo copies y lo pegues en tu sitio. Así de fácil.

¿Dónde pegar el código?

Puedes agregar el código en cualquier parte de tu web que permita agregar código o HTML personalizado. Por ejemplo en Divi existe el módulo Código, simplemente pegas el código dentro y ya verás tu carrusel. Igualemente en Elementor hay un elemento para agregar contenido HTML. En el caso de Gutenberg, ese trabajo lo hace el bloque HTML personalizado.

Cómo usar la Herramienta Generadora de Carruseles

En el primer campo de la herramienta deberás ingresar el shortcode que quieres convertir en carrusel.

Por ejemplo el shortcode [products] muestra los últimos 12 productos de la tienda. Puedes personalizar el shortcode products para mostrar sólo determinadas categorías, sólo determinadas etiquetas, ids específicos, limitar la cantidad de productos, ordenarlos por titulo, por fecha, y mil cosas más.

Me explayo mucho más en todas las opciones que nos ofrece el shortcode «products» en el siguiente artículo:

Premium

Gratuito

Muestra los productos que quieras con Shortcode Woocommerce Productos (Products)

Aprende a mostrar los productos que quieras con una de las herramientas más versátiles de Woocommerce

Luego, podrás ingresar el número de columnas que deseas que tenga tu carrusel tanto en escritorio, tablet y celulares.

¡Tu carrusel será responsive!

Por último, vas a poder elegir qué colores deseas utilizar para los controles del carrusel (las flechas).

Luego le haces click a «generar código» y listo, tienes el código listo para pegar en tu proyecto.

Herramienta Generadora de Códigos para Carruseles de Productos