Faire des achats en ligne devrait être simple. Mais lorsqu'une boutique propose des dizaines, voire des centaines de produits entassés sur une seule page, trouver le bon article ressemble plus à farfouiller dans une pile de vêtements lors d'une vente de garage qu'à parcourir une boutique bien organisée.
C'est un problème que rencontrent de nombreux propriétaires de boutiques WooCommerce. Les produits sont tous là, la boutique est belle, mais les clients ne trouvent toujours pas ce dont ils ont besoin assez rapidement.
Et quand cela arrive, ils partent. Un filtre déroulant résout ce problème en permettant aux clients de réduire les produits par catégorie, taille, couleur, prix ou tout autre attribut en un seul clic.
Dans ce tutoriel, nous allons vous montrer comment créer un filtre déroulant pour les produits WooCommerce.
Pourquoi votre boutique WooCommerce a besoin d'un filtre déroulant
Imaginez entrer dans un magasin de vêtements où rien n'est organisé. Les chemises, pantalons, chaussures et vestes sont tous mélangés sur le même portant. Vous cherchez une veste bleue de taille moyenne, mais la seule façon de la trouver est de parcourir chaque article un par un. La plupart des gens feraient demi-tour.
C'est exactement ce qui se passe dans une boutique WooCommerce sans filtres déroulants.
Lorsque les clients arrivent sur votre page de boutique et voient une masse de produits sans moyen de les trier, la frustration s'installe rapidement.
Ils ne veulent pas cliquer sur dix pages d'articles juste pour trouver la seule chose qu'ils sont venus chercher. La plupart d'entre eux ne s'en donneront pas la peine. Ils fermeront l'onglet et achèteront chez un concurrent dont la boutique est plus facile à naviguer.
Nous avons vu cela se produire dans des boutiques qui ont d'excellents produits mais un mauvais filtrage. Le trafic est là, mais les ventes ne correspondent pas. Les clients arrivent sur la page de la boutique et repartent sans rien acheter. Un filtre déroulant est souvent la pièce manquante.
Voici ce qui rend les filtres déroulants si pratiques. Ils offrent aux clients un moyen simple et familier de réduire les résultats.
Au lieu de faire défiler 200 produits, un client peut ouvrir un menu déroulant, choisir « Grand », « Rouge » ou « Moins de 50 $ », et voir instantanément uniquement les produits qui correspondent. C'est le type d'expérience qui maintient les gens plus longtemps sur votre site et les rapproche du paiement.
Sans cela, vous laissez beaucoup de ventes sur la table. Et la bonne nouvelle est que sa mise en place ne nécessite pas de développeur ni de connaissances techniques. Voyons comment vous pouvez facilement ajouter un filtre déroulant à votre boutique WooCommerce.
Comment afficher un filtre déroulant dans WooCommerce
La façon la plus simple d'ajouter un filtre déroulant à WooCommerce est d'utiliser un plugin comme WPFilters.
WPFilters est le meilleur plugin de filtrage pour WordPress qui vous permet d'ajouter des filtres de style Amazon à votre boutique WooCommerce sans écrire une seule ligne de code.
Il est développé par la même équipe derrière SearchWP, nous savons donc qu'il fonctionne de manière fiable et gère efficacement vos données produit.
Avec WPFilters, vous pouvez créer des menus déroulants qui permettent aux clients de filtrer les produits par catégorie, par étiquette, par attribut de produit ou par toute taxonomie personnalisée. Vous pouvez également combiner des filtres déroulants avec d’autres types de filtres comme des curseurs de prix, des cases à cocher ou une boîte de recherche par mots-clés.
Voici certaines des choses que vous pouvez faire avec WPFilters :
- Créez des filtres déroulants pour les catégories de produits, les étiquettes, les attributs et les champs personnalisés
- Affichez plusieurs filtres ensemble dans la barre latérale ou au-dessus de la grille de produits
- Personnalisez les étiquettes, le texte d’espace réservé et les options d’affichage sans toucher au code
- Filtrez les résultats en temps réel sans rechargement de page
Maintenant, voyons comment configurer un filtre déroulant sur votre boutique WooCommerce.
Étape 1 : Installer et Activer WPFilters
La première chose à faire est de vous rendre sur le site Web de SearchWP et de vous inscrire pour un compte WPFilters. Une fois votre compte créé, connectez-vous et cliquez sur l’onglet Téléchargements dans votre tableau de bord de compte.
À partir de là, 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 pendant la configuration.
Ensuite, vous devrez télécharger et installer le plugin sur votre site WordPress. Si vous n’avez jamais fait cela auparavant, vous pouvez suivre ce guide pour débutants sur comment installer un plugin WordPress.
Une fois le plugin activé, l’assistant de configuration WPFilters apparaîtra sur votre écran. Cliquez sur le bouton ‘Commençons’.
Nous pouvons maintenant passer à la création de votre premier filtre déroulant.
Étape 2 : Ajouter un nouvel élément de filtre
Maintenant que WPFilters est opérationnel, il est temps de créer votre filtre déroulant.
Pour commencer, accédez à WPFilters » Éléments depuis votre tableau de bord WordPress et cliquez sur le bouton Ajouter.
En haut de l’écran, vous verrez un champ où vous pouvez donner un nom à votre filtre.
Il est conseillé d’utiliser un nom descriptif ici, comme « Catégories de produits » ou « Filtrer par étiquettes », surtout si vous prévoyez d’ajouter d’autres filtres plus tard. Un nom clair rend l’organisation beaucoup plus facile.
Ensuite, vous pouvez regarder la section Champs de filtre juste en dessous du nom. C’est ici que vous choisissez l’apparence et le comportement du filtre sur votre boutique.
WPFilters vous offre plusieurs options ici, y compris des cases à cocher, des boutons radio, des curseurs, et plus encore.
Puisque nous créons un filtre déroulant, sélectionnez l’option Déroulant.
Vous remarquerez qu’un aperçu en direct du filtre apparaît dans le panneau de droite dès que vous enregistrez vos paramètres.
Étape 3 : Connecter le filtre à une source de données WooCommerce
Avec le type de filtre déroulant sélectionné, l’étape suivante consiste à indiquer à WPFilters d’où tirer ses informations. C’est ce qui rend le filtre réellement utile pour vos clients.
Faites défiler vers le bas jusqu'à la section Source de données et cliquez sur le menu déroulant. Vous verrez une liste des sources de données disponibles. Comme nous travaillons avec une boutique WooCommerce, vous voudrez choisir une option spécifique à WooCommerce dans la liste.
Par exemple, vous pouvez sélectionner Catégories de produits si vous souhaitez que les clients filtrent par catégorie, ou Étiquettes de produits si vous avez étiqueté vos produits.
Vous pouvez également choisir des attributs de produit spécifiques comme la couleur, la taille ou le matériau si vous les avez configurés dans WooCommerce.
Une fois que vous avez fait cela, WPFilters extraira automatiquement les données pertinentes et les connectera à votre filtre déroulant.
Étape 4 : Personnaliser les paramètres du filtre déroulant
Maintenant que votre filtre est connecté à une source de données, il est temps de le rendre parfait pour votre boutique. WPFilters vous offre un bon ensemble d'options de personnalisation sans vous submerger de paramètres.
Vous pouvez d'abord faire défiler vers le bas jusqu'à la section Conteneur. C'est ici que vous contrôlez le comportement général du filtre.
Vous pouvez activer l'option Afficher le titre pour que les visiteurs sachent exactement à quoi sert le menu déroulant.
Vous verrez également une option pour rendre le filtre Repliable. C'est pratique si vous prévoyez d'ajouter plusieurs filtres à votre barre latérale, car cela permet de garder les choses bien rangées et d'éviter que la page ne paraisse trop encombrée.
Il y a aussi une option Horizontale si vous préférez afficher les choix de filtre côte à côte au lieu d'être empilés verticalement.
Ensuite, faites défiler un peu plus bas jusqu'à la section Éléments. Ici, vous pouvez activer des options comme Nombre d'éléments, qui indique aux clients combien de produits sont disponibles pour chaque option dans le menu déroulant.
Une fois que vous êtes satisfait de l'apparence de tout dans l'aperçu en direct sur la droite, faites défiler vers le haut et cliquez sur le bouton Enregistrer pour sauvegarder vos modifications.
Étape 5 : Ajouter le filtre déroulant à votre boutique WooCommerce
Avec votre filtre déroulant enregistré, il est temps de le placer quelque part où vos clients pourront l'utiliser. WPFilters vous offre plusieurs façons de le faire.
1. Ajouter le filtre déroulant à votre page boutique
La page boutique est l'un des meilleurs endroits pour ajouter un filtre déroulant, car c'est là que la plupart de vos clients navigueront. Pour commencer, cliquez sur le bouton Intégrer dans le coin supérieur droit de la page de l'élément de filtre.
Une fenêtre contextuelle apparaîtra avec quelques options d'intégration. Vous pouvez choisir entre un bloc Gutenberg, un shortcode, ou du code PHP. Pour la plupart des propriétaires de boutiques, le bloc Gutenberg est l'option la plus facile à utiliser.
Sélectionnez l'option Bloc Gutenberg puis cliquez sur Sélectionner une page existante.
À partir de là, tapez le nom de votre page boutique et sélectionnez-le dans le menu déroulant. Une fois que vous aurez cliqué sur le bouton C'est parti , WPFilters chargera votre page boutique dans l'éditeur de contenu WordPress avec le bloc de filtre déjà ajouté.
Lorsque vous êtes satisfait du résultat, cliquez sur le bouton Mettre à jour pour enregistrer vos modifications.
2. Ajout du filtre déroulant à votre barre latérale (recommandé)
L'ajout du filtre à votre barre latérale est une autre excellente option, et celle que nous recommandons à la plupart des propriétaires de boutiques WooCommerce. C'est parce que vous voulez qu'il reste visible pendant que les clients parcourent différentes pages de votre boutique.
Pour ce faire, allez dans Apparence » Widgets depuis votre tableau de bord WordPress. Gardez à l'esprit que cette étape peut sembler légèrement différente selon le thème WordPress que vous utilisez.
Trouvez la section de la barre latérale de votre boutique WooCommerce et cliquez sur le bouton + pour ajouter un nouveau bloc. Recherchez le bloc de widget WPFilters Element et ajoutez-le.
Une fois le bloc ajouté, regardez le panneau des paramètres sur la droite.
Cliquez simplement sur le menu déroulant Sélectionner l'élément et choisissez le filtre déroulant que vous venez de créer. Lorsque vous avez terminé, cliquez sur le bouton Mettre à jour pour tout enregistrer.
Étape 6 : Testez votre filtre déroulant
Maintenant que le filtre est en ligne sur votre boutique, il est important de vous assurer que tout fonctionne comme il se doit. Le test ne prend qu'une minute, mais il évite que vos clients rencontrent des problèmes plus tard.
Allez visiter votre boutique WooCommerce sur le devant de votre site. Rendez-vous sur la page ou la barre latérale où vous avez ajouté le filtre déroulant et regardez comment il apparaît à vos visiteurs.
À partir d'ici, vous pouvez cliquer sur le menu déroulant et sélectionner l'une des options disponibles. Par exemple, si vous avez configuré le filtre pour trier par tags de produits, allez-y et choisissez un tag dans la liste.
Les produits de la page devraient se mettre à jour immédiatement pour afficher uniquement les articles qui correspondent à votre sélection.
Si le filtre fonctionne correctement, vous verrez la grille de produits se réduire pour n'afficher que les résultats pertinents.
FAQ sur les filtres déroulants pour WooCommerce
1. Puis-je ajouter plusieurs filtres déroulants à la fois ?
Oui. Vous pouvez créer autant d'éléments de filtre que nécessaire et les placer ensemble au même endroit. Par exemple, vous pourriez empiler un menu déroulant « Filtrer par catégorie » avec un menu déroulant « Filtrer par couleur » et un curseur de plage de prix afin que les clients puissent affiner les résultats sous plusieurs angles à la fois.
2. Le filtre déroulant fonctionne-t-il avec les variations de produits ?
Oui. WPFilters fonctionne avec tous les types de produits WooCommerce standard, y compris les produits variables. Si vous filtrez par un attribut de produit tel que la couleur ou la taille, WPFilters affichera les produits qui ont des options de variation correspondantes.
3. Le filtrage se fait-il instantanément ou la page se recharge-t-elle ?
Le filtrage se fait en temps réel sans rechargement de page. Lorsqu'un client sélectionne une option dans le menu déroulant, la liste des produits est mise à jour immédiatement, ce qui rend l'expérience d'achat rapide et fluide.
4. Puis-je l'utiliser avec une taxonomie personnalisée que j'ai ajoutée moi-même ?
Oui. WPFilters prend en charge les taxonomies personnalisées en plus des catégories et attributs de produits WooCommerce intégrés. Si vous avez enregistré une taxonomie personnalisée pour vos produits, elle apparaîtra comme une option dans le menu déroulant Source de données lors de la configuration du filtre.
Nous espérons que cet article vous a aidé à apprendre comment créer un filtre déroulant pour les produits WooCommerce. Vous voudrez peut-être aussi consulter nos guides sur comment ajouter un filtre de boîte de recherche à une liste de produits WooCommerce et comment créer des filtres de plage dans WordPress.
Prêt à offrir à vos clients une meilleure façon de trouver des produits ? Vous pouvez commencer avec WPFilters ici.
