Blog SearchWP

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

Comment créer un filtre de plage dans WordPress

Elle élimine l'encombrement et aide vos clients à prendre des décisions plus rapidement, ce qui se traduit souvent par plus de ventes pour vous.

Nous avons constaté que les visiteurs ont du mal à trouver des articles spécifiques qui correspondent à leur budget ou à leur calendrier lorsqu'il y a trop d'options.

Sans moyen de restreindre ces résultats, les clients potentiels sont souvent frustrés et quittent le site. C'est comme essayer de trouver un livre spécifique dans une bibliothèque qui n'est pas organisée par genre ou par auteur.

L'ajout de filtres de plage résout ce problème en permettant aux utilisateurs de glisser entre une valeur minimale et maximale, comme le prix ou les dates. Cependant, nous avons constaté que la plupart des configurations WordPress par défaut n'offrent pas cette fonctionnalité, et son ajout nécessite généralement un codage complexe.

Dans cet article, nous vous montrerons comment créer des filtres de plage dans WordPress.

Pourquoi proposer des filtres de plage à vos visiteurs ?

Avant de passer au tutoriel, parlons de la manière dont les filtres de plage améliorent l'expérience utilisateur sur votre site.

Nous avons constaté que les visiteurs qui ne peuvent pas filtrer par prix ou par date abandonnent souvent leur recherche rapidement.

Imaginez entrer dans un magasin de chaussures et devoir regarder chaque paire, quelle que soit votre taille ou votre budget. C'est exactement ce que ressentent vos visiteurs lorsqu'ils doivent faire défiler des produits non pertinents sur votre site web.

Les filtres de plage agissent comme un assistant de magasin utile qui montre immédiatement les articles correspondant à des critères spécifiques.

Nous avons constaté que ce petit ajout permet aux visiteurs de rester engagés beaucoup plus longtemps car ils voient exactement ce qu'ils peuvent se permettre ou ce dont ils ont besoin.

Qu'il s'agisse de filtrer une plage de prix WooCommerce ou de sélectionner des dates pour une réservation, cette fonctionnalité permet de gagner du temps.

Cela élimine l'encombrement et aide vos clients à prendre des décisions plus rapidement, ce qui se traduit souvent par plus de ventes pour vous.

Cela dit, examinons comment vous pouvez facilement ajouter un filtre de plage à votre site WordPress.

Ajouter un filtre de plage dans WordPress

Le moyen le plus simple d'ajouter des filtres de plage à votre site WordPress est d'utiliser un plugin comme WPFilters.

WPFilters - Meilleur plugin de filtrage WordPress

WPFilters est le meilleur plugin de filtrage pour WordPress qui permet de trier facilement le contenu. Vous pouvez l'utiliser pour donner aux visiteurs un contrôle précis sur ce qu'ils voient sans écrire de code.

Il fonctionne parfaitement avec les plugins e-commerce populaires comme WooCommerce et Easy Digital Downloads.

En utilisant le plugin, vous pouvez créer tous types de filtres pour les tags, les catégories, les champs personnalisés et d'autres types de données. Le meilleur, c'est que WPFilters offre plusieurs champs de données pour ajouter des filtres à votre site.

Cela signifie que vous pouvez facilement configurer des curseurs de prix, des plages de dates et des filtres numériques qui s'affichent bien sur n'importe quel appareil.

Voici quelques choses que vous pouvez faire avec WPFilters :

  • Filtrer par prix : Permettez aux clients de définir un budget minimum et maximum pour leurs achats.
  • Filtrer par champs personnalisés : Utilisez les données numériques de vos articles pour créer des curseurs de plage spécifiques.
  • Améliorer les résultats de recherche : Aidez les utilisateurs à trouver exactement ce dont ils ont besoin en réduisant considérablement les options.
  • Personnaliser l’apparence : Affichez le titre du filtre, rendez-le rétractable et disposez-le horizontalement.

Une fois que vous avez sélectionné le type de filtre, faites défiler vers le bas jusqu’à la section Source de données. Ici, vous pouvez choisir exactement quelles données déterminent les valeurs de plage.

É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 fait cela, dirigez-vous simplement vers votre zone de compte SearchWP et accédez à l’onglet « Téléchargements ».

Télécharger les fichiers zip du plugin WPFilters

Ensuite, vous pouvez cliquer sur le bouton Télécharger WPFilters et enregistrer les fichiers du plugin sur votre ordinateur.

Pendant que vous êtes sur la page de téléchargement, nous vous recommandons également de copier la clé de licence, car vous en aurez besoin pour configurer le plugin.

Maintenant, la prochaine étape consiste à télécharger les fichiers du plugin WPFilters sur votre site WordPress et à installer le plugin. Si vous avez besoin d’aide pour cela, veuillez consulter ce guide sur comment installer un plugin WordPress.

Après avoir activé le plugin, vous verrez l’assistant de configuration de WPFilters. Cliquez sur le bouton « Commencer » et suivez les instructions à l’écran.

