Cum să afișați „Economisiți x%” sub prețurile de vânzare pentru produse simple și variabile în WooCommerce

Știm cu toții cum reducerile atrag clienții și cresc vânzările. Dar să arăți că vinzi un articol la un preț mai mic nu este suficient în zilele noastre, toți comercianții cu amănuntul și site-urile de comerț electronic oferind reduceri în același timp. Când sunt afișate doar prețurile vechi și noi, clientul este lăsat să facă calculul pentru a calcula suma pe care o economisește de fapt. O modalitate mai bună de a gestiona acest lucru este să afișați procentul din suma pe care clientul o economisește atunci când face acea achiziție. Acest lucru le oferă o idee mai bună și o modalitate mai ușoară de a decide dacă să facă acea achiziție. Să vedem cum puteți afișa „Economisiți x%” lângă prețurile de vânzare atât pentru produsele simple, cât și pentru cele variabile în WooCommerce.

Cum să afișați Economisiți % sub prețurile de reducere pentru produse simple

Afișarea procentului din suma economisită este ușoară pentru produsele simple, odată ce prețul obișnuit și de vânzare este cunoscut. În cazuri normale, aceste prețuri pentru un produs simplu sunt afișate după cum urmează:

Adăugarea codului de mai jos la fișierul functions.php al temei copilului dvs. va afișa „Economiseți x%” sub prețul produsului simplu, astfel încât utilizatorul să își facă imediat o idee despre cât de bună sau de proastă este afacerea.

 funcția ts_you_save() {
  
  global $produs;
  
   if( $produs->este_tip('simplu') || $produs->este_tip('extern') || $produs->este_tip('grupat') ) {
      
     	$pret_regulat = get_post_meta( $produs->get_id(), '_pret_regulat', true ); 
        $sale_price = get_post_meta( $produs->get_id(), '_sale_price', true );
     
     	dacă( !gol ($preț_reducere) ) {
  
              $amount_saved = $regular_price - $sale_price;
              $currency_symbol = get_woocommerce_currency_symbol();

              $procent = rotund( ( ( $pret_regulat - $pret_reducere ) / $pret_regular ) * 100 );
              ?>
              <p><b>Salvezi: <?php echo number_format($percentage,0, '', '').'%'; ?></b></p>				
              <?php		
        }
   }
}

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

În acest fragment de cod, am adăugat o funcție ts_you_save() la cârligul WooCommerce încorporat woocommerce_single_product_summary , care indică zona de sub titlul produsului. Funcția ts_you_save() identifică tipul produsului și calculează procentul sumei salvate dacă produsul este la vânzare. Adăugând niște CSS, puteți imprima acest lucru în modul în care doriți:

Dacă doriți să afișați suma salvată împreună cu procentul, puteți modifica puțin același fragment de cod în felul următor:

 funcția ts_you_save() {
  
  global $produs;
  
   if( $produs->este_tip('simplu') || $produs->este_tip('extern') || $produs->este_tip('grupat') ) {
      
     	$pret_regulat = get_post_meta( $produs->get_id(), '_pret_regulat', true ); 
        $sale_price = get_post_meta( $produs->get_id(), '_sale_price', true );
     
     	dacă( !gol ($preț_reducere) ) {
  
              $amount_saved = $regular_price - $sale_price;
              $currency_symbol = get_woocommerce_currency_symbol();

              $procent = rotund( ( ( $pret_regulat - $pret_reducere ) / $pret_regular ) * 100 );
              ?>
              <p><b>Salvezi: <?php echo number_format($amount_saved,2, '.', '')." (". number_format($percentage,0, '', '')."%)" ; ?></b></p>						
              <?php		
        }
   }
}

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

Funcția number_format este o funcție PHP încorporată care acceptă 4 argumente:

1. Numărul sau, în cazul nostru, suma salvată și respectiv procentul (am folosit funcția de două ori).
2. Numărul de zecimale. L-am setat la 2 pentru suma salvată și la 0 pentru procent, deoarece nu dorim să afișăm nicio valoare zecimală pentru procent.
3. Separatorul zecimal pe care doriți să îl utilizați. Am setat acest lucru la un punct (.) pentru suma salvată și o valoare goală pentru procent.
4. Separatorul de mii. Dacă suma salvată depășește 1000, puteți folosi acest argument. L-am setat la gol în prezent.

Suma salvată, precum și procentul vor fi acum afișate sub preț:

Cum să afișați Economisiți % sub prețurile de vânzare pentru produse variabile

