Sistema de filtrado del Loop Builder con Divi 5 ¡Nativo!

El Loop Builder fue, para mí, la función que de verdad cambió lo que se puede hacer con Divi. Te deja tomar cualquier tipo de contenido de WordPress y maquetar la tarjeta exactamente como quieras, sin depender de los módulos prediseñados. Pero tenía un hueco enorme: no había manera nativa de filtrar ese contenido. Diseñabas un loop de productos precioso y después tocaba meter un plugin de terceros para que el usuario pudiera filtrar por categoría, por talla o por color.

Eso se acabó. En este tutorial te voy a enseñar cómo funcionan los filtros del Loop Builder en Divi 5 con el nuevo módulo Post Filter, construyendo todo desde cero: primero el loop de productos, después el sistema de filtrado que lo controla. Es la pieza que le faltaba al Loop Builder y muchos de ustedes me la pidieron en los comentarios del último video de actualizaciones.

¿Qué es el sistema de filtrado del Loop Builder en Divi 5?

El sistema de filtrado del Loop Builder es un módulo nativo de Divi 5 llamado Post Filter que se conecta a un loop existente y filtra sus resultados por taxonomías, campos personalizados, precio, stock o valoraciones. No es un plugin, no es un shortcode: es un módulo que arrastras al canvas y apuntas al loop que quieres controlar.

La diferencia con lo que hacíamos antes es de fondo. Hasta ahora, para filtrar una tienda tocaba usar los módulos nativos de WooCommerce con un plugin externo de filtros como Divi Ajax Filter, y el diseño de la tarjeta quedaba atado a lo que el plugin permitiera. Con el Post Filter mantienes tu diseño 100% personalizado del Loop Builder y encima le pones el filtrado. Las dos cosas, sin renunciar a ninguna.

Lo que vamos a construir

Voy a armar una fila de dos columnas. En la columna de la derecha va el loop de productos con el Loop Builder, y en la columna de la izquierda va el filtro. Es la estructura clásica de tienda, pero cada pieza construida a mano.

El loop lo voy a hacer simple a propósito, porque el foco de este tutorial es el filtrado. Si quieres entender el Loop Builder a fondo antes de seguir, te recomiendo que veas primero cómo funciona el Loop Builder desde cero, donde explico la lógica completa del módulo.

Paso 1: maquetar la tarjeta del producto

Todo el loop vive dentro de un módulo de grupo. Ese grupo es la tarjeta, y lo que metas adentro es lo que se va a repetir por cada producto. Yo armé esta estructura:

• Un módulo de imagen para la foto del producto.
• Un grupo anidado con dos módulos de texto adentro: el título y el precio.
• Un módulo de agregar al carrito al final.

El grupo anidado con título y precio es donde se nota el poder de los módulos anidados de Divi 5: los pongo juntos, le doy un diseño flex con alineación a la derecha, y esos dos elementos se comportan como una unidad dentro de la tarjeta. Aquí es donde puedes elaborar tanto como quieras — categoría, etiquetas, valoraciones, lo que necesites. Justo esa es la magia del Loop Builder frente a los módulos prediseñados.

Para trabajar cómodo, usa el panel de Layers. Cuando empiezas a anidar grupos dentro de grupos, arrastrar módulos en el canvas se vuelve un dolor de cabeza; en Layers los mueves con precisión.

Activar el Loop en el grupo

Con la tarjeta lista, renombra el grupo. Yo le puse Product Loop. Después entra a las opciones del grupo y activa la opción de Loop.

Consejo: nombra el grupo antes de activar el Loop. Cuando después configures el Post Filter tendrás que elegir a qué loop apunta, y si tienes tres loops en la página llamados "Grupo", "Grupo 2" y "Grupo 3", vas a adivinar cuál es cuál.

Por defecto el loop trae tipo de contenido Post. Cámbialo a Product. Y aquí va un detalle que mucha gente no tiene claro: el Loop Builder no es solo para productos ni solo para entradas. Puedes hacer loop de páginas, medios, proyectos, o de cualquier Custom Post Type que tengas registrado en WordPress. Todo el tutorial que estás leyendo aplica igual si tu contenido son inmuebles, recetas o casos de estudio.

Paso 2: convertir la columna en una cuadrícula

El loop ya está generando tarjetas, pero salen apiladas una debajo de otra. La columna que contiene el loop tiene que ser flex, con dirección horizontal y con wrap activado para que las tarjetas salten de línea. En mi caso le dije directamente que fueran 3 columnas con wrap, y ahí quedó la cuadrícula de productos.

Esto es flexbox nativo de Divi 5 trabajando: sin wrap las tarjetas se comprimen en una sola fila infinita, con wrap se acomodan solas.

Paso 3: conectar el contenido dinámico

Hasta ahora la tarjeta está maquetada pero muestra contenido estático. Toca conectar cada módulo con el dato real del producto. En cada módulo entras a insertar contenido dinámico y eliges la variable del Loop:

Consejo: si todas tus tarjetas muestran exactamente el mismo desplegable de variaciones, no es un bug del loop. Es el módulo de agregar al carrito apuntando al producto equivocado. Revisa que esté en "This Loop Product".

• La imagen → Loop Product Featured Image (la imagen destacada del producto).
• El primer texto → Loop Product Title.
• El segundo texto → Loop Product Price.

El módulo de agregar al carrito tiene una trampa que a mí me costó un par de segundos entender en el video. Cuando lo insertas, todas las tarjetas muestran las mismas variaciones, sin importar el producto. La razón es que el módulo no sabe de qué producto hablar. En su configuración de contenido tienes que decirle explícitamente This Loop Product, y ahí sí carga las variaciones reales de cada producto del loop.

Ya que estás en ese módulo, aprovecha las opciones de Field Labels — puedes ponerlas Stacked o Inline — y en Elementos quita el stock y el selector de cantidad. En una cuadrícula de catálogo esos dos elementos ensucian más de lo que aportan.

🎓 ¿Quieres construir la tienda completa, no solo el loop?
En el curso de Tiendas Online con Divi 5 y WooCommerce levantamos desde cero la tienda que uso de ejemplo en este tutorial, con su carrito dinámico, su sistema de marcas y su catálogo completo. Accede como suscriptor y constrúyela conmigo paso a paso.

Paso 4: afinar el diseño de la tarjeta

Con el contenido conectado, la tarjeta se ve funcional pero suelta. Estos son los ajustes que hice yo:

• En el grupo principal, Vertical Gap de 10px para cerrar el aire entre imagen, textos y botón.
• En el grupo anidado de título y precio, spacing superior de 10px y bottom en 0.
• En el módulo de agregar al carrito, top en 0 para que no se despegue del precio.
• En el botón, Module Width al 100% y un Min Height de 50px para que todos queden iguales.

Te lo digo con honestidad: para que los espaciados internos queden perfectos hay que tocar algo de CSS, porque algunos elementos de WooCommerce traen márgenes propios. Pero en términos generales, con estos cuatro ajustes la tarjeta ya se ve profesional.

Paso 5: configurar los términos del Loop

Antes de pasar al filtro, entra a las opciones del grupo y abre la pestaña Loop. Ahí decides qué entra y en qué orden: puedes incluir categorías específicas, excluir categorías o posts concretos, y cambiar el criterio de ordenamiento. Por defecto viene por fecha de publicación, pero puedes ordenar por título y elegir ascendente o descendente.

Esta configuración define el universo de contenido del loop, y el filtro que vamos a montar después trabaja sobre esa base. Por eso yo la dejo resuelta antes de tocar el Post Filter: si acá excluyes media tienda, después vas a estar depurando el filtro buscando un problema que en realidad está en el loop.

Paso 6: el módulo Post Filter, donde está la magia

Ahora sí. En la columna izquierda agrega el módulo Post Filter. Al insertarlo ya viene con cuatro elementos predefinidos: un campo de búsqueda, un campo de categoría, un botón de reset y un botón de apply. Pero de entrada no filtra nada, y arriba a la izquierda vas a ver el mensaje Select a Loop.

Target: apuntar el filtro al loop

Ve a la pestaña Target y elige el loop que quieres controlar. Ahí te aparece la lista de todos los loops que hayas creado en esa página — por eso te insistí en nombrar el grupo "Product Loop". El filtro y el loop tienen que estar relacionados explícitamente; no se conectan solos.

