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

Publicat: 2019-04-03

Ș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ă:

display “You Save x%” below sale prices for simple and variable products in WooCommerce - Default simple product page
Afișarea implicită a unui produs simplu la vânzare

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:

display “You Save x%” below sale prices for simple and variable products in WooCommerce - You Save Percentage Displayed for a Simple Product
Afișarea „Economisiți %” sub prețul de vânzare al unui produs simplu

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ț:

display “You Save x%” below sale prices for simple and variable products in WooCommerce - You Save Amount and Percentage Displayed for a Simple Product
Afișarea „Economisiți %” cu o sumă sub prețul de vânzare al unui produs simplu

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:

display “You Save x%” below sale prices for simple and variable products in WooCommerce - Variable Product with Variation Selected
Selectarea variantelor unui produs variabil la vânzare având prețuri diferite în funcție de diferite variații

Î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.

display “You Save x%” below sale prices for simple and variable products in WooCommerce - Variable Product with You Save Percentage Displayed below the Variation Price
Afișarea „Economisiți %” sub prețul variației atunci când o variantă este selectată din meniul drop-down.

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:

display “You Save x%” below sale prices for simple and variable products in WooCommerce - Variable Product with Variation Price and You Save Percentage Displayed below the Product Title
Afișarea prețului variației și „Economisiți %” sub titlul produsului atunci când este selectată o variație din meniul drop-down.