Cómo configuré los filtros de productos de WooCommerce y dejé de perder clientes

La primera vez que agregué filtros de productos a mi tienda WooCommerce, fue un desastre. Parecían diseñados en 1999, confundieron más a mis clientes de lo que los ayudaron y, lo peor de todo, rompieron mi página de pago. Tuve que quitarlos en cuestión de horas.

Pero sabía que mi tienda necesitaba filtros. Cuando tienes cientos de productos, los clientes buscan una manera de reducir sus opciones rápidamente. Sin un filtrado adecuado, se sienten abrumados y se van, llevándose su dinero con ellos.

Así que me puse manos a la obra y probé todas las principales soluciones de filtrado de WooCommerce que pude encontrar. Después de semanas de pruebas, encontré los mejores plugins: fáciles de configurar, hermosos a la vista y, lo más importante, ayudan a los clientes a encontrar (y comprar) lo que necesitan.

En esta guía, compartiré cómo configuré mis filtros de productos de WooCommerce para que tú también puedas dejar de perder clientes potenciales.

¿Por qué agregar filtros de productos a WooCommerce?

Los filtros de productos facilitan que los compradores encuentren exactamente lo que buscan. En lugar de desplazarse por largas listas de productos, pueden reducir los resultados por precio, tamaño, color, calificación y más, en solo unos pocos clics.

Esto es importante porque la mala navegación a menudo conduce al abandono del carrito y a la pérdida de ventas. Cuando los visitantes no pueden encontrar lo que necesitan rápidamente, muchos de ellos se van sin comprar nada.

Además, agregar filtros a tu tienda WooCommerce puede reducir significativamente tus tasas de rebote. Los clientes pasan más tiempo navegando y completan sus compras.

Agregar filtros de productos ayuda a mejorar tanto la experiencia de compra como el rendimiento de tu tienda. Aquí te explicamos cómo:

• ⏱️ Ahorra tiempo a tus clientes – Los compradores pueden reducir cientos de productos a unas pocas opciones adecuadas en segundos, lo que hace que la navegación sea más rápida y menos frustrante.
• 📈 Aumentar las ventas – Cuando los clientes encuentran el producto adecuado rápidamente, es más probable que lo agreguen a su carrito y completen el proceso de pago.
• 🧑‍💻 Aumentar el tiempo de permanencia – Los filtros claros mantienen a los visitantes explorando tu tienda en lugar de irse a buscar en otro lado.
• 📱 Mejora las compras móviles – Los filtros facilitan mucho que los usuarios de dispositivos móviles naveguen por tu catálogo sin tener que desplazarse interminablemente en una pantalla pequeña.
• 🌟 Generar confianza en el cliente – Una tienda limpia y bien organizada demuestra que te preocupas por la experiencia de compra, lo que ayuda a generar confianza en tu marca.

Teniendo esto en cuenta, te guiaré sobre cómo agregar filtros de productos de WooCommerce. Aquí tienes todo lo que cubriré en esta guía:

Método 1: Añadir un filtro de productos de WooCommerce al estilo Amazon (Recomendado)

WPFilters es el mejor plugin de filtros para WooCommerce: es fácil de usar para principiantes y se ve genial desde el principio. No necesitas ser un desarrollador para configurarlo, y le da a tu tienda filtros limpios, al estilo de Amazon, que facilitan que los clientes encuentren lo que buscan.

Además, funciona perfectamente con cualquier tema de WooCommerce, lo que lo convierte en una opción segura sin importar el tema que estés utilizando.

Para obtener más información sobre esta herramienta, consulta nuestra reseña detallada de WPFilters.

Paso 1: Instalar y activar WPFilters

Para empezar a filtrar productos, necesitarás instalar WPFilters.

Primero, deberás registrarte para obtener una cuenta de WPFilters en el sitio web de SearchWP. SearchWP es la empresa detrás de WPFilters y ofrecen soporte confiable si alguna vez necesitas ayuda.

Haz clic en el botón Obtener WPFilters ahora, elige un plan y sigue los pasos para completar la compra.

