WooCommerce: ¿Cómo habilitar los filtros de productos (es decir, "filtros Ajax")?

Si su tienda WooCommerce tiene muchos productos, los clientes en línea pueden perderse fácilmente. Puede haber demasiadas páginas para visitar ("paginación de productos") antes de encontrar el producto que están buscando. No hace falta decir que esta es una gran pérdida para su negocio. Posiblemente, nunca volverán.

Si compra en sitios web de comercio electrónico populares como Amazon y eBay, sabe que tienen mil millones de productos cada uno. Afortunadamente, además de la útil barra de búsqueda, estos sitios web ofrecen " filtros de productos " en la barra lateral. Puede refinar por precio, reseñas, etiqueta, categoría, etc.; el sitio web no se "actualizará", sino que devolverá los resultados filtrados inmediatamente en esa misma página .

Estos se denominan " Filtros de productos Ajax " (Ajax es un conjunto de aplicaciones que se ejecutan en segundo plano sin forzar una actualización de la página del sitio web). Y como Amazon y eBay acaban de demostrarte, estos filtros son absolutamente imprescindibles si tienes más de 100 productos de WooCommerce.

Afortunadamente, hay complementos para eso. Y son gratis o bastante baratos si se compara este pequeño costo con su retorno de la inversión (ROI) potencial.

Además, si tiene muchos productos, también tiene varias categorías de productos de WooCommerce, etiquetas de productos, atributos de productos, campos personalizados de productos, precios, estados de existencias. Esto significa que implementar los filtros de productos Ajax en su tienda WooCommerce puede ser cuestión de 10 minutos : ¡active el complemento, elija los criterios de filtro y sus usuarios verán automáticamente un widget de filtro suave en la barra lateral!

Entonces, ¿cuáles son los mejores complementos de "Filtro de productos WooCommerce Ajax"?

1. Widgets de filtro de productos predeterminados de WooCommerce (GRATIS)

Sorpresa

WooCommerce le brinda widgets de filtro de productos de forma predeterminada. Para usar los filtros incorporados de WooCommerce, vaya a Apariencia > Widgets y arrastre y suelte los siguientes filtros en su barra lateral: " Filtrar productos por atributo ", " Filtrar productos por clasificación " y " Filtrar productos por precio ".

Algunos de mis productos de prueba tienen un atributo llamado "Tamaño", por lo que configuré el widget "Filtrar productos por atributo" para filtrar los tamaños de los productos. Todo esto es automático, siempre que sus productos tengan atributos existentes. Ahora el front-end se ve así:

En aproximadamente 1 minuto, pude agregar filtros por atributo, calificación y un "control deslizante" de precio. Muy facil. Sin embargo, existen dos problemas principales: estos filtros de WooCommerce no funcionan con Ajax (por lo tanto, la página se "recarga" después de usar uno de los filtros) y son demasiado limitados . Solo hay 3 widgets predeterminados, solo puede tener un menú desplegable o una lista de atributos, solo un control deslizante de precios y no una lista de rangos de precios al estilo de Amazon... básicamente, no puede hacer mucho con esta configuración.

Probablemente necesite widgets más avanzados, más opciones de diseño, un sistema con tecnología Ajax y algo más robusto pero flexible.

2. Complemento de navegación en capas mejorada habilitado para Ajax de WooCommerce (PREMIUM)

Este complemento oficial de WooCommerce es un excelente primer paso hacia la perfección del filtrado de productos. Este complemento proporciona una mejor experiencia de usuario y más opciones de widgets que los widgets de filtro de productos incorporados que no son Ajax predeterminados.

Una vez activo, el complemento de navegación en capas mejorada habilitado para Ajax le brinda un widget adicional que puede usar en las páginas de tienda / archivo / categoría llamado " WooCommerce Ajax Layered Nav ".

Lo bueno de este widget avanzado es que puede decidir cómo mostrar el filtro de atributos en el front-end, es decir, como una lista, una casilla de verificación, un menú desplegable o un selector de etiquetas/muestras de color .

Lástima que no haya una demostración a la que pueda dirigirte. Puede usar tantos widgets como desee, pero no hay filtro de precio, filtro de calificación, filtro de stock, etc. Esto es solo para atributos (tamaño, color, etc.) .

Entonces, a menos que esto sea suficiente para sus objetivos, este complemento no está completo.

3. Complemento WooCommerce Ajax Product Filter de YITH (GRATIS Y PREMIUM)

Cuando se trata de YITH, sabes que tienen un complemento de WooCommerce para todo... no hace falta decir que también venden un complemento avanzado de filtro de productos Ajax.

La buena noticia es que también viene como una versión gratuita (que hace casi lo mismo que el complemento premium de WooCommerce que describimos en la sección anterior). Además, desde la página del complemento puede ver una demostración y probar el producto antes de comprarlo.

