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
Merci beaucoup, très efficace et cela marche avec mon template Astra.
Merci encore d’avoir partagé cette connaissance. Renata