Una vez que te hayas registrado, inicia sesión en el panel de tu cuenta y descarga el archivo ZIP del plugin. Lo encontrarás en el área de descargas de tu cuenta.

Ahora estás listo para instalar y activar el plugin. En el panel de administración de tu WordPress, ve a Plugins » Añadir Plugin.

En la siguiente pantalla, haz clic en ‘Subir plugin’ para abrir el cargador de archivos.

Luego haz clic en el botón ‘Elegir archivo’, selecciona el archivo zip en tu computadora local y haz clic en ‘Instalar ahora’.

No olvides hacer clic en 'Activar' para completar el proceso de instalación. Si necesitas ayuda, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Después de la activación, WPFilters iniciará automáticamente un asistente de configuración para ayudarte a empezar. Haz clic en el botón ‘Empecemos’.

Este asistente te guiará a través de la configuración básica y conectará el plugin a tu tienda WooCommerce.

Simplemente sigue las instrucciones en pantalla del asistente de configuración. El proceso solo toma uno o dos minutos y se asegura de que todo esté configurado correctamente para tu tienda.

Paso 2: Crear un nuevo elemento de filtro para tus productos de WooCommerce

Ahora que WPFilters está instalado, es hora de crear tu primer elemento de filtro. Un elemento de filtro es simplemente una opción de filtrado que los clientes pueden usar, como filtrar por color o tamaño.

Para comenzar, navega a WPFilters » Elementos en tu panel de administración de WordPress. Luego haz clic en el botón 'Agregar nuevo' en la parte superior de la página.

Primero, deberás ingresar un nombre para tu filtro.

Este nombre es solo para tu referencia en el área de administración. Pero recomiendo elegir algo descriptivo como “Color” o “Filtro” para una organización más fácil.

A continuación, elegirá el tipo de campo de filtro que determinará cómo interactuarán los clientes con este filtro.

WPFilters ofrece varias opciones:

• Casilla de verificación – Permite a los clientes seleccionar varias opciones a la vez
• Radio – Permite una sola selección a la vez
• Menú desplegable – Muestra las opciones en un menú desplegable para ahorrar espacio
• Menú desplegable (selección múltiple) – El tipo de menú desplegable que permite selecciones múltiples
• Búsqueda – Agrega un cuadro de búsqueda para que los clientes escriban lo que están buscando
• Deslizador – Perfecto para rangos de precios o valores numéricos
• Restablecer – Agrega un botón para borrar todos los filtros seleccionados

Para la mayoría de los atributos de producto, como color, tamaño o marca, recomiendo usar la opción de casillas de verificación. Es la forma más fácil para que los clientes la usen y les permite combinar selecciones múltiples.

Después de elegir el tipo de filtro, necesitarás agregar una fuente de datos. Esto le dice a WPFilters qué información del producto filtrar, como categorías de productos, etiquetas o atributos personalizados.

Haz clic en el menú desplegable de origen de datos y selecciona el atributo que deseas filtrar. Si has configurado atributos de producto en WooCommerce, aparecerán en esta lista.

Paso 3: Personalizar tu filtro de productos de WooCommerce

Con tu elemento de filtro creado, ahora puedes personalizar cómo se ve y se comporta en tu tienda. WPFilters te ofrece varias opciones para que el filtro coincida con tu marca y mejore la experiencia del usuario.

Puedes empezar ajustando la configuración en la sección 'Contenedor', donde puedes:

• Mostrar título – Para mostrar u ocultar el nombre del filtro encima de las opciones.
• Colapsable – Útil si tienes varios filtros en una página. Los clientes pueden expandir o colapsar cada filtro para mantener el diseño limpio.
• Ver más/menos – Limita el número de opciones que se muestran al principio y permite a los clientes expandir la lista si desean ver más. Esto ayuda a evitar que las listas de filtros largas dominen la página.
• Horizontal – Muestra las opciones de filtro en una fila en lugar de una columna. Esto funciona bien para filtros simples con solo unas pocas opciones, como los tamaños.

Así es como ajusto la configuración de mi 'Contenedor':

