Blog SearchWP

Tutoriels, astuces et ressources WordPress pour vous aider à développer votre entreprise

Comment ajouter un filtre de notation par étoiles dans WooCommerce

Les acheteurs adorent un raccourci vers les bonnes affaires, et un filtre de notation par étoiles WooCommerce leur en offre un. En un seul glissement, ils peuvent ignorer tout ce qui est en dessous de 4 étoiles et parcourir uniquement les produits dont vos clients font déjà l'éloge.

Le bon point est que votre boutique possède déjà ce dont ce filtre a besoin. Chaque fois que vous approuvez un avis, WooCommerce calcule la note moyenne du produit et l'enregistre, afin que WPFilters puisse transformer ces notes en un simple curseur sans aucun code.

Nous avons configuré cela sur notre propre boutique démo WooCommerce et avons eu un curseur de notation fonctionnel dans la barre latérale de la boutique en quelques minutes.

Dans cet article, nous vous montrerons comment ajouter un filtre de notation par étoiles WooCommerce, de l'activation des notations au test du curseur sur votre page de boutique.

Que fait un filtre de notation par étoiles WooCommerce ?

Un filtre de notation par étoiles permet aux acheteurs de masquer tous les produits en dessous de la note qui les intéresse. C'est l'option « 4 étoiles et plus » que vous avez probablement utilisée sur les grands sites d'achat.

Le nombre derrière cela vient de vos clients. Chaque fois que vous approuvez un avis avec une notation par étoiles, WooCommerce calcule la nouvelle moyenne du produit et la stocke avec le produit.

Cette moyenne se trouve dans un champ personnalisé, qui est une information supplémentaire que WordPress enregistre à côté d'un article ou d'un produit.

Les produits qui n'ont pas encore été notés comptent pour 0. Le tri et le filtrage font des choses différentes.

Le tri modifie l'ordre de vos produits, tandis qu'un filtre supprime ceux qui ne correspondent pas, de sorte que les acheteurs ne voient que ce qui reste.

Pourquoi les acheteurs veulent-ils filtrer les produits par note ?

D'après notre expérience, les acheteurs s'appuient le plus sur les avis lorsqu'ils comparent plusieurs produits similaires.

  • Les acheteurs font confiance aux autres acheteurs. Un produit avec une moyenne de 4,5 étoiles de la part de clients réels semble être un pari plus sûr qu'un produit sans antécédents.
  • Le tri affiche toujours tout. Même avec le tri par note moyenne activé, les acheteurs doivent faire défiler les produits moins bien notés pour savoir où se terminent les bons.
  • Les grands catalogues enfouissent vos meilleures ventes. Lorsqu'une catégorie s'étend sur plusieurs pages, vos produits les mieux notés peuvent se retrouver en page trois, où peu d'acheteurs regardent.
  • Les options intégrées sont limitées. Les propres filtres de notation de WooCommerce sont conçus pour les pages de boutique basées sur des blocs ou affichent des lignes de liens d'étoiles, et de nombreux autres outils ne fonctionnent qu'à l'intérieur d'Elementor, Divi ou d'un thème spécifique.

Pensez-y comme à un magasin de chaussures où les sélections du personnel sont mélangées avec toutes les autres paires sur le mur.

Les bonnes chaussures sont là, mais les acheteurs doivent essayer toutes les paires pour les trouver.

Ensuite, examinons le moyen le plus simple d'ajouter un filtre de notation à votre boutique.

Comment ajouter un filtre de notation par étoiles WooCommerce avec WPFilters

Nous recommandons WPFilters comme moyen le plus simple d'ajouter un filtre de notation par étoiles WooCommerce.

WPFilters - Meilleur plugin de filtrage WordPress

WPFilters est le meilleur plugin de filtrage pour WordPress, développé par la même équipe derrière SearchWP.

Il vous permet de créer des filtres à partir des catégories, tags, attributs et champs personnalisés que votre boutique possède déjà, sans écrire de code.

Voici quelques-unes des fonctionnalités qui font de WPFilters un bon choix pour un filtre de notation :

  • Filtres de champs personnalisés. WPFilters peut transformer n'importe quel champ personnalisé en un filtre de champ personnalisé, y compris le champ _wc_average_rating que WooCommerce remplit pour vous.
  • Curseur de plage. L'élément Slider transforme un nombre comme une note en une plage déplaçable, afin que les acheteurs puissent choisir « de 4 à 5 étoiles » en un seul mouvement.
  • Pas de rechargement de page. Lorsqu'un acheteur déplace le curseur, WPFilters utilise AJAX pour mettre à jour les produits sur la même page.
  • URL de filtre partageables. Chaque sélection est enregistrée dans l'URL de la page, afin que les acheteurs puissent mettre en favoris ou partager une page de produits les mieux notés.

Avec cela, voyons comment vous pouvez utiliser WPFilters pour ajouter un filtre de note par étoiles à votre boutique WooCommerce.

Étape 1 : Installer et Activer WPFilters

Pour commencer, vous pouvez vous inscrire à un plan WPFilters sur le site Web de SearchWP.

Une fois inscrit, vous pouvez vous rendre dans l'onglet Téléchargements de votre tableau de bord de compte. De là, téléchargez le fichier ZIP du plugin WPFilters.

télécharger le fichier ZIP du plugin WPFilters

Pendant que vous y êtes, copiez également votre clé de licence, car vous en aurez besoin dans un instant.

Ensuite, vous pouvez télécharger et installer le plugin sur votre site WordPress. Si vous avez besoin d'aide, vous pouvez suivre le guide de WPBeginner sur comment installer un plugin WordPress.

Après l'avoir activé, l'assistant de configuration de WPFilters s'ouvre. Vous pouvez cliquer sur C'est parti et suivre les instructions à l'écran.

Assistant de configuration WPFilters

Remarque : WPFilters nécessite une licence active pour afficher des filtres sur votre site. Assurez-vous donc que votre clé est vérifiée avant de continuer.

Avec votre licence active, WPFilters est prêt pour votre filtre de note.

Étape 2 : Activer les notes de produits dans WooCommerce

Avant de créer le filtre, vos produits doivent avoir des notes par étoiles pour pouvoir filtrer. Pour vérifier, allez dans WooCommerce » Paramètres et cliquez sur l'onglet Produits.

Ensuite, faites défiler jusqu'à la section Avis. Assurez-vous que Activer les avis sur les produits et Activer la note par étoiles sur les avis sont tous deux cochés.

Les deux sont activés par défaut, mais ils ont pu être désactivés lors de la configuration de votre boutique.

activer les notes par étoiles sur les avis de produits WooCommerce

Une fois cela fait, cliquez sur « Enregistrer les modifications » en bas de la page.

Astuce Pro : Laissez Les notes par étoiles doivent être obligatoires, pas facultatives cochée, ce qui est le réglage par défaut. Ainsi, chaque avis laissé par un client est accompagné d'une note par étoiles qui compte dans la moyenne.

Gardez à l'esprit que seuls les avis approuvés comptent pour la note d'un produit. Si vous mettez de nouveaux avis en attente de modération, vous devrez les approuver avant qu'ils ne modifient le filtre.

Étape 3 : Créer un filtre de curseur de note

Vous pouvez maintenant créer le filtre lui-même.

Pour ce faire, allez dans WPFilters » Éléments depuis votre tableau de bord WordPress. Ensuite, cliquez sur le bouton Ajouter.

Écran des éléments WPFilters

En haut du constructeur, cliquez sur l'icône du crayon à côté du nom de l'élément et donnez-lui un nom que les acheteurs comprendront, comme « Note client ».

Après cela, recherchez la section Champs de filtre et sélectionnez Slider.

Nous aimons le Slider pour les notes car il fonctionne avec des moyennes comme 4,5, qu'une liste de cases à cocher afficherait comme une longue rangée de valeurs décimales.

créer un filtre de notation par étoiles WooCommerce avec curseur

À partir de là, faites défiler vers le bas jusqu'à la section Source de données et ouvrez la liste déroulante.

La liste est regroupée en Articles, Taxonomies et Champs personnalisés.

Allez-y et sélectionnez _wc_average_rating, qui se trouve dans le groupe Champs personnalisés.

filtrer les produits WooCommerce par champ personnalisé de notation moyenne

Note : Vous verrez également _wc_rating_count et _wc_review_count juste en dessous. Ces champs indiquent le nombre de notes et d'avis qu'un produit a reçus, pas sa moyenne, alors assurez-vous de choisir _wc_average_rating.

Notez que cette étape peut différer en fonction du thème WordPress que vous utilisez.

Si tous les produits ont la même note, comme dans un nouveau magasin où rien n'a encore été évalué, WPFilters masque le curseur jusqu'à ce qu'au moins deux produits aient des notes différentes.

Ensuite, vous pouvez choisir l'apparence du filtre.

Sous Conteneur, activez Afficher le titre pour que le nom « Note client » apparaisse au-dessus du curseur.

Modifier les paramètres du conteneur pour les filtres

Vous pouvez également activer Repliable si vous souhaitez que les acheteurs puissent masquer le filtre.

Une fois que cela vous convient, cliquez sur Enregistrer.

WPFilters utilise également le nom pour construire l'URL du filtre, de sorte que « Note client » apparaisse sous la forme customer-rating dans l'adresse de la page boutique.

Étape 4 : Ajouter le filtre de note à votre page boutique

Ensuite, vous pouvez placer le filtre à côté de vos produits.

Étant donné que WPFilters fonctionne avec la liste de produits que votre page boutique affiche déjà, il n'y a aucun réglage supplémentaire pour connecter les deux.

Pour l'ajouter à la barre latérale de votre boutique, allez dans Apparence » Widgets. À partir de là, ouvrez la zone de widgets que votre thème utilise sur les pages de boutique.

Ajouter le bloc de widget d'élément WPFilters à la barre latérale WooCommerce

Sur notre magasin de démonstration, qui utilise le thème Astra, il s'agit de la Barre latérale WooCommerce. Ensuite, cliquez sur l'icône +, recherchez « WPFilters », et ajoutez le bloc Élément WPFilters.

Ensuite, choisissez votre filtre « Note client » dans le menu déroulant Sélectionner l'élément dans les paramètres du bloc.

ajouter un filtre de notation à la page de boutique WooCommerce

Une fois cela fait, cliquez sur Mettre à jour pour enregistrer vos widgets.

Do note that this step might differ depending on the WordPress theme you’re using.

Si votre thème n'a pas de barre latérale de boutique, le bouton Intégrer dans le constructeur de filtre vous donne un shortcode, comme , que vous pouvez coller là où vous souhaitez que le filtre apparaisse.

Étape 5 : Tester votre filtre d'étoiles de note

Avec le filtre en place, vous pouvez visiter votre page boutique dans un nouvel onglet de navigateur. Vous verrez le curseur « Note client » avec une poignée à chaque extrémité et la plage actuelle affichée en dessous.

Pour le premier test, faites glisser la poignée gauche jusqu'à 4. Les nombres sous le curseur devraient maintenant aller de 4,0 à 5,0, et les produits devraient se mettre à jour en un instant sans rechargement de page.

Sur notre magasin de démonstration, cela conserve les bottes de randonnée imperméables Summit (4,5 étoiles), les bottes Chelsea imperméables Ridgeline (4 étoiles) et la veste pour homme (5 étoiles).

Les bottes de pluie imperméables Puddle Jumper (3 étoiles) et tous les produits sans avis sont retirés de la liste.

Filtre de notation WooCommerce affichant les produits les mieux notés

Pour le deuxième test, regardez l'URL de la page après avoir déplacé le curseur.

Vous remarquerez qu'elle inclut maintenant customer-rating, suivi de la plage que vous avez choisie.

Vous pouvez copier cette URL et l'ouvrir dans une fenêtre privée pour vérifier que les mêmes produits les mieux notés s'affichent toujours.

Bonus : Combiner les notes avec les filtres de catégorie

Une fois que votre filtre de notation fonctionne, vous pouvez laisser les acheteurs affiner encore plus.

Pour ce faire, créez un deuxième élément dans WPFilters » Éléments, et choisissez vos catégories de produits dans le groupe Taxonomies dans le menu déroulant Source de données.

Sélectionner la source de données de catégorie

Après avoir ajouté les deux filtres dans la même barre latérale, ils fonctionnent ensemble.

Un acheteur peut choisir une catégorie comme « Bottes » et faire glisser le curseur de notation à 4, et voir uniquement les bottes notées 4 étoiles ou plus.

Notre guide sur la façon de filtrer les produits WooCommerce par catégorie explique ce filtre en détail.

Vous pouvez également offrir aux acheteurs un moyen en un clic de supprimer toutes les sélections avec un élément Réinitialiser, que nous abordons dans notre guide sur la façon d'ajouter un bouton de filtre de réinitialisation dans WordPress.

Foire aux questions

1. WooCommerce a-t-il un filtre de notation par étoiles intégré ?

WooCommerce inclut un bloc Filtre de notation, mais il est conçu pour se trouver à l'intérieur du bloc Filtres de produits sur une page de boutique basée sur des blocs.

Son ancien widget Filtrer les produits par notation n'affiche que des lignes de liens d'étoiles, donc si vous voulez une plage déplaçable dans une barre latérale classique, un plugin comme WPFilters peut filtrer par le champ _wc_average_rating à la place.

2. Pourquoi mon filtre de notation WooCommerce ne s'affiche-t-il pas ?

Le filtre ne peut utiliser que les notations que WooCommerce a enregistrées, alors vérifiez d'abord que Activer les avis sur les produits et Activer la notation par étoiles sur les avis sont activés.

Seuls les avis approuvés comptent, et les produits sans aucun avis ont une note de 0. Si tous les produits ont la même note, WPFilters masque le curseur jusqu'à ce qu'au moins deux produits aient des notes différentes.

3. Puis-je combiner un filtre de notation par étoiles avec des filtres de catégorie ou de prix ?

Oui, vous pouvez ajouter un filtre de catégorie, un filtre de prix et un filtre de notation à la même page.

WPFilters les combine, de sorte que les acheteurs ne voient que les produits qui correspondent à tous les filtres qu'ils ont définis.

4. Le filtre de notation peut-il afficher des icônes d'étoiles au lieu d'un curseur ?

WPFilters affiche la notation sous forme de curseur avec une plage de nombres en dessous, plutôt que des lignes d'icônes d'étoiles.

Si les lignes d'étoiles cliquables sont plus importantes pour vous que le temps de configuration, FacetWP dispose d'une facette dédiée Notation par étoiles, bien qu'elle nécessite d'abord la création de son propre index.

Conclusion

Votre boutique dispose désormais d'un curseur de notation basé sur les avis laissés par vos clients.

Nous espérons que cet article vous a aidé à apprendre comment ajouter un filtre de notation par étoiles WooCommerce à votre boutique.

Vous voudrez peut-être aussi consulter nos guides sur la façon de créer des filtres de plage dans WordPress et sur la façon de filtrer les produits WooCommerce dans WordPress.

Prêt à aider les acheteurs à trouver vos produits les mieux notés ? Vous pouvez commencer avec WPFilters ici, avec une garantie de remboursement de 14 jours.

Créez dès aujourd'hui une meilleure expérience de recherche WordPress

Ne perdez plus jamais de visiteurs à cause de résultats de recherche inutiles. SearchWP rend la création de votre propre recherche WordPress intelligente rapide et facile.

Obtenez SearchWP maintenant
Icône de moteurs de recherche multiples