Un filtro AJAX para WooCommerce actualiza los productos coincidentes sin recargar toda la página. Con HookSpark Product Filters, el cliente puede filtrar un catálogo dedicado por precio y disponibilidad, revisar los resultados y borrar su selección. En escritorio, cambiar un campo inicia la actualización; en el panel móvil, el cliente revisa sus opciones y las aplica juntas.
El ejemplo utiliza un pequeño catálogo de tazas. El cliente busca una taza disponible con un precio entre 20 y 40 en la moneda de la tienda. Distinguiremos una búsqueda válida sin resultados de un intervalo de precios no válido y de una actualización fallida: cada caso requiere una solución diferente.
¿Qué cambia con los filtros AJAX?
AJAX describe cómo la página solicita y muestra resultados actualizados. No crea atributos, no corrige las existencias ni garantiza más ventas. El plugin obtiene la página filtrada y sustituye su sección de catálogo. El resto de la página permanece, mientras las selecciones, el recuento y las fichas reflejan la búsqueda aplicada.
La investigación de Baymard Institute “Filtering UX: Display Applied Filters in an Overview”, consultada el 22 de octubre de 2026, respalda mostrar las selecciones activas para comprender y ajustar una lista filtrada. No mide las ventas obtenidas con este plugin.
La configuración actual utiliza un catálogo dedicado mediante shortcode. Activar el plugin no sustituye automáticamente todos los archivos de tienda, cuadrículas del tema o widgets de productos de un maquetador. Prueba la página y la cuadrícula que utilizarán tus clientes.
1. Prepara un catálogo que puedas comprobar
Empieza en un sitio de pruebas con WooCommerce y HookSpark Product Filters. El ejemplo de precio y disponibilidad utiliza filtros compatibles con la edición Free y no requiere las herramientas Pro para páginas SEO. Usa productos simples publicados y visibles en el catálogo, y comprueba sus precios y existencias en WooCommerce.
Como referencia, prepara tres tazas disponibles con precios de 15, 25 y 35, más una taza agotada de 30. Utiliza una sola moneda y la base de precios mostrada en el catálogo de prueba. Los impuestos, los productos variables y las herramientas multimoneda requieren comprobaciones específicas antes de ampliar el ejemplo.
2. Crea y publica el catálogo de filtros
Crea un conjunto en HookSpark Product Filters, asígnale un nombre reconocible y selecciona el ámbito del catálogo. Guarda y activa el conjunto. Inserta el shortcode generado para ese conjunto en una página de WordPress y ábrela como visitante. Para la primera prueba, utiliza una página distinta de la tienda existente.
El catálogo publicado debe mostrar los campos de precio, el selector de disponibilidad y los productos coincidentes. Si no está disponible, comprueba que el conjunto esté guardado y activo y que el shortcode lo identifique correctamente. No copies un ID de ejemplo de otra web.
3. Filtra por precio y disponibilidad
Indica un precio mínimo de 20 y un máximo de 40 y selecciona los productos en stock. En escritorio, los cambios en los campos inician actualizaciones: espera a que terminen antes de evaluar el resultado. En una pantalla estrecha, abre el panel, elige los mismos valores y aplica los filtros con el botón correspondiente. Los valores seleccionados siguen visibles tras la actualización.
Con los cuatro productos de referencia, deben aparecer las tazas disponibles de 25 y 35. La de 15 queda por debajo del intervalo; la de 30 está agotada. Deben cumplirse el precio y la disponibilidad. Si obtienes otro resultado, revisa los datos de los productos y el ámbito del conjunto antes de añadir más filtros.
4. Distingue búsquedas vacías, datos no válidos y fallos
Un intervalo válido de 100 a 120 no encuentra productos en este pequeño catálogo. Es una búsqueda sin resultados, no una prueba de que AJAX falle. Quita un filtro seleccionado o restablece los filtros para ampliar la búsqueda. El reinicio vuelve al ámbito guardado del catálogo, no necesariamente a todos los productos de la tienda.
Un mínimo de 40 con un máximo de 20 no es válido. Corrige el intervalo invertido en lugar de interpretarlo como una búsqueda sin coincidencias. Si falla la solicitud de red, el plugin mantiene los resultados anteriores y permite reintentar. Esos productos no confirman que se hayan aplicado los nuevos filtros.
Comprueba el recorrido del cliente antes de publicar
Repite la búsqueda de 20–40 con productos disponibles en escritorio y móvil. Revisa el recuento, las fichas y los valores seleccionados; restablece los filtros y comprueba el catálogo inicial. Prueba el intervalo sin resultados, invierte los límites y corrígelos. Tras dos búsquedas válidas distintas, utiliza Atrás y comprueba que selección y resultados coincidan.
Prueba el tema, la caché y las optimizaciones finales como visitante. Sin JavaScript, el formulario puede utilizar navegación GET normal y recargar la página. Es una alternativa útil, pero no demuestra que la mejora AJAX esté funcionando. Evita prometer compatibilidad con cualquier tema o mayor velocidad sin medir tu configuración.
Preguntas frecuentes
¿Los filtros AJAX se aplican al instante en todos los dispositivos?
En escritorio, los cambios de campo inician una actualización. En el panel móvil, elige los valores y aplícalos juntos. La solicitud de red necesita tiempo: AJAX no significa resultados instantáneos.
¿Puedo filtrar también por color o talla?
Puedes mostrar los atributos globales compatibles de WooCommerce en el conjunto. La guía específica explica la preparación de datos y las variaciones coincidentes. Los atributos personalizados locales no equivalen a los atributos globales.
¿Restablecer los filtros elimina la categoría del catálogo?
Borra las opciones del cliente dentro del conjunto guardado. El ámbito de categoría configurado para ese conjunto sigue formando parte del catálogo.
¿Aparecerán todas las URL filtradas en Google?
No. El comportamiento AJAX y la indexación son decisiones distintas. No conviertas cada combinación de precio o disponibilidad en una página indexable. Revisa la guía SEO del plugin antes de activar páginas dedicadas.
La guía de Google “Managing crawling of faceted navigation URLs”, consultada el 22 de octubre de 2026, advierte de que las combinaciones de filtros pueden generar muchas URL rastreables. Decide qué páginas merecen visibilidad en buscadores por separado de cómo se actualizan los resultados.
Configura filtros por atributo · Guía de configuración de Product Filters
Empieza con un catálogo claro, verifica los productos esperados y facilita la recuperación ante búsquedas vacías o actualizaciones fallidas. Añade otros filtros cuando respondan a una necesidad real de compra.
Descubre HookSpark Product Filters →
Para configurar categorías, incluir subcategorías y mantener el ámbito al restablecer, consulta la guía para filtrar WooCommerce por categoría.