A continuación, dirígete a la sección de configuración de Elemento.

• Recuento de artículos – Muestra cuántos productos coinciden con cada opción. Por ejemplo, los clientes verán Azul (15) o Rojo (8), para que sepan lo que está disponible antes de hacer clic.
• Vacío – Oculta las opciones sin productos coincidentes, lo que mantiene tus filtros limpios y evita callejones sin salida.
• Jerárquico – Agrupa opciones relacionadas, permitiendo a los clientes navegar desde una categoría principal a subcategorías, lo que lo hace perfecto para tiendas más grandes.

Una vez que hayas ajustado estas configuraciones, haz clic en ‘Guardar cambios’ para almacenar tu configuración.

WPFilters actualizará entonces la vista previa en vivo dentro de este constructor.

Si algo no se ve del todo bien, puedes volver y ajustar las configuraciones hasta que sea perfecto.

Paso 4: Incrustar el filtro en tu tienda

Ahora que tu filtro está listo, es hora de agregarlo a tu tienda en línea. WPFilters te ofrece opciones flexibles sobre dónde deseas mostrar tus filtros.

Puedes agregar filtros directamente a tu página de tienda donde los clientes buscan productos, o colocarlos en tu barra lateral para un fácil acceso en cualquier página.

Te mostraré ambos métodos para que puedas elegir el que mejor funcione para tu tienda.

Opción 1: Mostrar filtro de atributos de producto en la página de tienda de WooCommerce

Si estás utilizando un tema de bloques (como Divi o Twenty Twenty-Five), simplemente puedes abrir tu página de Tienda en el Editor de Sitio y arrastrar el bloque de Filtro a su lugar.

Primero, en el constructor visual de WPFilters, haz clic en el botón ‘Incrustar’.

Luego selecciona el método de Bloque Gutenberg de las opciones disponibles.

A continuación, elegirás si crear una página nueva o seleccionar una existente.

Si ya tienes una página de tienda configurada, simplemente selecciónala del menú desplegable.

Haz clic en ‘¡Vamos!’

El constructor visual abrirá entonces tu página de tienda en el editor de bloques.

Luego, simplemente haz clic en el ícono ‘+’ para añadir un bloque de Elemento WPFilters.

Desde el panel de configuración del bloque, selecciona el elemento de filtro que acabas de crear.

Verás que aparece instantáneamente en tu editor de contenido.

Puedes repetir este proceso para todos los elementos de WPFilters que creaste.

Cuando termines, haz clic en ‘Guardar cambios’ o ‘Actualizar’ para publicar tu filtro.

¡Eso es todo! Tu filtro de productos WPFilters ahora está activo en tu página de tienda y listo para que los clientes lo usen:

Opción 2:  Mostrar el filtro de atributos de producto en la barra lateral

Agregar filtros a tu barra lateral es otra gran opción, especialmente si deseas que sean visibles en varias páginas. La barra lateral mantiene tus filtros accesibles sin ocupar espacio en tu área de contenido principal.

Para agregar un filtro a tu barra lateral, navega a Apariencia » Widgets en tu área de administrador. Esto abre el personalizador de widgets, donde puedes administrar el contenido de tu barra lateral.

Desde aquí, puedes buscar la Barra lateral de WooCommerce en la lista de áreas de widgets disponibles. Haz clic en ella para expandir la barra lateral y ver qué widgets hay actualmente.

A continuación, haz clic en el ícono de más para agregar un nuevo widget, luego agrega el widget Elemento WPFilters.

En el panel de Configuración del Elemento que aparece, selecciona tu filtro del menú desplegable.

Puedes agregar varios widgets de filtro para ofrecer a los clientes varias opciones de filtrado.

Una vez que hayas seleccionado tu filtro, haz clic en ‘Actualizar’ o ‘Publicar’ para guardar los cambios de tu barra lateral.

Tu filtro ahora aparecerá en todas las páginas de WooCommerce que muestren esta barra lateral:

Paso 5: Probar tu filtro de productos de WooCommerce

