Si tienes una tienda online con Divi, una de las mejores inversiones que puedes hacer para mejorar la experiencia de compra es agregar filtros de productos en tiempo real. Divi Ajax Filter de Divi Engine es el plugin más completo para lograrlo sin escribir una sola línea de código. En este tutorial te mostramos cómo configurarlo y qué posibilidades abre para tu tienda.
¿Por qué los filtros AJAX mejoran la conversión en tu tienda?
Un cliente que no encuentra lo que busca en menos de tres clics, abandona. Los filtros AJAX eliminan ese punto de frustración: el usuario selecciona categoría, rango de precio, color o talla y la página actualiza los resultados instantáneamente, sin recarga. Este comportamiento — que Amazon, Zalando y las grandes tiendas llevan años usando — reduce la tasa de abandono y aumenta el tiempo de sesión en la tienda.
Además, los filtros AJAX tienen una ventaja técnica sobre los filtros de recarga de página tradicionales: evitan el tiempo de carga completo en cada filtrado, lo que mejora la percepción de velocidad del sitio.
Qué puede filtrar Divi Ajax Filter
El plugin no está limitado a productos de WooCommerce. Puede filtrar cualquier tipo de contenido de WordPress:
- Productos WooCommerce (el uso más común)
- Publicaciones del blog
- Páginas de WordPress
- Proyectos y portafolio
- Cualquier CPT personalizado (cursos, propiedades, recetas, eventos, etc.)
Y los criterios de filtrado disponibles son:
- Categorías y subcategorías
- Etiquetas
- Rango de precio (slider)
- Taxonomías personalizadas
- Campos personalizados de ACF
- Atributos de productos (variation swatches: color, talla, material)
- Valoración del producto (rating)
- Caja de búsqueda de texto en tiempo real
Configuración paso a paso de Divi Ajax Filter
Paso 1: Instalar el plugin
Divi Ajax Filter es un plugin premium de Divi Engine. Después de comprarlo, descarga el ZIP y ve a tu panel de WordPress → Plugins → Añadir nuevo → Subir plugin. Una vez activado, aparecerá un nuevo panel de configuración en tu admin.
Paso 2: Crear un nuevo filtro
Ve a Divi Ajax Filter → Añadir nuevo filtro. El proceso de configuración tiene tres secciones principales:
- Tipo de contenido: selecciona qué quieres filtrar — productos, posts, CPT, etc.
- Elementos del filtro: agrega los criterios que el usuario podrá usar. Puedes arrastrar y ordenar los bloques de filtro (categorías, precio, color, etc.).
- Loop Archive: configura cómo se visualizan los resultados — grid o lista, número de columnas, qué información muestra cada card de producto.
Paso 3: Configurar los filtros de precio
Para el slider de precio, Divi Ajax Filter calcula automáticamente el rango mínimo y máximo basándose en tus productos activos. Puedes personalizar el color del slider, el formato de moneda y si el filtro se aplica en tiempo real o con un botón de confirmar.
Paso 4: Configurar variation swatches (color y talla)
Si tus productos tienen atributos de variación (color, talla, material), el plugin puede mostrarlos como swatches visuales — pequeños cuadros de color o etiquetas — en lugar de un dropdown simple. Esto mejora considerablemente la usabilidad, especialmente en móvil.
Paso 5: Insertar el filtro en Divi
Después de guardar la configuración, Divi Ajax Filter genera un shortcode. Puedes insertarlo en cualquier página con Divi usando un módulo de código, o usar directamente el módulo nativo que el plugin agrega al constructor visual de Divi.
El poder del Loop Archive personalizado
Una característica que diferencia a Divi Ajax Filter de otros plugins de filtros para WooCommerce es el control sobre el Loop Archive — la zona donde aparecen los resultados. Puedes configurar:
- Número de columnas del grid (diferente en desktop, tablet y móvil)
- Mostrar u ocultar el botón "Añadir al carrito"
- Mostrar u ocultar el precio
- Activar la paginación infinita o por páginas
- Ajustar el espacio entre cards
Para la tienda, esto significa que la página de filtros puede tener un diseño completamente distinto a la tienda principal, optimizado específicamente para la exploración de productos.
¿Quieres construir una tienda completa con Divi desde cero? Nuestro curso de tiendas online con Divi 5 y WooCommerce cubre diseño, configuración de pagos, email marketing y mucho más.
Compatibilidad con otros plugins
Divi Ajax Filter está diseñado específicamente para el ecosistema Divi y es compatible con:
- WooCommerce y la mayoría de sus extensiones.
- ACF para filtrar por campos personalizados.
- WPML / Polylang para sitios multilingüe.
- Divi Machine para layouts de CPT más avanzados.
Rendimiento: qué esperar con muchos productos
Divi Ajax Filter hace una petición AJAX al servidor cada vez que el usuario cambia un filtro. Para tiendas con menos de 500 productos, el tiempo de respuesta es prácticamente instantáneo. Con catálogos grandes (1,000+ productos), hay algunas optimizaciones que ayudan:
- Object cache: activa Redis o Memcached en tu hosting para que los resultados de las queries frecuentes se sirvan desde memoria en lugar de la base de datos.
- Índices en base de datos: asegúrate de que los campos por los que filtras (precio, categoría, atributos) tienen índices correctos en la base de datos de WooCommerce.
- Paginación estricta: evita cargar más de 24-36 productos por página en la primera petición. La carga infinita puede ser contraproducente en móvil si el usuario nunca llega a los resultados del fondo.
- Excluir del caché de página: las URLs con parámetros de filtro AJAX no deben cachearse a nivel de página completa (LiteSpeed, WP Rocket, etc.) para que cada combinación de filtros sirva resultados correctos.
Preguntas frecuentes sobre Divi Ajax Filter
¿Divi Ajax Filter funciona con Divi 5?
Sí. Divi Engine mantiene sus plugins actualizados con cada versión de Divi. Verifica siempre la versión mínima requerida en la documentación de Divi Engine antes de actualizar.
¿Afecta el rendimiento del sitio?
El filtrado AJAX hace llamadas asíncronas al servidor, lo que es más eficiente que recargar la página completa. Sin embargo, si tienes miles de productos, las queries de la base de datos pueden ser lentas. Asegúrate de tener un objeto cache activo (Redis o Memcached) en tu hosting para mejorar el rendimiento.
¿Puedo tener múltiples instancias de filtros en la misma página?
Sí. Puedes crear varios filtros con diferentes configuraciones y colocarlos en distintas páginas o incluso en la misma página (por ejemplo, un filtro de categorías en el sidebar y un filtro de precio en la parte superior del grid).
¿Funciona con la búsqueda nativa de WooCommerce?
Divi Ajax Filter tiene su propio componente de búsqueda de texto que filtra los resultados dentro del loop de productos configurado. No depende del motor de búsqueda nativo de WordPress, por lo que puedes tener ambos en la misma página sin conflictos.
Conclusión
Divi Ajax Filter resuelve uno de los puntos de fricción más comunes en tiendas online con Divi: la falta de filtros avanzados compatibles con el constructor visual. La configuración es intuitiva, el resultado es profesional y el impacto en la experiencia de usuario es inmediato. Si tu tienda tiene más de 20 productos en múltiples categorías, los filtros son prácticamente obligatorios para que tus clientes encuentren lo que buscan.
Comentarios
35 comentariosPara dejar un comentario, accede a tu cuenta de UXDivi.
Acceder a mi cuenta →Me llama la atención que el botón de añadir al carro o seleccionar opciones, lo centres en la plantilla y luego al visualizar en la tienda te lo justifique a la izquierda, es un error del plugin? se puede corregir?
Hola Carlos. Si, lo pude notar, es un problema de jerarquía de los estilos con el plugin de Bodycommerce. Pero para solucionarlo solo debes ir al módulo donde colocaste el botón para añadir al carrito y colocar el siguiente CSS: » margin-left: 25%; » te muestro como: https://snipboard.io/nxzG0Y.jpg
Hola, mucho gusto, una pregunta, es posible hacer un orden de las categorías de forma personalizada? y que no sea en orden alfabético? actualmente estoy usando el plugin con un cliente, y aunque va de maravillas, el cliente quiere organizar las categorías de una manera personalizada, que no tiene nada que ver con su orden alfabético. Saludos.
Hola Rosa, por defecto este plugin no te ordena las categorías, pero acá encontré un foro de soporte donde te explica como ordenar las categorías en WordPress con código o Plugin: https://stackoverflow.com/questions/517940/how-to-order-categories-in-wordpress
Hola Jefferson, tengo un problemilla. Acabo de instalar Divi Ajax Filter y hay un error en el ícono del overlay, acá puedes verlo
https://bajurauctions.com/demoweb/shop/
Tengo el DIVI actualizado, habrá alguna manera de corregirlo?
Saludos.
Que tal José Luis, hemos actualizado Divi Ajax Filter a su última versión en nuestra web, por favor descárgala y actualízala en tu instalación, con eso probablemente se resuelva el problema.
Listo, ya está! muchas gracias!
Ahora tengo otro problema. cuando reseteo los filtros de categoría me aparece el mensaje «No Results Found», igual cuando le quito los checks y hasta cuando le doy a la opción «All».
Una ayuda por favor.
https://bajurauctions.com/demoweb/shop/
Puedes Probar activando la opción de «All» desde el filtro, seguramente no está correctamente activada, o en su defecto, desactivarla.
Sigue igual, ya probé activando y desactivando, pero sigue con el mismo error. ¿qué podrá ser?
Es difícil saberlo pues el plugin tiene muchas opciones. Si gustas manda el acceso por soporte para echarle un vistazo.
Ya mismo lo mando, muchas gracias!!
Hola Jefferson. Impecable tutorial, sin embargo quede con varias dudas.
Puedes revisar el link https://carruselazul.cl/categoria-producto/accesorios/ en el filtro de precios no se me visualiza la barra para seleccionar un rango de precios, solo me deja colocar el precio escribiéndolo. Lo otro que me esta sucediendo es que al seleccionar cualquier filtro no toma ninguna opción, es decir no cargan los filtros.
Cabe destacar que estoy utilizando el Theme Divi desde la descarga de tu curso de Divi Básico y el plugin también lo instale con la descarga de este tutorial.
Saludos y gracias por compartir esas clases con tus alumnos!!
Que tal Diego, no te preocupes, estamos para ayudar.
Sobre la primera duda, revisa bien la parte del tutorial donde explicamos que para el filtro de precios debes escoger que este sea un tipo de campo «numérico» esto lo ves en las opciones del filtro específicamente de precios.
Sobre la segunda duda, esto te está sucediendo porque estás usando el módulo de «productos» de Divi nativo, y no es este el que debes usar, sino el módulo de «archive loop» de Ajax filter, tal como el que usamos en el tutorial. Puedes verificarlo a detalles y te darás cuenta de la diferencia.
Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐
Hola Jefferson, siempre agradecido por la ayuda que nos das a los que emprendemos en este rubro.
Tengo una consulta, usando el Divi Ajax Filter en la tienda ¿cuál sería la mejor manera de incluir un buscador que se pueda usar en toda la web?
Saludos.
Qué tal José, solo para entender la consulta ¿te refieres a integrar un buscado en una tienda online que tenga un blog y que también produzca resultados de búsqueda de ese blog?
Solo que busque en productos, utilizando el diseño de la tienda que está con Divi Ajax Filter.
Lo hago con divi builder utilizando el Theme Builder «Resultados de la búsqueda» y el buscador por defecto pero no lo detecta en el resultado.
¡Ah vale! No te preocupes, tienes un par de opciones, esta es una: https://uxdivi.com/tutorial-premium/solucion-problemas-divi/solucionado-mostrar-productos-y-otros-cpt-en-resultados-de-busqueda-de-divi
Y está es la otra: https://uxdivi.com/blog/tutoriales-free/resultados-de-busqueda-de-productos-en-tienda-online-con-divi
Revisalas y ya ve cuál te funciona mejor.
Hola Jefferson, funcionó la primera! lo malo es que busca solo con el nombre exacto, tampoco referencia contenidos de párrafos o categorías, ¿habrá alguna otra solución?
La segunda opción que te coloque, del plugin de Woo Search, tienes opciones de ampliar la búsqueda en su configuración ¿lo revisaste?
Gracias Jefferson por el tutorial, muy claro todo. Te molesto con una consulta relacionada al plugin, he visto (creo que también realizado por este complemento) que los resultados de los filtros (los productos) tienen una estilo especial, me refiero a que son tipo columnas con fondo blanco, un pequeño borde y una sobra que les brinda un efecto de relieve o profundidad. Es posible poder configurar esto cuando incorporas el modulo de .Archivo Loop?
Te dejo el link donde vi ese efecto:
https://ovdemos.com/woocommerce/tienda/
PD: Además de este plugin de la empresa divi engine, tenes algun curso sobre el resto de los productos de compañia?
Que tal David, un gran saludo. En efecto, con este plugin si se puede crear ese tipo de estilos en los productos. Lo logras realizando un diseño personalizado desde la biblioteca, y luego trayendo ese diseño a través del Archive Loop de Ajax Filter. En este tutorial no lo explicamos pero en nuestro curso de Divi Bodycommerce si: https://uxdivi.com/cursos/curso-intermedio-de-tienda-online-con-divi-bodycommerce
Si, y sobre cursos de los productos de Divi Engine actualmente tenemos este tutorial, el curso antes mencionado, y el curso de Directorio con Divi Machine que puedes encontrar acá: https://uxdivi.com/cursos/curso-de-directorio-de-bienes-raices-con-divi
Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐
Gracias, ultima consulta, en el caso de suscribirme como parte del material para descargar están los plugins (ajax filter, bodycommerce)?
Saludos, David
Así es David, tendrás acceso a estos y casi 70 plugins más para que puedas probar mientras aprendes.
Saludos Jeff, gracias infinitas por tu contenido.
Tengo un par de dudas. Como puedo colocarle el signo de $ al filtro por precio? y por ultimo, la misma barra de precios el precio mayor se ve cortado por ejemplo «14.990» solo se alcanza a ver «14.99» no se ven los dígitos siguiente porque salen cortados.
Gracias por todo.
Que tal Diego, todo ello lo corriges desde las opciones de filtro de «price range» que trabajamos en este mismo tutorial. Explora estás opciones con detenimiento y allí lo encontrarás.
Hola Jeff, lo veo muy interesante y lo estoy tratando de aplicar en una pagina en concreto que tengo en el generador de temas para unos productos especificos, pero no se como decirle que es para esa pagina en concreto , espero haberme explicado . muchas gracias, saludos.
Que tal Roberto, lo ideal sería que esos productos les crees o una categoría o una etiqueta particular, y que luego crees el layout con el filtro aplicado solo para esa categoría o etiqueta.
Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐
si me di cuenta de ello con el manejo lo hice en la biblioteca con el modulo tienda asigne una categoría y después cogí el layout de esta con el plugin ahora estoy con la configuración del diseño pero creo que me funcionara, muchas gracias jeff. saludos
¡Un gusto ayudar! 😊🖐
Hola Jefferson muchas gracias por los tutoriales, tengo un un problema , y es casi al principio, cuando creamos el Layout, donde pones el Texto de Tienda, luego creas otra seccion debajo con 2 columnas, y en el moduo de la derecha que seleccionas «Archive Loop- Divi Ajax Filter» despues de seleccionar esto , en las opciones de ese modulo en Loop Style no me aparece en las opciones desplegables el que dice Default (WooCommerce Only) , intente varias cosas , pero no se como hacer que me aparezca, gracias por tu atencion.
Que tal Rolando, Así es, en las nuevas versiones ahora debes escojer la opción de «Loop Templates» y dentro de esas templates escojer la de Divi Shop Style.
Acá puedes verlo: https://snipboard.io/2HZOFb.jpg
Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐
Hola Jefferson, se puede usar Divi Ajax Filter en tienda diseñada con Woo Essential?
O solo funciona con Bodycommerce? Porque lo incluí en la página de tienda realizada con Woo essential, y no filtra …
Que tal Federico, en efecto, funciona solo con Bodycommerce o con el módulo nativo de Divi, pero no funciona con otros módulos de tienda de otros productos. Es una de las limitantes de estos plugins.
Hola Jefferson, gracias por tu respuesta; ahora me queda claro. Saludos.