En una tienda online es primordial no sólo que el cliente pueda encontrar aquello que busca, sino también que pueda encontrarlo de forma fácil y rápida: buscar un producto debe ser una experiencia sencilla e intuitiva para el posible cliente.
Pero a veces no se trata de buscar, sino justo de lo contrario, de descartar. Porque hay veces que ni el cliente mismo sabe lo que quiere, pero sí tiene muy claro lo que no quiere. Y en este sentido es vital que le ofrezcamos a los clientes la posibilidad de filtrar los productos en nuestra tienda.
Tabla de contenidos
Filtros de productos vs. búsquedas
Y es que hay gente que confunde conceptos, y creen que al tener una caja de búsqueda súper eficiente, con búsqueda inteligente y con búsqueda predictiva, ya no necesita ofrecer filtros. Pero es que son cosas completamente diferentes, y necesarias ambas.
Pongamos el ejemplo de una tienda de electrónica, y de dos clientes que quieren comprar un portátil. El primer cliente ya ha visto modelos y sabe exactamente cuál quiere, así que con poner el modelo en el buscador lo encuentra rápidamente. Perfecto.
Pero nuestro segundo cliente no lo tiene tan claro. Sabe algunas cosas, claro, como el presupuesto aproximado que tiene, qué tamaño de pantalla está buscando, la cantidad de RAM que necesita para el uso que le va a dar, y cuánto disco duro quiere que tenga. ¿De qué narices le sirve a él el buscador? Ya vimos algo al respecto en esta otra entrada:
Ahí es, maifrén, cuando el usuario se dirigirá a los filtros de productos que hemos puesto. Si los hemos puesto, claro está. Si no, se irá a otra tienda que sí los ofrezca.
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
El filtro de precios de WooCommerce
Lo que WooCommerce ofrece de base en este aspecto es muy limitado. Al instalarlo, tendremos disponible en la zona de widgets únicamente un filtro para precios, llamado precisamente Filtro de precios de WooCommerce. No hay más filtros disponibles, y éste es además bastante pobre en usabilidad. Si lo arrastras a la sidebar tendrá un aspecto similar a esto:
Como ves, se trata de un control deslizante que permite seleccionar un rango de precios y, para que se aplique y se actualice la visualización en función de los resultados, hay que pulsar el botón y esperar a que se recargue la página.
Como ves, no es lo óptimo, por dos razones:
- ¿Una recarga de página cada vez que establezca un filtro? ¿Estamos locos?
- Permite filtrar por precio, sí, pero ¿y todo lo demás?
De poco le serviría al cliente de nuestro ejemplo poder filtrar en función de su presupuesto, si entre los resultados hay todo tipo de productos que no le interesan por sus especificaciones. Los filtros deben ser algo más.
Filtrar productos en WooCommerce
Lo que necesitamos son filtros que nos permitan, al menos:
- Filtrar no sólo por precio, sino también en función de los atributos de los productos: talla, color, memoria RAM, tamaño de pantalla, número de páginas, o lo que corresponda al tipo de productos de tu tienda
- Visualizar los resultados sin necesidad de recargar la página cada vez que apliquemos un nuevo filtro
Afortunadamente, como casi siempre, hay plugins que nos resuelven la papeleta. En este caso tres, Advanced AJAX Product Filters, YITH WooCommerce AJAX Product Filter y WooCommerce Product Filter.
En este vídeo te muestro el funcionamiento del primero de ellos, gratuito aunque bastante limitado:
Si necesitas algo más, entonces es más que recomendable WooCommerce Product Filter, ya que permite establecer filtros mucho más avanzados y flexibles para los productos: no sólo por taxonomía y atributos, sino siguiendo cualquier criterio: stocks, campos personalizados y lo que haga falta.
Además, dispone de múltiples widgets, layouts, opciones de personalización… En fin, una gozada total, altamente recomendable.
Hola amigo gracias tus aportes han sido muy utiles. tengo un problema y es que el e intentado con el filtro nativo en woo, pero me sale al filtrar que el articulo no fue encontrado, pero se que si hay productos que cumplen. intente con el plugin que propones pero al darle filtrar no me resume los productos, siguen apareciendo los que no deberian visualizarse.
tienes idea que puede estar molestando para que los filtros por precios no este funcionando?
muchas gracias
Hola Hernán
Ten en cuenta que, en productos variables, si una de las variaciones cumple las condiciones del filtro el producto es incluido en su totalidad. ¿Puede ser eso lo que te está pasando?
Un saludo
Hola Enrique,
en primer lugar agradecerte este post, me ha aportado mucho.
Uso el Woo Commerce, y estoy filtrando mis productos por atributos mediante el filtro nativo, aunque he probado con alguno Ajax también.
El problema que tengo, es que al filtrar por ATRIBUTO talla, como mis productos tienen atributos y variaciones (Donde irían las tallas), cuando se agota una de estas tallas, sigue apareciendo el producto dentro del filtro de dicha talla aún estando agotado.
Alguna idea de como hacer que el filtro funcione con las variaciones y no solo con los atributos?
Mil gracias.
Saludos
Hola Jorge
Es que son cosas muy diferentes, técnicamente un atributo es una taxonomía y una variación es un producto hijo (básicamente un tipo de post). No creo que haya forma de que un filtro para taxonomías pueda manejar variaciones.
Un saludo.
Hola, Enrique
me parece muy interesante tu contenido y lo he puesto en marcha en nuestra web.
He seguido paso a paso tu vídeo y creo que esta todo correcto.
Pero no me aparecen los filtros en la web, ninguno de los que he puesto. Si que están y se modifican los filtros predeterminados que me entregaron con la web. ¿Porque podría ser?
un saludo y gracias
Hola Mª Angeles
Pues es imposible saberlo desde aquí 🙂 Echa un vistazo a la consola del navegador, puede darte información muy útil sobre los errores que se estén produciendo en la página que te pueden ayudar a identificar el problema.
Un saludo.
Hola Enrique,
Genial el post y todo tu contenido en general. Enhorabuena.
Una pregunta. Para filtrar en una tienda por campos personalizados creados con ACF, ¿cual de los tres recomiendas?
Muchas gracias
Saludos
Hola Carlos
Para filtrar por custom fields (incluso creados con ACF) tienes que ir a otro nivel de plugins, como FacetWP. Echa un vistazo a esta entrada.
Un saludo.
Ok. Muchas gracias. Le echaré un vistazo
Hola Enrique.
Intento filtrar por el atributo tallas pero el resultado siempre es el mismo, me presenta todos los productos que tienen el atributo aunque no tengan existencias, con el atributo creo variaciones de los productos. Me ocurre con el nativo de woocommerce y con Advanced AJAX Product Filters, por lo que deduzco que debe ser alguna mala configuración de los productos, ¿alguna sugerencia?.
Felicidades por tu blog, me está siendo de gran ayuda.
Hola Francisco
Para que no se muestren los productos sin stock tienes que seleccionar la opción en WooCommerce > Ajustes > Productos > Inventario > Ocultar en el catálogo los artículos agotados. Aún así, el producto seguirá siendo visible si hay en stock alguna de las variaciones.
Un saludo.
Muchas gracias por la respuesta, mi problemas es justo ese, que quiero filtrar solo los productos con existencias en una variación concreta. Quiero filtrar camisas con existencias en la talla L, y no encuentro como.
Un saludo. Paco.
Hola,
Gracias por tu entrada. Tengo el mismo problema, quiero que el filtro muestre solamente las variaciones de talla que quedan en stock. Es decir, si no hay stock para una variación concreta (y hay seleccionado un filtro con esa variación), que no salga ese producto. ¿Sabes si el plugin WooCommerce prodcut filter (el que comentas de pago) lo permite?¿O de alguna solución (otro plugin) para estos casos?
Es que sino realmente el filtro no aporta ningún tipo de valor en estos casos…
Muchas gracias!
A mi me pasa lo mismo con todos los plugins que pruebo.
Es un problema generalizado?
Hola Enrique, primero darte las gracias por tu página, es una pasada la verdad! Eres un libro abierto para temas de wordpress y de woocommerce, no entiendo cómo me las he arreglado antes sin tu web 🙂
Estoy haciendo una tiendecilla en woocommerce y estoy usando unos widgets de FILTRAR PRODUCTOS POR ATRIBUTO
A ver si soy capaz de explicarme, yo cojo, creo un atributo, por ejemplo para la edad, bueno lo tengo en inglés todo porque la tienda es en ese idioma, entonces, creo un attribute llamado AGE, y en Terms le pongo dos, uno «Less than 35» y otro «More than 35».
Y cuanto estoy configurando el widget de FILTER PRODUCTS by ATTRIBUTES, lo pongo en una Sliding Bar y lo configuro en plan:
Title: (aquí no pongo nada porque no lo necesito)
Atribute: age (o my-age o como llames al slug de tu atributo)
Display type: Dropdown (también hay list pero prefiero un desplegable hacia abajo)
Query type: OR (también hay AND, pero bueno, en este caso va mejor or)
Le doy a salvar, y cuando me muestra los filtros en la SHOP, no entiendo por qué, me pone la palabra «Any» delante de cada nombre del atributo. Por ejemplo Any Age, Any Skin type, Any Loquesea 🙁
Tú sabes de donde sale ese ANY y cómo puedo quitarlo? He buscado por strings de WPML y los ANY que he encontrado, los he sustituido por un palabro (por si luego tengo que volver a buscarlo) y no es ninguno de esos, por lo que voy a acabar en el manicomio, ya no sé qué más buscar o hacer, voy a llamar a Ghostbusters o a un exorcista
Ya sé que quizá no es exactamente de los plugins que tú comentas, pero al ser una pregunta de filtros (y más que nada que creo que eres de los más cracks que hay en estos temas en España) me he atrevido a lanzarte la pregunta.
Ante todo muchísimas gracias de antemano si lo lees y felicidades de nuevo por tu web, nos ayudas a tod@s!
Hola Elena
Esa opción permite seleccionar por cualquier valor del atributo. Podrás localizarlo usando Loco Translate contra la traducción de WooCommerce.
Un saludo.
Hola Enrique muy buen artículo. Gracias a el me he instalado Advanced AJAX Product Filter, para filtrar productos en mi tienda por diferentes categorías de producto. ¿Sabes si hay alguna opción para cambiar la categoría por defecto que pone «Any»; me gustaría ponerla en Español: algo así como «todos»?
Muchas gracias y sigue así. Saludos ¡¡
Hola Kiko
Echa un vistazo al comentario justo anterior al tuyo.
Un saludo.
Buenos dias Enrique. Buen artículo. Estoy buscando como montar un filtro para una tienda de repuestos de coches. Ya tengo una base de datos con las marcas, modelos, años, motor, etc y el producto asociado a cada uno. Sabes de algún plugin en concreto para este cometido? He probado asociando marca, modelo, etc como atributo a cada producto, pero claro, no puedo, por ejemplo, que al seleccionar AUDI, sólo aparezca lo de AUDI, ya que al importar, me mete todo junto, me incluye todas las marcas de un producto bajo el atributo «marca». Un saludo
Hola César
No puedes usar atributos para algo así, para que funcione bien es preciso usar custom fields. Echa un vistazo a esta entrada, puede serte de ayuda.
Un saludo.
hola, Enrique tremendo aporte el que das, es genial.. una inquietud.. si quiero que los productos que se muestran en la tienda principal, asi como los que se ven al hacer click en una categoria, tengan un filtro de ordenamiento diferente que el de la busqueda, como pudiese hacer? por ejemplo quiero que se ordenen por el order_by: menu_order.. si agrego un filtro y despues me voy a personalizar->woocomerce y hago que ese filtro que agregué sea el predeterminado, funciona, pero me cambia también el orden de los resultados que muestra la búsqueda.. quiero que la busqueda se vea excluida de ese ordenamiento.. ¿como podria hacerlo, que me recomiendas?
Nuevamente, tremendo aporte y gracias.
Hola Cristhian
No conozco ningún plugin que lo haga, se puede programar usando el filtro posts_orderby con el condicional is_search.
Un saludo.
Hola Enrique, muchas gracias por tus recomendaciones, quiero saber como puedo hacer para que en la versión gratuita de Advanced AJAX Product Filters for WooCommerce me aparezcan los filtros por atributo en forma de acordeón desplegable, he visto tutoriales todos en ingles y no consigo mucha información de ayuda. Muchas gracias por tus Vídeos, son de lo mejor.
Hola Enrique, quiero utilizar los filtros pero que se haga por productos (no por categorías) para poder compararlos, es una tienda con muy pocos productos, sin categorías y lo que me interesa es que se puedan comparar, se te ocurre una solución para esto? Muchas gracias
Hola Jose
Para esas cosas puedes usar un plugin como YITH WooCommerce Compare o WooCommerce Products Compare
Un saludo
Hola buenas tardes,
tengo un problema con los plugins de filtros de productos, he probado el Yith woocommerce product filter y el Advanced Ajax product filter y los dos me dan el mismo problema. En la página de resultados de la búsqueda salen los productos pero sin foto, vamos que desaparecen las imágenes de los productos por arte de magia.
Mi tema funciona con woocommerce y los filtros que trae por defecto funcionan pero son un poco feotes sobre todo el de filtrar por colores.
Como puedo arreglar el problema de las fotos, por favor, necesito ayuda.
Hola Lorena
Imposible así saber qué está ocurriendo. Lo que deberías hacer es solicitar soporte a los autores de los plugins correspondientes.
Un saludo
Gracias por la respuesta, un saludo
Tengo productos únicos que no es necesario que la gente elija el color, porque es único, sin embargo me gustaría que cuando ven los productos filtraran por color, agregué en atributos color, pero no lo necesito usar en variaciones. Y no me aparece en el widget el atributo de color. A qué se deberá? Gracias!
Hola Melissa
Si el producto contiene el atributo, aunque sea un producto simple aparecerá en la página correspondiente al atributo (siempre que al crear al atributo marques la casilla de generar archivo para el mismo). Sin embargo, que aparezca o no en el filtro dependerá del plugin que estés usando para realizar dicho filtro. Revisa la configuración del plugin o consulta con su desarrollador.
Un saludo
Hola Enrique!
Hay alguna forma de que los filtros aparezcan en la parte de arriba para la vista móvil?
Muchas gracias
Hola David
Eso depende del plugin que estés usando para generar ese filtro. Consulta a su desarrollador.
Un saludo
Hola serias tan amable de decirme si ese filtro obvia los producto que no estan activos es decir que si se acaba la talla M de camisa y uno da desactiva, luego que no salga en el filtro. Espero tu comentarios
Hola Enrique, muchas gracias. Excelente Blog!!
Quería saber si me podías resolver una duda. Al buscar productos con los filtros por atributo, por ejemplo «color», solo me salen los colores de los productos simples. Sabes a qué se debe? Saludos
Hola! buena información, te agradeceria un montón si puedes ayudarme, al ocupar el filtro de producto por atributo, lo pongo en cualquiera de las columnas que me indica wordpress, pero al darle guardar e ir al sitio no se ve el filtro, no me parece lo ponga a la derecha o izquierda…porque no se ve??
Buenos días Enrique, Enhorabuena por tu blog.
Querría saber si sabes por qué no se me muestra el filtro por precio que he configurado, ya sabes que la nueva versión del plugin es algo distinta, pero a través del widget directamente no se me visualiza en la barra lateral donde lo he incluido. (estoy con divi)
gracias de antemano,
un saludo
Hola Laura
Imposible saberlo, tendrás que verlo directamente con el soporte del plugin, son quienes mejor te pueden ayudar.
Un saludo
Hola Enrique, espero pueda ayudarme con lo siguiente:
Tengo una zapatería online, todos los productos que vendo van de la talla 34 hasta la 41 , entonces, todos mis productos tienen el atributo «talla» con todas esas opciones de tallas (34; 35; 36; 37; 38; 39; 40; 41)
Al añadir un filtro, si elijo por ejemplo la talla 35, me muestra todos los productos, aunque varios de ellos no tengan existencia en la talla 35.
Hay manera de que al filtrar se omitan los productos que no tengan existencia en la talla seleccionada? Solo quiero que se muestren los productos que efectivamente tengan la talla 35 disponible.
Gracias y feliz día.
Genial el artículo Enrique, sabes alguna forma o tienes algún plugin para ir filtrando productos por pasos y que el cliente tenga que ir definiendo y eligiendo los atributos para poder darle el producto que quiere?
Hola Pepe
Echa un vistazo a estos plugins, es muy posible que entre ellos haya alguno que te sirva para lo que necesitas.
Un saludo
Hola, me gustan tus videos lo explicas muy bien todo. Quiero filtrar por atributo tallas, y el widget cuando lo pongo me dice: vista previa no disponible, es el único widget que ocurre esto en todos los demás se pueden poner y se ven perfectamente, son los que vienen por defecto en wordpress. También he instalado los plugin que he visto en tu blog y otros que he visto en otros lugares y en todos me dicen lo mismo: vista previa no disponible o no se ven en la web.puedo filtrar por tallas, precios, categorías, poner calendario, todos los widget que quiera menos el de atributos que es donde están las tallas. Me urge ponerlo para que mis clientes filtren por tallas ya que vendo ropa de bebe hecha a mano. Gracias espero que puedas ayudarme.