Antes de terminar, dedica unos minutos a probar tus filtros. Abre tu tienda en una ventana de incógnito para verla de la misma manera que tus clientes.

Prueba diferentes combinaciones de filtros para asegurarte de que los resultados se actualizan correctamente. Por ejemplo, selecciona ‘Verde’ y comprueba que solo aparezcan los productos coincidentes.

También es una buena idea probar cada atributo que agregaste para asegurar que la lógica de filtrado funcione sin problemas. Presta atención también a los recuentos de productos junto a cada opción. Deberían cambiar a medida que aplicas o eliminas filtros.

Si algo no se ve bien, revisa tus atributos de producto en WooCommerce. Una vez que todo funcione sin problemas, tus filtros estarán listos y comprar en tu tienda será mucho más fácil.

Método 2: Agregar un filtro simple de WooCommerce (Método gratuito)

Si buscas una alternativa más sencilla a WPFilters, entonces Filter Everything es una buena opción. Elegí este plugin porque es ligero y ofrece una versión gratuita con todas las funciones de filtrado importantes.

Ten en cuenta que Filter Everything funciona y se ve mejor en temas clásicos. No es compatible con bloques, por lo que necesitarás usar un shortcode, que suele ser menos flexible.

Paso 1: Instalar y configurar el plugin

Primero, ve a Plugins » Añadir Plugin en tu área de administración de WordPress.

En la siguiente pantalla, usa la barra de búsqueda para encontrar rápidamente el plugin Filter Everything.

Luego, haz clic en ‘Instalar ahora’ y ‘Activar’ en los resultados de búsqueda para completar el proceso.

Para obtener ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Después de la activación, navega a Filter Everything » Settings para configurar algunas opciones importantes. Estas configuraciones controlan cómo se comportan tus filtros en el lado visible de tu tienda.

Primero, puedes configurar el comportamiento en dispositivos móviles y la configuración AJAX:

• Dispositivos móviles – Elige si los filtros se contraen en dispositivos móviles o se muestran como en escritorio. Recomiendo mantenerlos contraídos y moverlos a la parte superior, para que sean más fáciles de encontrar y no ocupen demasiado espacio en pantallas pequeñas.
• AJAX – Elige si los filtros actualizan los resultados instantáneamente o recargan la página después de cada selección. Querrás habilitar esto para que los productos se actualicen instantáneamente sin recargar toda la página, creando una experiencia de compra más rápida.

También verás ‘ID de HTML o clase del Contenedor de Publicaciones’. Esto le dice al plugin qué parte de la página debe actualizarse cuando se aplican los filtros. Está configurado como #primary por defecto y, en la mayoría de los casos, puedes dejarlo así sin problemas.

Finalmente, dirígete a la sección ‘Otros’ para ajustar algunas opciones visuales y avanzadas:

• Color primario del widget – Afecta a los botones y casillas de verificación del filtro, así que elige un color que coincida con el esquema de colores de tu marca.
• Altura máxima del contenedor del filtro, px – Establece una altura máxima para el área del filtro. Si la lista se vuelve muy larga, se podrá desplazar en lugar de empujar la página hacia abajo.
• Integración de Filtros Seleccionados (Chips) – Te permite mostrar los filtros activos como pequeños “chips”. Puedes elegir dónde aparecen agregando un nombre de ubicación, como before_main_content.
• Modo de depuración – Muestra mensajes útiles si algo no funciona, lo que puede ser útil mientras configuras las cosas.

Así es como se ve en mi pantalla:

Una vez que hayas ajustado estas configuraciones, haz clic en ‘Guardar cambios’ para almacenar tu configuración.

Paso 2: Crear un conjunto de filtros

Ahora es el momento de crear un conjunto de filtros, que es simplemente un grupo de múltiples filtros que trabajan juntos. Por ejemplo, podrías tener filtros para categorías, colores y tamaños en un solo conjunto.

Ve a Filter Everything » Filter Sets en tu panel de WordPress. Aquí organizarás y administrarás todos tus filtros de productos.

Esto te llevará al constructor de conjuntos de filtros.

