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 😀
Vous pouvez également changer la police du texte, comme toujours sur WordPress.
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. Si vous voulez apprendre d'autres choses sur WooCommerce, je vous recommande l'article "Comment importer des produits d'exemple dans WooCommerce".
