Blog SearchWP

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

Comment ajouter un filtre de boîte de recherche à WooCommerce

Gérer une boutique WooCommerce avec de nombreux produits peut rendre difficile pour les clients de trouver exactement ce dont ils ont besoin.

Par exemple, imaginez que vos visiteurs arrivent sur la page de la boutique, parcourent des dizaines de produits et repartent sans rien acheter simplement parce qu'ils n'ont pas trouvé le bon article assez rapidement.

La meilleure solution est d'ajouter un filtre de boîte de recherche directement sur votre page de boutique. Cela permet aux clients de taper un mot-clé et de filtrer instantanément la liste des produits sur la page de la boutique, sans être redirigés vers une page de résultats séparée.

Dans cet article, nous vous montrerons comment ajouter un filtre de boîte de recherche à une liste de produits WooCommerce.

Pourquoi ajouter un filtre de boîte de recherche à votre boutique WooCommerce ?

Par défaut, WooCommerce n'offre pas aux clients la possibilité de rechercher et de filtrer les produits directement sur la page de la boutique.

La recherche intégrée de WordPress envoie les visiteurs vers une page de résultats de recherche distincte. Cela perturbe l'expérience d'achat et éloigne les clients de votre boutique.

Un filtre de boîte de recherche résout ce problème en permettant aux clients de taper un mot-clé et de voir la liste des produits se réduire en temps réel, là où ils se trouvent. Il n'y a pas de rechargement de page ni de redirection.

Pensez à un magasin de vêtements avec 300 produits. Sans filtre, un client à la recherche d'un « sweat à capuche noir » doit parcourir tous les articles pour le trouver. Avec un filtre de boîte de recherche, il tape le mot-clé et voit uniquement les produits pertinents en quelques secondes.

Cela maintient les clients concentrés, réduit la frustration et facilite la recherche et l'achat de produits. Pour les propriétaires de boutiques, cela signifie généralement des taux de conversion plus élevés et moins de sessions abandonnées.

Cela dit, voyons comment vous pouvez ajouter cela à votre boutique sans aucun codage.

Comment afficher un filtre de boîte de recherche pour WooCommerce

Le moyen le plus simple d'ajouter un filtre de boîte de recherche à votre liste de produits WooCommerce est d'utiliser un plugin comme WPFilters.

WPFilters - Meilleur plugin de filtrage WordPress

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 que SearchWP, nous savons donc qu'il fonctionne de manière fiable et gère vos données produit efficacement.

Avec WPFilters, vous pouvez créer une boîte de recherche dédiée qui filtre votre liste de produits en temps réel. Vous pouvez également l'associer à d'autres filtres tels que des curseurs de prix, des cases à cocher de catégorie ou des filtres d'étiquettes pour donner aux clients un contrôle total sur leur expérience d'achat.

Voici certaines des choses que vous pouvez faire avec WPFilters :

  • Ajouter une boîte de recherche par mot-clé qui filtre les produits instantanément pendant que les clients tapent
  • Créer des curseurs de plage de prix, des cases à cocher de catégorie et des filtres d'étiquettes
  • Afficher les filtres à l'aide du bloc Gutenberg, d'un shortcode ou d'un code PHP
  • Personnaliser les paramètres d'apparence, comme l'affichage d'un titre ou le rendre rétractable

Maintenant, voyons comment vous pouvez utiliser WPFilters pour ajouter un filtre de boîte de recherche à 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, rendez-vous dans l'onglet Téléchargements de votre tableau de bord.

Télécharger les fichiers zip du plugin WPFilters

Ici, 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 sous peu.

Ensuite, vous devez téléverser le fichier du plugin sur votre site WordPress et l'installer. Si vous n'êtes pas sûr de la procédure, veuillez consulter ce guide sur comment installer un plugin WordPress.

Après avoir activé le plugin, l'assistant de configuration apparaîtra. Cliquez sur le bouton « Commencer » et suivez les instructions à l'écran pour terminer la configuration.

Assistant de configuration WPFilters

Étape 2 : Créer un nouvel élément de filtre de recherche

Maintenant que le plugin est actif, il est temps de construire votre filtre de boîte de recherche.

Pour commencer, naviguez simplement vers WPFilters » Éléments depuis votre tableau de bord WordPress.

Ensuite, cliquez sur le bouton Ajouter un nouvel élément pour créer un élément de filtre vierge.

Ajouter un nouveau filtre

Donnez un nom à votre filtre en haut de la page. Quelque chose comme « Filtre de recherche de produit ou de mot-clé » convient bien.

