Blog SearchWP

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

Couverture du tutoriel : titre 'Comment ajouter un filtre en stock à WooCommerce (2 méthodes faciles)' avec une personne à un ordinateur sur fond lilas à droite.

WooCommerce vous offre une seule méthode intégrée pour gérer les produits épuisés sur une page de boutique classique, et c'est tout ou rien. Le réglage masquer les articles hors stock du catalogue les supprime pour tous les clients, y compris ceux qui attendraient volontiers un réapprovisionnement.

Une meilleure option est de laisser les clients décider eux-mêmes. Lorsque vous ajoutez un filtre en stock à WooCommerce, quiconque ne veut que des articles prêts à être expédiés peut cocher une case, et tous les autres voient toujours votre catalogue complet.

Vous n'avez pas besoin de code personnalisé pour cela, car WooCommerce enregistre déjà l'état du stock de chaque produit dans un champ personnalisé appelé _stock_status. WPFilters peut transformer ce champ en filtre et permettre aux utilisateurs de trier les produits en stock.

Dans cet article, nous vous montrerons comment ajouter un filtre en stock à WooCommerce en utilisant les deux méthodes, afin que vous puissiez choisir celle qui convient le mieux à votre boutique.

Pourquoi ajouter un filtre en stock à votre boutique WooCommerce ?

Un filtre en stock permet aux clients de masquer tous les produits qu'ils ne peuvent pas acheter actuellement.

Chaque produit WooCommerce a l'un des trois états de stock : En stock, Hors stock, ou En commande.

Vous le définissez dans l’onglet Inventaire de chaque produit, ou WooCommerce le met à jour pour vous lorsque vous suivez les quantités en stock. La documentation des paramètres de l’éditeur de produits WooCommerce explique ce que signifie chaque statut.

Masquer les articles en rupture de stock les supprime pour tout le monde, tandis qu’un filtre laisse votre catalogue intact jusqu’à ce qu’un acheteur choisisse de le réduire.

D’après notre expérience, les propriétaires de boutiques le ressentent le plus lorsque les produits populaires se vendent entre les réapprovisionnements.

  • Les produits épuisés font perdre des clics. Les acheteurs ouvrent une page produit, découvrent qu’elle n’est pas disponible, et retournent pour recommencer.
  • Les masquer a un coût. Une fois que les produits épuisés disparaissent, les acheteurs qui auraient pu passer une commande en attente ou revenir la semaine prochaine ne les trouvent plus du tout.
  • Les commandes en attente sont difficiles à repérer. Sans filtre, les acheteurs ne peuvent pas savoir quels produits sont expédiés maintenant et lesquels sont expédiés plus tard avant d’ouvrir chaque fiche.
  • Les options intégrées sont limitées. Le bloc Filtre de disponibilité de WooCommerce ne fonctionne qu’à l’intérieur du bloc Filtres de produits sur une page de boutique basée sur des blocs, de sorte que les barres latérales classiques des boutiques sont exclues.

Pensez-y comme à une épicerie qui retire les étiquettes des rayons ainsi que les boîtes vides. Les acheteurs qui voulaient cet article n’apprennent jamais qu’il va revenir.

Ensuite, examinons le moyen le plus simple de donner ce choix aux acheteurs.

Ajouter un filtre en stock à WooCommerce avec WPFilters

Nous recommandons WPFilters comme moyen le plus simple d’ajouter un filtre en stock à WooCommerce.

WPFilters - Meilleur plugin de filtrage WordPress

WPFilters est le meilleur plugin de filtrage pour WordPress, développé par la même équipe derrière SearchWP.

Il vous permet de créer des filtres à partir des champs personnalisés, des catégories et des attributs que votre boutique possède déjà, sans écrire de code.

Voici quelques-unes des fonctionnalités qui font de WPFilters un bon choix pour un filtre de stock :

  • Filtres de champs personnalisés. WPFilters peut transformer n’importe quel champ personnalisé en un filtre de champ personnalisé, y compris le champ _stock_status que WooCommerce remplit pour vous.
  • Filtres de taxonomie et d’attributs. Vous pouvez également créer des filtres à partir des attributs de produits, de sorte que vos propres étiquettes de disponibilité puissent également devenir des cases à cocher.
  • Pas de rechargement de page. Lorsqu’un acheteur coche une case, WPFilters utilise AJAX pour mettre à jour les produits sur la même page.
  • URL de filtre partageables. Chaque sélection est enregistrée dans l’URL de la page, de sorte que les acheteurs peuvent mettre en signet ou partager une page de produits en stock.

