Comment filtrer les produits WooCommerce (tutoriel étape par étape)

Après avoir travaillé avec d'innombrables propriétaires de sites Web WooCommerce, nous avons appris que les boutiques en ligne prospères partagent une caractéristique clé : elles permettent aux clients de trouver facilement exactement ce qu'ils veulent.

Les grandes places de marché comme Amazon utilisent des filtres par prix, couleur, taille et tri par nouveautés car elles comprennent comment les clients achètent.

Le filtrage des produits est essentiel pour développer une entreprise de commerce électronique. Lorsque les clients ne trouvent pas rapidement ce qu'ils recherchent, ils partent souvent sans acheter.

C'est pourquoi nous avons créé ce guide étape par étape pour vous aider à ajouter un filtrage de produits efficace à votre boutique WooCommerce.

Vous apprendrez à créer des filtres basés sur les attributs qui rendent votre boutique plus facile à naviguer et plus agréable pour les acheteurs.

Pourquoi filtrer les produits WooCommerce par attribut ?

Les filtres permettent aux clients de parcourir très facilement les produits de votre boutique WooCommerce.

Ils permettent aux acheteurs de restreindre leur recherche en fonction de différents attributs, notamment la couleur, la gamme de prix, le tissu, la taille, et plus encore.

Plutôt que de faire défiler toute votre collection de produits, les utilisateurs peuvent simplement parcourir les produits qui les intéressent.

L'ajout de filtres peut améliorer l'expérience utilisateur, améliorer la fonctionnalité de recherche et réduire les taux de rebond dans votre boutique en ligne.

Ils peuvent également augmenter les ventes en permettant aux clients de voir toutes les options disponibles pour les produits qui les intéressent, les aidant ainsi à faire des achats plus éclairés.

Cela dit, voyons comment vous pouvez facilement filtrer les produits sur votre boutique WooCommerce. Nous vous montrerons comment filtrer les produits WooCommerce par attribut et par attribut personnalisé :

• Comment filtrer les produits WooCommerce par attribut
• Comment filtrer les produits WooCommerce par attribut personnalisé
• Conseils bonus pour augmenter les ventes WooCommerce

Comment filtrer les produits WooCommerce par attribut

Si vous recherchez un moyen simple et rapide de filtrer les produits WooCommerce, alors cette méthode est faite pour vous. Nous vous montrerons comment configurer un filtre simple par réglages d'attributs à l'aide d'un plugin de filtre de produits WooCommerce.

Tout d'abord, vous devez installer et activer le plugin YITH WooCommerce Ajax Product Filter. Pour plus d'instructions, veuillez consulter notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, accédez à la page YITH » Ajax Product Filter depuis le tableau de bord WordPress.

À partir de là, cliquez sur le bouton « + Créer un nouveau préréglage » pour commencer à créer un préréglage de filtre.

Une fois que vous y êtes, vous pouvez commencer par taper un nom pour le filtre dans la zone « Nom du préréglage ».

Gardez à l'esprit que le nom du préréglage ne sera pas affiché sur votre boutique et sert uniquement à votre référence.

Ensuite, choisissez simplement « Horizontal » comme disposition prédéfinie, puis cliquez sur le bouton « + Ajouter un nouveau filtre » en bas.

Si vous utilisez la version gratuite du plugin, cette option ne sera pas disponible pour vous. À la place, vous aurez la disposition prédéfinie « Défaut ».

Vous pouvez maintenant commencer à créer un filtre pour vos produits WooCommerce.

Créer un filtre pour les produits WooCommerce

Tout d'abord, vous devrez taper un nom de filtre à côté de l'option « Nom du filtre ».

Par exemple, si vous créez un filtre qui aidera les clients à trier par catégories de produits, vous pouvez le nommer « Filtrer par catégorie ».

Ensuite, vous pouvez sélectionner les paramètres du filtre dans le menu déroulant « Filter for » (Filtrer pour). Gardez à l'esprit que la version gratuite du plugin n'offre que des filtres pour les catégories et les tags de produits.