Assistant de configuration WPFilters

Étape 2 : Ajouter un élément de filtre de plage

Maintenant que le plugin est actif, il est temps de créer votre premier filtre de plage pour WordPress.

Pour commencer, accédez à WPFilters » Éléments depuis le tableau de bord WordPress et cliquez simplement sur le bouton « Ajouter ».

Ajouter un nouvel élément dans WPFilters

Après cela, vous pouvez commencer par entrer un nom pour votre filtre en haut. Vous pouvez utiliser un nom spécifique qui vous aide à rester organisé lorsqu’il y a plusieurs filtres sur un site.

Ensuite, sélectionnez l’option Curseur dans la section Champs de filtre. Cet élément spécifique crée la barre de défilement que vos visiteurs utiliseront pour sélectionner leurs valeurs minimale et maximale.

Sélectionner le champ de filtre du curseur

Une fois que vous avez sélectionné le type de filtre, faites défiler jusqu'à la section Source de données. Ici, vous pouvez choisir exactement quelles données déterminent les valeurs de la plage.

Par exemple, si vous gérez une boutique, vous pouvez sélectionner le prix du produit ou le nombre total d’articles en stock comme source.

Choisir la source de données de plage


Après avoir sélectionné vos données, vous pouvez personnaliser l’apparence du curseur pour qu’il corresponde au design de votre site.

Faites simplement défiler vers le bas jusqu’à la section « Conteneur » pour ajuster les paramètres d’affichage. Par exemple, vous pouvez afficher un titre pour le filtre.

Modifier les paramètres du conteneur pour le filtre de plage

Lorsque vous êtes satisfait de l’apparence, faites défiler jusqu’en haut de la page.

Ensuite, cliquez sur le bouton Enregistrer pour sauvegarder vos modifications.

Enregistrer le filtre de plage

Étape 3 : Ajouter le filtre de plage à votre site

Le meilleur atout de WPFilters est que vous pouvez intégrer vos filtres n’importe où sur votre site en toute simplicité.

Pour commencer, cliquez simplement sur le bouton « Intégrer » sur la page Élément.

Cliquez sur le bouton d'intégration dans l'élément

Ensuite, vous verrez une fenêtre contextuelle avec différentes options.

Vous pouvez choisir entre le bloc Gutenberg, un shortcode ou du code PHP si vous êtes un développeur.

Intégrer la page des résultats de recherche

En plus de cela, vous pouvez également ajouter manuellement le bloc Gutenberg WPFilters à la barre latérale et à d’autres zones de votre site Web.

Pour ce tutoriel, nous allons ajouter le filtre de plage à la barre latérale de votre site WooCommerce de démonstration.

Pour ce faire, accédez simplement à Apparence » Widgets depuis votre tableau de bord WordPress. Notez que cette étape peut différer en fonction du thème WordPress que vous utilisez.

Ensuite, faites défiler jusqu à la section de la barre latérale et cliquez sur le signe « + » pour ajouter le bloc de widget WPFilters Element.

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

Vous devrez maintenant sélectionner le filtre de plage que vous avez créé dans le panneau des paramètres à droite.

Cliquez simplement sur le menu déroulant « Sélectionner un élément » et choisissez votre filtre.

Sélectionner le filtre de plage

Une fois que vous avez terminé, cliquez sur le bouton Mettre à jour en haut.

À partir de là, vous pouvez visiter votre site Web pour voir le filtre de plage en action.

Aperçu du filtre de plage

En faisant glisser le curseur, vos visiteurs peuvent filtrer les produits en fonction des prix.

FAQ sur la création de filtres de plage dans WordPress

Voici quelques questions courantes que nous recevons concernant la configuration des filtres de plage dans WordPress.

1. Quels types de données puis-je filtrer avec un curseur de plage ?

Vous pouvez filtrer presque toutes les données numériques. Nous utilisons souvent des curseurs de plage pour les prix des produits, les dates de réservation ou les mesures telles que le poids et la taille sur les sites de répertoire.

2. Cela fonctionne-t-il avec les produits WooCommerce ?

Oui, il s'intègre parfaitement à WooCommerce. Nous avons constaté que l'ajout d'un curseur de plage de prix aide les clients à trouver plus rapidement des produits abordables, ce qui peut augmenter les taux de conversion.

3. Puis-je ajouter plusieurs filtres de plage sur une seule page ?

Absolument. Vous pouvez empiler des filtres pour permettre aux utilisateurs de trier par prix et par note utilisateur simultanément. Cela crée une expérience de recherche très précise pour vos visiteurs.

Nous espérons que cet article vous a aidé à apprendre à créer des filtres de plage dans WordPress. Vous voudrez peut-être également consulter nos guides sur comment filtrer les produits WooCommerce par balises et comment filtrer les produits WooCommerce par catégorie.

Prêt à ajouter des filtres puissants à votre boutique en ligne ? 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