Filtros de productos en WooCommerce con Divi: guía

Piensa en esos grandes marketplaces donde compras a diario: lo primero que haces al entrar a una categoría es filtrar por precio, talla, color o marca para encontrar rápido lo que buscas. Esa comodidad no es casualidad, es diseño deliberado. Y la buena noticia es que puedes ofrecer exactamente esa misma experiencia en tu tienda hecha con Divi sin gastar un peso en soluciones premium ni complicarte con código avanzado. Vamos a verlo.

Por qué los filtros aumentan tus ventas

Antes de la parte técnica, quiero que entiendas el porqué, porque eso le da sentido a todo el trabajo que vas a hacer. Cuando un visitante llega con la intención de comprar algo concreto, cada clic extra que le obligas a dar es una oportunidad de que se frustre y se vaya. Si para encontrar una camiseta roja talla M tiene que recorrer cuarenta productos página por página, lo más probable es que abandone. Los filtros eliminan esa fricción y lo llevan directo a lo que busca. Detrás hay un principio de usabilidad simple: mientras menos esfuerzo le cueste al usuario alcanzar su objetivo, mayor es la probabilidad de que complete la compra. Además, un catálogo con filtros transmite una sensación de tienda seria y bien surtida.

Consejo: No agregues filtros por agregar. Cada filtro que muestras debe corresponder a una decisión real de compra de tu cliente. Si vendes ropa, el color y la talla son críticos; si vendes libros, el género y el autor. Filtra por lo que la gente de verdad usa para decidir, no por todo lo que técnicamente puedes filtrar.

¿Qué plugin vamos a usar?

Vamos a utilizar el plugin WooCommerce Product Filter desarrollado por Themify. Es una herramienta gratuita, ligera y compatible con Divi. Permite filtrar por categorías, precio, etiquetas, marcas y más, sin complicaciones. Aunque es básico comparado con otras opciones avanzadas, cumple perfectamente su función y lo puedes mejorar con configuraciones visuales y de experiencia de usuario.

Lo elegí por dos razones: es gratuito, lo que baja la barrera para que cualquiera lo implemente hoy mismo, y es liviano, sin la carga de scripts pesados que ralentizan la tienda, algo clave en WooCommerce donde el rendimiento ya es sensible. Existen alternativas premium más potentes, pero para la mayoría de las tiendas pequeñas y medianas esta solución cubre el 90% de las necesidades reales.

⚡ Consejo: Si quieres implementar filtros más avanzados como variaciones por color, talla o condicionales múltiples, te recomiendo nuestro Curso completo de WooCommerce.

Paso a paso para implementar filtros en Divi

1. Instala y activa el plugin

Ve a la sección de Plugins > Añadir nuevo y busca "Temy" o "WooCommerce Product Filter". Instala el plugin de Temy y actívalo. Esto creará una nueva pestaña de configuración en tu dashboard. Como con cualquier plugin nuevo, te recomiendo hacerlo primero en un entorno de pruebas si tu tienda ya está en producción y recibe ventas, para asegurarte de que todo se comporta bien antes de tocar el sitio en vivo.

2. Crea tu filtro personalizado

En la sección del plugin, selecciona "Añadir nuevo filtro". Puedes nombrarlo como "Filtros tienda" o "Filtros Divi". En el layout, elige "Barra lateral" para que los filtros se muestren a un costado de los productos.

Activa las siguientes opciones:

• Ocultar productos vacíos.
• Ocultar productos sin stock (opcional).
• Activar scroll automático a resultados.
• Mostrar mensaje personalizado si no hay resultados.
• Agregar botón de reinicio de filtros.

Presta atención a dos de estas opciones, porque marcan una gran diferencia. El "scroll automático a resultados" lleva al usuario directo a los productos filtrados sin desplazarse manualmente, un detalle que se siente muy profesional. Y el "mensaje personalizado si no hay resultados" evita que el cliente se quede mirando una pantalla en blanco cuando una combinación de filtros no arroja productos, algo que de otra forma parecería un error del sitio.

3. Agrega los filtros que necesites

Puedes añadir varios tipos de filtros en un mismo formulario. Los más comunes y recomendados son:

• Precio: usa el modo "slider" y define un step (ej. 10).
• Categorías: activa jerarquía, subcategorías y estilo "checkbox".
• Marcas: si ya usas esta taxonomía.
• Etiquetas: ideales para clasificaciones secundarias.
• En oferta: muestra productos con descuento.

Guarda cada filtro y verifica que su lógica sea coherente. Puedes elegir entre "AND" (cumplir todas las condiciones) o "OR" (cumplir al menos una). La elección importa: para categoría y precio suele convenir "AND" (camisetas Y por debajo de cierto precio), mientras que para etiquetas o marcas a veces va mejor "OR", para ver productos de varias marcas a la vez. Piensa siempre en cómo razona tu cliente al buscar.

✨ Tip profesional: Usa checkbox para mostrar las categorías y etiquetas de forma clara. Si son muchas, considera el estilo "dropdown" o "multiselect".

4. Copia el shortcode generado

Una vez configurados tus filtros, copia el shortcode que genera el plugin. Este será el código que insertarás en tu página de tienda dentro del Theme Builder de Divi. El shortcode es la pieza que conecta toda la configuración que acabas de hacer con la parte visible de tu tienda, así que guárdalo a mano porque lo necesitarás en el siguiente paso.

5. Inserta el shortcode en tu página de tienda

Desde Divi, ve al Theme Builder y edita la plantilla de tu tienda. Ajusta la estructura a dos columnas: una para filtros y otra para productos. Pega el shortcode en un módulo de texto en la columna izquierda.

