Accueil » Snippets WordPress » Comment afficher le pourcentage de réduction des promotions dans WooCommerce
Comment afficher le pourcentage de réduction des promotions dans WooCommerce
J'espère que cet article vous sera utile.
Si vous cherchez à générer plus de trafic de Google, rendez-vous pour le « Défi des mots-clés » la semaine du 13 mai afin de lancer votre stratégie SEO à mes côtés. Cliquez ici pour vous inscrire 🔗. C'est gratuit. 😉
Lorsque vous faites des soldes sur votre boutique en ligne WooCommerce, vous pouvez par exemple afficher un bouton “PROMO!” sur vos produits.
Mais afficher le pourcentage de réduction exact de vos produits peut inciter vos clients à passer à l’achat plus facilement et ainsi développer votre activité, ou celle de votre client.
Voici comment faire. Copiez-collez le code suivant dans le fichier functions.php de votre thème enfant:
/* Afficher le pourcentage de réduction des promotions WooCommerce */
function wpm_show_sale_percentage_loop() { global $product;
// Si le produit est en promotion if ( $product->is_on_sale() ) {
// Si le produit n'est pas un produit variable if ( ! $product->is_type( 'variable' ) ) { $max_percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 ); } else {
// Sinon si c'est un produit variable, on récupère les différents prix foreach ( $product->get_children() as $child_id ) : $variation = $product->get_child( $child_id ); $price = $variation->get_regular_price(); $sale = $variation->get_sale_price();
A vous de jouer maintenant ! N’hésitez pas à modifier le code CSS utilisé ici pour coller au design de votre boutique (si vous avez besoin de vous former, jetez un oeil à CSS Express).
Vous êtes à la recherche d’un hébergeur ? Ne cherchez plus et foncez chez o2switch (Non seulement les performances sont au rendez-vous mais le support est exceptionnel).
Merci beaucoup pour tous les tutaux que vous faites 🙂
Bon, pour celui-ci, j’ai fait ce qui était marqué et … rien ! Je suis une débutante mais je sais comment modifier les fichiers functions.php et css de mon thème enfant.
Il n’y a rien à faire d’autre que ce qui est mentionné ?
J’avais dû faire une mauvaise manipulation car cela fonctionne. Je vais garder ces scripts de côté pour une prochaine fois où je ne fais pas des promos sur toute la boutique 😉
Par contre, comment fait-on pour mettre le “Promo !” qui est sur l’image du produit sur fond rouge ? Le mien est sur fond blanc et ça ne ressort pas du tout.
Merci d’avance
jules
Excellent ce code ! Y aurait-il moyen de l’adapter facilement pour afficher sous le prix sur la page single product :
Bonsoir, merci pour votre article 🙂 une question ?
Comment peut-on afficher les détails d’une commande avec le prix initial, le prix en promotion, le cout de la livraison ensuite le total? Exemple :
Prix régulier – %pourcentage = Prix en promotion + coût de la livraison = totale
A présent, le prix régulier ne s’affiche pas sur le détail de la commande ni dans le panier pendant le processus d’achat, il n”y a que le prix en promotion qui s’affiche .
Merci pour ta réponse Julier et désolé pour le temps de réponse. c’est bizarre, je n’ai pas reçu de notification à mon commentaire.
houlmann
Bonjour,
Merci pour cette solutions efficace pour ajouter le pourcentage de remise. Auriez vous une solution pour afficher ce pourcentage sur la même ligne que le prix normal et le prix barré.
Merci beaucoup pour ce snippet mais il n’a pas l’air de fonctionner. J’ai une erreur sur cette variable “$price = $variation->get_regular_price();” et j’ignore pourquoi. D’autres snippet de votre site fonctionne pourtant très bien. J’espère que vous pourrez m’aider à trouver la solution. Merci Harold
Bonjour Ophélie, depuis ton interface administrateur, tu vas dans Réglages > Editeur : cela t’ouvre une page avec du code. Sur la droite, tu as une barre qui t’indique sur quel thème tu es positionnée (si tu as un parent et un enfant par exemple). Tu choisis celui que tu souhaites modifier. Puis s’affichera en liste les fichiers de ton thème (toujours sur la droite). Tu cliques sur le fichier que tu veux modifier.
La page de code s’affiche et tu peux modifier directement dessus. N’oublies pas d’enregistrer lorsque tu as fini 😉
pinto
Dans “réglages”, je n’ai pas l’onglet “éditeur” ? j’ai télécharger la nouvelle MAJ de wordpress…il y a 3 jours
Virginie (WPMarmite)
C’est bizarre, car normalement même avec la mise à jour ça n’a pas changé. C’est “Editeur de thème”l’intitulé complet. C’est en-dessous de “personnaliser”et “menus”. Tu es bien sur wordpress.org ? (et non pas wordpress.com)
pinto
en faite moi je suis sur le wordpress de l’admin de mon site… sur wordpress.org oui va t’on lorsque l’on se connecte ensuite ?
Depuis ton admin, tu vas dans Apparence, Réglages >> Editeur de thème. là, tu as le fichier “functions.php” (sur la droite tu sélectionnes tle thème que tu souhaites modifier, et cela te fait apparaitre les fichiers). Une autre possibilité est de récupérer le fichier via ce qu’on appelle un client FTP comme FileZilla. Cela te permet de connecter ton PC à ton serveur et de récupérer les fichiers du serveur pour les éditer depuis ton PC (si tu ne trouves pas l’éditeur de thème par exemple).
Super article. Une question: Comment afficher le pourcentage de reduction sur la commande et sur la facture exemple: 30€(prix produit) – 30%(pourcentage de réduction) = 21€ prix final TTC
Bonjour, je pense qu’il est assez simple de changer l’image “promo” par “trop tard, vendu !” Car le badge promo reste affiché sur mes produits uniques déjà vendus . Mais un petit bout de code me serait grandement utile… Pouvez vous m’aider?
Merci Alex ou l’équipe pour votre réponse.. je me suis débrouillé avec ce petit bout de code, ça fonctionne mais je ne suis pas certain que ça soit la meilleure solution: /** * podi promo badge. By default . */ add_filter(‘woocommerce_sale_flash’, ‘woocommerce_custom_sale_text’, 10, 3); function woocommerce_custom_sale_text($text, $post, $_product) { global $product; // Si le produit N EST PAS VENDU if ( $product-> is_in_stock() ) { return ‘PROMO‘; } else { return ‘TROP TARD‘; } }
bonjour, Et si vous voulez l’afficher dans la page produit : add_action( ‘woocommerce_before_single_product_summary’, ‘wpm_show_sale_percentage_loop’, 26 );
Apprenez à créer votre site WordPress grâce au constructeur de page le plus populaire du marché.
Découvrir la formation
Faites de meilleurs sites WordPress
Rejoignez les 20000 abonnés de WPMarmite et formez-vous dans la bonne humeur (et sans jargon).
En vous inscrivant à la newsletter, vous consentez à ce que WPMarmite, en sa qualité de responsable de traitement, collecte vos données afin de vous envoyer des communications par voie électronique. Vous pourrez vous désabonner à tout moment. Pour faire valoir votre droit d’accès, de rectification ou d’effacement, consultez notre politique de confidentialité.
Merci beaucoup pour tous les tutaux que vous faites 🙂
Bon, pour celui-ci, j’ai fait ce qui était marqué et … rien !
Je suis une débutante mais je sais comment modifier les fichiers functions.php et css de mon thème enfant.
Il n’y a rien à faire d’autre que ce qui est mentionné ?
Merci d’avance
isa
Bonjour, non il faut simplement copier/coller le code.
d’accord, merci, je vais refaire un essai.
J’avais dû faire une mauvaise manipulation car cela fonctionne.
Je vais garder ces scripts de côté pour une prochaine fois où je ne fais pas des promos sur toute la boutique 😉
Par contre, comment fait-on pour mettre le “Promo !” qui est sur l’image du produit sur fond rouge ?
Le mien est sur fond blanc et ça ne ressort pas du tout.
Merci d’avance
Excellent ce code ! Y aurait-il moyen de l’adapter facilement pour afficher sous le prix sur la page single product :
“Vous économisez XX,00€ (YY%)”
Bonjour,
il faudrait à nouveau ajouter du PHP et faire le calcul dans le code mais oui ça devrait se faire assez simplement.
Bonsoir, merci pour votre article 🙂
une question ?
Comment peut-on afficher les détails d’une commande avec le prix initial, le prix en promotion, le cout de la livraison ensuite le total?
Exemple :
Prix régulier – %pourcentage = Prix en promotion + coût de la livraison = totale
A présent, le prix régulier ne s’affiche pas sur le détail de la commande ni dans le panier pendant le processus d’achat, il n”y a que le prix en promotion qui s’affiche .
Merci
Bonjour, il faudrait à ce moment la ajouter un nouveau snippet avec un nouveau hook pour cibler les endroits que tu souhaites.
Merci pour ta réponse Julier et désolé pour le temps de réponse.
c’est bizarre, je n’ai pas reçu de notification à mon commentaire.
Bonjour,
Merci pour cette solutions efficace pour ajouter le pourcentage de remise. Auriez vous une solution pour afficher ce pourcentage sur la même ligne que le prix normal et le prix barré.
merci
Bonjour, il faut faire cela également en PHP mais cela demande un autre snippet.
Bonjour monsieur,
merci pour votre tutoriel, je voudrais savoir comment faire pour ajouter les pourcentage de la promo en haut a gauche ou a droite.
Bonjour, il faut utiliser pas mal de CSS personnalisé un peu long à décrire ici :-/
Merci beaucoup pour ce snippet mais il n’a pas l’air de fonctionner. J’ai une erreur sur cette variable “$price = $variation->get_regular_price();” et j’ignore pourquoi.
D’autres snippet de votre site fonctionne pourtant très bien.
J’espère que vous pourrez m’aider à trouver la solution.
Merci
Harold
Bonjour, c’est quoi le message d’erreur ?
merci de votre aide mais ou touver le fichier functions.php ?
Bonjour Ophélie, depuis ton interface administrateur, tu vas dans Réglages > Editeur : cela t’ouvre une page avec du code. Sur la droite, tu as une barre qui t’indique sur quel thème tu es positionnée (si tu as un parent et un enfant par exemple). Tu choisis celui que tu souhaites modifier. Puis s’affichera en liste les fichiers de ton thème (toujours sur la droite). Tu cliques sur le fichier que tu veux modifier.
La page de code s’affiche et tu peux modifier directement dessus. N’oublies pas d’enregistrer lorsque tu as fini 😉
Dans “réglages”, je n’ai pas l’onglet “éditeur” ? j’ai télécharger la nouvelle MAJ de wordpress…il y a 3 jours
C’est bizarre, car normalement même avec la mise à jour ça n’a pas changé. C’est “Editeur de thème”l’intitulé complet. C’est en-dessous de “personnaliser”et “menus”. Tu es bien sur wordpress.org ? (et non pas wordpress.com)
en faite moi je suis sur le wordpress de l’admin de mon site… sur wordpress.org oui va t’on lorsque l’on se connecte ensuite ?
Depuis ton admin, tu vas dans Apparence, Réglages >> Editeur de thème. là, tu as le fichier “functions.php” (sur la droite tu sélectionnes tle thème que tu souhaites modifier, et cela te fait apparaitre les fichiers). Une autre possibilité est de récupérer le fichier via ce qu’on appelle un client FTP comme FileZilla. Cela te permet de connecter ton PC à ton serveur et de récupérer les fichiers du serveur pour les éditer depuis ton PC (si tu ne trouves pas l’éditeur de thème par exemple).
Super article.
Une question:
Comment afficher le pourcentage de reduction sur la commande
et sur la facture
exemple:
30€(prix produit) – 30%(pourcentage de réduction) = 21€ prix final TTC
Merci pour votre aide
Bonjour, pour ceci il faudra rentrer manuellement dans le code malheureusement.
Bonjour
J’ai appliqué le code avec la procédure indiquée mais sa n’affiche pas de pourcentage quelle peut être la cause
Site : isaya-childcare.com
Bonjour, tu affiches tes produits comment ? Avec un builder ?
Bonjour, je pense qu’il est assez simple de changer l’image “promo” par “trop tard, vendu !”
Car le badge promo reste affiché sur mes produits uniques déjà vendus .
Mais un petit bout de code me serait grandement utile…
Pouvez vous m’aider?
Hello, as-tu regardé du côté de ce snippet : https://wpmarmite.com/snippet/rupture-stock-woocommerce/ ? Tu peux juste modifier le texte de rupture de stock 😉
Merci Alex ou l’équipe pour votre réponse..
je me suis débrouillé avec ce petit bout de code, ça fonctionne mais je ne suis pas certain que ça soit la meilleure solution:
/**
* podi promo badge. By default .
*/
add_filter(‘woocommerce_sale_flash’, ‘woocommerce_custom_sale_text’, 10, 3);
function woocommerce_custom_sale_text($text, $post, $_product)
{
global $product;
// Si le produit N EST PAS VENDU
if ( $product-> is_in_stock() ) {
return ‘PROMO‘;
}
else {
return ‘TROP TARD‘;
}
}
Impec 😉
bonjour,
Et si vous voulez l’afficher dans la page produit :
add_action( ‘woocommerce_before_single_product_summary’, ‘wpm_show_sale_percentage_loop’, 26 );
Bonjour super post moi cela me met une erreur comment procède t-on ?
Hello, quelle erreur s’il te plait ?
Merci pour le tuto ! ça fonctionnait très bien, mais depuis peu, ça ne fonctionne plus… Depuis la Maj WordPress 6 apparemment. Que faire ? Merci 🙂
Bonjour, à priori cela n’a pas de rapport. Quel est le soucis que tu constates s’il te plait ?
Merci pour le code ! Fonctionne bien avec WP Grid Builder, pour l’implémenter dans une card voir “New badge block” : https://docs.wpgridbuilder.com/resources/filter-blocks/