Cela dit, voyons comment vous pouvez utiliser WPFilters pour ajouter un filtre en stock à votre boutique.

Pour commencer, vous pouvez vous inscrire à un plan WPFilters sur le site Web de SearchWP.

Une fois inscrit, vous pouvez vous rendre dans l'onglet Téléchargements de votre tableau de bord de compte.

À partir de là, téléchargez le fichier ZIP du plugin WPFilters.

Pendant que vous y êtes, copiez également votre clé de licence, car vous en aurez besoin dans un instant.

télécharger le fichier ZIP du plugin WPFilters

Ensuite, vous pouvez télécharger et installer le plugin sur votre site WordPress.

Si vous avez besoin d’aide, vous pouvez suivre le guide de WPBeginner sur comment installer un plugin WordPress.

Après l’avoir activé, l’assistant de configuration WPFilters s’ouvre. Vous pouvez cliquer sur C’est parti et suivre les instructions à l’écran.

Assistant de configuration WPFilters

Remarque : WPFilters nécessite une licence active pour afficher des filtres sur votre site. Assurez-vous donc que votre clé est vérifiée avant de continuer.

WPFilters est prêt ! Vous pouvez maintenant choisir la méthode qui convient à votre boutique.

Méthode 1 : Filtrer par statut de stock WooCommerce (automatique)

Cette méthode fonctionne mieux si vous suivez déjà les stocks dans WooCommerce.

Le filtre lit le statut que WooCommerce enregistre sur chaque produit, il reste donc à jour au fur et à mesure que les produits se vendent et reviennent.

Étape 1 : Créer un filtre de statut de stock

Pour commencer, rendez-vous sur WPFilters » Éléments depuis votre tableau de bord WordPress.

Page Éléments WPFilters avec un bouton Ajouter un nouvel élément mis en surbrillance, montrant une liste d'éléments de cases à cocher (Catégorie, Étiquette, Couleurs, etc.) et des actions comme Intégrer, modifier, supprimer à droite.

Ensuite, cliquez sur le bouton Ajouter.

En haut du constructeur, cliquez sur l’icône en forme de crayon à côté du nom de l’élément et donnez-lui un nom que les clients comprendront, comme « État du stock ».

Après cela, recherchez la section Champs de filtre et sélectionnez Case à cocher.

Nous aimons les cases à cocher ici car les clients peuvent en cocher plus d’un, comme instock et onbackorder ensemble.

Panneau Champs de filtre avec des cartes de type de filtre ; Case à cocher est sélectionnée parmi les options (Radio, Liste déroulante, Liste déroulante (Multisélection), Recherche, Curseur, Réinitialiser).

À partir de là, faites défiler vers le bas jusqu'à la section Source de données et ouvrez la liste déroulante.

Allez-y et sélectionnez _stock_status, qui se trouve dans le groupe Champs personnalisés.

Liste déroulante de saisie semi-automatique listant les produits WooCommerce

Remarque : Vous verrez également _stock et _manage_stock à proximité. Ces champs stockent la quantité en stock d’un produit et si vous la suivez, pas son état, alors assurez-vous de choisir _stock_status.

WPFilters affiche les options exactement comme WooCommerce les enregistre, donc les clients verront instock, outofstock et onbackorder.

Si vous préférez afficher des étiquettes comme « Expédié aujourd’hui », la méthode 2 ci-dessous vous permet de nommer chaque option vous-même.

Ensuite, vous pouvez choisir l'apparence du filtre.

Sous Conteneur, activez Afficher le titre pour que le nom « État du stock » apparaisse au-dessus des cases à cocher.

Modifier les paramètres du conteneur de filtre

Une fois que cela vous convient, cliquez sur Enregistrer.

WPFilters utilise également le nom pour construire l’URL du filtre, donc « État du stock » apparaît comme stock-status dans l’adresse de la page de la boutique.

Astuce Pro : Si vous avez activé Masquer les articles hors stock du catalogue sous WooCommerce » Paramètres » Produits » Inventaire, les produits vendus ne sont pas listés sur votre page de boutique. Dans ce cas, le filtre n’offre que instock et onbackorder, ce qui fonctionne bien si vous voulez que les clients séparent les produits prêts à expédier des commandes en attente.

Étape 2 : Ajouter le filtre à votre page de boutique

Ensuite, vous pouvez placer le filtre à côté de vos produits.

Étant donné que WPFilters fonctionne avec la liste de produits que votre page boutique affiche déjà, il n'y a aucun réglage supplémentaire pour connecter les deux.

Pour l’ajouter à la barre latérale de votre boutique, rendez-vous sur Apparence » Widgets.

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

À partir de là, ouvrez la zone de widgets que votre thème utilise sur les pages de boutique. Sur notre magasin de démonstration, qui utilise le thème Astra, il s’agit de la Barre latérale WooCommerce.

Après cela, cliquez sur l’icône +, recherchez « WPFilters » et ajoutez le bloc Élément WPFilters.

Ensuite, choisissez votre filtre « État du stock » dans le menu déroulant Sélectionner l’élément dans les paramètres du bloc.

Éditeur de widgets WooCommerce montrant le filtre Statut du stock avec les options : instock, onbackorder, outofstock.

Une fois cela fait, cliquez sur Mettre à jour pour enregistrer vos widgets. Notez que cette étape peut différer en fonction du thème WordPress que vous utilisez.

Si votre thème n'a pas de barre latérale de boutique, le bouton Intégrer dans le constructeur de filtre vous donne un shortcode, comme , que vous pouvez coller là où vous souhaitez que le filtre apparaisse.

Étape 3 : Tester votre filtre en stock

Avec le filtre en place, vous pouvez visiter votre page de boutique dans un nouvel onglet de navigateur. Vous verrez le titre « État du stock » avec une case à cocher pour chaque état utilisé par vos produits.

Pour le premier test, cochez instock. Sur notre magasin de démonstration, nous avons coché l’option de filtre en stock, et les bottes de pluie imperméables Puddle Jumper ont disparu de la liste en un instant sans rechargement de page, car elles étaient hors stock.

Afficher le filtre de stock

Pour le deuxième test, regardez l’URL de la page après avoir coché la case.

Vous remarquerez qu’elle inclut maintenant stock-status, suivi de l’état que vous avez choisi.

Vous pouvez copier cette URL et l'ouvrir dans une fenêtre privée pour vérifier que les mêmes produits en stock s'affichent toujours.

Méthode 2 : Filtrer par un attribut de disponibilité personnalisé (Taxonomie)

Cette méthode fonctionne mieux si vous souhaitez des étiquettes conviviales, ou des délais de livraison que WooCommerce ne suit pas, comme « Expédié aujourd'hui » ou « Précommande ».

Le compromis est que vous le mettez à jour vous-même, car WooCommerce ne changera pas un attribut lorsqu'un produit est épuisé.

Remarque : Vous pourriez repérer une taxonomie Visibilité du produit dans la liste Source de données, mais elle ne fonctionnera pas comme filtre de disponibilité. WooCommerce ajoute uniquement une balise outofstock pour les produits épuisés et n'a pas de balise correspondante pour les produits en stock. De plus, un filtre de taxonomie WPFilters ne peut afficher que les produits qui ont la balise choisie par l'acheteur, donc les produits en stock n'apparaîtraient jamais.

Étape 1 : Créer un attribut de disponibilité

Tout d'abord, vous aurez besoin d'un attribut pour contenir vos étiquettes de disponibilité.

Pour en créer un, allez dans Produits » Attributs dans votre tableau de bord WordPress. Sous Ajouter un nouvel attribut, tapez « Disponibilité » dans le champ Nom.

WooCommerce remplit le champ Slug pour vous, vous pouvez donc cliquer sur Ajouter un attribut.

