Cum se formatează prețurile WooCommerce

Din motive de design, prezentare sau pentru a fi în concordanță cu tema magazinului sau a mărcii, este posibil să dorim adesea să ne afișam prețurile în diferite formate. În această postare, veți învăța cum să formatați prețurile WooCommerce folosind opțiunea Setări, precum și Editorul de cod.

Postarea acoperă următoarele trei puncte:

1. Înlocuirea separatoarelor zecimale
2. Înlocuirea miilor de separatoare
3. Formatarea prețurilor pentru a aplica stiluri precum aldine, cursive sau subliniere

1. Înlocuirea separatoarelor zecimale:

Adesea, este posibil să aveți valori zecimale în prețurile produselor dvs. Acest lucru este destul de comun în cazul unui magazin alimentar online unde prețurile sunt determinate de greutatea legumelor:

În multe țări, separatorul zecimal este reprezentat de un punct (.). Cu toate acestea, acest lucru nu este valabil pentru multe alte țări, cum ar fi Spania, Africa de Sud, Brazilia, Suedia, China și alte 70 de țări în care separatorul zecimal este o virgulă.

Țări precum Brazilia folosesc punctul (.) pentru a separa uneori mii. De exemplu, douăsprezece mii cinci sute nu se scrie „12.500”, ci „12.500” sau chiar „12.500”.

Prin urmare, prețurile trebuie afișate diferit atunci când proiectați un magazin pentru un anumit public sau naționalitate. Vom vedea cum putem înlocui punctele zecimale cu virgule sau spații în WooCommerce.

Există două moduri de a face acest lucru - fie direct prin Setări WooCommerce, fie prin editorul de cod.
Schimbarea separatorului zecimal prin Setările WooCommerce
Treceți mouse-ul peste eticheta WooCommerce din tabloul de bord WordPress și faceți clic pe Setări. În WooCommerce->Setări, fila General arată următoarele pe măsură ce derulați în jos:

Aici, puteți schimba valoarea „Separator zecimal” din „.” la ","

Făcând acest lucru și făcând clic pe „Salvare modificări” se va afișa punctul zecimal sub formă de virgulă:

În acest fel, puteți folosi orice separator la alegere.
Schimbarea separatorului zecimal prin editorul de cod
În timp ce WooCommerce oferă o modalitate directă de a schimba separatorul zecimal, este util să înveți să faci acest lucru prin cod. În acest exemplu, vom demonstra cum să înlocuim punctul zecimal cu un spațiu folosind editorul de cod.

Există un mic fragment de cod pe care îl puteți insera în fișierul functions.php al temei copilului pentru a face exact acest lucru. (Pentru a ști de ce edităm funcțiile.php ale temei copil și nu direct fișierul functions.php, citiți această postare.)

Fragment de cod:

 add_filter( 'wc_price', 'woo_hide_decimal_point', 10, 4 );
funcția woo_hide_decimal_point( $retur, $preț, $args, $neformatted_price ) {
$unitate = intval( $pret );
$zecimal = sprintf( '%02d', ( $pret-$unitate) * 100 );
return sprintf( '%s %d %s', get_woocommerce_currency_symbol(), $unitate, $zecimal );
}

Și rezultatul este că punctul zecimal este eliminat și înlocuit cu un spațiu:

Notă: Codul va funcționa numai după ce setați separatorul zecimal la un „.” în WooCommerce->Setări.

Puteți înlocui spațiul cu o virgulă într-un mod similar, schimbând doar puțin codul.

 add_filter( 'wc_price', 'woo_replace_decimal_point', 10, 4 );
funcția woo_replace_decimal_point( $retur, $preț, $args, $neformatted_price ) {
$unitate = intval( $pret );
$zecimal = sprintf( '%02d', ( $pret-$unitate) * 100 );
return sprintf( '%s %d,%s', get_woocommerce_currency_symbol(), $unitate, $zecimal );
} 

De ce este mai bine să folosiți fragmente de cod peste WooCommerce->Setări pentru a înlocui separatorul zecimal:

Folosirea editorului de cod spre deosebire de WooCommerce->Settings pentru a înlocui punctele zecimale are multe avantaje.

Una este că puteți forma prețul așa cum doriți. Dacă observați în imaginea de mai sus, prețul are un spațiu după simbolul monedei. Acest spațiu lipsește în prima captură de ecran a acestei postări în care punctul zecimal a fost înlocuit prin WooCommerce->Setări.

Un alt avantaj este atunci când doriți ca aceste modificări să fie făcute doar pentru un anumit produs și nu pentru toate produsele magazinului dvs. Utilizarea editorului de cod vă oferă această flexibilitate.

Folosind fragmente de cod, puteți afișa și porțiunea zecimală a prețului în diferite stiluri, inserând etichete HTML, cum ar fi <b>,<u>,<i>,<sup>,<sub> și multe altele.

Exemplu: adăugarea unei subliniere la porțiunea zecimală a prețului.

 add_filter( 'wc_price', 'woo_format_decimal_value', 10, 4 ); 
funcția woo_format_decimal_value( $retur, $preț, $args, $neformatted_price ) { 
$unitate = intval( $pret ); 
$zecimal = sprintf( '%02d', ( $pret-$unitate) * 100 ); 
return sprintf( '%s %d.<u>%s</u>', get_woocommerce_currency_symbol(), $unit, $zecimal ); 
}

Fragmentul de cod de mai sus, când este introdus în fișierul functions.php al temei copil, adaugă o subliniere la porțiunea zecimală a prețului:

Puteți utiliza alte etichete HTML în același mod. Dacă doriți să știți cum puteți afișa valoarea zecimală ca superscript sau indice, citiți această postare.

2. Înlocuirea miilor de separatoare:

La fel cum separatoarele zecimale sunt afișate diferit în unele țări, așa este și cazul separatorilor de mii.

De exemplu, în țări precum Brazilia, Africa de Sud sau Spania, separatoarele de mii sunt notate cu un spațiu sau un punct/punct. În aceste țări, treisprezece mii cinci sute ar putea fi scrise ca 13 500 sau 13.500

Când vă proiectați magazinul pentru acest public, trebuie să vă asigurați că editați separatorul de mii în consecință.

La fel ca separatori zecimale, există două moduri de a face acest lucru, fie prin WooCommerce->Setări, fie prin editorul de cod.
Schimbarea Separatorului Miilor prin Setările WooCommerce
Treceți mouse-ul peste eticheta WooCommerce din tabloul de bord WordPress și faceți clic pe Setări. În WooCommerce->Setări, fila General arată următoarele pe măsură ce derulați în jos:

Schimbarea valorii din caseta de text Separator de mii într-un spațiu în loc de virgulă (","), va schimba modul în care este afișat separatorul de mii. Rețineți că trebuie să introduceți un spațiu în această casetă. Simpla ștergere a virgulei nu va duce la schimbarea separatorului de mii într-un spațiu.

Faceți clic pe „Salvați modificările” și vizualizați produsul:

Puteți vedea că acum există un spațiu în locul separatorului de mii.

Pentru a evita orice confuzie, puteți seta zecimale ca „0” prin WooCommerce->Setări pentru prețuri în care nu există o valoare zecimală:

După ce ați introdus numărul de zecimale aici ca „0”, faceți clic pe „Salvați modificările” și vizualizați din nou produsul:

Schimbarea Separatorului de Mii prin editorul de cod

În mod similar, putem schimba separatorul de mii folosind fragmente de cod. După cum am menționat mai sus în secțiunea separator zecimal, folosirea editorului de cod are întotdeauna mai multe avantaje, deoarece putem personaliza sau stila prețul așa cum ne dorim și chiar și pentru un anumit produs, dacă nu întregul magazin.

Să încercăm acum să schimbăm separatorul de mii într-un punct (.) folosind un fragment de cod.

Notă: O condiție prealabilă pentru aceasta este că trebuie să lăsați caseta de separare a miilor goală în WooCommerce->Setări. Nici spații.

 add_filter( 'wc_price', 'woo_format_thousand_separator', 10, 4 ); 
funcția woo_format_thousand_separator( $retur, $preț, $args, $neformatted_price) 
{ 
  $pret_formatat=format_numar($pret,0,' ','.'); 
  return sprintf('%s %s', get_woocommerce_currency_symbol(), $formatted_price); 
}

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

1. Numărul sau în cazul nostru, prețul.
2. Numărul de zecimale. L-am setat la 0 deoarece nu dorim să afișăm valori zecimale.
3. Separatorul zecimal pe care doriți să îl utilizați. Am setat aceasta la o valoare goală.
4. Separatorul de mii. Am setat acest lucru la un punct (.).

Acest fragment de cod, atunci când este adăugat la fișierul functions.php al temei copilului dvs., va afișa separatorul de mii ca punct sau punct (.), așa cum este ilustrat în captura de ecran de mai jos:

3. Formatarea prețurilor WooCommerce:

Acum că știți cum să formatați valorile zecimale și separatorii de mii, același lucru este valabil și pentru prețuri în general. Deși nu puteți formata direct aceste valori folosind opțiunea Setări, puteți face acest lucru utilizând Editorul de coduri făcând ușoare modificări codului de mai sus.

Exemplu: Scrierea prețului produsului cu caractere cursive.

În circumstanțe implicite, prețul produsului este afișat după cum urmează:

Ce se întâmplă dacă doriți să adăugați un stil la aceasta, de exemplu, scrieți-l cu caractere cursive?

Puteți realiza acest lucru făcând ușoare modificări la fragmentele de cod de mai sus.

Doar copiați acest cod în fișierul functions.php al temei copilului dvs.:

 add_filter( 'wc_price', 'woo_format_price_italics', 10, 4 ); 
funcția woo_format_price_italics( $retur, $preț, $args, $neformatted_price ) { 
$unitate = intval( $pret ); 
$zecimal = sprintf( '%02d', ( $pret-$unitate) * 100 ); 
return sprintf( '<i>%s %d.%s</i>', get_woocommerce_currency_symbol(), $unit, $zecimal ); 
}

Procedând astfel, prețul, împreună cu punctul zecimal, va fi afișat cu caractere cursive:

O ușoară modificare a fragmentului de cod va împiedica, de asemenea, afișarea porțiunii zecimale:

 add_filter( 'wc_price', 'woo_format_price_italics', 10, 4 ); 
funcția woo_format_price_italics( $retur, $preț, $args, $neformatted_price ) { 
$unitate = intval( $pret ); 
return sprintf( '<i>%s %d</i>', get_woocommerce_currency_symbol(), $unit); 
}

După cum puteți vedea, puteți vizualiza prețul cu caractere cursive aici, fără porțiunea zecimală:

Studierea fragmentului vă va permite să formatați cu ușurință prețurile WooCommerce în felul dumneavoastră.