Agrega un título como "Filtros" con un módulo de texto y estilo de encabezado H2. Aquí es donde se nota la ventaja de trabajar con el Theme Builder de Divi: en lugar de pelear con widgets o sidebars rígidos como en otros temas, tienes control visual total sobre dónde y cómo se ven tus filtros. Puedes ajustar el ancho de cada columna, los espacios y la jerarquía exactamente como quieras.

6. Ajusta el módulo de productos

En la columna derecha, asegúrate de que el módulo Woo Products esté mostrando 18 productos y que esté usando la página actual para mantener la categorización. Ese detalle de "usar la página actual" es fundamental: gracias a él, si el visitante navega la categoría "Zapatos", los filtros actúan solo sobre los zapatos y no sobre todo el catálogo, que es justo lo que el usuario espera.

7. Personaliza visualmente la columna de filtros

Puedes usar CSS para modificar la apariencia de la barra de filtros. Por ejemplo, aplicar color al slider de precios o fondo gris a la columna. Esto lo haces desde "Opciones del tema > CSS personalizado".

Ejemplo de CSS para personalizar color del slider:

.wcpf_price_slider .ui-slider-range { background-color: #FFA500 !important; }

Este snippet cambia el color de la franja activa del slider de precios. La clave es ajustar ese background-color al color principal de tu marca, para que los filtros no parezcan un elemento ajeno pegado a tu tienda, sino una parte integrada de tu identidad visual.

También puedes darle padding, bordes y colores a la columna desde el editor visual de Divi. Te recomiendo un fondo sutil (un gris muy claro funciona muy bien) y algo de espacio interno, para que la zona de filtros se sienta como un bloque definido y ordenado, separado de la cuadrícula de productos.

Consejos de usabilidad en móvil

El plugin no permite minimizar los filtros en versión móvil, así que te recomiendo reordenar las columnas. Muestra primero los productos y luego los filtros al final en dispositivos pequeños. Esto importa muchísimo porque la mayoría de las compras online hoy ocurren desde el celular. Si en móvil tu visitante tiene que hacer scroll a través de una larga columna de filtros antes de ver un solo producto, lo vas a perder. Priorizar los productos y dejar los filtros accesibles pero secundarios es la decisión correcta para pantallas pequeñas.

Consejo: Prueba tu tienda con filtros en un celular real, no solo en el preview del navegador. La experiencia táctil con sliders de precio y checkboxes pequeños puede ser muy distinta de lo que parece en escritorio. Si a ti te cuesta usarlos con el dedo, a tus clientes también.

¿Cómo se ven los filtros en acción?

Una vez implementados, los filtros son completamente funcionales y se aplican de forma dinámica. Puedes filtrar por precio, categorías y etiquetas sin recargar la página. Al activar varios filtros, verás solo los productos que cumplan con las condiciones. Esa actualización instantánea es justo lo que hace que la experiencia se sienta moderna y fluida, como la de las grandes tiendas a las que tus clientes ya están acostumbrados.

El botón de "borrar filtros" es especialmente útil para restablecer la vista sin recargar manualmente. Nunca lo subestimes: cuando un cliente aplica varios filtros y no encuentra lo que busca, su instinto es empezar de cero, y si no le das una forma rápida y visible de hacerlo, cierra la pestaña. Ese botón es su red de seguridad para seguir explorando tu catálogo en lugar de rendirse.

Cursos recomendados para mejorar tu tienda WooCommerce

Si quieres seguir profesionalizando tu tienda online, en UXDivi tenemos varios cursos que pueden ayudarte:

• Curso completo de WooCommerce: Aprende a usar filtros avanzados, variaciones visuales, optimización de checkout, automatizaciones y más, desde cero hasta tener tu ecommerce completo usando Divi y WooCommerce.
• Curso de Automatización con Make: Publica contenido, envía correos automáticos y automatiza tareas clave de tu tienda.

Preguntas frecuentes sobre filtros en WooCommerce con Divi

¿El plugin de filtros es realmente gratuito?

Sí, WooCommerce Product Filter de Themify tiene una versión gratuita en el repositorio oficial de WordPress que cubre las funciones esenciales: filtrar por precio, categorías, etiquetas y marcas. Existe una versión premium con funciones más avanzadas, pero para la mayoría de las tiendas la gratuita es más que suficiente.

¿Los filtros ralentizan mi tienda?

Este plugin es liviano y está bien optimizado, así que su impacto en el rendimiento es mínimo. Lo importante es no abusar: si configuras una cantidad razonable de filtros relevantes, no notarás diferencia en la velocidad, y el beneficio en experiencia compensa con creces el pequeño costo de carga.

¿Necesito saber programar para implementar los filtros?

No. Todo el proceso principal se hace desde la interfaz del plugin y el Theme Builder de Divi, sin escribir código. El único CSS de este tutorial es opcional y sirve solo para personalizar colores; lo copias y pegas tal cual. La implementación básica es completamente visual.

Conclusión

Integrar un sistema de filtros WooCommerce en tu tienda hecha con Divi es más fácil de lo que parece. Con el plugin gratuito de Themify puedes ofrecer una experiencia de navegación mucho más cómoda para tus clientes sin tener que pagar por soluciones premium. Además, puedes personalizarlo fácilmente desde el Theme Builder de Divi para que combine a la perfección con la identidad visual de tu tienda.

Recuerda que detrás de toda esta configuración técnica hay un objetivo concreto: reducir la fricción para que el cliente encuentre rápido lo que quiere y complete su compra. Cada filtro bien pensado, cada detalle de usabilidad en móvil y cada toque de personalización suman para que tu tienda venda más. Explora todas las posibilidades, pruébalo en tu sitio y, si quieres llevar tu tienda al siguiente nivel, no olvides revisar nuestros cursos en uxdivi.com/cursos.