Comment Afficher le Pourcentage de Réduction Des Promotions Dans WooCommerce ?

L’affichage d’un pourcentage de réduction des promotions dans WooCommerce représente une stratégie marketing efficace. Sur votre boutique en ligne, vous avez effectivement la possibilité d’annoncer que certains de vos produits sont en soldes. De ce fait, vous indiquerez par exemple la mention « Promo » sur un bouton afin que vos visiteurs sachent que cet article est en promotion.

Mais, vos prospects ne sont pas en mesure d’obtenir plus de renseignements sur l’offre à moins de cliquer dessus. Dans les lignes suivantes nous vous présentons un snippet très intéressant qui facilitera la vie de vos futurs clients et leur donnera envie d’acheter.

L’Intérêt d’Afficher le Pourcentage de Réduction Des Promotions Dans WooCommerce

Le fait de voir seulement la mention « Promo » sur les produits soldés sur votre page boutique peut freiner le potentiel acheteur dans sa décision d’achat. Certes, ce dernier est tenu de consulter les détails de chaque produit pour connaître le montant précis.

Or, saviez-vous que vous pouviez révéler directement le pourcentage de réduction ? En effet, cette méthode inciterait vos visiteurs à passer à l’achat plus rapidement. Par conséquent, votre activité se développera de manière optimale.

Le Snippet Qui Affiche le Pourcentage de Réduction Des Promotions Dans WooCommerce

Pour mettre en pratique cette technique, vous devez copier-coller le snippet ci-dessous 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>";
}
}

Après avoir entré ce code, il vous faudra ajouter du CSS pour personnaliser l’affichage de ce pourcentage. Par exemple, vous pouvez utiliser le code CSS suivant :

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