Una vez que el complemento premium esté activo, verá 5 nuevos widgets:

• Ordenar por Ajax (esto ordena los productos según las opciones de clasificación de WooCommerce, ¡pero lo hace con Ajax!)
• Filtro de productos Ajax (ordenar por atributo/categoría/etiqueta/marca y mostrar como menú desplegable/casillas de verificación/lista/muestras/etiquetas)
• Filtro de precios Ajax (crear rangos de precios en una lista filtrable)
• Filtro Ajax Stock/on Sale (agregue un widget para filtrar productos en venta o en stock)
• Ajax Reset Filter (restablecer filtros con un solo clic)

Este es el back-end:

Y esta es la página de la tienda una vez que estos widgets de filtro estén activos:

Tiene combinaciones de filtros ilimitadas y puede usar múltiples widgets de "Filtro de productos Ajax". Esto significa que en la misma barra lateral puedes filtrar por atributo, etiqueta, categoría, precio y/o marca al mismo tiempo . Y sin actualizar la página, los resultados se muestran inmediatamente.

Como puede imaginar, YITH WooCommerce Ajax Product Filter es compatible con todos los demás complementos de YITH y, por lo tanto, puede hacer cosas bastante avanzadas.

También puede "alternar" cada widget y hacer que esté "cerrado" de forma predeterminada. Además, dentro de cada widget puede seleccionar/deseleccionar qué atributo/etiqueta/categoría debe excluirse del filtro .

Sí, esto es muy flexible. Y funciona.

4. FacetWP (PREMIUM)

Por último, pero no menos importante, FacetWP, una poderosa herramienta de filtrado también compatible con WooCommerce, es un producto muy avanzado para desarrolladores; si desea aprovecharlo al máximo, se requieren algunos conocimientos técnicos. Viene con ganchos, códigos abreviados, codificación Ajax basada en el rendimiento e integraciones.

Para agregar un filtro, debe agregar un código abreviado en un widget de texto o, mejor aún, agregarlo a través de PHP en sus archivos de tema (esto significa que también puede mostrar los filtros fuera de la barra lateral ).

FacetWP le permite crear varias "facetas", es decir, mostrar filtros, como:

• Casillas de verificación
• Desplegable
• fSeleccionar
• Radio
• Jerarquía
• Deslizador
• Búsqueda
• Autocompletar
• Rango de fechas
• Rango de números
• Clasificación de estrellas
• Proximidad

Con respecto a WooCommerce, cada faceta o filtro de producto puede apuntar a las siguientes fuentes de datos:

1. Precio
2. Precio de venta
3. Precio regular
4. Puntuación media
5. Estado de stock (en stock / agotado)
6. En venta
7. Categorías de Producto
8. Etiquetas de productos
9. Atributos del producto

Como puede ver, crear una faceta de WooCommerce es bastante sencillo:

FacetWP viene con una excelente documentación para desarrolladores y es imprescindible para proyectos avanzados. Si, por otro lado, FacetWP es demasiado para ti, entonces mi preferencia sería el complemento YITH WooCommerce Ajax Product Filter.

5. Filtros JetSmart de Crocoblock

JetSmartFilters de Crocoblock es un complemento fácil de usar con un sistema de filtro basado en AJAX y 9 prácticos widgets que hacen que un sitio web de WooCommerce sea fácil de usar sin escribir una sola línea de código:

1. Filtro de calificación: ordena los productos por calificación.
2. Filtro visual: muy efectivo para tiendas en línea que almacenan diferentes colores o marcas.
3. Filtro de búsqueda: permite buscar por palabras o frases y muestra rápidamente los resultados correspondientes.
4. Filtro de radio: proporciona una opción para elegir un producto o publicación de la lista.
5. Filtro de casilla de verificación: permite elegir varias opciones de la lista de verificación.
6. Intervalo de fechas: una buena opción si va a filtrar publicaciones o productos en función de la fecha en que se agregaron o eventos por la fecha en que se supone que deben tener lugar.
7. Filtro de rango de verificación: ayuda a crear un rango de opciones en forma de una lista de casillas de verificación.
8. Filtro de rango: le permite configurar el rango de búsqueda con la ayuda de un control deslizante .
9. Seleccionar filtro: permite elegir opciones en forma de lista desplegable .

Los widgets adicionales dentro del complemento JetSmartFilters ayudan a los usuarios del sitio web a revisar los productos relevantes sin actualizar la página, ver los filtros aplicados actualmente y eliminar los necesarios para mayor comodidad.

JetSmartFilters está estrechamente relacionado con otro complemento producido por Crocoblock: JetWooBuilder. Este complemento es una herramienta imprescindible para los creadores de sitios web de comercio electrónico, ya que brinda opciones versátiles para exhibir los productos, desde diferentes variaciones de cuadrículas de productos hasta formularios de revisión y calificación.