Éditeur d'attributs WooCommerce montrant trois attributs : Disponibilité, Couleur et Taille dans un tableau avec Nom, Slug, Ordre, et Termes. La colonne de droite montre les termes pour chaque attribut et un lien Configurer les termes pour chaque ligne. À gauche, un formulaire intitulé Ajouter un nouvel attribut comprend des champs pour Nom, Slug, une case à cocher Activer les archives et une liste déroulante Ordre de tri par défaut avec un bouton Ajouter un attribut.

Ensuite, trouvez « Disponibilité » dans le tableau des attributs et cliquez sur Configurer les termes en dessous.

Cela ouvre un écran où vous pouvez ajouter chaque étiquette que les clients verront. Allez-y et tapez « Expédié aujourd'hui » dans le champ Nom et cliquez sur Ajouter une nouvelle Disponibilité.

Ensuite, répétez cette opération pour « Expédié sous 2 semaines » et « Précommande ».

Étape 2 : Assigner la disponibilité à vos produits

Maintenant, vous pouvez indiquer à WooCommerce quelle étiquette convient à chaque produit.

Pour ce faire, ouvrez un produit dans l'éditeur et faites défiler jusqu'à la boîte Données produit.

À partir de là, cliquez sur l'onglet Attributs et choisissez « Disponibilité » dans le menu déroulant Ajouter global.

Après cela, choisissez une étiquette comme « Expédié aujourd'hui » dans le champ Valeur(s).

Éditeur d'attributs de produit affichant le panneau Attributs sélectionné à gauche, avec les paramètres 'Ajouter global' et 'Disponibilité'. Il affiche Nom : Disponibilité et un champ Valeur(s) contenant une étiquette 'Expédié aujourd'hui', plus les boutons 'Tout sélectionner', 'Aucun sélectionner', 'Créer une valeur' et un bouton 'Enregistrer les attributs'. La case à cocher 'Visible sur la page produit' est cochée.

Si vous préférez ne pas afficher la disponibilité sous l'onglet Informations supplémentaires du produit, décochez Visible sur la page produit.

Une fois cela fait, cliquez sur Enregistrer les attributs puis sur Mettre à jour pour enregistrer le produit.

Étape 3 : Créer le filtre et l'ajouter à votre boutique

Ensuite, retournez dans WPFilters » Éléments et cliquez sur Ajouter.

Page Éléments WPFilters avec un bouton Ajouter un nouvel élément mis en surbrillance, montrant une liste d'éléments de cases à cocher (Catégorie, Étiquette, Couleurs, etc.) et des actions comme Intégrer, modifier, supprimer à droite.

Nommez l'élément « Disponibilité », puis sélectionnez Case à cocher sous Champs de filtre.

Panneau Champs de filtre avec des cartes de type de filtre ; Case à cocher est sélectionnée parmi les options (Radio, Liste déroulante, Liste déroulante (Multisélection), Recherche, Curseur, Réinitialiser).

Dans le menu déroulant Source de données, sélectionnez Disponibilité produit (pa_availability) dans le groupe Taxonomies.

Menu déroulant des attributs de données produit avec 'Disponibilité du produit (pa_availability)' mis en surbrillance en rouge.

Cette fois, vos cases à cocher affichent « Expédié aujourd'hui », « Expédié sous 2 semaines » et « Précommande » exactement comme vous les avez tapées.

Activez Afficher le titre sous Conteneur, puis cliquez sur Enregistrer.

Après cela, ajoutez le filtre à la barre latérale de votre boutique avec le bloc Élément WPFilters, de la même manière que vous l'avez fait à l'étape 2 de la méthode 1.

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

Étape 4 : Tester le filtre de disponibilité

Pour le tester, ouvrez votre page boutique dans un nouvel onglet et cochez « Expédié aujourd’hui ».

Seuls les produits que vous avez étiquetés « Expédié aujourd’hui » devraient rester sur la page.

Choisir le filtre de disponibilité

Ensuite, cochez également « Précommande ».

Les produits portant l’une ou l’autre étiquette s’affichent maintenant, car cocher plusieurs cases dans le même filtre affiche les produits qui correspondent à l’une d’elles.