Submit o Auto: cuándo se aplica el filtro

En el mismo Target eliges cómo se dispara el filtrado. En modo Auto, cada vez que el usuario marca una opción el loop se actualiza al instante. En modo Submit, el usuario selecciona todo lo que quiere y después pulsa el botón de Apply.

Mi criterio es simple: si el filtro es pequeño y tiene pocas opciones, Auto se siente mucho mejor. Si tienes muchas opciones — como en este ejemplo, con categorías, colores y tallas — Submit evita que el loop se recargue seis veces mientras el usuario todavía está decidiendo.

And u Or: la decisión que más impacta

Esta es, para mí, la configuración más importante de todo el módulo y la que más gente va a configurar mal. Define si el filtro es condicional o sumativo.

Consejo: si tu catálogo es pequeño o tiene muchos atributos, empieza con Or. Con And y pocos productos vas a mostrarle "sin resultados" al usuario constantemente, y eso mata la experiencia de compra más rápido que un filtro lento.

• And: se tienen que cumplir todas las condiciones. "Muéstrame los productos que sean de esta categoría y tengan esta etiqueta y este color".
• Or: basta con que se cumpla cualquiera de las condiciones. "Muéstrame los productos que tengan esta categoría o esta etiqueta o este color".

En el video me pasó justo lo que le va a pasar a mucha gente: dejé And, filtré por una categoría, un color y una talla, y el resultado fue "no hay resultados". No estaba roto — simplemente esa combinación exacta no existía en el catálogo. Cambié a Or y ahí sí devolvió todas las coincidencias.

Paso 7: configurar los campos del filtro

Los cuatro elementos que trae el módulo por defecto son editables. Al de Apply, por ejemplo, yo le cambié la etiqueta a "Filtrar" — mucho más intuitivo para un usuario hispanohablante — manteniendo su tipo de campo en Submit.

En el campo de Category tienes que elegir la fuente de datos. Yo seleccioné Product Categories y al instante aparecieron todas las categorías de la tienda. Los tipos de campo disponibles son bastantes:

• Select (lista desplegable), Radio, Buttons y Checkbox.
• Rango de precios, Stock y Review Rating.
• Ordenar y Ordenar por múltiple, que puedes colocar arriba del loop en vez de en el filtro lateral.

Agregar campos nuevos con Post Filter Item

Para sumar filtros propios, dentro del módulo agregas un elemento llamado Post Filter Item. Por defecto entra como campo de búsqueda y tú lo reconfiguras.

Consejo: una vez que tengas un Post Filter Item configurado con su tipo y sus estilos, duplícalo y solo cámbiale la taxonomía. Yo armé el filtro de tallas duplicando el de colores — dos clics en lugar de reconfigurar todo desde cero.

Aquí va el detalle que más tiempo te puede hacer perder: elige primero el tipo de campo y después la fuente de datos. Cuando el item está en su estado inicial, la lista de fuentes te muestra Meta Keys y campos personalizados. Pero en cuanto lo cambias a Radio o Checkbox, esa lista se refresca y aparecen las taxonomías reales — Product Color, Product Size, Product Tag. Si lo haces al revés, no vas a encontrar la taxonomía que buscas y vas a pensar que Divi no la detecta.

Un apunte sobre el campo de búsqueda: en el video escribí "shirt" y el filtro me devolvió las coincidencias por término, sin necesidad de acertar el nombre exacto del producto. Combinado con los filtros de taxonomía, cubre bastante bien la intención de búsqueda del usuario.

Paso 8: estilos y comportamiento sticky

El Post Filter es un módulo como cualquier otro de Divi 5, así que se estiliza igual. Lo que hice yo fue un borde de 1 o 2 píxeles alrededor del módulo, un spacing de 10px arriba y a los lados, y en la pestaña de Fields le trabajé los inputs: fondo degradado al 50% para que sea más claro que el color base, border radius de 10px, y las etiquetas en peso 650, tipografía sans, a 16-18px.

