Vous êtes-vous déjà demandé si vous pouviez remplacer le badge de vente de base de WooCommerce par quelque chose de plus accrocheur (et d’un peu moins ennuyeux) ?
C’est une question que nous posent souvent nos lecteurs, et nous sommes heureux de vous dire que la réponse est oui. C’est tout à fait possible !
Les badges produits personnalisés sont un moyen fantastique de mettre en valeur les articles spéciaux de votre boutique en ligne. Ils sont utiles pour présenter les nouveaux arrivages, signaler les articles en vente ou attirer l’attention sur des offres limitées dans le temps.
Dans cette publication, nous allons vous afficher deux façons simples d’ajouter des badges de produits personnalisés à votre boutique WooCommerce. Vous pouvez soit utiliser une extension puissante, soit ajouter un code simple.
Ne vous inquiétez pas. Nous vous aiderons à découvrir chaque option, étape par étape !

☝ Note importante: pour suivre ce tutoriel, vous devrez disposer d’une boutique WooCommerce entièrement fonctionnelle. Si vous n’avez pas encore défini la vôtre (ou si vous êtes encore dans le processus), consultez notre guide ultime de WooCommerce pour les débutants.
Que sont les badges produits de WooCommerce ?
Avez-vous déjà notifié ces petits libellés « Soldes » ou « Nouvelle » qui s’affichent sur les produits lorsque vous faites des achats en ligne ?
Il s’agit de badges de produits, très utiles pour mettre en valeur certains articles dans votre boutique en ligne.
Considérez-les comme des autocollants virtuels qui attirent l’attention de vos clients/clientes sur des détails importants concernant les produits, tels que les soldes, les nouveaux arrivages ou les offres à durée limitée.
Nous avons vu des propriétaires de boutiques utiliser les badges produits de manière très créative pour présenter des offres spéciales, mettre en avant des best-sellers ou signaler des articles en rupture de stock.
Maintenant, si vous utilisez déjà WooCommerce, vous avez peut-être remarqué qu’il est livré avec une fonctionnalité de badge de vente de base qui apparaît automatiquement lorsque vous réduisez le prix d’un produit.

Bien que le badge de vente WooCommerce fonctionne très bien pour des besoins simples, soyons honnêtes – il est assez limité en termes de ce que vous pouvez faire avec.
Vous ne pouvez pas facilement modifier l’apparence du badge, ajouter de nouveaux types de badges ou contrôler exactement l’endroit où ils apparaissent sur les images de vos produits.
Par ailleurs, les badges personnalisés vous permettent d’afficher davantage la personnalité de votre marque. Mais surtout, les badges originaux permettent d’attirer plus efficacement l’attention sur les produits spéciaux.
De cette façon, vous pouvez générer plus de ventes dans votre boutique en ligne. 💰
Dans ce guide, nous allons vous guider à travers 2 méthodes éprouvées pour ajouter et personnaliser des badges de produits dans WooCommerce. Les deux approches vous donneront un contrôle complet sur leur apparence et leur fonctionnement.
Vous pouvez utiliser les liens rapides ci-dessous pour aller à votre méthode préférée :
Méthode 1 : Utiliser YITH WooCommerce Badge Management (plus personnalisable)
Commençons par notre outil préféré pour ajouter des badges de produits personnalisés à votre boutique WooCommerce.
Nous vous recommandons d’utiliser YITH WooCommerce Badge Management car il rend super facile d’ajouter et de personnaliser des badges de produits dans votre boutique en ligne.
Ajouté à cela, nous avons testé de nombreuses extensions YITH au fil des ans, comme celles permettant d’ajouter des abonnements et des vidéos de produits, et elles fonctionnent toujours très bien pour nos utilisateurs/utilisatrices.
Vous souhaitez afficher un badge spécial pendant les vacances? Ou encore afficher le montant des économies réalisées par les clients/clientes ? Cette extension peut faire tout cela. Vous pouvez même définir des badges à afficher à certains moments et les masquer ultérieurement.
Vous pouvez commencer avec la version gratuite ou premium de l’extension. La version gratuite est parfaite si vous souhaitez juste ajouter de simples badges texte ou image à vos produits.
Dans ce guide, nous vous afficherons comment utiliser la version premium, mais la plupart des étapes fonctionneront de la même manière pour les deux. N’oubliez pas que certaines fonctionnalités avant, comme les badges qui affichent automatiquement les montants des remises, sont uniquement disponibles avec la version premium.
✌ Note: La version premium coûte 79,99 $ par an si vous voulez toutes les mis en avant. Bien que cela puisse sembler beaucoup, nous pensons que cela en vaut la peine parce que vous obtenez tellement de façons de personnaliser vos badges de produits et de les faire ressembler exactement à ce que vous voulez.
Prêt à commencer ? Tout d’abord, vous devrez acheter l’extension sur le site de YITH.
Ensuite, connectez-vous à votre compte YITH, allez dans l’onglet » Licences et téléchargements « , et cliquez sur le bouton » Télécharger l’extension » pour télécharger le fichier.

Voici une astuce : ne fermez pas cette page après le téléchargement, car vous aurez besoin de la clé de licence qui y est affichée.
Ensuite, rendez-vous dans votre Tableau de bord WordPress et installez l’extension. En savoir plus, nous vous proposons un guide étape par étape sur l’installation d’une extension WordPress.
Lorsqu’il est activé, vous verrez un écran de configuration vous demandant votre e-mail et votre clé de licence YITH. Copiez-les depuis le site de YITH et cliquez sur « Activer la licence ».

Une fois que le message indiquant que votre licence est activée s’affiche, vous êtes défini !
Maintenant, cliquez sur » Aller au tableau de bord du plugin « , et vous pouvez commencer à créer votre premier badge personnalisé.

Étape par étape : Masquer le badge de vente par défaut de WooCommerce
Version, nous devons masquer le badge de vente intégré de WooCommerce afin qu’il n’entre pas en conflit avec nos badges de produits personnalisés.
Le processus est très simple. Allez dans votre Tableau de bord WordPress et cliquez sur » YITH » Gestion des badges. Ensuite, naviguez jusqu’à l’onglet » Réglages généraux « .
Ici, vous trouverez une option qui dit « Masquer le badge « En vente » de WooCommerce ». Allez-y et activez cette option.
Ensuite, sous « Masquer « En vente » sur : », sélectionnez « Tous les produits » pour vous assurer que le badge par défaut ne s’affiche nulle part dans votre boutique.

Pendant que vous êtes dans les Réglages, vous remarquerez peut-être d’autres options utiles. Vous pouvez choisir de masquer vos badges personnalisés à certains endroits, comme la colonne latérale ou les pages de produits uniques.
C’est génial si vous voulez que votre boutique ait l’air propre et organisée. Par exemple, si votre site mobile semble trop encombré, vous pouvez également y masquer les badges.
N’oubliez pas de cliquer sur le bouton « Enregistrer les options » en bas de la page lorsque vous avez terminé.

Étape 2 : Créer votre badge personnalisé
Vient maintenant la partie amusante : créer votre premier badge de produit personnalisé dans WooCommerce !
Titre de l’onglet « Badges » et cliquez sur le bouton « Créer un badge » pour Premiers pas.

L’extension propose 4 types de badges différents au choix : badge texte, badge image, badge CSS ou badge avancé pour les produits de vente.
Chaque type vous permet de créer des façons uniques de mettre en valeur vos produits. Par exemple, si vous souhaitez indiquer que vos produits sont « nouveaux » ou « compatibles avec les produits végétaliens », les trois premières options conviennent parfaitement.
Mais voici une astuce : si vous créez des badges de remise, nous vous recommandons vivement d’utiliser l’option avancée, qui se met automatiquement à jour en fonction des modifications de prix de votre produit.

Après avoir choisi votre type de badge, donnez-lui un nom qui vous aide à vous rappeler à quoi il sert.
Si vous avez choisi un badge image, CSS ou avancé, vous verrez toute une collection de badges prédéfinis directement dans l’extension.
Vous pouvez choisir celui qui vous convient. Ces badges prêts à l’emploi vous font gagner du temps, et vous pouvez toujours les personnaliser pour qu’ils correspondent au style de vos pages WooCommerce.

Cette extension brille vraiment par ses options de personnalisation. Selon le type de badge que vous avez choisi, vous pouvez ajuster toutes sortes de réglages pour que votre badge soit parfait sur vos images de produits.
Vous voulez modifier la couleur ? C’est facile.
Besoin d’ajuster la transparence ? Aucun problème.
Vous pouvez même faire pivoter le badge ou le déplacer sur vos produits jusqu’à ce qu’il soit placé au bon endroit.

Dans notre exemple, nous avons fait ressortir le badge en modifiant sa couleur en rouge et en le plaçant dans le coin supérieur droit de l’image du produit.
Ces petits ajustements peuvent faire une grande différence dans l’efficacité avec laquelle vos badges attirent l’attention des gens.
Lorsque vous êtes satisfait de l’aspect des choses, cliquez sur « Enregistrer le badge » pour terminer.

Étape par étape : Création d’une règle pour l’affichage de votre badge
Maintenant que nous avons créé notre badge personnalisé, indiquons à WooCommerce exactement où et quand l’afficher.
Titre de l’onglet « Réglages des badges » et cliquer sur « Définir un règlement ».

Considérez les règles comme des instructions qui indiquent à vos badges à quel moment ils doivent apparaître sur les images de vos produits.
L’extension vous offre 4 façons principales de contrôler où vos badges s’affichent : badge de produit, badge de catégorie, badge d’identifié, et badge de classe d’expédition.

Vous pouvez choisir la règle « Badge produits » pour ajouter des badges à certains articles ou la règle « Badge catégories » pour couvrir des catégories entières de produits.
Parallèlement, la règle de badge d’étiquette affiche des badges sur les produits partageant la même étiquette WooCommerce, et la règle de badge de classe d’expédition affiche des badges basés sur les options d’expédition.
Chaque règle vise des aspects différents du produit, mais elles fonctionnent toutes de la même manière. Il vous suffit donc de choisir celle qui répond le mieux à vos besoins.
Dans cet exemple, nous utiliserons la règle de l’insigne des produits, car c’est le choix le plus courant.
Ensuite, donnez un nom simple à votre règle afin de pouvoir la trouver ultérieurement.
Recherchez ensuite le réglage « Afficher le badge dans : ». C’est ici que vous décidez quels produits recevront votre badge. Vous pouvez choisir de l’afficher sur tous les produits, les ajouts récents, les articles en vente, les produits populaires mis en avant, ou même uniquement sur les produits en stock.

Imaginons que vous créiez une règle pour les articles en solde. Si vous sélectionnez « Produits soldés », votre badge apparaîtra automatiquement chaque fois que vous marquerez un produit comme étant soldé. C’est aussi simple que cela !
Mais certaines facultés sont assorties de plus de réglages à définir. Par exemple, si vous choisissez « Produits récents uniquement », vous pouvez définir l’apparition des badges sur les articles ajoutés au cours des derniers jours (7, 14 ou 30 jours, par exemple).
Il est ainsi très facile de mettre automatiquement en avant les nouveaux arrivages dans votre boutique sans avoir à ajouter manuellement des badges à chaque produit.

Il peut arriver que vous souhaitiez que certains produits ne soient pas badgés. C’est là que le réglage « Exclure des produits » s’avère utile.
Il suffit d’activer ce Réglage et de saisir les noms des produits pour lesquels vous ne souhaitez pas afficher le badge. Ces articles resteront exempts de badge même s’ils correspondent à vos autres règles.

Sélectionné, le modèle de badge à utiliser est sélectionné dans la liste déroulante « Badge à assigner ».
C’est là que les choses deviennent vraiment flexibles. Vous pouvez planifier l’apparition de vos badges et choisir qui peut les voir.

L’option « Planifier la règle » est parfaite pour les offres à durée limitée.
Lorsque vous l’activez, l’extension vous demande de définir des dates de début et de fin pour vos badges.

Et si vous souhaitez afficher des badges spéciaux pour certains clients, par exemple afficher un badge « Remise VIP » uniquement pour les clients les plus fidèles, vous pouvez également le faire.
Pour ce faire, il suffit de sélectionner « Uniquement des utilisateurs ou des rôles d’utilisateurs spécifiques » dans le réglage « Afficher le badge à ». Saisissez ensuite les rôles du compte ou les identifiants individuels que vous préférez.
Lorsque tout vous semble correct, cliquez sur « Enregistrer la règle » et vous êtes défini !

N’hésitez pas à visiter l’interface publique de votre boutique pour voir vos nouveaux badges en action.
Si vous utilisez le type de badge avancé pour les articles soldés, vous verrez qu’il affiche à la fois le pourcentage de remise et l’argent réellement enregistré, ce qui aide les clients/clientes à repérer rapidement les meilleures affaires.

💡 Publications similaires: Vous cherchez d’autres outils et stratégies sympas pour améliorer votre boutique WooCommerce ? Consultez notre liste des meilleures extensions WooCommerce.
Méthode 2 : Outil/cliente personnalisé (gratuit et simple)
Si vous n’avez pas besoin des options avancées de la première méthode, ou si vous recherchez une option totalement gratuite, nous avons une méthode de code simple qui ne vous coûtera rien.
Et si vous n’êtes pas à l’aise avec le code, ne vous inquiétez pas ! Nous utiliserons l’extension WPCode pour rendre les choses plus faciles et plus sûres. Il vous permet d’ajouter des extraits de code personnalisés dans WordPress sans être un développeur ou risquer de casser votre site.
Nous utiliserons la version gratuite de WPCode pour ce tutoriel car elle fonctionne parfaitement pour nos besoins. Cela dit, il existe une version premium avec des fonctionnalités avant comme la génération de code IA et le mode test.
En savoir plus, consultez notre avis approfondi sur WPCode.
Tout d’abord, vous devez installer l’extension WordPress dans votre zone d’administration.
Ensuite, allez dans la section « Code Snippets » + « Add Snippet« . Survolez la section » Ajouter votre code personnalisé (nouvel extrait) « , puis cliquez sur le bouton » + Ajouter un extrait personnalisé « .

Choisissez ensuite « Extrait de code PHP » lorsqu’on vous demande le type de code.
Cela indique à WordPress le type de code que nous utilisons.

Vous devez maintenant donner à votre extrait un nom qui vous aide à vous souvenir de ce qu’il fait.
Étant donné que ce code retirera le badge de vente WooCommerce par défaut et ajoutera à la fois des badges de nouveaux produits et des badges de remises dynamiques, vous pourriez l’appeler quelque chose comme « Badges WooCommerce personnalisés ».
Une fois que c’est fait, collez l’extrait de code que nous avons fourni ci-dessous dans la case « Prévisualisation du code ».
Ce code fait quelque chose de vraiment cool. Il calcule automatiquement les pourcentages de remise et les affiche sur le badge de vente. Ajouté, il ajoute un badge « Nouveau » aux produits ajoutés au cours des 7 derniers jours.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | // Remove default WooCommerce sale flash badge remove_action( 'woocommerce_before_shop_loop_item_title' , 'woocommerce_show_product_loop_sale_flash' , 10 ); remove_action( 'woocommerce_after_shop_loop_item_title' , 'woocommerce_show_product_loop_sale_flash' , 10 ); remove_action( 'woocommerce_before_single_product_summary' , 'woocommerce_show_product_sale_flash' , 10 ); // Add custom badges to products add_action( 'woocommerce_before_shop_loop_item_title' , 'add_custom_product_badges' , 10 ); function add_custom_product_badges() { global $product ; // Initialize a variable to track whether a badge has been displayed $badge_displayed = false; // For products with any amount of discount percentage (1% or more) if ( $product ->is_on_sale() ) { // Get regular and sale prices $regular_price = floatval ( $product ->get_regular_price() ); $sale_price = floatval ( $product ->get_sale_price() ); // Handle variable products if ( $product ->is_type( 'variable' ) ) { // Get variation prices $regular_price = floatval ( $product ->get_variation_regular_price( 'max' , true ) ); $sale_price = floatval ( $product ->get_variation_sale_price( 'min' , true ) ); } // Calculate discount percentage if regular price is valid if ( $regular_price > 0 ) { $discount_percentage = ( ( $regular_price - $sale_price ) / $regular_price ) * 100; // Display badge if discount is 1% or more if ( $discount_percentage >= 1 ) { echo '<span class="product-badge sale-product">' . round ( $discount_percentage ) . '% off!</span>' ; $badge_displayed = true; // Badge has been displayed } } } // Only show the "New" badge if no other badge has been displayed if ( ! $badge_displayed ) { // For "New" products added in the last 7 days $post_date = get_the_time( 'Y-m-d' , $product ->get_id() ); $post_stamp = strtotime ( $post_date ); $newness = 7; // Number of days the product is considered new // Check if the product is new if ( ( time() - ( 60 * 60 * 24 * $newness ) ) < $post_stamp ) { echo '<span class="product-badge new-product">New</span>' ; $badge_displayed = true; } } } |
Vous souhaitez modifier la durée pendant laquelle un produit est considéré comme « nouveau » ? Il suffit de chercher la ligne où il est écrit $newness = 7
dans le code. Vous pouvez modifier ce nombre 7 en autant de jours que vous le souhaitez, par exemple 14 pour deux semaines ou 30 pour un mois.
Pour terminer, cliquez sur le bouton « Inactif » jusqu’à ce qu’il soit modifié en « Actif », puis cliquez sur « Enregistrer l’extrait ».