Pour en savoir plus sur les différences entre ces options, vous pouvez lire notre guide sur comment ajouter des tags, attributs et catégories à WooCommerce.

Si vous créez un filtre pour trier les produits par différentes gammes de prix, vous devez choisir l'option « Price Range » (Gamme de prix). De même, si vous souhaitez trier les produits par popularité ou par note moyenne, vous devez choisir l'option « Order by » (Trier par).

Vous pouvez également choisir l'option « Taxonomy » (Taxonomie) si vous souhaitez filtrer les tags de produits, les catégories, les couleurs, les tailles, les matériaux, les styles, et plus encore. Pour ce tutoriel, nous allons choisir cette option.

Une fois que vous avez fait cela, vous devez choisir parmi les options de taxonomie pour le filtre. Par exemple, si vous souhaitez filtrer les produits par couleur, vous devrez choisir cette option dans le menu déroulant.

Comme nous créons un filtre pour les catégories de produits, nous sélectionnerons l'option « Product Categories » (Catégories de produits).

Ensuite, vous devez taper toutes les catégories de produits de votre site web dans la section « Choose terms » (Choisir les termes).

Après cela, vous pouvez choisir comment vous souhaitez que le filtre s'affiche sur la partie visible de votre boutique à partir du menu déroulant « Filter type » (Type de filtre).

Vous pouvez afficher le filtre sous forme de case à cocher, de menu déroulant, de texte, de nuanciers de couleurs, et plus encore. Pour ce tutoriel, nous choisirons l'option « Select » (Sélectionner) pour ajouter un menu déroulant.

Ensuite, activez le commutateur « Show Search Field » (Afficher le champ de recherche) si vous souhaitez activer une boîte de recherche dans le menu déroulant.

Vous pouvez également afficher le filtre que vous créez sous forme de bascule en activant le commutateur « Show as toggle » (Afficher comme bascule). Ensuite, les clients pourront activer et désactiver le filtre.

Une fois que vous avez fait cela, choisissez simplement un ordre par défaut pour les termes filtrés dans le menu déroulant « Trier par ». Les catégories de filtres seront affichées dans l'ordre que vous choisissez.

Vous pouvez trier les catégories de filtres par nom, nombre de termes ou slug. Vous pouvez également choisir le « Type de tri » pour les termes filtrés par ordre croissant (ASC) ou décroissant (DESC).

Enfin, cliquez sur le bouton « Enregistrer le filtre » en bas pour enregistrer votre filtre.

Répétez maintenant le processus pour créer plusieurs filtres.

Une fois que vous avez fait cela, revenez en haut et basculez vers l'onglet « Paramètres généraux » pour configurer certains paramètres.

Configurer les paramètres généraux

Ici, vous devez commencer par choisir une option de « Mode de filtrage ». Vous pouvez sélectionner si vous souhaitez appliquer les filtres en temps réel à l'aide de AJAX ou si vous souhaitez afficher un bouton « Appliquer les filtres » sur votre site.

Ensuite, vous devez également faire un choix entre afficher un bouton d'enregistrement ou afficher les résultats du filtre immédiatement.

Une fois que vous avez fait cela, choisissez si vous souhaitez afficher les résultats du filtre sur la même page à l'aide d'AJAX ou si vous souhaitez recharger les résultats sur une nouvelle page.

Ensuite, faites défiler jusqu'à l'option « Masquer les termes vides » et activez le commutateur si vous ne souhaitez pas afficher les termes de filtre qui sont vides.

Par exemple, si vous avez ajouté une catégorie « Mugs » dans votre boutique WooCommerce, mais qu'elle ne contient actuellement aucun article, elle ne sera pas affichée dans la liste « Filtrer par catégorie ».

Après cela, activez le commutateur « Masquer les produits en rupture de stock » si vous ne souhaitez pas afficher les produits en rupture de stock dans les résultats.

