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

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:

/* 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 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 7 professionnels aguerris.

Commencer maintenant

4 commentaires Ajoutez le vôtre

  1. 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

    Répondre
  2. d’accord, merci, je vais refaire un essai.

    Répondre
    • 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

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 :



adipiscing velit, nunc libero vulputate, felis libero nec non Aenean id, ut
Partagez
Tweetez
Partagez