Ensuite, nous devons donner du style à nos badges pour qu’ils aient un bel aspect sur vos produits. Ajoutons quelques feuilles de style CSS pour ajuster leur apparence.
Pour ajouter un nouvel extrait, suivez les mêmes étapes que précédemment, mais cette fois-ci, choisissez « Extrait CSS » lorsqu’on vous le demande.

Nommez votre extrait de manière descriptive, par exemple « Styles de badges de produits ». Cela vous aidera à le trouver facilement si vous devez apporter des modifications ultérieurement.
Voici le code CSS qui donnera à vos badges un aspect professionnel. Il suffit de le coller dans la case « Prévisualisation du code » :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /* Common styles for all product badges */ .product-badge { position : absolute ; top : -10px ; /* Position at the top edge */ right : -10px ; /* Position at the right edge */ padding : 12px 16px ; border-radius : 50% ; color : #ffffff ; font-size : 16px ; font-weight : bold ; z-index : 99 ; box-shadow : 0 2px 5px rgba ( 0 , 0 , 0 , 0.3 ); } /* Styles for the "New" badge */ .new-product { background-color : #4CAF50 ; /* Green background */ } /* Styles for the "Sale" badge */ .sale-product { background-color : #FF0000 ; /* Red background */ } |
Voyons ce que vous pouvez personnaliser dans ce code.
Vous voulez que vos badges soient placés à un autre endroit ? Pour ce faire, vous pouvez modifier les valeurs du haut
et de la droite
. Par exemple, en modifiant top : -10px
à top : 10px
pour déplacer le badge vers le bas.
Vous n’aimez pas les couleurs ? Il est très facile de les modifier. Il suffit de trouver les lignes de couleur d'arrière-plan
et de remplacer les codes de couleur.
Par exemple, si vous voulez un badge de vente bleu au lieu d’un rouge, modifiez #FF0000
en #0000FF
. Vous pouvez également agrandir ou réduire les tailles des badges en ajustant la valeur de la taille de la police
.
Vous voulez en savoir plus sur la façon d’ajuster ces styles ? Consultez notre guide pour débutants sur les CSS dans WordPress.
Une fois que vous avez terminé, il vous suffit de cliquer sur le bouton « Inactif » pour le rendre « Actif », puis de cliquer sur « Enregistrer l’extrait ».

C’est tout !
Vos badges devraient maintenant apparaître sur les images de vos produits. Voici un exemple de ce à quoi ressemblent les nôtres en utilisant notre code CSS :

Découvrez d’autres astuces pour WooCommerce
Maintenant que vous savez comment afficher des badges de produits dans WooCommerce, vous voudrez peut-être explorer d’autres façons d’améliorer votre boutique en ligne. Voici quelques guides utiles que nous vous recommandons :
- Stimulez vos ventes grâce à des ventes incitatives intelligentes – Apprenez à promouvoir stratégiquement des produits similaires et à augmenter la valeur moyenne de vos commandes grâce à des tactiques de ventes incitatives efficaces.
- Récompensez les avis clients par des coupons – Découvrez comment envoyer automatiquement des coupons de remise aux clients qui laissent des avis sur les produits, afin d’encourager les commentaires et les achats répétés.
- Afficher des recommandations de produits intelligentes – Trouvez comment afficher des suggestions de produits pour faire grimper en flèche vos ventes sur WooCommerce.
- Ajoutez des options avancées de filtrage des produits – Apprenez à aider les clients à trouver exactement ce qu’ils recherchent grâce à des filtres de produits personnalisables qui facilitent et accélèrent les achats.
- Créer une fonctionnalité de liste de souhaits pour les clients – Découvrez comment l’ajout d’une fonction de liste de souhaits peut stimuler l’engagement et donner aux acheteurs une raison de revenir dans votre boutique tout en fournissant des informations précieuses sur les préférences des clients/clientes.
- Masquer les prixdans WooCommerce – Découvrez comment masquer les prix pour les clients/clientes en gros, les catalogues en ligne et les produits de luxe et demandez aux personnals de vous contacter ou de se connecter à la place.
Nous espérons que cet article vous a aidé à apprendre comment ajouter des badges de produits dans WooCommerce. Vous pouvez également consulter nos choix d’experts des meilleures extensions de grille de produits WooCommerce et notre guide sur la façon d’accélérer les performances de WooCommerce.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Have a question or suggestion? Please leave a comment to start the discussion.