15 Nov 2021
Comment créer des filtres produits sur Woocommerce

Créer des filtres produit sur Woocommerce

Les filtres de recherche produit permettent d’améliorer l’expérience utilisateur sur un site e-commerce. Quand un client souhaite un produit en particulier, les filtres vont créer des conditions pour qu’il arrive à son besoin précis. Nous allons voir comment mettre en place cela dans Woocommerce.

Différencier la recherche de votre site et les filtres produit

Il faut distinguer la recherche de la boutique et les filtres de recherche produit. La 1er permet de rechercher n’importe quel élément sur votre site WordPress, un article de blog, une page, un produit… Elle se trouve en général dans le haut de page de votre site avec une icône qui représente une loupe et un champ de recherche.

Les filtres produit se trouvent dans vos pages catégories, soit dans une colonne à gauche de la liste de vos produits ou bien à l’horizontale au-dessus.. C’est souvent les formats les plus classiques. Quand un utilisateur sélectionne un filtre en temps réel (ou ajax) il voit les produits en rapport avec ce filtre. Exemple, si le site e-commerce vend des chaussures, il peut filtrer par pointure (en stock) et trouver les produits qu’il peut acheter.

Des filtres mal utilisés ou non pertinents si vous avez un grand catalogue produit, peuvent nuire à l’expérience de visite de l’utilisateur. Réfléchissez bien à ce dont le client a besoin pour trouver son produit.

Vérifiez si votre thème WordPress propose un système de filtre

Avant de vous précipiter sur un plugin pour intégrer cette fonctionnalité, regardez bien si votre template ne propose pas cette option. En effet, certains thèmes WordPress sont conçus pour le e-commerce et possèdent déjà des fonctionnalités supplémentaires pour Woocommerce.

Par exemple, le célèbre thème Astra le propose dans des thèmes premium à importer.

Le thème premium Woondershop permet aussi d’avoir des filtres dans la boutique Woocommerce.

Il en existe bien d’autres mais c’est pour vous montrer qu’il n’est pas forcément nécessaire d’utiliser une extension selon votre template.

Regarder mon tutoriel Woocommerce sur les filtres de recherche

J’ai réalisé cet article en vidéo pour vous aider à mieux visualiser les possibilités. Vous pouvez lire la suite de l’article pour trouver des informations identiques avec différents liens.

N’hésitez pas à venir sur Youtube me soutenir en mettant un petit j’aime ou en vous abonnant pour m’aider à continuer à créer du contenu WordPress 🙂

Les filtres inclus dans Woocommerce

Le saviez-vous ? Il y a des widgets filtres en natif à la suite à l’installation de WC. Vous pouvez les utiliser comme des blocs dans Gutenberg et vous pouvez les ajouter dans votre sidebar (colonne de droite ou de gauche). C’est à cet emplacement qu’il faut activer ce widget. Le défaut, c’est qu’il y a seulement 4 filtres : par prix, par attributs, par notes et par produit actif. Voici un exemple de rendu :

Afficher filtre produit woocommerce theme astra

Dans cet exemple, je suis sur le thème Astra. Il faut au préalable définir dans la personnalisation du thème une colonne latérale pour la boutique.

Le plus intéressant, c’est le filtre par attribut. Vous pouvez ajouter autant de widgets que vous avez d’attributs et les personnaliser selon vos envies dans la “Colonne latérale WooCommerce”:

Widget filtre attribut Woocommerce

Ces filtres sont déjà intéressants pour vos utilisateurs mais vous allez avoir besoin d’un plugin si vous voulez aller plus loin dans la personnalisation des filtres.

Un plugin gratuit de filtres personnalisés

Comme souvent, il existe une multitude d’extensions qui permettent de créer une recherche produit par filtre. J’ai testé WOOF – Products Filter for WooCommerce qui permet la personnalisation d’affichage d’un filtre. On peut déterminer si on veut un menu déroulant, un bouton radio, etc.

Une fois installé, vous avez un nouvel onglet dans les réglages de Woocommerce pour éditer les options du plugin. Comme pour le widget natif, vous devez ajouter le plugin Woof dans votre sidebar.

Voici le résultat en personnalisant l’affichage :

extension Woof products filter for Woocommerce

Vous avez un peu plus de choix en terme de filtres et vous pouvez pour chacun définir si vous voulez un titre, dans quel ordre doit se faire l’affichage du résultat etc :

Personnalisation des filtres produits Woof
Voici l’affichage en back-office lors de mes tests

La version pro permet d’avoir un nombre de fonctionnalités impressionnantes entre autres :

  • Scroll infini
  • Masquer les attributs non utilisés
  • Enregistrement des filtres par les clients
  • Filtrer par couleur (On affiche la couleur et pas juste le nom)

Yith – Woocommerce ajax product filter, personnaliser avec des images

Ce plugin possède une version gratuite mais qui est très limitée. Je veux parler de la version premium qui offre quelque chose de vraiment spécifique à ce plugin et qui peut vous permettre d’améliorer grandement la recherche produit pour vos utilisateurs.

Vous pouvez personnaliser un terme de recherche avec une image, un pictogramme ou un motif.

Voici un exemple de rendu :

Filtre Woocommerce avec image ou motif
On peut voir que pour différents filtres il y a eu une personnalisation des termes de recherche

Vous pouvez aussi opter pour une recherche horizontale dans les réglages du plugin. C’est l’idéal si vous ne voulez pas avoir une colonne à droite ou à gauche dans votre page boutique ou vos pages catégories.

L’extension et les filtres fonctionnent avec des shortcodes. Je vous laisse voir mon article blog Woocommerce sur ce sujet. Vous allez trouver des informations sur leurs utilisations.

Filtrer des produits dans la recherche WordPress avec Doofinder

Voici un petit bonus dans l’article. Combinez la recherche WordPress avec les filtres produits grâce à la solution Doofinder.

Rendez votre moteur de recherche bien plus performant en permettant aux utilisateurs de taper un mot-clef et de pouvoir sélectionner des filtres pour trouver leurs produits.

La navigation à facette pour la recherche WordPress avec Doofinder

Il n’y a pas d’intégration ou d’adaptation à réaliser avec votre thème, l’affichage est généré via Doofinder et non votre site WordPress. Vous avez une formule gratuite pour tester la solution sur votre site.

Conclusion

Il est important d’optimiser la recherche pour vos clients. Ils doivent dans un temps très court trouver rapidement leur produit, sans ça ils risquent de quitter votre site. Si vous avez un catalogue de produits avec un volume important, il est encore plus précieux de créer des filtres de produit aux petits oignons.

Hébergement spécialisé WordPress chez Hostinger

Faites appel à un freelance WordPress et Woocommerce !

Exemple :
– Résoudre un problème technique
– Améliorer un élément graphiquement
– Installer une extension

Commandez un support Woocommerce pour que j’intervienne sur votre site.

Réalisez un devis pour la création de vote boutique e-commerce en m’envoyant une demande depuis ma page contact.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *