Les acheteurs qui souhaitent filtrer les produits WooCommerce par couleur se heurtent au même problème sur la plupart des sites. Ils arrivent sur la page de la boutique, voient une grille mixte de toutes les couleurs disponibles, et n'ont aucun moyen de réduire le choix sans cliquer sur chaque produit individuellement.
WooCommerce n'inclut pas de filtre de couleur pour la page de la boutique par défaut. Sans cela, votre grille de produits affiche tout à la fois, et un client à la recherche d'une couleur spécifique doit parcourir chaque article pour la trouver.
Un filtre de couleur résout ce problème en permettant aux acheteurs de cliquer sur une couleur et de voir instantanément uniquement les produits correspondants. Nous avons constaté que cette seule addition permettait aux clients de rester plus longtemps sur la page et de réduire la frustration qui les pousse à aller chez un concurrent.
Dans cet article, nous allons vous montrer comment ajouter un filtre de couleur à votre boutique WooCommerce sans écrire une seule ligne de code.
Pourquoi ajouter un filtre de couleur à votre boutique WooCommerce ?
D'après notre expérience, les boutiques qui vendent des produits en plusieurs couleurs perdent le plus de ventes à cause de ce problème exact. Un acheteur ayant une couleur spécifique en tête abandonne lorsque la grille le force à la chercher.
Imaginez un magasin de vêtements où chaque chemise, quelle que soit sa couleur, est accrochée sur le même portant sans possibilité de tri. Personne ne veut parcourir une centaine d'options mélangées pour trouver la seule chemise rouge pour laquelle il est venu.
Ceci est particulièrement important pour les boutiques vendant des vêtements, de la décoration intérieure, des accessoires, ou tout produit où la couleur est un facteur décisif. Lorsque les clients ne trouvent pas rapidement leur couleur, ils partent, et cette vente va ailleurs.
L'ajout d'un filtre de couleur place les bons produits devant les bons clients en quelques secondes. Dans cette optique, examinons comment en ajouter un à votre boutique.
Ajouter un filtre de couleur à WooCommerce
Le moyen le plus simple d'ajouter un filtre de couleur à WooCommerce est d'utiliser un plugin comme WPFilters.
WPFilters est le meilleur plugin de filtrage pour WordPress, développé par la même équipe que SearchWP. Il vous permet d'ajouter des filtres de type Amazon à n'importe quelle boutique WooCommerce sans écrire une seule ligne de code.
WPFilters extrait vos valeurs de couleur directement de vos attributs de produit WooCommerce et les transforme en options de filtre cliquables sur la page de la boutique. Vous pouvez également combiner le filtre de couleur avec d'autres types de filtres comme un curseur de gamme de prix, des cases à cocher de catégorie ou une boîte de recherche par mot-clé pour une expérience d'achat encore plus précise.
Voici quelques choses que vous pouvez faire avec WPFilters :
- Filtrer par n'importe quel attribut de produit : Extrayez les valeurs de couleur directement de votre attribut de couleur WooCommerce et affichez-les sous forme de cases à cocher que les clients peuvent sélectionner.
- Formats d'affichage multiples : Affichez les options de couleur sous forme de cases à cocher, d'une liste déroulante ou d'une liste de boutons radio pour correspondre au design de votre boutique.
- Combiner avec d'autres filtres : Superposez le filtre de couleur avec un filtre de taille, de marque ou de prix afin que les clients puissent affiner les résultats sous plusieurs angles à la fois.
- Actualisation AJAX instantanée : La grille de produits se met à jour dès qu'un client sélectionne une couleur, sans rechargement de page requis.
Voyons maintenant comment configurer un filtre de couleur sur votre boutique WooCommerce.
Étape 1 : Installer et Activer WPFilters
Tout d'abord, vous devrez visiter le site Web de SearchWP et vous inscrire à un compte WPFilters.
Une fois que vous avez un compte, connectez-vous à votre espace client et accédez à l'onglet Téléchargements.
Ensuite, cliquez sur le bouton Télécharger WPFilters pour enregistrer le fichier ZIP du plugin sur votre ordinateur. Nous vous recommandons également de copier votre clé de licence depuis cette page, car vous en aurez besoin lors de la configuration.
Ensuite, téléchargez et installez le plugin sur votre site WordPress. Si vous ne l'avez jamais fait auparavant, consultez ce guide sur comment installer un plugin WordPress.
Après avoir activé le plugin, l'assistant de configuration apparaîtra. Cliquez simplement sur le bouton C'est parti et suivez les instructions à l'écran pour terminer la configuration.
WPFilters est prêt ! Préparons maintenant vos données produit WooCommerce.
Étape 2 : Configurer un attribut de couleur dans WooCommerce
Avant de pouvoir créer le filtre, vous devez configurer un attribut de produit Couleur dans WooCommerce. WPFilters extrait ses valeurs directement de vos attributs produit, c'est donc une étape obligatoire si vous ne l'avez pas encore fait.
Remarque : Si vous avez déjà un attribut Couleur avec des termes attribués à vos produits, vous pouvez passer à l'étape 3.
Pour commencer, allez d'abord dans Produits » Attributs depuis votre tableau de bord WordPress, puis ajoutez vos attributs.
Pour des instructions étape par étape, vous pouvez consulter ce guide sur comment configurer correctement les étiquettes, attributs et catégories de produits dans WooCommerce.
Étape 3 : Créer un élément de filtre de couleur dans WPFilters
Accédez maintenant à WPFilters » Éléments depuis votre tableau de bord WordPress et cliquez sur le bouton Ajouter.
Ensuite, vous pouvez donner un nom à votre filtre en haut de l'éditeur, par exemple Filtre par couleur.
Après cela, vous devrez vous rendre dans la section Champs de filtre et sélectionner l'option Case à cocher. Cela crée une liste de cases à cocher pour chaque couleur que les clients peuvent sélectionner pour affiner la grille de produits.
À partir d'ici, vous pouvez faire défiler jusqu'à la section Source de données et cliquer sur le menu déroulant.
Sous la section WooCommerce, sélectionnez l'attribut Couleur du produit (pa_color) que vous avez créé à l'étape précédente. WPFilters extraira automatiquement tous vos termes de couleur et les ajoutera au filtre.
Étape 4 : Personnaliser les paramètres du filtre de couleur
Une fois la source de données connectée, vous pouvez affiner l'apparence et le comportement du filtre pour vos clients.
Faites défiler jusqu'à la section Conteneur et activez le bouton Afficher le titre pour afficher une étiquette au-dessus des cases à cocher, et activez Repliable si vous souhaitez que les visiteurs puissent masquer le widget de filtre pour économiser de l'espace sur mobile.
Ensuite, faites défiler jusqu'à la section Éléments.
Ici, l'activation de l'option Nombre d'éléments indique aux clients combien de produits sont disponibles pour chaque couleur afin qu'ils puissent prendre des décisions plus rapides.
Lorsque vous avez terminé, faites défiler vers le haut et cliquez sur le bouton Enregistrer.
Vous verrez un aperçu en direct du filtre dans le panneau de gauche.
Étape 5 : Ajoutez le filtre de couleur à votre boutique WooCommerce
Une fois votre filtre enregistré, la dernière étape consiste à le placer sur votre boutique. Nous vous recommandons de l'ajouter à la zone de widget de la barre latérale de votre page de boutique, où il reste visible pendant que les clients font défiler et s'intègre à la disposition standard de WooCommerce.
Pour commencer, allez dans Apparence » Widgets depuis votre tableau de bord WordPress. Notez que cette étape peut sembler différente selon le thème que vous utilisez.
À partir d'ici, vous devrez trouver la zone de barre latérale utilisée par votre page de boutique (généralement Barre latérale WooCommerce) et cliquer sur le bouton + pour ajouter un nouveau bloc. Recherchez ensuite WPFilters Element et ajoutez le widget.
Une fois que vous avez ajouté le bloc de widget WPFilters Element, vous pouvez sélectionner vos filtres de couleur.
Dans le panneau Paramètres de l'élément à droite, ouvrez le menu déroulant Sélectionner l'élément et choisissez le filtre « Filtrer par couleur ».
Lorsque vous avez terminé, cliquez sur Mettre à jour.
Visitez maintenant votre page de boutique et testez le filtre. Sélectionnez la couleur Charcoal et confirmez que seuls les produits ayant la couleur attribuée apparaissent dans la grille.
FAQ sur l'ajout de filtres de couleur
1. WPFilters récupère-t-il automatiquement mes valeurs de couleur de WooCommerce ?
Oui. Une fois que vous connectez le filtre à votre attribut de produit de couleur WooCommerce, WPFilters récupère automatiquement tous vos termes de couleur et affiche chacun d'eux comme une option de case à cocher. Vous n'avez pas besoin de saisir les couleurs manuellement dans le plugin.
2. Puis-je combiner le filtre de couleur avec un filtre de prix ou de catégorie ?
Oui. Vous pouvez créer des éléments de filtre distincts pour le prix, la catégorie, la taille ou tout autre attribut dans WPFilters et les ajouter tous à la même barre latérale. Les clients peuvent alors affiner les résultats sous plusieurs angles à la fois, par exemple en filtrant par Rouge et une gamme de prix inférieure à 50 $.
3. Le filtre de couleur fonctionnera-t-il avec les produits WooCommerce variables ?
Oui. WPFilters fonctionne avec tous les types de produits WooCommerce standard, y compris les produits variables. Lorsqu'un client filtre par une couleur, WPFilters affiche tous les produits qui ont une variation correspondant à cette couleur, même si d'autres variations sont disponibles dans différentes couleurs.
4. Les clients peuvent-ils sélectionner plus d'une couleur à la fois ?
Oui. Le type de champ Case à cocher permet aux clients de sélectionner plusieurs couleurs simultanément. Si un client coche Bleu et Noir, WPFilters affiche tous les produits disponibles dans l'une ou l'autre couleur. Passez au type de champ Radio si vous souhaitez limiter les clients à une seule sélection à la fois.
Nous espérons que cet article vous a aidé à apprendre comment filtrer les produits WooCommerce par couleur. Vous voudrez peut-être aussi consulter nos guides sur comment filtrer les produits WooCommerce par attributs et comment filtrer les produits WooCommerce par tags.
Prêt à offrir à vos clients un moyen plus rapide de trouver des produits par couleur ? Vous pouvez commencer avec WPFilters ici.