Vous pouvez laisser les autres paramètres par défaut ou les configurer selon vos préférences.

Après avoir fait vos choix, cliquez sur le bouton « Enregistrer les options » pour enregistrer vos modifications et basculez vers l'onglet « Personnalisation » en haut.

Configurer les paramètres de personnalisation (Plugin Premium uniquement)

Remarque : L'onglet « Personnalisation » ne sera pas disponible si vous utilisez la version gratuite du plugin.

À partir d'ici, vous pouvez choisir la couleur de l'étiquette de votre filtre WooCommerce, la couleur du terme textuel, la taille des échantillons de couleur, la couleur de la zone de filtre, et plus encore.

L'ajout de couleurs peut aider votre filtre WooCommerce à être plus esthétique et à correspondre à l'image de marque de votre boutique e-commerce.

Une fois que vous avez fait vos choix, cliquez sur le bouton « Enregistrer les options » et passez à l'onglet « SEO » en haut.

Configurer les paramètres SEO

Une fois sur place, activez le commutateur « Activer l'option SEO » pour activer les paramètres.

Vous pouvez maintenant ajouter des balises meta à partir du menu déroulant à utiliser sur vos pages filtrées. Cela améliorera le SEO de votre site.

Pour plus de détails, vous pouvez consulter notre article sur les métadonnées et balises meta WordPress.

Vous pouvez également ajouter automatiquement l'attribut nofollow à toutes les ancres filtrées en activant le commutateur « Ajouter « nofollow » aux ancres de filtre ». Cela indiquera aux moteurs de recherche de ne pas utiliser les ancres de filtre lors du classement de votre page.

Une fois que vous êtes satisfait, cliquez sur le bouton « Enregistrer les options » pour sauvegarder les paramètres.

Ajouter le filtre WooCommerce à la page Produits

Pour ajouter les filtres que vous venez de créer à votre page produits WooCommerce, vous devez passer à l'onglet « Préréglages de filtre » en haut.

Une fois sur place, copiez simplement le shortcode du préréglage de filtre que vous venez de créer.

Ensuite, ouvrez simplement votre page produits WooCommerce dans l'éditeur de blocs depuis le tableau de bord WordPress.

Une fois sur place, cliquez sur le bouton Ajouter un bloc « (+) » dans le coin supérieur gauche pour trouver le bloc Shortcode.

Maintenant, collez simplement le shortcode du préréglage de filtre que vous avez copié dans le bloc Shortcode.

Enfin, cliquez sur le bouton « Publier » ou « Mettre à jour » pour enregistrer vos modifications.

Vous pouvez maintenant visiter votre site WordPress pour voir le filtre d'attribut personnalisé WooCommerce en action.

Comment filtrer les produits WooCommerce par attribut personnalisé

Si vous souhaitez créer un filtre de produits WooCommerce à l'aide d'attributs personnalisés, alors cette méthode est faite pour vous.

Créer un attribut personnalisé

Pour créer un attribut personnalisé, vous devez visiter la page Produits » Attributs depuis le tableau de bord WordPress.

Une fois sur place, commencez par saisir un nom et un slug pour l'attribut de taxonomie personnalisée.

Par exemple, si vous souhaitez créer un filtre pour un matériau de produit spécifique, vous pouvez nommer l'attribut « Filtrer par matériau ».

Ensuite, vous devez cocher la case « Activer les archives » si vous souhaitez afficher tous les éléments qui partagent cet attribut sur une seule page. 

Après cela, cliquez sur le bouton « Ajouter un attribut » en bas.

Une fois l'attribut créé, cliquez sur le lien « Configurer les termes » pour ajouter des termes à l'attribut.

Cela vous dirigera vers un nouvel écran, où vous devrez taper un terme dans la zone « Nom ».

Par exemple, si vous avez créé un attribut appelé « Filtrer par matériau », vous pouvez ajouter les matériaux individuels comme termes, tels que la laine. Vous pouvez ajouter autant de termes que vous le souhaitez à un attribut.

