Comment afficher le pourcentage de réduction des promotions dans WooCommerce

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

add_action( 'woocommerce_before_shop_loop_item_title', 'wpm_show_sale_percentage_loop', 25 );

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();

// On calcule le pourcentage
$percentage = $price != 0 && ! empty( $sale ) ? ( ( $price - $sale ) / $price * 100 ) : $max_percentage;
if ( $percentage >= $highest_percentage ) :
    $max_percentage = $percentage;
    $regular_price = $product->get_variation_regular_price( 'min' );
    $sale_price = $product->get_variation_sale_price( 'min' );
endif;
endforeach;
}

// On affiche le pourcentage en l'arrondissant
echo "<div class='pourcentage'>-" . round($max_percentage) . "%</div>";
}
}

On ajoute ensuite un peu de CSS pour styliser l’affichage de notre pourcentage :

/* CSS pourcentage promotion WooCommerce */

.pourcentage {
	background-color: #D9534F;
	display: block;
	width:25%;
	margin:auto;
	padding: .2em .6em .3em;
	font-size: 75%;
	font-weight: bold;
	color: #fff;
	text-align:center;
	border-radius: .25em;
}

Et voilà le résultat:

Source: wpmarmite.com