Blog SearchWP

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

Comment filtrer les produits WooCommerce par attributs

Si vous vendez des produits de différentes tailles ou couleurs, vous savez à quel point il est difficile pour les clients de trouver exactement ce qu'ils veulent. Ils doivent souvent cliquer sur des dizaines de pages juste pour voir si leur taille spécifique est réellement en stock.

Cette frustration les amène généralement à quitter votre site sans rien acheter. Nous avons vu de nombreux propriétaires de boutiques perdre des ventes potentielles simplement parce que l'expérience d'achat était trop encombrée pour être naviguée.

La solution consiste à permettre aux visiteurs de filtrer les produits par attributs spécifiques tels que le tissu, la taille ou la marque. C'est comme avoir un assistant de magasin utile qui les dirige instantanément vers le bon rayon.

Dans cet article, nous allons vous montrer comment filtrer les produits WooCommerce par attributs sans avoir à engager un développeur.

Pourquoi ajouter des filtres d'attributs à la boutique WooCommerce ?

Nous avons tous vécu cela en tant qu'acheteurs. Vous visitez une boutique en ligne, trouvez une catégorie qui vous plaît, mais vous ne pouvez pas filtrer par la seule chose qui compte, comme la taille ou la couleur.

Nous avons visité d'innombrables sites e-commerce où nous avons dû cliquer sur vingt produits différents juste pour voir s'ils étaient disponibles en noir. C'est frustrant et nous fait généralement quitter le site pour acheter ailleurs.

Si votre boutique manque de filtres d'attributs, vos clients ressentent probablement cette même annoyance. Les catégories sont idéales pour les groupes larges, mais elles échouent lorsqu'un utilisateur a des exigences spécifiques.

Forcer les utilisateurs à cliquer d'avant en arrière entre le catalogue et les pages produits crée des frictions. Cela transforme une séance de shopping amusante en une corvée.

Considérez les filtres d'attributs comme un employé compétent se tenant dans l'allée. Au lieu de laisser le client chercher sans but, les filtres réduisent immédiatement les options à ce qui correspond exactement à ses besoins.

Nous avons constaté que la résolution de ce point de douleur spécifique maintient les gens plus longtemps sur le site. Cela fluidifie le parcours, de la simple navigation au paiement.

Cela dit, examinons les étapes que vous pouvez suivre pour ajouter ces filtres à votre site.

Filtrer les produits WooCommerce par attributs

Le moyen le plus simple de filtrer vos produits par attributs spécifiques est d'utiliser un plugin comme WPFilters.

WPFilters - Meilleur plugin de filtrage WordPress

WPFilters est le meilleur plugin de filtrage pour WordPress car il est conçu pour fonctionner avec WooCommerce dès le départ.

Habituellement, la configuration des filtres implique des paramètres compliqués, voire des modifications de code.

WPFilters résout ce problème avec une configuration sans code qui vous permet de créer des filtres fonctionnels en quelques minutes.

Il vous permet de transformer vos attributs de produits existants en cases à cocher, boutons radio ou listes déroulantes conviviaux. Vous n'aurez pas à engager de développeur pour que votre boutique ait l'air professionnelle.

Voici quelques autres fonctionnalités que vous obtenez avec WPFilters :

  • URL de filtres partageables : Chaque recherche crée un lien unique, afin que les clients puissent mettre en signet ou partager leurs résultats filtrés spécifiques avec des amis.
  • Placer les filtres n'importe où : Vous pouvez facilement ajouter des filtres à n'importe quelle page ou barre latérale à l'aide du bloc Gutenberg ou de simples shortcodes.
  • Personnalisation totale : Vous pouvez contrôler exactement l'apparence et le comportement de vos filtres sans toucher une seule ligne de CSS.
  • Support de données avancé : Il vous permet d'aller au-delà des catégories de base et de filtrer le contenu par champs personnalisés, balises, et plus encore.
  • Compatibilité universelle : Le plugin fonctionne parfaitement avec les articles, les pages et les types d'articles personnalisés, vous pouvez donc l'utiliser sur l'ensemble de votre site.

Cela dit, examinons comment vous pouvez configurer le filtrage par attribut sur votre site.

Étape 1 : Installer et Activer WPFilters

Pour commencer, vous devrez visiter le site Web de SearchWP et vous inscrire à un compte WPFilters.

Une fois que vous avez terminé, accédez simplement à votre tableau de bord de compte et cliquez sur l'onglet Téléchargements.

Télécharger les fichiers zip du plugin WPFilters

Ensuite, appuyez sur le bouton Télécharger WPFilters et enregistrez le fichier ZIP sur votre ordinateur. Nous vous recommandons également de copier votre clé de licence dès maintenant, car vous en aurez besoin pour vérifier le plugin dans un instant.

Maintenant, vous devez télécharger le fichier sur votre site et l'installer. Si vous avez besoin d'un rappel, consultez ce guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, l'assistant de configuration apparaîtra sur votre écran. Cliquez sur le bouton C'est parti et suivez les instructions à l'écran pour terminer la configuration.

Assistant de configuration WPFilters

Étape 2 : Ajouter un nouvel élément de filtre pour l'attribut de produit

Ensuite, vous devrez créer un nouvel élément de filtre avec lequel vos clients interagiront.

Pour ce faire, rendez-vous simplement sur WPFilters » Éléments depuis votre tableau de bord WordPress et cliquez sur le bouton Ajouter.

Ajouter un nouvel élément dans WPFilters

Après cela, vous pouvez entrer un nom pour votre filtre en haut, tel que « Couleur du produit » ou « Taille ». Ce nom interne vous aide à garder les choses organisées si vous prévoyez d'ajouter plusieurs filtres plus tard à votre boutique WooCommerce.

Ensuite, sélectionnez les Champs de filtre parmi les options disponibles.

Pour les filtres d'attributs de produit, nous utiliserons l'option Case à cocher car elle permet aux utilisateurs de sélectionner plusieurs options à la fois. Cependant, vous pouvez également choisir un menu déroulant ou des boutons radio, en fonction de la conception de votre boutique.

Sélectionner le champ de filtre d'attribut de produit

Une fois que vous avez choisi une mise en page, faites défiler jusqu'à la section Source de données pour connecter vos données de produit. C'est ici que vous indiquez à WPFilters quelles informations rechercher dans votre boutique.

Cliquez sur le menu déroulant pour sélectionner l'attribut de produit pour lequel vous souhaitez configurer un filtre.

Par exemple, nous choisirons « Couleur du produit » comme attribut spécifique pour ce tutoriel.

Sélectionner la source de données de l'attribut produit

Si vous n'avez pas d'attribut de produit ajouté, veuillez consulter ce guide sur comment ajouter des étiquettes, des attributs et des catégories de produits à WooCommerce.

Étape 3 : Personnaliser les paramètres de votre filtre

Après avoir sélectionné votre source, vous pouvez affiner et personnaliser votre filtre d'attribut de produit en faisant défiler jusqu'à la section Conteneur.

Ici, vous pouvez activer l'option « Afficher le titre », le rendre rétractable et organiser les éléments de contenu horizontalement.

Modifier les paramètres du conteneur pour les filtres d'attributs

Ensuite, faites simplement défiler vers le bas jusqu'à la section Éléments pour personnaliser davantage votre filtre.

Après cela, vous devrez entrer le nom de la page et la sélectionner dans le menu déroulant.

Modifier les paramètres des éléments pour les filtres

Lorsque vous êtes satisfait des paramètres, faites simplement défiler vers le haut et cliquez sur le bouton Enregistrer pour sauvegarder vos modifications.

Vous remarquerez un aperçu pratique sur le côté droit de l'écran qui se met à jour en temps réel à mesure que vous apportez des modifications.

Enregistrer le filtre d'attribut produit

Étape 4 : Afficher le filtre sur votre boutique WooCommerce

Maintenant que votre filtre est prêt, la dernière étape consiste à le placer sur votre site Web, afin que les clients puissent l'utiliser.

Nous aimons utiliser WPFilters car il vous permet de placer ces filtres n'importe où à l'aide de l'éditeur de blocs WordPress.

Il est également doté d'une option intégrée pour intégrer directement le filtre sur votre page préférée. Cliquez simplement sur l'option Intégrer dans l'éditeur d'éléments.

Intégrer le filtre d'attribut produit

Ensuite, une fenêtre contextuelle s'ouvrira, où vous pourrez sélectionner le mode d'intégration et la page cible.

WPFilters propose 3 modes d'intégration, qui incluent un bloc Gutenberg, un shortcode ou un code PHP.

Pour ce tutoriel, nous vous montrerons comment ajouter le filtre d'attributs de produit à la page de boutique WooCommerce et à la barre latérale de votre boutique en ligne.

1. Afficher le filtre d'attributs de produit sur la page de boutique WooCommerce

Tout d'abord, vous pouvez simplement sélectionner l'option Bloc Gutenberg puis cliquer sur le bouton « Sélectionner une page existante ».

Intégrer des filtres à une page

Après cela, vous devrez entrer le nom de la page et le sélectionner dans le menu déroulant.

Une fois cela fait, cliquez simplement sur le bouton C'est parti.

Intégrer le filtre produit sur la page de boutique

Sur l'écran suivant, vous verrez votre filtre de produit déjà ajouté à l'éditeur WordPress.

Alternativement, vous pouvez également ajouter le bloc Élément WPFilters sur votre page de boutique WooCommerce et sélectionner le filtre que vous venez de créer dans le panneau des paramètres à droite.

Afficher le filtre d'attribut produit dans l'éditeur de contenu

Enfin, vous pouvez cliquer sur le bouton Enregistrer ou Publier.

Vous pouvez maintenant visiter votre boutique en ligne pour tester le filtre et vous assurer qu'il trie correctement vos produits.

Prévisualiser les filtres produits

2. Afficher le filtre d'attributs de produit dans la barre latérale

Pour ajouter le filtre d'attributs de produit WooCommerce à la barre latérale de votre boutique, vous pouvez aller dans Apparence » Widgets depuis votre tableau de bord WordPress.

Remarque : Nous utilisons le thème WordPress Astra pour ce tutoriel. Les étapes pour ajouter le widget peuvent différer en fonction du thème que vous utilisez pour votre site.

Ensuite, vous devrez ajouter le bloc de widget Élément WPFilters sous la section Barre latérale WooCommerce.

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

Pour commencer, cliquez simplement sur le bouton + et ajoutez le bloc.

Après cela, vous devrez sélectionner le filtre d'attributs de produit dans les Paramètres de l'élément dans le panneau de droite.

Sélectionner votre filtre produit dans les paramètres du widget

Lorsque vous avez terminé, cliquez simplement sur le bouton « Mettre à jour ».

Maintenant, vous pouvez visiter votre boutique WooCommerce et voir les filtres dans la barre latérale.

Afficher le filtre de produit dans la barre latérale

Étape 5 : Tester votre filtre d'attributs de produit

Après avoir intégré le filtre sur votre boutique WooCommerce, la prochaine étape consiste à le tester pour voir s'il fonctionne correctement.

Pour ce tutoriel, nous avons créé un filtre où les visiteurs peuvent trier les produits par couleur.

Lorsque nous avons sélectionné une couleur particulière dans le filtre, le produit s'est automatiquement trié et a affiché le bon article.

Filtre d'attribut de produit WooCommerce

Vous pouvez maintenant ajouter d'autres filtres d'attributs de produits pour votre boutique. Par exemple, vous pouvez afficher les marques, la taille, le matériau et d'autres attributs dans le filtre.

FAQ sur le filtre d'attributs de produits WooCommerce

1. Quelle est la manière la plus simple de filtrer les produits WooCommerce par attributs ?

La manière la plus simple de filtrer les produits WooCommerce par attributs est d'utiliser un plugin comme WPFilters, qui offre une configuration sans code pour créer des options de filtre conviviales en quelques minutes.

2. Puis-je ajouter des filtres à des pages spécifiques ou seulement à la barre latérale ?

Oui, WPFilters vous permet d'intégrer des filtres n'importe où sur votre site, y compris sur des pages spécifiques comme la page de boutique WooCommerce ou dans la barre latérale, en utilisant des blocs Gutenberg, des shortcodes ou du code PHP.

3. Pourquoi est-il important d'ajouter des filtres d'attributs à une boutique WooCommerce ?

L'ajout de filtres d'attributs améliore l'expérience d'achat en permettant aux clients de trouver rapidement les produits qui correspondent à des critères spécifiques comme la taille, la couleur ou le matériau, réduisant ainsi la frustration et augmentant la probabilité d'achat.

Nous espérons que cet article vous a aidé à apprendre comment filtrer les produits WooCommerce par attributs. Vous voudrez peut-être aussi consulter notre guide sur comment ajouter une recherche intelligente de produits WooCommerce et comment rechercher par SKU de produit dans WooCommerce.

Prêt à rendre votre boutique en ligne plus facile à naviguer ? Vous pouvez commencer avec WPFilters ici.

avatar de l'auteur
Aazim Akhtar

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.

Get SearchWP Now
Icône de moteurs de recherche multiples