Une fois que vous avez terminé, cliquez sur le bouton « Ajouter un nouveau filtre par matériau » pour enregistrer le terme.

Ajouter l'attribut personnalisé à un produit

Après avoir créé un attribut, vous devrez l'ajouter à des produits WooCommerce individuels.

Pour cela, ouvrez la page du produit que vous souhaitez modifier. À partir de là, faites défiler jusqu'à la section « Données produit » et basculez vers l'onglet « Attributs ».

Ensuite, ouvrez simplement le menu déroulant « Attribut produit personnalisé » et sélectionnez l'attribut personnalisé que vous venez de créer.

Maintenant, allez-y et cliquez sur le bouton « Ajouter ».

Maintenant que l'attribut personnalisé a été ajouté, recherchez simplement le terme qui correspond au produit dans l'option « Sélectionner les termes ».

Par exemple, si vous avez créé un attribut pour la matière et que le produit que vous modifiez est en laine, vous devrez alors choisir « Laine » dans le menu déroulant.

Une fois que vous avez terminé, cliquez sur le bouton « Enregistrer les attributs ».

Ensuite, cliquez sur le bouton « Mettre à jour » ou « Publier » en haut pour enregistrer vos modifications.

Vous devrez maintenant répéter le processus pour tous les produits qui partagent le même attribut.

Créer un filtre d'attribut personnalisé à l'aide d'un plugin

Ensuite, vous devrez installer et activer le plugin YITH WooCommerce Ajax Product Filter. Pour plus d'instructions, veuillez consulter notre guide sur comment installer un plugin WordPress.

Note : Vous pouvez utiliser la version gratuite ou premium du plugin pour créer un filtre d'attribut personnalisé pour WooCommerce.

Après l'activation, accédez à la page YITH » Ajax Product Filter depuis le tableau de bord WordPress.

À partir de là, cliquez sur le bouton « + Créer un nouveau jeu ».

Ensuite, vous devez taper un nom pour le jeu que vous créez dans la zone « Nom du jeu ».

Une fois que vous avez terminé, cliquez sur le bouton « + Ajouter un nouveau filtre » en bas pour commencer à créer un filtre d'attribut personnalisé WooCommerce.

Tout d'abord, vous devrez taper un nom dans la zone « Nom du filtre ».

Par exemple, si vous créez un filtre qui aidera les clients à trier différentes options de matériaux, vous pouvez le nommer « Filtre pour le matériau ».

Ensuite, sélectionnez simplement « Taxonomie » dans le menu déroulant « Filtre pour ». Si vous utilisez la version gratuite du plugin, cette option sera choisie par défaut pour vous.

Maintenant, l'attribut personnalisé que vous avez créé sera déjà disponible dans le menu déroulant à côté de l'option « Choisir la taxonomie ».

Choisissez l'attribut personnalisé dans la liste déroulante et tapez les termes de l'attribut dans la boîte « Choisir les termes ».

Ensuite, vous devez choisir comment vous souhaitez que le filtre soit affiché sur le devant de votre boutique à partir du menu déroulant « Type de filtre ».

Le filtre peut être affiché sous forme de cases à cocher, de menu déroulant, de texte, de nuanciers de couleurs, et plus encore.

Une fois que vous avez fait cela, choisissez un ordre par défaut pour les termes filtrés dans le menu déroulant « Trier par ».

Vous pouvez trier les catégories de filtres en utilisant le nom, le nombre de termes ou le slug. Vous pouvez également sélectionner le « Type d'ordre » pour les termes filtrés par ordre croissant (ASC) ou décroissant (DESC).

Enfin, cliquez sur le bouton « Enregistrer le filtre » en bas pour enregistrer votre filtre d'attribut personnalisé.

Ensuite, vous devez passer à l'onglet « Paramètres généraux » en haut. À partir de là, vous pouvez choisir un mode de filtre, masquer les termes vides et configurer d'autres paramètres selon vos besoins.

