Vous êtes ici : Accueil | Snippets WordPress | WooCommerce | Comment afficher le pourcentage de réduction des promotions dans WooCommerce

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

woocommerce snippet

Lorsque vous faites des soldes sur votre boutique en ligne WooCommerce, vous pouvez par exemple afficher un bouton « PROMO! » sur vos produits.

promotion standard woocommerce snippet wpmarmite

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:

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:

.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 voila le résultat:

pourcentage promo woocommerce snippet wpmarmite

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 formez, jetez un oeil à Relooker son Thème).

Source: businessbloomer.com

Vous débutez ? Procurez-vous le Kit du Freelance WordPress

Trouver les bons clients, leur vendre des prestations et bien communiquer avec eux n'est pas inné. Évitez les galères et gagnez du temps en vous formant aux côtés de ces 7 professionnels.

Commencer maintenant

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    La Marmite ne peut malheureusement pas fournir de support. Merci d'en tenir compte dans votre commentaire 😉

    Si vous ne lui en voulez pas, donnez-lui un j'aime sur Facebook :



    Pourquoi vous devez travailler avec un thème enfantVoir la vidéo
    + +
    f12c0bd862ca693e7dd45524a61fadeb$$$$$$$$$$$$$$$$$$$$$$$
    Partagez
    Tweetez
    Partagez