Afficher un pourcentage de réduction sur un produit WooCommerce

WooCommerce est quand même sacrément pratique pour héberger un site e-commerce propulsé par l’excellent WordPress. Grâce à son interface ludique et simple d’utilisation, il devient très facile de bénéficier d’un site e-commerce dédié sur-mesure en quelques clics. Et si certaines logiques de l’extension ne vous plaisent pas, il est très simple de les modifier… La preuve ici-même !

Un bon moyen d’améliorer ses ventes est de mettre certains produits en promotion. Dans WooCommerce, cela est très facile à faire : il suffit de définir un prix régulier (normal) et un prix promotion — et si nécessaire, la date de début et de fin de la promotion.

En temps normal, une petite infobulle sera superposée au bloc produit mais son contenu est, nativement, plutôt inutile : il affichera « Promo » (ou « Sale » en anglais).

Mais comment faire pour utiliser cette infobulle et y afficher le pourcentage maximum de promotion du produit ?

Afficher percentage d'un produit WooCommerce en promotion

Quel fichier à éditer ?

Dans les coulisses, WooCommerce utilise bon nombre de ses propres fichiers templates afin d’afficher telle ou telle chose. Heureusement, il est possible de dupliquer ces fichiers templates (situés dans le dossier /wp-content/plugins/woocommerce/templates/) pour les recréer dans le dossier de votre thème. Ainsi, si un fichier template WooCommerce est présent dans /wp-content/themes/votre-theme/woocommerce/, il sera utilisé à la place du fichier original par l’extension. Personnaliser l’affichage de WooCommerce devient alors super facile !

En l’occurrence, nous allons ici copier le fichier /loop/sale-flash.php et le dupliquer puis l’éditer à deux endroits dans notre thème :

  1. votre-theme/woocommerce/loop/sale-flash.php : ce petit template gère l’affichage de l’infobulle de promotion dans la boucle produits WooCommerce (sur une page catalogue, sur la page boutique, sur la page « Produits liés », etc.)
  2. votre-theme/woocommerce/single-product/sale-flash.php : ce petit template gère l’affichage de l’infobulle de promotion sur la page unique (single) d’un produit WooCommerce

Donc si par hasard, vous souhaitez que la dite infobulle s’affiche différemment entre un listing de produits et la page d’un produit seul, vous pourrez le faire en éditant un de ces deux fichiers. Dans notre cas, restons simple et affichons la même chose d’un côté comme de l’autre.

Comment calculer le pourcentage de réduction d’un produit en promotion ?

<?php
/**
 * Single Product Sale Flash
 *
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

global $post, $product;

if ($product->is_on_sale()) :


	// Dans le cas où le produit est "variable" (plusieurs variations de produits existantes)
	if ($product->product_type == 'variable') :

		$available_variations = $product->get_available_variations();
		$max_percentage = 0;

		// On passe au crible toutes les variations et calcule le pourcentage de réduction de chacune.
		// Si ce pourcentage de réduction est le maximum, on le garde en mémoire dans $max_percentage
		for ($i = 0; $i < count($available_variations); ++$i) {
			$variation_id = $available_variations[$i]['variation_id'];
			$variable_product1 = new WC_Product_Variation($variation_id);
			$regular_price = $variable_product1->regular_price;
			$sales_price = $variable_product1->sale_price;
			$percentage = round(((($regular_price - $sales_price) / $regular_price) * 100), 1);

			if ($percentage > $max_percentage) {
				$max_percentage = $percentage;
			}
		}
		echo apply_filters( 'woocommerce_sale_flash', '<span class="promo-star">-' . round($max_percentage) . '%</span>', $post, $product );


	// Si le produit n'est pas "variable" mais simple, nous n'avons qu'un prix normal et un prix promo... fastoche !
	elseif ($product->product_type == 'simple') :

		$percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
		echo apply_filters( 'woocommerce_sale_flash', '<span class="promo-star">-' . round($percentage) . '%</span>', $post, $product );

	endif;

endif; ?>

Ce code a été trouvé dans un article de WPStuffs.

Essayons d’analyser et comprendre ce qu’il se passe dans ce fichier template. Si un produit WooCommerce est en promotion, nous différencions 2 cas :

  1. si le produit est variable (composé de multiples variations de produits), on récupère toutes les variations et les analyse une par une pour calculer le pourcentage de promotion du produit. On garde en mémoire le pourcentage maximum de promotion afin de n’afficher que la promotion la plus importante dans l’infobulle.
  2. si le produit est simple (pas de variation), on calcule le pourcentage de réduction en prenant son prix normal et son prix promo.
Sur le site Cha bada bada est affiché le pourcentage de réduction d'un produit en promotion
Sur le site Cha bada bada est affiché le pourcentage de réduction d’un produit en promotion

Et voila, on a réussi à afficher le pourcentage de réduction d’un produit en promotion, bien plus vendeur et accrocheur qu’un simple « Promo ! ». Pas bien compliqué et sacrément pratique, non ?


Vous avez aimé cet article ?

Partagez-le sur vos réseaux sociaux en guise de remerciement :)


11 commentaires

Bonjour,

Merci pour cette astuce !
Je rajouterai juste deux détails :
A la ligne 32,
if ($sales_price !=  ») {
$percentage = round(((($regular_price – $sales_price) / $regular_price) * 100), 1);
if ($percentage > $max_percentage) {
$max_percentage = $percentage;
}
}

Cela permet de ne pas afficher 100% de réduction dans le cas ou toutes les variations ne sont pas en promotion.

Et de faire attention au nom de la classe dans ‘-‘ qui par exemple devient ‘-‘ dans le theme que j’utilise.

Bonjour, Ne voyant pas le badge (theme divi), j’ai ajouté z-index: 50; pour remonter sa position. c’est ok maintenant… autre ennui, .promo-star marche dans la feuille de style, mais pas #promo-star. Est-ce normal ?
Chris

Bonjour,

Merci pour ce bout de code.

Celui-ci marche très bien sauf dans les cas où sur la page unique, j’ai un produit variable, avec 2 variations sans promos, et la 3ème avec une promotion. L’infobulle m’affiche alors -100%. J’avais le même résultat avec un produit avec 2 variations, une avec promo, et l’autre sans, mais en changeant la valeur de « $i » par 1 au lieu de 0, le pourcentage est devenu bon. Mais reste à 100% si 3 variations, dont 1 seule est en promo. Problème similaire à Jean-françois Rochard…

Une piste ?

Merci par avance.

Bonjour,

J’ai exactement le même soucis que Jean-françois Rochard, c’est à dire un produit avec une variation en promo et une variation sans promo, la remise affichée est de 100%.
J’ai réussi à corrigé ceci en donnant une valeur de « $i=1 » au lieu de « 0 ». Mais dès que j’ai un produit avec 3 variations (2 en promo et 1 sans promo), cela m’affiche à nouveau une remise de 100% ?

Auriez-vous une piste ?
Merci par avance.

Laisser un commentaire