Ensuite, regardez la section Type de champ et sélectionnez l'option Recherche.

Sélectionner l'option de filtre de recherche

Cela crée une boîte de saisie de texte en direct dans laquelle les clients peuvent taper pour filtrer la liste des produits. Cliquez sur le bouton Enregistrer dans le coin supérieur droit.

Vous verrez maintenant un aperçu de la boîte de recherche apparaître dans le panneau de droite.

Étape 3 : Personnaliser les paramètres de la boîte de recherche

Ensuite, vous pouvez personnaliser l'apparence et le comportement de la boîte de recherche pour vos visiteurs.

Faites défiler jusqu'à la section Conteneur. Ici, vous pouvez activer l'option Afficher le titre pour afficher une étiquette au-dessus de la boîte de recherche.

Vous pouvez également activer l'option Rétractable si vous souhaitez que les visiteurs puissent masquer le filtre.

Changer les paramètres du conteneur pour la boîte de recherche

Une fois que vous êtes satisfait des paramètres, faites défiler vers le haut et cliquez sur le bouton Enregistrer.

Étape 4 : Ajouter le filtre de recherche à votre boutique WooCommerce

Votre filtre de recherche étant prêt, la dernière étape consiste à le placer là où les clients pourront le trouver et l'utiliser.

WPFilters vous offre plusieurs façons de procéder.

Pour commencer, cliquez sur le bouton Intégrer dans le coin supérieur droit de la page de l'élément.

Cliquez sur le bouton intégrer le filtre

Une fenêtre contextuelle apparaîtra avec plusieurs options d'intégration.

Celles-ci incluent un bloc Gutenberg, un shortcode ou un extrait PHP pour les développeurs.

Intégrer les filtres de recherche

De plus, vous pouvez également choisir de sélectionner une page existante ou d'en créer une nouvelle.

Une autre option populaire consiste à placer la boîte de recherche dans la barre latérale de votre page de boutique. Cela maintient le filtre visible à tout moment pendant que les clients parcourent les produits.

Pour ce faire, accédez à Apparence » Widgets depuis votre tableau de bord WordPress. Notez que cette étape peut sembler différente selon votre thème WordPress.

Trouvez la zone de la barre latérale utilisée par votre page de boutique et cliquez sur le bouton + pour ajouter un nouveau bloc. Recherchez le widget WPFilters Element.

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

Une fois que vous l'avez ajouté, sélectionnez votre filtre de recherche par mot-clé dans le menu déroulant des paramètres de l'élément WPFilters Element dans le panneau des paramètres.

Cliquez sur le bouton Mettre à jour lorsque vous avez terminé.

Sélectionnez votre filtre de recherche par mot-clé

Maintenant, visitez votre page de boutique WooCommerce pour voir le filtre de boîte de recherche en action.

Lorsqu'un client tape un mot-clé dans la boîte, la liste des produits se filtre en temps réel pour afficher uniquement les articles correspondants.

Afficher le filtre de recherche par mot-clé

FAQ sur l'ajout d'un filtre de boîte de recherche à WooCommerce

1. Cela fonctionne-t-il avec les produits variables ?

Oui, c'est le cas. WPFilters fonctionne avec tous les types de produits WooCommerce standard, y compris les produits simples, variables et groupés. La boîte de recherche correspondra au titre et à la description du produit, quel que soit le type de produit.

2. Puis-je combiner cela avec d'autres filtres comme le prix ou la catégorie ?

Absolument. Vous pouvez créer plusieurs éléments de filtre et les placer ensemble dans la barre latérale ou au-dessus de la grille de produits. Par exemple, vous pouvez empiler la boîte de recherche avec un filtre de cases à cocher de catégorie et un curseur de plage de prix afin que les clients puissent affiner les résultats sous plusieurs angles à la fois.

3. Ai-je besoin d'avoir SearchWP installé pour utiliser WPFilters ?

Non, WPFilters fonctionne comme un plugin autonome. SearchWP et WPFilters sont des produits distincts créés par la même équipe, ils s'intègrent donc bien ensemble, mais aucun des deux ne nécessite l'autre pour fonctionner.

Nous espérons que cet article vous a aidé à apprendre comment ajouter un filtre de boîte de recherche à votre liste de produits WooCommerce. Vous voudrez peut-être aussi consulter nos guides sur comment filtrer par plusieurs taxonomies dans WordPress et comment ajouter une recherche avec autocomplétion en direct à WordPress.

Prêt à offrir à vos clients un moyen plus rapide de trouver des produits ? 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