Când vine vorba de produse variabile, acest lucru devine dificil, deoarece fiecare variație a produsului poate avea un preț diferit. De exemplu, un tricou poate avea un preț mai mare pentru o dimensiune mai mare, în timp ce prețul poate fi mai mic pentru același tricou la o dimensiune mai mică. Pentru astfel de cazuri, WooCommerce afișează intervalul de prețuri de vânzare sub titlul produsului, în timp ce prețurile obișnuite și de vânzare ale fiecărei variante a produsului sunt afișate deasupra butonului Adaugă în coș atunci când varianta este selectată. Acest lucru a fost ilustrat de imaginile de mai jos:

În acest caz, vom tipări textul „Tu economisești” împreună cu procentul salvat sub prețul afișat pentru varianta respectivă. Va trebui să adăugați fragmente de cod atât în ​​fișierele functions.php , cât și în fișierele footer.php ale temei copilului dumneavoastră.

Următorul fragment de cod pe care îl veți adăuga în fișierul footer.php conține o funcție care este declanșată atunci când variația este modificată. În cazul nostru, acest lucru este declanșat atunci când variația de dimensiune este selectată sau modificată folosind meniul derulant Dimensiune. Această funcție captează id-ul specific al variației și îl trimite la functions.php printr-un apel ajax.

 <script>
jQuery(document).ready(funcție($) {
             
  $('input.variation_id').change( function(){
    	
    if( '' != $('input.variation_id').val() ) {
                     
        	        var var_id = $('input.variation_id').val(); // Id-ul variantei selectate de dvs
      $.ajax({
        url: „https://<your_woocommerce_site_url>/wp-admin/admin-ajax.php”,
        		        date: {'action':'ts_calc_percentage_saved','vari_id': var_id} ,
        		        succes: function(data) {

              dacă (date>0)
          {
            $( ".woocommerce-variation-price" ).append( "<p>Salvezi: "+date+"%</p>");
          }
        		         },
        		        eroare: function(errorThrown){
           			        console.log(errorThrown);
        		         }
    		        });                       
          }
   });
});
</script>

Trebuie să înlocuiți <your_woocommerce_site_url> cu adresa URL de bază a site-ului dvs. WooCommerce.

Următorul fragment de cod pe care îl veți adăuga în fișierul functions.php conține o funcție ts_calc_percentage_saved care preia prețul obișnuit și prețul de vânzare al produsului pe baza id-ului variației, calculează procentul și returnează același lucru la funcția ajax din subsol. fișier php.

 //Așa agățați o funcție numită de ajax, în WordPress
add_action("wp_ajax_ts_calc_percentage_saved", "ts_calc_percentage_saved");

//Funcția de mai jos este apelată printr-un script ajax în footer.php
funcția ts_calc_percentage_saved(){
          // $_REQUEST conține toate datele trimise prin ajax
   		if ( isset($_REQUEST) ) {
       		        $procent=0;
     			$variation_id = sanitize_text_field($_REQUEST['vari_id']);
                        $variable_product = wc_get_product($variation_id);
                        $pret_regulat = $produs_variabil->get_pret_regulat();
                        $pret_de_reducere = $produs_variabil->obtineti_pret_de_reducere();
     
       			dacă( !gol ($preț_reducere) ) {
  
                             $amount_saved = $regular_price - $sale_price;
                             $currency_symbol = get_woocommerce_currency_symbol();

                             $procent = rotund( ( ( $pret_regulat - $pret_reducere ) / $pret_regular ) * 100 );
     			}
     			die($procent);
   		}
}

Funcția sanitize_text_field() este o funcție WordPress care ajută la igienizarea intrărilor pe care le primim din partea clientului.

Astfel, veți vedea acum „Economisiți”, împreună cu procentul sumei economisite, sub prețul variației.

Puteți stila acest lucru oricum doriți, în cadrul funcției ajax în sine, adăugând HTML și CSS în funcția de adăugare pe această linie:

$( „.woocommerce-variation-price” ).append( „<p>Salvezi: „+date+”%</p>”);

Afișați % economisiți sub titlul produsului în loc de deasupra butonului Adaugă în coș pentru produse variabile

Dacă doriți, puteți afișa textul Salvați împreună cu procentul salvat sub titlul produsului în loc de deasupra butonului „Adăugați în coș”, adăugând mai multe fragmente de cod la cele menționate mai sus.

Această bucată de cod ar trebui adăugată la fișierul functions.php al temei copilului, în plus față de fragmentele de cod menționate mai sus (în fișierele footer.php și functions.php).

 //Codul de mai jos este pentru a schimba prețul

funcția ts_shuffle_variable_product_elements(){
    dacă ( este_produs() ) {
        global $post;
        $produs = wc_get_product( $post->ID );
        if ( $produs->este_tip('variabilă') ) {
            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');

Ceea ce face acest cod în esență este să elimine elementele (inclusiv titlul) și să le rearanjați așa cum doriți. Rezultatul este că intervalul de preț este șters și prețul variației este afișat atunci când selectați o variație, împreună cu textul Salvați de sub ea, așa cum este ilustrat: