Contact

Comment modifier le badge promo de WooCommerce ?

Par Baptiste Pagès le 17 février 2021
Mis à jour le 25 février 2021
Votre site WordPress manque de visibilité ?
J'analyse votre SEO

Si WooCommerce est ma solution favorite pour créer des e-boutiques, c'est en grande partie pour sa modularité quasiment tout peut être modifié si l'on sait comment faire. Aujourd'hui, je vous montre comment modifier le badge promo de WooCommerce, sans plugin.

L'objectif est donc de modifier les labels "Promo" en vert ci-dessous :

Modifier le texte du badge promo de WooCommerce avec un filtre

Pour modifier le texte du badge promo, nous allons utiliser le fitre WooCommerce woocommerce_sale_flash. Celui-ci nous permet d'intervenir sur le badge et de modifier son code avant son affichage.

Nous allons remplacer le texte contenu par le code par "Prix en baisse" en laissant le reste tel quel. Par défaut, le badge est dans une balise SPAN avec la classe "onsale".

Voici donc le code que nous ajoutons dans function.php :

add_filter( 'woocommerce_sale_flash', 'remplacer_badge_promo' );
function remplacer_badge_promo( $html ) {
    return "<span class='onsale'>PRIX EN BAISSE</span>";
}

Plutôt simple pas vrai ? Et voici le résultat 😀

capture d'écran du changement du texte du badge promo avec WooCommerce.

Remplacer le badge par une image

Ok, et pourquoi ne pas remplacer ce texte par une image ? Par souci de simplicité, j'utilise ici un petit PNG.

Pour arriver à ce résultat, il faut simplement transformer le SPAN de retourn en IMG comme ci-dessous.

Note : il aurait été plus propre de faire une classe plutôt que de mettre le style dans un attribut, mais c'est plus simple comme ça.

add_filter( 'woocommerce_sale_flash', 'remplacer_badge_promo' );
 function remplacer_badge_promo( $html ) {
     return "<img style='width:80px;position:absolute;top:0px;left:0px;' src='adresse_de_votre_image'>";
 }

Merci d'avoir lu ! J'espère que cet article vous sera utile.

Cet article vous a plu ?

Voici d'autres articles populaires qui vous intéresseront peut-être :
SEO
Les bases du Référencement Organique
Apprenez les bases du référencement organique afin d'éviter les erreurs de débutant.
Lire cet article
DESIGN
Comment changer la police d'un site WordPress ?
Tout ce qu'il faut savoir pour gérer la typographie de votre site WordPress est ici, suivez le guide !
Lire cet article
CODE
Comment ajouter du CSS additionnel dans WordPress ?
Découvrez comment ajouter facilement du code CSS additionnel dans n'importe quel site WordPress.
Lire cet article
WOOCOMMERCE
Comment importer des produits dans WooCommerce ?
Apprenez à importer des produits à votre boutique WooCommerce très facilement (en vidéo).
Lire cet article
Je m'appelle Baptiste et je suis un webdesigner / consultant SEO spécialisé dans WordPress, basé à Grasse dans le Sud de la France. J'aide les petites entreprises à développer leur présence web dans ce monde de fou 😉
menu-circlecross-circle