Si tienes una tienda online creada con Divi y WooCommerce, sabes que mejorar la experiencia del usuario es clave para aumentar las conversiones. Uno de los recursos más efectivos para facilitar la navegación de tus clientes es implementar un sistema de filtros WooCommerce. En este tutorial te enseño paso a paso cómo aplicar filtros funcionales, visuales y 100% integrados con Divi usando un plugin gratuito del repositorio de WordPress.

¿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.

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

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.

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.

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).

✨ 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.

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.

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.

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; }

También puedes darle padding, bordes y colores a la columna desde el editor visual de Divi.

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.

¿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.

El botón de «borrar filtros» es especialmente útil para restablecer la vista sin tener que recargar manualmente.

Cursos recomendados para mejorar tu tienda WooCommerce

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

• Curso WooCommerce Intermedio: Aprende a usar filtros avanzados, variaciones visuales, optimización de checkout, automatizaciones y más.
• Curso de Tienda Online con Divi: 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.

H2: 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.

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.