🎓 ¿Quieres dominar Divi 5 de verdad?
En el curso completo de Divi 5 tengo un par de clases dedicadas exclusivamente al Loop Builder y su sistema de filtrado, con casos que no caben en un tutorial de YouTube. Accede como suscriptor y trabaja el Loop Builder a fondo.

El toque que más me gustó fue mandarlo a Avanzado, entrar en Scroll Effects y activar Sticky on Top con 20px de offset. El filtro se queda fijo mientras el usuario recorre el catálogo, que es justo lo que uno espera de una tienda seria.

Paso 9: arreglar el orden en móvil

Sí, todo esto es responsive de fábrica. Pero hay un detalle que tienes que corregir a mano: en móvil, las dos columnas se apilan y el filtro queda arriba de los productos. El usuario abre tu tienda en el celular y lo primero que ve es un bloque de filtros, no el catálogo.

Se arregla con la opción Order de cada columna, que Divi 5 te deja definir por breakpoint. En escritorio dejas el filtro en 1 y el loop en 2. En móvil inviertes: el loop en 1 y el filtro en 2. Con eso, en el celular el usuario ve primero los productos y el filtro queda al final.

Otra ruta que me parece interesante, aunque no la cubrí en el video, es meter el filtro dentro de un menú contextual en móvil y abrirlo con las interacciones nativas de Divi 5. Eso ya es material para otro tutorial.

Lo que todavía le falta al Post Filter

No te voy a vender que esto está terminado, porque no lo está. Hay dos cosas que eché de menos mientras construía el ejemplo.

La primera es que no hay opción nativa de colapsar los grupos de filtros. Si tienes categorías, colores, tallas y marcas, la columna se vuelve larguísima y no puedes plegar cada bloque como en cualquier tienda moderna. Es lo primero que le pediría a Elegant Themes.

La segunda es que no tiene integración con los Variation Swatches. Filtrar colores con radios de texto funciona, pero no es lo mismo que filtrar con las muestras visuales de color que ya tienes configuradas en tus productos. Sería un gran añadido para una versión futura.

Aun con esas dos ausencias, el balance para mí es claramente positivo: era justo lo que le hacía falta al Loop Builder para ser una herramienta completa.

Recomendaciones finales

1. Nombra tus loops antes de crear el filtro. El Target trabaja con esos nombres y en una página con varios loops es la diferencia entre configurar en diez segundos o adivinar.
2. Prueba And y Or con tu catálogo real, no con tres productos de demo. La cantidad de resultados vacíos depende directamente de cuántos productos tengas y cuántos atributos compartan.
3. Configura el tipo de campo antes que la fuente de datos. Las taxonomías solo aparecen en la lista después de que el item sabe qué tipo de campo es.
4. Revisa el orden de columnas en móvil siempre. Es el error que más se cuela porque en el editor de escritorio se ve perfecto.
5. Aplica esto a tus otros Custom Post Types. El mismo flujo te sirve para un directorio, un portafolio o un catálogo de inmuebles. No lo encajones en WooCommerce.

🎓 ¿Quieres construir una tienda completa con Divi 5?
En el curso de Tiendas Online con Divi 5 y WooCommerce levantamos una tienda entera desde cero: catálogo, filtros avanzados, carrito dinámico y sistema de marcas. Accede como suscriptor y termina con tu tienda publicada, no con un tutorial a medias.

Conclusión

Con el Post Filter, el Loop Builder deja de ser solo una herramienta de maquetación dinámica y pasa a ser un sistema completo de catálogo: diseñas la tarjeta como quieras y el usuario filtra el contenido sin plugins de terceros. Le faltan cosas, sí, pero la base está sólida y funciona. Si ya tienes un loop montado en tu sitio, agregarle el filtrado es cuestión de apuntar el Target y configurar los campos. Y si todavía no lo tienes, este es buen momento para dejar de depender de los módulos prediseñados.

Cuéntame en los comentarios del video qué otras funciones de Divi 5 te gustaría que cubra, que las apunto para los próximos tutoriales. Si quieres seguir por esta línea, también te puede servir ver cómo armar un carrusel de productos con el mismo Loop Builder o repasar qué traen los módulos nativos de WooCommerce en Divi 5.