Comment afficher « Vous économisez x % » en dessous des prix de vente pour des produits simples et variables dans WooCommerce

Nous savons tous comment les remises attirent les clients et augmentent les ventes. Mais montrer que vous vendez un article à un prix inférieur n'est plus suffisant de nos jours, tous les détaillants et sites de commerce électronique offrant des remises en même temps. Lorsque seuls les anciens et les nouveaux prix sont affichés, le client doit faire le calcul pour calculer le montant qu'il économise réellement. Une meilleure façon de gérer cela est d'afficher le pourcentage du montant que le client économise lorsqu'il effectue cet achat. Cela leur donne une meilleure idée et un moyen plus facile de décider de faire cet achat. Voyons comment vous pouvez afficher « Vous économisez x % » à côté des prix de vente pour les produits simples et variables dans WooCommerce.

Comment afficher vos économies % en dessous des prix de vente pour des produits simples

L'affichage du pourcentage du montant économisé est facile pour les produits simples une fois que le prix régulier et le prix de vente sont connus. Dans des cas normaux, ces prix pour un produit simple sont affichés comme suit :

L'ajout du code ci-dessous au fichier functions.php de votre thème enfant affichera le "Vous économisez x%" en dessous du prix du produit simple, de sorte que l'utilisateur ait immédiatement une idée de la qualité de l'affaire.

 function ts_you_save() {
  
  $produit global ;
  
   if( $product->is_type('simple') || $product->is_type('external') || $product->is_type('groupé') ) {
      
     	$regular_price = get_post_meta( $product->get_id(), '_regular_price', true ); 
        $sale_price = get_post_meta( $product->get_id(), '_sale_price', true );
     
     	if( !empty($sale_price) ) {
  
              $amount_saved = $regular_price - $sale_price ;
              $currency_symbol = get_woocommerce_currency_symbol();

              $percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
              ?>
              <p><b>Vous économisez : <?php echo number_format($percentage,0, '', '').'%' ; ?></b></p>				
              <?php		
        }
   }
}

add_action( 'woocommerce_single_product_summary', 'ts_you_save', 11 );

Dans cet extrait de code, nous avons ajouté une fonction ts_you_save() au crochet WooCommerce intégré woocommerce_single_product_summary , qui pointe vers la zone située sous le titre du produit. La fonction ts_you_save() identifie le type de produit et calcule le pourcentage du montant économisé si le produit est en solde. En ajoutant du CSS, vous pouvez l'imprimer comme vous le souhaitez :

Si vous souhaitez afficher le montant économisé avec le pourcentage, vous pouvez modifier légèrement le même extrait de code de la manière suivante :

 function ts_you_save() {
  
  $produit global ;
  
   if( $product->is_type('simple') || $product->is_type('external') || $product->is_type('groupé') ) {
      
     	$regular_price = get_post_meta( $product->get_id(), '_regular_price', true ); 
        $sale_price = get_post_meta( $product->get_id(), '_sale_price', true );
     
     	if( !empty($sale_price) ) {
  
              $amount_saved = $regular_price - $sale_price ;
              $currency_symbol = get_woocommerce_currency_symbol();

              $percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
              ?>
              <p><b>Vous économisez : <?php echo number_format($amount_saved,2, '.', '')." ("". number_format($percentage,0, '', '')."%)" ; ?></b></p>						
              <?php		
        }
   }
}

add_action( 'woocommerce_single_product_summary', 'ts_you_save', 11 );

La fonction number_format est une fonction PHP intégrée qui accepte 4 arguments :

1. Le nombre ou dans notre cas, le montant économisé et le pourcentage respectivement (nous avons utilisé la fonction deux fois).
2. Nombre de décimales. Nous l'avons défini sur 2 pour le montant épargné et sur 0 pour le pourcentage car nous ne souhaitons pas afficher de valeurs décimales pour le pourcentage.
3. Le séparateur décimal que vous souhaitez utiliser. Nous l'avons défini sur un point (.) pour le montant enregistré et une valeur vide pour le pourcentage.
4. Le séparateur de milliers. Si le montant enregistré dépasse 1000, vous pouvez utiliser cet argument. Nous l'avons mis à vide pour le moment.

Le montant économisé ainsi que le pourcentage seront désormais affichés sous le prix :

Comment afficher votre % d'économie en dessous des prix de vente pour des produits variables

En ce qui concerne les produits variables, cela devient délicat car chaque variation du produit peut avoir un prix différent. Par exemple, un t-shirt peut être plus cher pour une taille plus grande alors que le prix peut être plus bas pour le même t-shirt dans une taille plus petite. Dans de tels cas, WooCommerce affiche la fourchette de prix de vente sous le titre du produit, tandis que les prix réguliers et de vente de chaque variante du produit sont affichés au-dessus du bouton Ajouter au panier lorsque la variante est sélectionnée. Ceci a été illustré par les images ci-dessous :

Dans ce cas, nous imprimerons le texte "Vous économisez" avec le pourcentage économisé sous le prix affiché pour la variation particulière. Vous devrez ajouter des extraits de code aux fichiers functions.php et footer.php de votre thème enfant .

L'extrait de code suivant que vous ajouterez dans le fichier footer.php contient une fonction qui se déclenche lorsque la variante est modifiée. Dans notre cas, cela se déclenche lorsque la variation de taille est sélectionnée ou modifiée à l'aide du menu déroulant Taille. Cette fonction capture l'identifiant de variation particulier et l'envoie à functions.php via un appel ajax.

 <script>
jQuery(document).ready(fonction($) {
             
  $('input.variation_id').change( fonction(){
    	
    if( '' != $('input.variation_id').val() ) {
                     
        	        var var_id = $('input.variation_id').val(); // Votre identifiant de variation sélectionné
      $.ajax({
        URL : "https://<your_woocommerce_site_url>/wp-admin/admin-ajax.php",
        		        données : {'action':'ts_calc_percentage_saved','vari_id' : var_id} ,
        		        succès : fonction (données) {

              si (données>0)
          {
            $( ".woocommerce-variation-price" ).append( "<p>Vous économisez : "+data+"%</p>");
          }
        		         },
        		        erreur : fonction(errorThrown){
           			        console.log(errorThrown);
        		         }
    		        });                       
          }
   });
});
</script>

Vous devez remplacer <your_woocommerce_site_url> par l'URL de base de votre site Web WooCommerce.

L'extrait de code suivant que vous ajouterez dans le fichier functions.php contient une fonction ts_calc_percentage_saved qui récupère le prix normal et le prix de vente du produit en fonction de l'identifiant de variation, calcule le pourcentage et renvoie le même à la fonction ajax dans le pied de page. fichier php.

 //C'est ainsi que vous accrochez une fonction appelée par ajax, dans WordPress
add_action("wp_ajax_ts_calc_percentage_saved", "ts_calc_percentage_saved");

//La fonction ci-dessous est appelée via un script ajax dans footer.php
fonction ts_calc_percentage_saved(){
          // Le $_REQUEST contient toutes les données envoyées via ajax
   		si ( isset($_REQUEST) ) {
       		        $pourcentage=0 ;
     			$variation_id = sanitize_text_field($_REQUEST['vari_id']);
                        $variable_product = wc_get_product($variation_id);
                        $regular_price = $variable_product->get_regular_price();
                        $vente_prix = $variable_product->get_vente_prix();
     
       			if( !empty($sale_price) ) {
  
                             $amount_saved = $regular_price - $sale_price ;
                             $currency_symbol = get_woocommerce_currency_symbol();

                             $percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
     			}
     			die($pourcentage);
   		}
}

La fonction sanitize_text_field() est une fonction WordPress qui aide à assainir les entrées que nous recevons du côté client.

Ainsi, vous verrez maintenant "Vous économisez", ainsi que le pourcentage du montant économisé, sous le prix de la variation.

Vous pouvez le styler comme vous le souhaitez, dans la fonction ajax elle-même, en ajoutant HTML et CSS dans la fonction append sur cette ligne :

$( ".woocommerce-variation-price" ).append( "<p>Vous économisez : "+data+"%</p>");

Affichez votre % d'économie sous le titre du produit au lieu d'au-dessus du bouton Ajouter au panier pour les produits variables

Si vous le souhaitez, vous pouvez afficher le texte Vous économisez avec le pourcentage enregistré sous le titre du produit au lieu d'au-dessus du bouton "Ajouter au panier" en ajoutant quelques extraits de code supplémentaires à ceux mentionnés ci-dessus.

Ce morceau de code doit être ajouté au fichier functions.php de votre thème enfant, en plus des extraits de code mentionnés ci-dessus (dans les fichiers footer.php et functions.php).

 //Le code ci-dessous est de changer le prix

fonction ts_shuffle_variable_product_elements(){
    si ( est_produit() ) {
        global $post ;
        $product = wc_get_product( $post->ID );
        if ( $product->is_type( 'variable' ) ) {
            remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_single_variation', 20 );

            remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_title', 10 );

            remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_excerpt', 30 );
        }
    }
}
add_action( 'woocommerce_before_single_product', 'ts_shuffle_variable_product_elements' );

Ce que fait essentiellement ce code est de supprimer les éléments (y compris le titre) et de les réorganiser comme vous le souhaitez. Le résultat est que la fourchette de prix est supprimée et que le prix de la variation s'affiche lorsque vous sélectionnez une variation, ainsi que le texte Vous enregistrez en dessous, comme illustré :