El loop de productos, es el conjunto de productos como lo muestra la tienda o el shortcode products de Woocommerce. Suele ser un arreglo de filas y columnas.

En éste tutorial encontrarás una herramienta que te generará el código necesario para definir el número de columnas del loop de productos en escritorio, tablet y celulares
Además también vas a poder elegir la distancia que separa cada columna y la distancia que separa cada fila. La herramienta genera todo el CSS en base a tus preferencias y te lo da listo para que lo copies y pegues en tu web. Así de fácil.


Número de columnas en loop de Productos
Dependiendo de nuestro diseño, va a haber muchas ocasiones dónde necesitemos definir exactamente qué número de columnas queremos que muestre. En el caso que se use el shortcode «products» (una excelente herramienta por cierto) bastará con utilizar el atributo «columns» para definir el número de columnas del loop. Por otro lado, para definir el loop de productos de la tienda, la cosa se vuelve un poco más complicada.
Para ambos casos, aún hay una gran limitante. El número de columnas definidas corresponde a la vista en escritorio.
¿Y que hay de la vista en tablet y celular? Pues Woocommerce utilizará sus valores por defecto. Que en muchos casos no coincidirá con nuestras intenciones.
¿Hay alguna solución todo en uno?
Psst si te interesa conocer más a fondo el shortcode products para mostrar los productos que quieras y dónde quieras, dale un vistazo a éste artículo:
Ordenando las columnas con CSS
Podemos solucionar éste problema con un poco de CSS y media queries, para cada resolución de pantallas.
Si sabes CSS, podrás definir la separación que deseas que haya entre columnas y calcular en base a ello el ancho requerido para cada producto.
No es necesario decir que hacer ésto es sumamente engorroso y más si lo vas a hacer para cada resolución. Y luego en otro diseño, otra vez.
Como aquí engreímos a nuestros a nuestros miembros premium, he creado una herramienta dónde simplemente elegirás tus preferencias y con un click tendrás todo el CSS personalizado a la mano, listo para copiar y pegar en 1 click.
Utilizando la herramienta
Veámos las opciones que podemos definir en la herramienta
Nombre de Clase del contenedor
El primer campo te pedirá la clase CSS del contenedor. Esto es opcional. Pero muy útil si deseas que el código CSS sólo se aplique al loop que se encuentra dentro del contenedor que hayas elegido. Si dejas ésta opción en blanco, el código surtirá efecto a todos los loops de productos del diseño.
El contenedor es cualquier elemento que contiene al loop. Si utilizas el shortocode products por ejemplo, y lo haz agregado dentro de un módulo. El módulo actúa cómo contenedor.
Número de columnas en Escritorio, Tablet y Celular
Aquí no hay nada que explicar, simplemente escribes el número de columnas que deseas que se muestre para cada resolución.
Espacio entre columnas
Se refiere al espacio marcado de rojo:

Espacio entre Filas
Se refiere al espacio marcado de rojo:

Ahora sí, la herramienta generadora del código CSS:
Éste contenido está restringido sólo para usuarios con una membresía premium. Si cuentas con una, inicia sesión desde aquí y desbloquearás el contenido. Si no tienes una membresía, puedes adquirirla siguiendo el botón de abajo:
Psst si te está gustando el tutorial, éstos otros te pueden interesar:
¿Dónde agregar éste código?
En cualquier parte que te permita agregar CSS personalizado. Si utilizas Divi puedes agregarlo en el módulo código entre las etiquetas:
<style>
</style>
Si utilizas Elementor o Gutenberg, puedes agregar el módulo y bloque respectivamente llamado HTML personalizado. Igualmente agregarías el código CSS entre las etiquetas style.
Si no utilizas ningún constructor visual, puedes agregar un plugin como Post/Page specific custom CSS, que te permite agregar CSS personalizado a páginas y entradas específicas.
Si deseas profundizar en cómo y dónde agregar CSS personalizado a Divi, puedes revisar el siguiente artículo:
0 comentarios