Comment afficher les badges de pourcentage de réduction dans WooCommerce

Le badge "En promotion !" par défaut de WooCommerce indique aux acheteurs qu'un produit est remisé, mais pas combien ils économisent. Une remise de 10 % et une remise de 40 % peuvent sembler identiques sur la page de la boutique, même si elles représentent des économies très différentes.

Ce contexte supplémentaire est important lorsque les acheteurs recherchent activement de la valeur. Selon l'enquête Deloitte sur les fêtes de fin d'année 2025, 89 % des consommateurs interrogés prévoyaient de rechercher des offres pour étirer leur budget. Afficher la remise réelle leur donne des informations plus utiles en un coup d'œil qu'une étiquette de promotion générique.

Avec Advanced Promo Kit, vous pouvez faire en sorte que WooCommerce affiche des badges de pourcentage de remise en utilisant les données de produits en direct, de sorte que le nombre se mette à jour lorsque le prix change. Vous pouvez également afficher le montant économisé, limiter les badges aux réductions plus importantes et afficher les offres de coupons ou BOGO directement sur la grille de produits.

Ce que le badge de promotion par défaut de WooCommerce peut et ne peut pas afficher

Par défaut, WooCommerce affiche un badge promotionnel générique sur les produits actuellement en promotion. Il peut apparaître sur les pages de boutique et de produits, mais le badge par défaut n'indique pas aux acheteurs l'ampleur de la réduction.

C'est voulu. WooCommerce détermine si un produit est en promotion, puis le badge par défaut affiche une étiquette générique « Promotion ! ». Il ne calcule pas le pourcentage ou le montant économisé pour l'acheteur, et il ne représente pas les réductions par coupon.

Si votre thème n'offre pas le libellé de badge dont vous avez besoin, deux options courantes sont un extrait de code qui réécrit le texte du badge de promotion ou un plugin d'étiquettes qui génère le texte à partir des données du produit. Les deux approches sont abordées ci-dessous.

La méthode par extrait de code et ses limites

Une approche courante par extrait de code pour les modèles WooCommerce classiques utilise le filtre woocommerce_sale_flash et remplace « Promotion ! » par un pourcentage calculé. La sortie du badge de promotion basée sur les blocs utilise plutôt woocommerce_sale_badge_text, donc un extrait de code pour modèle classique peut ne pas affecter toutes les surfaces du badge. Dans les deux cas, le code lit les données de prix, calcule un pourcentage et le renvoie comme texte de badge.

Pour un produit simple avec une paire de prix, cette approche fonctionne bien.

Un extrait de code de base devient plus compliqué à trois niveaux :

• Produits variables et groupés : il n'y a pas de prix régulier et de prix promotionnel unique pour l'ensemble du produit. Le code doit décider comment représenter plusieurs prix ou variations dans un seul badge, donc un pourcentage unique peut être trompeur.
• Mises à jour du thème : si vous ajoutez l'extrait de code directement au fichier functions.php d'un thème parent, une mise à jour du thème peut l'écraser. Un thème enfant ou un plugin d'extraits de code permet de séparer le code personnalisé.
• Coupons : un extrait de code de prix promotionnel de base ne compare que les prix des produits. Il ne connaît pas automatiquement un code de coupon de 20 % de réduction ou une offre BOGO stockée dans les paramètres du coupon.

Ajoutez un seuil (« badge uniquement pour les articles avec plus de 25 % de réduction ») ou une date de fin programmée, et l'extrait de code devient plus complexe à maintenir.

Comment Advanced Promo Kit génère des badges de réduction

Advanced Promo Kit génère le texte du badge à partir de variables qui se résolvent par rapport aux données du produit lors du chargement de la page. Vous écrivez l'étiquette une fois, avec {discount_percent} là où le chiffre doit aller, et la variable calcule le chiffre à partir des données de prix actuelles du produit lorsqu'elle se résout.

Trois fonctionnalités sont particulièrement utiles pour ce flux de travail :

• Les variables se résolvent en direct : {product_price}, {regular_price}, {sale_price}, {discount_percent} et {discount_amount} sont extraits du produit au moment du rendu, formatés avec les paramètres de devise de votre WooCommerce. Sur les produits simples, la modification du prix met automatiquement à jour les variables de réduction.
• Les variables vides masquent l'étiquette : si une variable ne donne rien (par exemple, {discount_percent} sur un produit qui n'est pas en promotion), l'étiquette entière est masquée sur ce produit. Vous n'obtenez jamais un badge indiquant « Économisez ! » sur un article à prix plein.
• Conditions déterminent où il s'affiche : l'onglet Conditions inclut En promotion (Est / N'est pas) et une condition de Pourcentage de remise avec les opérateurs Égal, Différent, Supérieur à, Supérieur ou égal à, Inférieur à, et Inférieur ou égal à, groupés avec la logique ET/OU.

Advanced Promo Kit dispose également d'une intégration optionnelle avec Advanced Coupons. Avec le plugin gratuit Advanced Coupons actif, le placeholder {ac_coupon-COUPONCODE} affiche la remise d'un coupon Advanced Coupons, y compris les offres BOGO. C'est au-delà de ce qu'un extrait de prix de vente basique gère.

Ce guide suppose que vous avez déjà créé un badge basique. Si ce n'est pas le cas, commencez par notre guide pour créer des badges de produits personnalisés et revenez. À partir de maintenant, il ne s'agit que de placeholders et de conditions.

Étape 1 : Afficher un badge de pourcentage sur les articles en promotion

Pour les produits simples, vous pouvez afficher le pourcentage de remise sur les articles en promotion avec un seul badge dont le texte est -{discount_percent} et dont la seule condition est En promotion avec l'opérateur Est. Voici la séquence.

1. Allez dans Promo Kit > Créer un badge. Donnez au badge un nom que vous reconnaîtrez dans la liste Gérer les badges, tel que « Pourcentage de réduction ».
2. Dans le champ Texte du badge, tapez un trait d'union. Ensuite, développez Variable : Produit dans le panneau Variables sous le champ et cliquez sur {discount_percent}. Les placeholders sont sensibles à la casse, utilisez donc le panneau ou copiez le code exact en minuscules.
3. Vérifiez l'aperçu du badge à droite. Sans produit choisi, il indique -25 %, à partir de valeurs d'exemple fixes (39,99 $ régulier, 29,99 $ en promotion). Choisissez un produit dans le menu déroulant au-dessus de l'aperçu, et il se résout par rapport aux prix réels de ce produit à la place.
4. Ouvrez l'onglet Conditions et ajoutez En promotion avec l'opérateur Est. Il ne prend aucune valeur.
5. Choisissez un style et une position de badge dans l'onglet Style (plus à ce sujet ci-dessous). Les nouveaux badges commencent comme Inactifs, alors basculez l'interrupteur en haut de l'écran sur Actif, puis Enregistrez.

Sélectionnez un vrai produit dans l'aperçu, puis confirmez la même valeur sur la boutique une fois que vous avez enregistré.

Visitez une catégorie avec quelques articles simples en promotion. Chacun affiche son propre pourcentage, et les articles à prix plein n'affichent rien, car {discount_percent} est vide pour eux. Strictement parlant, la condition En promotion est une sauvegarde supplémentaire ici, car la règle de masquage automatique empêcherait déjà le badge de s'afficher sur les produits à prix plein. Gardez-la quand même, pour que la liste des badges soit claire d'un coup d'œil.

Une erreur facile est de taper {discount_percent}% de réduction, ce qui affiche « 25%% de réduction » sur la boutique et donne l'impression que le placeholder est cassé. Le placeholder inclut déjà le signe de pourcentage, alors écrivez -{discount_percent} ou {discount_percent} de réduction. Un pourcentage peut également paraître de manière inattendue élevé sur une forte réduction fixe : une réduction de 10 $ sur un produit de 12 $ s'affiche comme « -83 % ». Pour ces articles, utilisez le placeholder de montant à l'étape 2.

La liste complète des espaces réservés intégrés, avec la casse exacte requise et quand chacun d'eux est vide, se trouve dans notre référence sur les espaces réservés de contenu dynamique.

Étape 2 : Afficher le montant économisé ou uniquement au-dessus d'un seuil

Utilisez {discount_amount} lorsque vous souhaitez mettre en évidence le montant économisé, et ajoutez une condition de pourcentage de remise lorsque vous ne souhaitez que des badges au-dessus d'un certain seuil de remise.

Selon le Baymard Institute (2022), 18 % ou plus des sites de commerce électronique tombent dans au moins un des quatre pièges lorsqu'ils affichent des remises sur les prix sur la page produit, et dans leurs tests à grande échelle, l'affichage de la remise absolue et relative fonctionne le mieux. Ils soulignent également la « Règle des 100 » : un pourcentage pour les articles de moins de 100 $ et un montant en dollars au-dessus, de sorte que « 100 $ de réduction » sur un article de 1 000 $ peut sembler plus important que « 10 % de réduction ». Une deuxième étiquette avec le texte Économiser {discount_amount} s'affiche comme « Économiser 10,00 $ » dans la devise de votre magasin, et rien d'autre dans la configuration ne change.

Pour un seuil, ouvrez l'onglet Conditions et ajoutez Pourcentage de remise avec l'opérateur Supérieur ou égal. Par exemple, entrez 15 si vous ne souhaitez le badge que sur les produits remisés d'au moins 15 %. Choisissez un seuil qui correspond à votre promotion. À titre de référence, l'analyse d'Adobe de la saison des fêtes 2025 a signalé des remises maximales de 30,9 % dans l'électronique et de 29,6 % dans les jouets. Si vous décidez du montant de la remise à offrir, notre article de données sur le pourcentage de remise le plus efficace couvre cela séparément.

Pour les produits variables, utilisez un texte fixe tel que « Options sélectionnées en promotion », conservez la condition Pourcentage de remise et ajoutez une condition Type de produit. Ensuite, définissez la correspondance des produits variables (Promo Kit > Paramètres > Général) sur Correspondre à n'importe quelle variation, afin que l'étiquette apparaisse lorsqu'au moins une variation atteint le seuil.

Voici à quoi cela ressemble en pratique (données d'exemple) :

Objectif	Espace réservé / condition	Texte du badge que vous tapez	Ce que les acheteurs voient
Pourcentage de réduction sur un article simple en promotion	En promotion, Est + {discount_percent}	-{discount_percent}	-25%
Montant économisé	{discount_amount}	Économiser {discount_amount}	Économiser 10,00 $
Uniquement les grosses réductions	Pourcentage de remise >= 25 + {discount_percent}	Liquidation -{discount_percent}	Liquidation -40 %
Offre de coupon sur la grille	{ac_coupon-SUMMER20}	{ac_coupon-SUMMER20} de réduction avec SUMMER20	20 % de réduction avec SUMMER20
Coupon BOGO	{ac_coupon-BOGO2FOR1}	{ac_coupon-BOGO2FOR1}	Achetez 1, obtenez 1 gratuit

Exemple de texte de badge. Le résultat résolu est généré à partir des prix en direct de chaque produit et des paramètres du coupon.

Étape 3 : Afficher les offres de coupons et BOGO sous forme de badges

Un badge de coupon utilise l'espace réservé {ac_coupon-COUPONCODE}, qui affiche la remise d'un coupon Advanced Coupons spécifique sur vos badges de produit. Un extrait de prix de vente basique ne produit pas cela car l'offre se trouve dans le coupon plutôt que dans le prix du produit.

1. Accédez à Promo Kit > Paramètres, ouvrez l'onglet Intégrations et activez la ligne Advanced Coupons for WooCommerce. Le commutateur est grisé si Advanced Coupons n'est pas actif. Une sous-option Valider le coupon apparaît ; laissez-la désactivée pour le moment.
2. Créez ou modifiez une étiquette. Dans le panneau Variables, faites défiler jusqu'à la section Advanced Coupons for WooCommerce, tapez au moins deux caractères du code du coupon, choisissez le coupon dans la liste déroulante et cliquez sur Insérer la variable. Le placeholder, par exemple {ac_coupon-SUMMER20}, est ajouté au texte du badge.
3. Construisez le texte autour, par exemple {ac_coupon-SUMMER20} de réduction avec SUMMER20. L'aperçu le résout immédiatement.

Ce que le placeholder imprime dépend du type de coupon :

• Coupon en pourcentage : 25%
• Remise fixe sur le panier : 10,00 $
• Remise fixe sur produit : 5,00 $, et uniquement sur les produits auxquels le coupon s'applique
• Offre BOGO : Achetez 2 Obtenez 1 Gratuit, ou Achetez 2 Obtenez 1 à 50% de réduction, et uniquement sur les produits "d'achat" du deal. Le deal nécessite des produits spécifiques ou des catégories de produits comme déclencheur ; les deals déclenchés par n'importe quel produit, ou configurés pour donner le même produit, n'affichent pas de badge.
• Remboursement de crédit de magasin (Advanced Coupons Premium) : 15% de remboursement ou 10,00 $ de remboursement

Les badges de remise fixe sur produit et BOGO n'apparaissent que sur les produits couverts par l'offre ; partout ailleurs, le placeholder est vide et l'étiquette est masquée, la même règle qu'auparavant. Les coupons en pourcentage, les remises fixes sur panier et les remboursements ne vérifient pas les restrictions de produits, donc leur badge s'affiche sur chaque produit atteint par l'étiquette. Si l'un de ces coupons ne couvre qu'une catégorie, ajoutez une condition de catégorie de produit correspondante à l'étiquette. Si vous utilisez un coupon WooCommerce BOGO créé avec le plugin gratuit Advanced Coupons, le badge peut annoncer l'offre partout où un produit "d'achat" compatible apparaît.

L'option Valider le coupon est facultative et désactivée par défaut. Activez-la et Advanced Promo Kit vérifiera que le coupon est valide et non expiré avant d'afficher l'étiquette, et un coupon qui échoue à la vérification masquera l'étiquette. Cela convient aux codes avec des dates d'expiration. Laissez-la désactivée pour les codes permanents que vous souhaitez annoncer sans restriction.

Si votre promotion a des dates fixes mais que vous souhaitez que le badge apparaisse avant que le coupon ne soit actif, utilisez plutôt l'onglet Planification. Chaque étiquette prend une date de début et une date de fin facultatives, comparées dans le fuseau horaire de votre site, et se masque en dehors de cette fenêtre. Les intégrations associées ajoutent deux placeholders supplémentaires : {lp_points} affiche les points de fidélité qu'un produit gagne grâce à Advanced Loyalty Program, tandis que {agc_gift_card_value} affiche la valeur d'un produit carte cadeau via Advanced Gift Cards. La référence type par type pour la sortie des coupons se trouve dans notre guide pour afficher les informations de remise des coupons sur les étiquettes de produits.

Style, Empilement et Test de vos Badges Dynamiques

Les valeurs dynamiques peuvent prendre plus de place que le texte d'espace réservé que vous voyez dans l'éditeur. Pour des étiquettes telles que « Économisez 10,00 $ », un point de départ pratique est d'environ 240 à 280 pixels de large et 36 à 40 pixels de haut. Vous pouvez affiner les dimensions dans l'onglet Style une fois que vous voyez le texte résolu.

Douze formes d'étiquettes se trouvent dans l'onglet Général (Rectangle Horizontal, Rectangle Vertical, Pilule, Cercle, Carré, Ruban Gauche, Ruban Droit, Étiquette, Hexagone, Étoile, Bannière et une Image Personnalisée), ainsi que la couleur du texte, la taille de la police et le poids. L'onglet Style ajoute la couleur de l'étiquette, la largeur, la hauteur, le rayon du bord, le remplissage, l'opacité et la rotation, le tout avec un aperçu en direct. Des arrière-plans dégradés, des ombres, des animations, une URL cliquable et une info-bulle au survol sont également présents. Le placement est Sur l'image ou Hors de l'image, dans l'un des quatre coins avec des décalages en pixels. Pour des idées de formes et de couleurs, notre tour d'horizon des conceptions d'étiquettes de soldes qui convertissent contient quinze exemples concrets.

L'empilement est activé par défaut. Le nombre maximum d'étiquettes par produit est de trois par défaut, et l'espacement des étiquettes est de cinq pixels par défaut ; les deux peuvent être ajustés sous Paramètres > Général. La priorité est un ordre de glisser-déposer sous Paramètres > Ordre de priorité, où les étiquettes plus haut dans la liste s'affichent en premier, alors faites glisser « Pourcentage de réduction » au-dessus de « Offre de coupon ».

Avant de considérer que c'est terminé, vérifiez cinq produits sur la grille de la boutique et sur la page du produit individuel :

• Produit simple en promotion : affiche son propre pourcentage
• Produit variable avec remises mixtes : affiche votre étiquette de texte fixe si une variation est éligible
• Produit à prix plein : n'affiche rien du tout
• Produit auquel votre coupon ne s'applique pas : pas d'étiquette BOGO ou de produit fixe, et pas d'étiquette de pourcentage, de panier fixe ou de remboursement si vous l'avez limitée avec une condition
• Produit qui remplit les conditions pour chaque étiquette : respecte votre paramètre Nombre maximum d'étiquettes par produit et l'ordre de priorité que vous avez défini

Questions fréquemment posées

Préparer vos étiquettes de réduction

L'objectif est de maintenir chaque étiquette alignée avec la promotion qu'elle décrit. Les espaces réservés dynamiques réduisent le texte de l'étiquette que vous devez mettre à jour manuellement lorsque les prix des produits changent.

Voici ce qu'il faut faire ensuite :

• Ce que l'étiquette de soldes par défaut de WooCommerce peut et ne peut pas montrer : décidez si l'étiquette par défaut « Soldes ! » donne suffisamment de détails sur la réduction aux acheteurs.
• La méthode de l'extrait et ses limites : si vous utilisez déjà un extrait, vérifiez-le sur un produit variable avant de lui faire confiance.
• Afficher une étiquette de pourcentage sur les articles en solde : créez l'étiquette de pourcentage, et rappelez-vous que l'espace réservé porte son propre signe %.
• Afficher le montant économisé ou seulement au-dessus d'un seuil : ajoutez une étiquette de montant et un Pourcentage de réduction >= seuil.
• Placer les offres de coupons et BOGO sur la grille : activez l'intégration et étiquetez votre meilleur coupon.

Si vous souhaitez que WooCommerce affiche le pourcentage de remise sans extrait personnalisé à conserver, configurez les badges de promotion dynamique d'Advanced Promo Kit et maintenez le texte de votre badge lié aux données de votre produit.