Personnaliser le badge « Promo » sur WooCommerce pour booster vos ventes

Booster vos ventes avec un badge promotionnel percutant sur WooCommerce

Le badge « Promo » sur WooCommerce peut paraître basique avec juste le mot « Promo ! ». En personnalisant ce texte, vous pouvez créer un sentiment d’urgence et inciter vos visiteurs à acheter.

Découvrez dans ce tutoriel comment changer facilement le badge « Promo » pour des messages accrocheurs :

- Dernières pièces
- Promotion éclair
- À saisir vite !
- X % de réduction

En quelques minutes, accédez au fichier functions.php, ajoutez un bout de code PHP et personnalisez le texte du badge.

Un badge percutant générera plus de ventes. Ne ratez pas cette opportunité de booster vos revenus !

Les promos limitées créent un sentiment d’urgence. Écoulez vos stocks et fidélisez vos clients avec des offres spéciales.

Suivez ce tutoriel étape par étape pour changer le badge « Promo » sur WooCommerce et doper vos ventes.

Dans ce tutoriel, vous trouverez comment :

- - Changer le badge « Promo ! » avec un autre texte
  - Changer le badge « Promo ! » avec un pourcentage dynamique

Personnaliser le badge promo sur WooCommerce

Le tuto en vidéo

Changer le badge « Promo » avec un autre texte simple

Étape 1 : Ajouter un module « Produits Woo »

Si ce n’est pas déjà fait, ajoutez un module « Produits Woo » à une page

Personnaliser le badge "Promotion" sur WooCommerce

Étape 2 : Modifiez le fichier function.php

Accédez à la console Apparence > Editeur de thème et localisez le fichier functions.php de votre thème enfant.

Ajoutez le code suivant avant la fermeture PHP ?>

add_filter('woocommerce_sale_flash', 'ds_change_sale_text');

function ds_change_sale_text() {
   return '<span class="onsale">Ventes Flash</span>';
}

Une fois ces étapes réalisées, vous verrez apparaître votre texte personnalisé « Ventes flash » à la place du texte par défaut « Promo ! » sur le front-end de votre site. C’est un moyen simple et rapide de créer un badge promotionnel percutant et d’apporter votre touche personnelle à votre boutique en ligne.

Choisissez le texte de votre choix pour le badge promotionnel

Le code fourni vous permet de remplacer le texte du badge « Promo ! » par n’importe quel texte de votre choix. Vous avez ainsi la liberté de créer un message promotionnel percutant, en adéquation avec votre image de marque.

Pour cela, il vous suffit de modifier le texte « Ventes flash » présent dans le code par le texte souhaité. Vous pouvez opter pour des formulations du type :

– Coup de cœur

– Offre à saisir vite

– Dernières pièces

Cette simple manipulation vous permettra d’avoir un badge promotionnel accrocheur sur vos produits en réduction, et d’inciter ainsi vos visiteurs à passer à l’achat.

Changer le badge « Promo » avec un pourcentage dynamique

Étape 1 : Ajouter vos tarifs réguliers et vos tarifs promo

Rendez-vous sur votre Dashboard WordPress puis cliquer sur tous les produits. Ensuite renseigner les tarifs réguliers et les tarifs promo pour votre produit ou vos produits.

Afficher un pourcentage dynamique à la place du badge promo WooCommerce

Étape 2 : Ajoutez le code PHP

Dans votre Dashboard, accédez à l’onglet Apparence > Editeur de thème et localisez le fichier functions.php de votre thème enfant.

Ajoutez le code suivant avant la fermeture PHP ?>

/* Remplacer le texte du badge "Promo !" par un pourcentage*/

  add_filter( 'woocommerce_sale_flash', 'ds_replace_sale_text' );
 
function ds_replace_sale_text($text) {
 global $product; 
 $stock = $product->get_stock_status();
 $product_type = $product->get_type();
 $sale_price  = 0;
 $regular_price = 0;
 if($product_type == 'variable'){
  $product_variations = $product->get_available_variations();
  foreach ($product_variations as $kay => $value){
   if($value['display_price'] < $value['display_regular_price']){
    $sale_price = $value['display_price'];
    $regular_price = $value['display_regular_price'];
   }
  }
  if($regular_price > $sale_price && $stock != 'outofstock') {
   $product_sale = intval(((intval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
   if ($product_sale > 5 ) {
   return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe0da"></span> ' . esc_html($product_sale) . '% de réduction</span>'; /* vous pouvez remplacer le texte ici */
   }
   if ($product_sale <= 5 ) {
       return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe0da"></span>Sale!</span>';
   }
  }else{
   return  '';
  }
 }else{
  $regular_price = get_post_meta( get_the_ID(), '_regular_price', true);
  $sale_price = get_post_meta( get_the_ID(), '_sale_price', true);
  if($regular_price > 5) {
   $product_sale = intval(((floatval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
   return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe0da"></span> ' . esc_html($product_sale) . '% de réduction</span>'; /* vous pouvez remplacer le texte ici */
  }
  if($regular_price >= 0 && $regular_price <= 5 ) {
   $product_sale = intval(((floatval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
   return '<span class="onsale"> <span class="sale-icon" aria-hidden="true" data-icon="&#xe0da"></span>Sale!</span>';
  }

  else{
   return '';
  }
 }
}

Après avoir ajouté le code PHP dans le fichier functions.php, n’oubliez pas d’enregistrer vos modifications en cliquant sur « Mettre à jour le fichier ».

Vous avez la possibilité de changer le texte. par exemple :

Remplacer « % de réduction » par « % d’économie » à la ligne 22 et 35 du code CSS

Étape 3 : Ajoutez le code CSS

Dans votre Dashboard, accédez à l’onglet Apparence > Editeur de thème et localisez le fichier style.css de votre thème enfant.

Ajoutez le code suivant

/* Afficher les soldes ! Icône d'insigne */
.sale-icon[data-icon]:before {
    font-family: 'ETmodules';
    content: attr(data-icon);
    speak: none;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

/* Optional styling */

.woocommerce-page ul.products li.product span.onsale, .woocommerce ul.products li.product span.onsale {
  left: 0px!important;
    top: 0px!important; 
    font-size: 15px;
   background: #137118!important;
}

Encore une fois, validez vos changements en cliquant sur « Mettre à jour le fichier ».

Et le tour est joué ! Ces quelques lignes de code PHP et CSS suffisent pour remplacer le texte standard de votre badge promotionnel WooCommerce par un pourcentage de réduction dynamique. Votre boutique gagne instantanément en attractivité.

Grâce à ces quelques lignes de PHP et CSS, vous venez de transformer instantanément l’apparence de votre badge promotionnel WooCommerce.

Ce tutoriel vous a montré à quel point il est simple de personnaliser des éléments comme le badge promotionnel en modifiant directement le code. C’est votre première étape vers une customisation avancée.

N’hésitez pas à explorer toutes les options à votre disposition pour créer une boutique au design unique et aux fonctionnalités sur-mesure. Vous pourrez ainsi vous démarquer de la concurrence.

En maîtrisant les bases du code, vous ouvrez un monde de possibilités pour votre boutique WooCommerce. Apportez votre touche personnelle pour offrir la meilleure expérience à vos clients.

Amusez-vous à tester de nouvelles options de personnalisation et à repousser les limites de votre créativité !