Quelle méthode de filtre en stock devriez-vous utiliser ?

Les deux méthodes offrent aux acheteurs un filtre en stock, mais elles conviennent à différents types de boutiques.

Méthode 1 : Statut du stockMéthode 2 : Attribut de disponibilité
Mises à jour lorsque le stock changeAutomatiquement, lorsque vous suivez les quantités en stockVous le mettez à jour manuellement
Étiquettes d’optioninstock, outofstock, onbackorderToute étiquette que vous tapez
Statuts personnalisés comme « Précommande »NonOui
Temps d’installationQuelques minutesPlus long, car vous étiquetez chaque produit

Nous commencerions par la Méthode 1 pour la plupart des boutiques, car elle reste synchronisée avec votre inventaire.

La Méthode 2 est le meilleur choix lorsque les acheteurs se soucient davantage des délais de livraison que d’un simple oui ou non, et vous pouvez exécuter les deux filtres dans la même barre latérale.

Si vous souhaitez ajouter d’autres filtres à côté de ceux-ci, notre guide sur la façon de filtrer les produits WooCommerce dans WordPress couvre les catégories, les tags, et plus encore.

Foire aux questions

1. WooCommerce a-t-il un filtre intégré en stock ?

WooCommerce inclut un bloc Filtre de disponibilité, mais il ne fonctionne qu’à l’intérieur du bloc Filtres de produits sur une page boutique basée sur des blocs.

Pour une barre latérale de boutique classique, le plugin WPFilters peut filtrer les produits par le champ personnalisé _stock_status de WooCommerce, afin que les acheteurs puissent cocher une case pour voir uniquement les produits en stock.

2. Comment masquer les produits hors stock dans WooCommerce ?

Pour masquer les produits hors stock pour tous les acheteurs, cochez Masquer les articles hors stock du catalogue sous WooCommerce » Paramètres » Produits » Inventaire.

Un filtre en stock est l’option la plus douce, car les produits épuisés restent visibles jusqu’à ce qu’un acheteur choisisse de les masquer.

3. Les acheteurs peuvent-ils également filtrer par statut de commande en attente ?

Les acheteurs peuvent filtrer par statut de commande en attente avec un filtre WPFilters basé sur le champ _stock_status de WooCommerce, car onbackorder apparaît comme sa propre case à cocher chaque fois qu’un produit sur la page boutique utilise ce statut.

Cocher instock et onbackorder ensemble affiche chaque produit qu'un acheteur peut commander aujourd'hui.

4. Pourquoi mon filtre de stock affiche-t-il « instock » au lieu de « En stock » ?

WPFilters affiche les options de champ personnalisé exactement comme WooCommerce les enregistre, et WooCommerce stocke le statut du stock comme instock, outofstock, ou onbackorder.

Pour des étiquettes plus conviviales, créez un attribut de produit global tel que « Disponibilité » avec des termes comme « Expédié aujourd'hui », puis construisez le filtre WPFilters à partir de cet attribut à la place.

5. Le filtre de stock se met-il à jour lorsque les inventaires changent ?

Un filtre WPFilters basé sur le champ _stock_status de WooCommerce se met à jour de lui-même lorsque WooCommerce suit les quantités en stock, car WooCommerce change le statut chaque fois qu'un produit se vend ou est réapprovisionné.

Un filtre basé sur un attribut de disponibilité personnalisé ne change que lorsque vous modifiez chaque produit.

Conclusion

Votre boutique dispose maintenant d'un filtre en stock, ainsi les acheteurs qui ne veulent que des produits prêts à expédier peuvent les trouver en un clic.

Nous espérons que cet article vous a aidé à apprendre comment ajouter un filtre en stock à WooCommerce.

Vous voudrez peut-être aussi consulter nos guides sur comment filtrer les produits WooCommerce par attributs et comment ajouter un bouton de réinitialisation de filtre dans WordPress.

Prêt à aider les acheteurs à trouver les produits qu'ils peuvent acheter aujourd'hui ? Vous pouvez commencer avec WPFilters ici, avec une garantie de remboursement de 14 jours.

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.

Obtenez SearchWP maintenant
Icône de moteurs de recherche multiples