Haz clic en el botón ‘Agregar nuevo conjunto de filtros’ para empezar a crear tu primer conjunto.

A continuación, puedes darle un nombre descriptivo.

Esto es solo para tu referencia, pero recomiendo usar un nombre descriptivo, como “Filtros de Producto” o simplemente “Filtros”, para una organización más fácil.

A continuación, elige el tipo de publicación que deseas filtrar: páginas, entradas, productos o tipos de publicación personalizados.

Dado que estás trabajando con productos de WooCommerce, selecciona ‘Producto’ en el menú desplegable y haz clic en ‘Agregar filtro’.

Ahora configurarás tu primer filtro individual dentro de este conjunto:

• Filtrar por: elige ‘Categorías de productos’ del menú desplegable. Esto le indica al plugin que filtre tus productos según las categorías asignadas.
• Título del filtro: usa algo como Categorías o Categorías de productos, lo que mejor se adapte a tu tienda.
• Nombre de variable para URL: este campo se completa automáticamente con algo como categories. Ayuda a crear URL limpias y optimizadas para SEO cuando los clientes usan tus filtros.
• Ver en widget: un menú desplegable funciona bien para las categorías, ya que los productos pueden pertenecer a muchas categorías, y también facilita la visualización de las subcategorías.

Puedes agregar más filtros a este conjunto haciendo clic en ‘Agregar filtro’ nuevamente. Recomiendo agregar filtros por precio, color, tamaño o cualquier otro atributo de producto que tu tienda utilice.

Una vez que hayas agregado todos los filtros que necesitas, haz clic en ‘Publicar’ para activar tu conjunto de filtros.

Paso 3: Agregar filtros a tu tienda de WooCommerce

Con tu conjunto de filtros creado, estás listo para mostrarlo en tu tienda WooCommerce. Filter Everything te ofrece opciones flexibles sobre dónde colocar tus filtros.

Déjame mostrarte cómo agregar filtros directamente a tu barra lateral para un fácil acceso, o al contenido de tu página de tienda usando bloques de Gutenberg.

Opción 1: Mostrar filtro de producto simple en la barra lateral

Agregar filtros a tu barra lateral es rápido y funciona muy bien si deseas que sean visibles en varias páginas de WooCommerce. La barra lateral mantiene tus filtros accesibles sin ocupar espacio de contenido principal.

Navega a Apariencia » Widgets en tu panel de WordPress. Esto abre el personalizador de widgets donde administras todo el contenido de tu barra lateral.

En el panel de widgets, busca tu área de barra lateral de WooCommerce.

Luego, haz clic en el botón '+' para agregar el widget Filter Everything – Filter.

La configuración del widget se abrirá automáticamente. Luego, puedes elegir qué mostrar:

• Título: muestra el título del filtro en la parte superior del widget.
• El número de publicaciones encontradas – Muestra cuántos productos coinciden con los filtros seleccionados.
• Términos seleccionados (Etiquetas) – Muestra los filtros activos como pequeñas etiquetas, para que los clientes puedan ver lo que se ha aplicado de un vistazo.
• Diseño horizontal – Muestra los filtros en una fila en lugar de una columna, lo que funciona bien para diseños compactos.

Esto es lo que verás en la pantalla:

Puedes jugar con estas configuraciones para que se ajusten al diseño de tu tienda.

Cuando hayas terminado, haz clic en 'Actualizar' para publicar tu widget.

¡Eso es todo!

Tus filtros ahora aparecerán en la barra lateral en todas las páginas que muestren esta área de barra lateral.

Opción 2: Mostrar filtro de producto simple en la página de la tienda de WooCommerce

Para agregar filtros directamente a tu página de tienda, usarás el shortcode [fe_widget] dentro del editor de Gutenberg.

Sin embargo, si tienes más de un conjunto de productos, deberás agregar su ID en ese shortcode, por ejemplo, [fe_widget id="123"]. Puedes encontrar este número de ID junto al nombre de tu conjunto en la página Filter Everything » Filter Sets.

Para agregar tu filtro de productos, navega a Páginas » Todas las páginas para abrir tu página de tienda en el editor de bloques.

