Comment ajouter des badges de produit dans WooCommerce (rapide et facile)

Chaque boutique en ligne qui réussit a une chose en commun : elle permet aux clients de trouver facilement ses meilleurs produits.

Mais voici le défi : lorsque tous vos produits se ressemblent, comment les clients savent-ils lesquels sont en promotion, nouvellement ajoutés ou vos meilleures recommandations ? Les badges de produits sont la réponse.

Ces petits éléments visuels communiquent instantanément ce qui est spécial à propos de chaque produit. Un simple badge « Nouveau » peut susciter la curiosité, tandis qu'une étiquette « -50% » crée un sentiment d'urgence.

D'après notre expérience dans l'aide aux propriétaires de boutiques pour optimiser leurs sites WooCommerce, les badges de produits sont l'un de ces petits changements qui apportent de grands résultats.

Nous avons testé diverses approches et trouvé 2 méthodes qui fonctionnent parfaitement aussi bien pour les débutants que pour les utilisateurs expérimentés. Plongeons dans les moyens les plus simples de commencer.

Que sont les badges de produits WooCommerce ?

Avez-vous déjà remarqué ces petites étiquettes « En promotion » ou « Nouveau » qui apparaissent sur les produits lorsque vous faites des achats en ligne ?

Ce sont des badges de produits, et ils sont incroyablement utiles pour faire ressortir certains articles dans votre boutique en ligne.

Pensez-y comme des autocollants virtuels qui attirent l'attention de vos clients sur des détails importants du produit tels que les ventes, les nouveautés ou les offres à durée limitée.

Nous avons vu des propriétaires de boutiques utiliser des badges de produit de manière très créative pour présenter des offres spéciales, mettre en avant les meilleures ventes ou signaler les articles qui sont bientôt épuisés.

Maintenant, si vous utilisez déjà WooCommerce, vous avez peut-être remarqué qu'il est livré avec une fonctionnalité de badge de vente basique qui apparaît automatiquement lorsque vous réduisez le prix d'un produit.

Bien que le badge de vente de WooCommerce fonctionne bien pour des besoins simples, soyons honnêtes : il est assez limité en termes de ce que vous pouvez en faire.

Vous ne pouvez pas facilement modifier l'apparence du badge, ajouter de nouveaux types de badges ou contrôler exactement où ils apparaissent sur vos images de produits.

Pendant ce temps, les badges de produit personnalisés vous permettent de montrer davantage la personnalité de votre marque. Mais surtout, les badges originaux peuvent attirer plus efficacement l'attention sur des produits spéciaux.

De cette façon, vous pouvez générer plus de ventes dans votre boutique en ligne. 💰

Dans ce guide, nous vous présenterons 2 méthodes éprouvées pour ajouter et personnaliser des badges de produit dans WooCommerce. Les deux approches vous donneront un contrôle total sur leur apparence et leur fonctionnement.

Vous pouvez utiliser les liens rapides ci-dessous pour accéder à votre méthode préférée :

• Méthode 1 : Utiliser YITH WooCommerce Badge Management (Plus personnalisable)
• Méthode 2 : Utiliser du code personnalisé (Gratuit et simple)
• Découvrez plus d'astuces et de conseils WooCommerce
• Foire aux questions : Badges de produit dans WooCommerce

Méthode 1 : Utiliser YITH WooCommerce Badge Management (Plus personnalisable)

Commençons par notre outil préféré pour ajouter des badges de produit personnalisés à votre boutique WooCommerce.

Nous recommandons d'utiliser YITH WooCommerce Badge Management car il est très facile d'ajouter et de personnaliser des badges de produits dans votre boutique en ligne.

De plus, nous avons testé de nombreux plugins YITH au fil des ans, comme ceux pour ajouter des abonnements et des vidéos de produits, et ils fonctionnent toujours très bien pour nos utilisateurs.

Vous voulez afficher un badge spécial pendant les fêtes ? Ou peut-être afficher combien d'argent les clients économiseront ? Ce plugin peut faire tout cela. Vous pouvez même définir des badges pour qu'ils apparaissent à certains moments et les masquer plus tard.

Vous pouvez commencer avec la version gratuite ou premium du plugin. Le plan gratuit est parfait si vous voulez simplement ajouter des badges texte ou image simples à vos produits.

Dans ce guide, nous vous montrerons 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 intéressantes, comme les badges qui affichent automatiquement les montants de réduction, ne sont disponibles qu'avec la version premium.

Prêt à commencer ? Tout d'abord, vous devrez acheter le plugin sur le site Web de YITH.

Connectez-vous ensuite à votre compte YITH, allez dans l'onglet « Licences & Téléchargements » et cliquez sur le bouton « Télécharger le plugin » 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, allez dans votre tableau de bord WordPress et installez le plugin. Pour plus d'informations, nous avons un guide étape par étape sur comment installer un plugin WordPress.

Lorsqu'il est actif, vous verrez un écran de configuration vous demandant votre e-mail YITH et votre clé de licence. Copiez-les simplement depuis le site Web YITH et cliquez sur « Activer la licence ».

Une fois que vous voyez le message indiquant que votre licence est active, vous êtes prêt !

Maintenant, cliquez sur « Accéder au tableau de bord du plugin », et vous pouvez commencer à créer votre premier badge personnalisé.

Étape 1 : Masquer le badge de promotion WooCommerce par défaut

Tout d'abord, nous devons masquer le badge de promotion intégré de WooCommerce afin qu'il ne soit pas en conflit avec nos badges de produits personnalisés. 

Le processus est très simple. Accédez à votre tableau de bord WordPress et cliquez sur YITH » Gestion des badges. Ensuite, accédez à l'onglet « Paramètres généraux ».

Ici, vous trouverez une option qui dit « Masquer le badge WooCommerce « En promotion » ». Activez-la.

Ensuite, sous « Masquer « En promotion » sur : », sélectionnez « Tous les produits » pour vous assurer que le badge par défaut n'apparaît nulle part dans votre boutique.

Pendant que vous êtes dans les paramètres, vous remarquerez peut-être d'autres options utiles. Vous pouvez choisir de masquer vos badges personnalisés dans certains endroits, comme la barre latérale ou les pages de produits individuelles.

C'est idéal si vous souhaitez que votre boutique reste 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éez votre badge personnalisé

Voici la partie amusante : créer votre premier badge de produit personnalisé dans WooCommerce !

Accédez à l'onglet « Badges » et cliquez sur le bouton « Créer un badge » pour commencer.

Le plugin vous propose 4 types de badges différents : badge texte, badge image, badge CSS ou badge avancé pour les produits en promotion.

Chaque type vous permet de créer des moyens uniques de mettre en valeur vos produits. Par exemple, si vous souhaitez marquer des produits comme « Nouvelle arrivée » ou « Végétalien », les trois premières options fonctionnent très bien.

Mais voici une astuce : si vous créez des badges de réduction, nous vous recommandons vivement d'utiliser l'option avancée, qui se met à jour automatiquement en fonction des changements de prix de votre produit.

Après avoir choisi votre type de badge, donnez-lui un nom qui vous aide à vous souvenir de son utilité.

Si vous avez choisi une image, du CSS ou un badge avancé, vous verrez toute une collection de designs de badges préfabriqués directement dans le plugin.

Vous pouvez choisir celui que vous préférez. 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.

Ce plugin brille vraiment par ses options de personnalisation. Selon le type de badge que vous avez choisi, vous pouvez ajuster toutes sortes de paramètres pour que votre badge soit parfait sur les images de vos produits.

Vous voulez changer la couleur ? Facile.

Besoin d'ajuster sa transparence ? Pas de problème.

Vous pouvez même faire pivoter l'insigne ou le déplacer sur vos produits jusqu'à ce qu'il soit exactement au bon endroit.

Pour notre exemple, nous avons fait ressortir l'insigne en changeant sa couleur en rouge et en le plaçant dans le coin supérieur droit de l'image du produit.

Ces petites modifications peuvent faire une grande différence dans l'efficacité avec laquelle vos insignes attirent l'attention.

Lorsque vous êtes satisfait de l'apparence, cliquez simplement sur « Enregistrer l'insigne » pour terminer.

Étape 3 : Créer une règle pour afficher votre insigne

Maintenant que nous avons créé notre insigne personnalisé, indiquons à WooCommerce exactement où et quand l'afficher.

Accédez à l'onglet « Règles d'insigne » et cliquez sur « Définir la règle ».

Considérez les règles comme des instructions qui indiquent à vos insignes quand apparaître sur les images de vos produits.

Le plugin vous offre 4 façons principales de contrôler où vos insignes apparaissent : insigne de produits, insigne de catégorie, insigne d'étiquette et insigne de classe d'expédition.

Vous pouvez choisir la règle « Insigne de produits » pour ajouter des insignes à certains articles ou la règle « Insigne de catégorie » pour couvrir des catégories de produits entières.

Pendant ce temps, la règle d'insigne d'étiquette affiche des insignes sur les produits partageant la même étiquette WooCommerce, et la règle d'insigne de classe d'expédition affiche des insignes en fonction des options d'expédition.

Chaque règle cible différents aspects des produits, mais elles fonctionnent toutes de manière similaire. Vous devez donc simplement choisir ce qui convient le mieux à vos besoins.

Utilisons la règle d'insigne de produits pour cet exemple, car c'est le choix le plus courant.

Ensuite, donnez un nom simple à votre règle afin de pouvoir la retrouver facilement plus tard.

Ensuite, recherchez le paramètre « Afficher le badge dans : ». C'est ici que vous décidez quels produits reçoivent votre badge. Vous pouvez choisir de l'afficher sur tous les produits, les ajouts récents, les articles en promotion, les produits populaires en vedette, ou même uniquement sur les produits en stock.

Disons que vous créez une règle pour les articles en promotion. Si vous sélectionnez « Produits en promotion », votre badge apparaîtra automatiquement chaque fois que vous marquerez un produit comme étant en promotion. C'est aussi simple que ça !

Mais certaines options sont accompagnées de plus de paramètres à configurer. 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 (par exemple, 7, 14 ou 30 jours).

Cela rend très facile la mise en évidence automatique des nouveautés de votre boutique sans avoir à ajouter manuellement des badges à chaque produit.

Parfois, vous voudrez peut-être garder certains produits sans badge. C'est là que le paramètre « Exclure les produits » s'avère utile.

Il suffit d'activer ce paramètre et de taper les noms des produits pour lesquels vous ne souhaitez pas afficher le badge. Ces articles resteront sans badge même s'ils correspondent à vos autres règles.

Ensuite, sélectionnez le design de badge que vous souhaitez utiliser dans le menu déroulant « Badge à attribuer ».

Maintenant, voici où cela devient vraiment flexible. 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, le plugin vous demandera de définir les dates de début et de fin pour vos badges.

Et si vous souhaitez afficher des badges spéciaux à certains clients, comme un badge « Réduction VIP » uniquement aux clients les plus fidèles, vous pouvez le faire aussi.

Pour ce faire, sélectionnez simplement « Seulement des utilisateurs ou des rôles spécifiques » dans le paramètre « Afficher le badge à ». Ensuite, saisissez vos rôles d'utilisateur préférés ou les noms d'utilisateur individuels ci-dessous.

Lorsque tout semble correct, cliquez simplement sur « Enregistrer la règle », et le tour est joué !

N'hésitez pas à visiter le front-end de votre boutique pour voir vos nouveaux badges de produit en action.

Si vous utilisez le type de badge avancé pour les articles en promotion, vous le verrez afficher à la fois le pourcentage de remise et le montant réel économisé, aidant ainsi les clients à repérer rapidement les meilleures offres.

Méthode 2 : Utiliser du code 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 entièrement 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 le plugin WPCode pour rendre cela très facile et sûr. Il vous permet d'ajouter des extraits de code personnalisés dans WordPress sans être développeur ni risquer de casser votre site web.

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 intéressantes comme la génération de code par IA et le mode test.

Pour plus d'informations, consultez notre avis approfondi sur WPCode.

Tout d'abord, vous devez installer le plugin WordPress dans votre zone d'administration.

Ensuite, allez dans Extraits de code » + Ajouter un extrait. Survolez la section « Ajouter votre code personnalisé (Nouvel extrait) », puis cliquez sur le bouton « + Ajouter un extrait personnalisé ».

Ensuite, choisissez « Extrait PHP » lorsqu'on vous demande le type de code.

Cela indique à WordPress quel type de code nous utilisons.

Maintenant, vous devez donner un nom à votre extrait qui vous aide à vous souvenir de ce qu'il fait.

Comme ce code supprimera le badge de promotion par défaut de WooCommerce et ajoutera à la fois de nouveaux badges de produits et des badges de réduction 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 boîte « Aperçu du code ».

Ce code fait quelque chose de vraiment cool. Il calcule automatiquement les pourcentages de réduction et les affiche sur le badge de promotion. De plus, il ajoute un badge « Nouveau » aux produits ajoutés au cours des 7 derniers jours.

// 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 voulez ajuster combien de temps un produit est considéré comme « nouveau » ? Il suffit de chercher la ligne où il est indiqué $newness = 7 dans le code. Vous pouvez changer ce nombre 7 par le nombre de jours que vous souhaitez, comme 14 pour deux semaines ou 30 pour un mois.

Pour finir, cliquez sur le bouton « Inactif » jusqu'à ce qu'il devienne « Actif », puis cliquez sur « Enregistrer l'extrait ».

Ensuite, nous devons styliser nos badges pour qu'ils aient fière allure sur vos produits. Ajoutons du CSS pour ajuster leur apparence.

Pour ajouter un nouvel extrait, suivez les mêmes étapes qu'auparavant, mais cette fois, choisissez « Extrait CSS » lorsqu'on vous le demande.

Nommez votre extrait quelque chose de descriptif, comme « Styles de badges de produits ». Cela vous aidera à le trouver facilement si vous avez besoin de faire des modifications plus tard.

Voici le code CSS qui rendra vos badges professionnels. Copiez-le simplement dans la boîte « Aperçu du code » :

/* 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 */
}

Décomposons ce que vous pouvez personnaliser dans ce code.

Vous voulez que vos badges soient ailleurs ? Pour ce faire, vous pouvez modifier les valeurs top et right. Par exemple, changer top: -10px en top: 10px déplacera le badge vers le bas.

Vous n'aimez pas les couleurs ? C'est très facile de les changer. Il suffit de trouver les lignes background-color et de remplacer les codes couleur.

Par exemple, si vous voulez un badge de promotion bleu au lieu d'un rouge, changez #FF0000 en #0000FF. Vous pouvez également agrandir ou réduire les badges en ajustant la valeur font-size.

Vous voulez en savoir plus sur la modification de ces styles ? Consultez notre guide pour débutants sur les CSS dans WordPress.

Une fois que vous avez terminé, cliquez simplement sur le bouton « Inactif » pour le rendre « Actif », puis sur « Enregistrer le extrait ».

C’est tout !

Vos badges devraient maintenant apparaître sur vos images de produits. Voici un exemple de ce à quoi ressemble le nôtre en utilisant notre code CSS :

Découvrez plus d'astuces et de conseils WooCommerce

Maintenant que vous savez comment afficher des badges de produits dans WooCommerce, vous pourriez vouloir explorer d'autres façons d'améliorer votre boutique en ligne. Voici quelques guides utiles que nous recommandons :

• Augmentez vos ventes avec des ventes incitatives intelligentes – Apprenez à promouvoir stratégiquement des produits connexes et à augmenter la valeur moyenne de vos commandes grâce à des tactiques de vente incitative efficaces.
• Récompensez les avis clients avec des coupons – Découvrez comment envoyer automatiquement des coupons de réduction aux clients qui laissent des avis sur les produits, encourageant ainsi plus de commentaires et d'achats répétés.
• Affichez des recommandations de produits intelligentes – Découvrez comment afficher des suggestions de produits pour faire décoller vos ventes WooCommerce.
• Affichez les produits souvent achetés ensemble – Apprenez à afficher les produits souvent achetés ensemble dans WooCommerce pour augmenter les ventes.
• Ajoutez des options de filtrage de produits avancées – Apprenez à aider les clients à trouver exactement ce qu'ils recherchent grâce à des filtres de produits personnalisables qui rendent le shopping plus facile et plus rapide.
• Créez une fonctionnalité de liste de souhaits pour les clients – Voyez comment l'ajout d'une fonction de liste de souhaits peut augmenter l'engagement et donner aux acheteurs une raison de revenir dans votre magasin tout en fournissant des informations précieuses sur les préférences des clients.
• Masquez les prix dans WooCommerce – Apprenez à masquer les prix pour les clients de gros, les catalogues en ligne et les produits de luxe et demandez aux acheteurs de vous contacter ou de se connecter à la place.

Foire aux questions : Badges de produit dans WooCommerce

Voici quelques questions fréquemment posées par nos lecteurs concernant l'ajout d'étiquettes de produits dans WooCommerce :

Puis-je créer des étiquettes personnalisées comme « Tendance », « Nouveauté » ou « Stock Limité » ?

Oui, la plupart des plugins d'étiquettes de produits vous permettent de concevoir des étiquettes personnalisées avec votre propre texte, vos couleurs et vos icônes. Cela signifie que vous n'êtes pas limité à des libellés génériques comme « Soldes » ou « Nouveauté ».

Par exemple, vous pouvez créer des étiquettes comme :

• Tendance du moment !
• Plus que 2 en stock !
• Choix de la rédaction
• 100% Bio

Certains outils vous permettent même de télécharger vos propres images d'étiquettes ou d'utiliser des libellés dynamiques basés sur les données de stock ou de prix.

Les étiquettes de produits fonctionnent-elles sur les appareils mobiles ?

Oui, la plupart des plugins d'étiquettes sont réactifs, ce qui signifie que vos étiquettes s'afficheront correctement sur toutes les tailles d'écran, y compris les smartphones et les tablettes.

Cependant, le placement et la conception de l'étiquette peuvent dépendre de votre thème.

Il est conseillé de tester votre boutique sur mobile après avoir ajouté des étiquettes pour vous assurer qu'elles ne chevauchent pas de contenu important ou ne rendent pas les images de produits difficiles à voir.

Puis-je afficher plusieurs étiquettes sur le même produit ?

Cela dépend du plugin ou de la méthode que vous utilisez. Par exemple, le plugin YITH WooCommerce Badge Management prend en charge plusieurs étiquettes par produit, tandis que d'autres peuvent n'en autoriser qu'une à la fois.

Si vous souhaitez afficher plusieurs étiquettes comme « Soldes » et « Meilleure vente » ensemble, recherchez un plugin qui offre une superposition ou un empilement d'étiquettes. Vérifiez toujours les paramètres ou la documentation du plugin pour confirmer que cette fonctionnalité est prise en charge.

Les étiquettes de produits vont-elles ralentir ma boutique WooCommerce ?

Pas habituellement, surtout si vous utilisez un plugin bien codé. Cependant, évitez d'utiliser de gros fichiers image pour les étiquettes, et ne surchargez pas vos pages produits avec plusieurs étiquettes ou animations.

Pour maintenir la rapidité de votre boutique :

• Choisissez des plugins légers et optimisés
• Utilisez des étiquettes textuelles lorsque c'est possible
• Limitez l'utilisation des étiquettes aux produits ou catégories mis en avant

Nous espérons que cet article vous a aidé à apprendre comment ajouter des badges de produit dans WooCommerce. Vous pourriez également vouloir consulter notre sélection d'experts des meilleurs plugins de grille de produits WooCommerce et notre guide sur comment accélérer les performances de 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.