Une fois que vous avez terminé, cliquez sur le bouton « Enregistrer les options » pour stocker vos modifications et passez à l'onglet « Personnalisation » en haut.

Note : Si vous utilisez la version gratuite, ces paramètres de personnalisation ne seront pas disponibles.

À partir de là, vous pouvez personnaliser l'apparence de votre préréglage de filtre sur le devant de votre site Web.

Par exemple, vous pouvez choisir la couleur du style de l'étiquette, la couleur du terme textuel, la taille du nuancier de couleurs, la couleur de la zone de filtre, et plus encore.

Après avoir fait vos choix, cliquez sur le bouton « Enregistrer les options » et passez à l'onglet « SEO » en haut.

À partir de là, basculez l'interrupteur « Activer l'option SEO » pour activer les paramètres.

Vous pouvez ajouter des balises meta robots à partir du menu déroulant à utiliser sur vos pages filtrées. Cela optimisera le référencement de votre site.

Vous pouvez également activer le commutateur « Ajouter « nofollow » aux ancres de filtre » pour ajouter automatiquement l'attribut nofollow à toutes les ancres de filtre.

Une fois que vous êtes satisfait, cliquez sur le bouton « Enregistrer les options » pour sauvegarder les paramètres.

Ajouter le filtre d'attribut personnalisé à une page de produits WooCommerce

Pour ajouter le filtre d'attribut personnalisé à une page de boutique WooCommerce, vous devrez basculer vers l'onglet « Préréglages de filtre » en haut.

À partir de là, copiez le shortcode du filtre d'attribut personnalisé.

Ensuite, ouvrez votre page de produits dans l'éditeur de blocs depuis la barre latérale d'administration de WordPress.

Ici, cliquez sur le bouton Ajouter un bloc « (+) » dans le coin supérieur gauche pour faire glisser et déposer le bloc Shortcode.

Après cela, collez simplement le shortcode du préréglage de filtre que vous avez copié dans le bloc.

Enfin, cliquez sur le bouton « Publier » ou « Mettre à jour » pour enregistrer vos modifications.

Vous pouvez maintenant visiter votre site Web pour voir le filtre d'attribut personnalisé WooCommerce en action.

Conseils bonus pour augmenter les ventes WooCommerce

En plus d'ajouter des filtres de recherche, une autre façon d'augmenter les conversions dans votre boutique en ligne est d'améliorer la vitesse de votre site Web.

Une boutique WooCommerce qui se charge plus rapidement peut fidéliser facilement les clients et générer plus de prospects.

Pour améliorer le temps de chargement de votre boutique, nous vous recommandons de passer à SiteGround. C'est un fournisseur d'hébergement recommandé par WooCommerce qui rend votre site Web super rapide et offre des fonctionnalités étonnantes comme PHP ultra-rapide, la mise en cache e-commerce, et plus encore.

Une autre astuce consiste à configurer la mise en cache sur votre boutique WooCommerce.

C'est une technique qui stocke les données de votre site Web dans un emplacement temporaire pour améliorer les performances. Vous pouvez utiliser l'un des meilleurs plugins de mise en cache WooCommerce pour améliorer la vitesse.

En dehors de cela, vous pouvez également essayer d'optimiser vos images de produits, choisir un thème WooCommerce à chargement plus rapide, utiliser la dernière version de PHP, activer un pare-feu au niveau DNS, et bien plus encore pour améliorer l'expérience client.

Pour des instructions détaillées, consultez notre guide pour débutants sur comment accélérer les performances de WooCommerce.

Nous espérons que cet article vous a aidé à apprendre comment filtrer les produits WooCommerce par attribut et attribut personnalisé. Vous voudrez peut-être aussi consulter notre article sur comment offrir une réduction sur la livraison dans WooCommerce et nos meilleurs choix pour les meilleurs thèmes WooCommerce.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.