En el editor de Gutenberg, pega el shortcode que copiaste anteriormente en un bloque de párrafo normal.

Si quieres ver cómo se ve, simplemente previsualiza tu página. Deberían aparecer exactamente donde colocaste el bloque de shortcode.

Una vez que estés satisfecho con la ubicación, haz clic en 'Actualizar' o 'Publicar' para guardar tus cambios.

Tus filtros de productos ahora están activos en tu página de tienda:

Consejo extra: Agregar búsqueda inteligente de productos de WooCommerce

Ahora que has agregado filtros de productos, hay una función más que puede llevar la navegación de tu tienda en línea al siguiente nivel: búsqueda inteligente de productos.

Mientras que los filtros ayudan a los clientes a buscar por atributos específicos, una barra de búsqueda inteligente de productos les permite escribir exactamente lo que están buscando. Esta combinación brinda a los compradores la flexibilidad de encontrar productos de la manera que prefieran.

La búsqueda inteligente de productos de WooCommerce va más allá de la búsqueda básica de WordPress. Comprende atributos de productos, categorías, SKUs e incluso coincidencias parciales para mostrar resultados relevantes rápidamente.

Por ejemplo, si alguien busca “zapatillas azules”, una búsqueda inteligente mostrará todos los zapatos de color azul en tu categoría de zapatillas. Una búsqueda regular de WordPress podría omitir productos si la frase exacta no está en el título.

Agregar filtros y búsqueda inteligente significa que estás cubriendo todas tus bases. Tus clientes pueden comprar como se sientan más cómodos, lo que se traduce en más compras completadas para ti.

Para configurar esto, consulta nuestra guía detallada sobre cómo hacer una búsqueda inteligente de productos en WooCommerce. Te guía a través de todo el proceso paso a paso.

Preguntas frecuentes sobre la configuración de filtros de productos de WooCommerce

Si todavía tienes preguntas sobre el uso de filtros de productos en WooCommerce, estas respuestas rápidas deberían ayudarte.

¿Existe un plugin confiable y RÁPIDO para filtrar productos?

Sí, WPFilters es uno de los plugins más confiables y rápidos para la filtración de productos de WooCommerce. Está diseñado específicamente para la velocidad y utiliza tecnología AJAX para actualizar los resultados sin recargar la página, manteniendo tu tienda funcionando sin problemas.

¿El mejor filtro de productos gratuito para WooCommerce?

La versión gratuita de Filter Everything es una buena opción. Admite filtros básicos como categorías, precios y atributos sin ralentizar tu sitio. La única desventaja es que funciona mejor en temas clásicos.

¿Cómo filtrar productos de WooCommerce por atributos personalizados?

Primero, necesitarás crear tus atributos en Productos » Atributos y asignarlos a tus productos. Luego, usa un plugin de filtro de WooCommerce como WPFilters para mostrar esos atributos como filtros en tu página de tienda.

¿Cómo crear una página de tienda de WooCommerce con múltiples filtros?

Puedes agregar múltiples widgets de filtro a la barra lateral de tu tienda, o usar un plugin de filtro de productos que te permita combinar filtros como precio, categoría, calificación y atributos en un solo panel.

¿Cuál es el código del filtro de productos en WooCommerce?

WooCommerce no incluye un solo shortcode para filtros avanzados. La mayoría de las funciones de filtrado provienen de widgets o plugins, que generan sus propios shortcodes o bloques que puedes colocar en cualquier lugar de tu sitio.

Próximos pasos para completar la configuración de tu tienda WooCommerce

Ahora que tus filtros de productos de WooCommerce están configurados, quizás quieras consultar estas guías relacionadas para mejorar aún más tu tienda de WooCommerce:

• Guía definitiva de SEO para WooCommerce
• Cómo Personalizar las Páginas de Productos de WooCommerce
• Cómo vender paquetes de productos en WooCommerce
• Cómo Crear Fácilmente Encuestas Post-Compra en WooCommerce
• Los mejores plugins de cuadrícula de productos para WooCommerce

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.