Jak sformatować ceny WooCommerce

Ze względu na projekt, prezentację lub zachowanie spójności z tematyką sklepu lub marki, często możemy chcieć wyświetlać nasze ceny w różnych formatach. W tym poście dowiesz się, jak formatować ceny WooCommerce za pomocą opcji Ustawienia oraz Edytora kodu.

Post obejmuje następujące trzy punkty:

1. Wymiana separatorów dziesiętnych
2. Wymiana tysiąca separatorów
3. Formatowanie cen w celu zastosowania stylów, takich jak pogrubienie, kursywa lub podkreślenie

1. Wymiana separatorów dziesiętnych:

Często w cenach produktów mogą znajdować się wartości dziesiętne. Jest to dość powszechne w przypadku internetowego sklepu spożywczego, gdzie ceny ustalane są na podstawie wagi warzyw:

W wielu krajach separator dziesiętny jest reprezentowany przez kropkę (.). Jednak nie dotyczy to wielu innych krajów, takich jak Hiszpania, RPA, Brazylia, Szwecja, Chiny i 70 innych krajów, w których separatorem dziesiętnym jest przecinek.

Kraje takie jak Brazylia używają kropki (.) do oddzielania tysięcy. Na przykład dwanaście tysięcy pięćset jest zapisane nie jako „12 500”, ale jako „12 500” lub nawet „12 500”.

W związku z tym, projektując sklep dla określonej grupy odbiorców lub narodowości, ceny muszą być wyświetlane w inny sposób. Zobaczymy, jak w WooCommerce możemy zastąpić kropki dziesiętne przecinkami lub spacjami.

Można to zrobić na dwa sposoby – bezpośrednio przez Ustawienia WooCommerce lub przez edytor kodu.
Zmiana separatora dziesiętnego w ustawieniach WooCommerce
Najedź myszą na etykietę WooCommerce na pulpicie WordPress i kliknij Ustawienia. W WooCommerce->Ustawienia zakładka Ogólne pokazuje następujące elementy podczas przewijania w dół:

Tutaj możesz zmienić wartość „Separatora dziesiętnego” z „.” do ","

Wykonanie tego i kliknięcie „Zapisz zmiany” spowoduje wyświetlenie przecinka dziesiętnego:

W ten sposób możesz użyć dowolnego wybranego separatora.
Zmiana separatora dziesiętnego za pomocą edytora kodu
Podczas gdy WooCommerce zapewnia bezpośredni sposób zmiany separatora dziesiętnego, nauka tego za pomocą kodu jest przydatna. W tym przykładzie pokażemy, jak zamienić kropkę dziesiętną na spację za pomocą edytora kodu.

Jest mały fragment kodu, który możesz wstawić do pliku functions.php motywu potomnego, aby to zrobić. (Aby dowiedzieć się, dlaczego edytujemy functions.php motywu potomnego, a nie bezpośrednio plik functions.php, przeczytaj ten post.)

Fragment kodu:

 add_filter( 'wc_price', 'woo_hide_decimal_point', 10, 4 );
function woo_hide_decimal_point( $return, $price, $args, $unformatted_price ) {
$jednostka = intval( $cena );
$decimal = sprintf( '%02d', ( $cena-$jednostka ) * 100 );
return sprintf( '%s %d %s', get_woocommerce_currency_symbol(), $unit, $decimal );
}

W rezultacie kropka dziesiętna jest usuwana i zastępowana spacją:

Uwaga: kod będzie działał tylko po ustawieniu separatora dziesiętnego na „.” w WooCommerce->Ustawienia.

Możesz zastąpić spację przecinkiem w podobny sposób, zmieniając nieznacznie kod.

 add_filter( 'wc_price', 'woo_replace_decimal_point', 10, 4 );
function woo_replace_decimal_point( $return, $price, $args, $unformatted_price ) {
$jednostka = intval( $cena );
$decimal = sprintf( '%02d', ( $cena-$jednostka ) * 100 );
return sprintf( '%s %d,%s', get_woocommerce_currency_symbol(), $jednostka, $dziesiętna );
} 

Dlaczego lepiej jest używać fragmentów kodu zamiast WooCommerce->Ustawienia, aby zastąpić separator dziesiętny:

Używanie edytora kodu w przeciwieństwie do WooCommerce->Ustawienia do zastępowania miejsc dziesiętnych ma wiele zalet.

Jednym z nich jest to, że możesz sformatować cenę tak, jak chcesz. Jeśli zauważysz na powyższym obrazku, cena ma spację po symbolu waluty. Tego miejsca brakuje na pierwszym zrzucie ekranu tego postu, w którym kropka dziesiętna została zastąpiona przez WooCommerce->Ustawienia.

Kolejną zaletą jest to, że chcesz, aby te zmiany zostały wprowadzone tylko dla określonego produktu, a nie wszystkich produktów w Twoim sklepie. Korzystanie z edytora kodu zapewnia taką elastyczność.

Korzystając z fragmentów kodu, możesz również wyświetlać część dziesiętną ceny w różnych stylach, wstawiając znaczniki HTML, takie jak <b>,<u>,<i>,<sup>,<sub> i wiele innych.

Przykład: dodanie podkreślenia do części dziesiętnej ceny.

 add_filter( 'wc_price', 'woo_format_decimal_value', 10, 4 ); 
function woo_format_decimal_value( $return, $price, $args, $unformatted_price ) { 
$jednostka = intval( $cena ); 
$decimal = sprintf( '%02d', ( $cena-$jednostka ) * 100 ); 
return sprintf( '%s %d.<u>%s</u>', get_woocommerce_currency_symbol(), $unit, $decimal ); 
}

Powyższy fragment kodu, po wstawieniu do pliku functions.php motywu potomnego, dodaje podkreślenie do części dziesiętnej ceny:

W ten sam sposób możesz używać innych znaczników HTML. Jeśli chcesz wiedzieć, jak wyświetlić wartość dziesiętną jako indeks górny lub dolny, przeczytaj ten post.

2. Wymiana tysiąca separatorów:

Podobnie jak separatory dziesiętne są wyświetlane inaczej w niektórych krajach, tak jest w przypadku separatorów tysięcy.

Na przykład w krajach takich jak Brazylia, RPA czy Hiszpania separatory tysięcy są oznaczone spacją lub kropką/punktem. W tych krajach trzynaście tysięcy pięćset można zapisać jako 13 500 lub 13.500

Kiedy projektujesz swój sklep dla tych odbiorców, musisz upewnić się, że odpowiednio edytujesz separator tysięcy.

Podobnie jak separatory dziesiętne, można to zrobić na dwa sposoby, za pomocą WooCommerce->Ustawienia lub za pomocą edytora kodu.
Zmiana tysiąca separatora w ustawieniach WooCommerce
Najedź myszą na etykietę WooCommerce na pulpicie WordPress i kliknij Ustawienia. W WooCommerce->Ustawienia zakładka Ogólne pokazuje następujące elementy podczas przewijania w dół:

Zmiana wartości w polu tekstowym Separator tysięcy na spację zamiast przecinka („,”) zmieni sposób wyświetlania separatora tysięcy. Zauważ, że musisz wpisać spację w tym polu. Proste wymazanie przecinka nie spowoduje zmiany separatora tysięcy na spację.

Kliknij „Zapisz zmiany” i zobacz produkt:

Widać, że w miejscu separatora tysięcy jest teraz spacja.

Aby uniknąć nieporozumień, możesz ustawić miejsca dziesiętne jako „0” za pomocą WooCommerce->Ustawienia dla cen, w których nie ma wartości dziesiętnej:

Po wprowadzeniu liczby dziesiętnych tutaj jako „0”, kliknij „Zapisz zmiany” i ponownie wyświetl produkt:

Zmiana tysiąca separatora za pomocą edytora kodu

Podobnie możemy zmienić separator tysięcy za pomocą fragmentów kodu. Jak wspomniano powyżej w sekcji dotyczącej separatora dziesiętnego, korzystanie z edytora kodu zawsze ma więcej zalet, ponieważ możemy dostosować lub stylizować cenę tak, jak chcemy, a nawet dla konkretnego produktu, jeśli nie dla całego sklepu.

Spróbujmy teraz zmienić separator tysięcy na kropkę (.) za pomocą fragmentu kodu.

Uwaga: Warunkiem wstępnym jest pozostawienie pustego pola separatora tysięcy w WooCommerce->Ustawienia. Brak spacji.

 add_filter( 'wc_price', 'woo_format_tysiąc_separator', 10, 4 ); 
funkcja woo_format_thousand_separator( $zwrot, $cena, $args, $niesformatowana_cena) 
{ 
  $formatted_price=number_format($cena,0,' ','.'); 
  return sprintf( '%s %s', get_woocommerce_currency_symbol(), $formatted_price); 
}

Funkcja number_format jest wbudowaną funkcją PHP, która przyjmuje 4 argumenty:

1. Numer lub w naszym przypadku cena.
2. Liczba miejsc po przecinku. Ustawiliśmy go na 0, ponieważ nie chcemy wyświetlać żadnych wartości dziesiętnych.
3. Separator dziesiętny, którego chcesz użyć. Ustawiliśmy to na pustą wartość.
4. Separator tysięcy. Ustawiliśmy to na kropkę (.).

Ten fragment kodu, po dodaniu do pliku functions.php motywu potomnego, wyświetli separator tysięcy jako kropkę lub kropkę (.), jak pokazano na poniższym zrzucie ekranu:

3. Formatowanie cen WooCommerce:

Teraz, gdy wiesz, jak formatować wartości dziesiętne i separatory tysięcy, to samo dotyczy ogólnie cen. Chociaż nie możesz bezpośrednio sformatować tych wartości za pomocą opcji Ustawienia, możesz to zrobić za pomocą Edytora kodu, wprowadzając niewielkie modyfikacje w powyższym kodzie.

Przykład: Zapisanie ceny produktu kursywą.

W domyślnych okolicznościach cena produktu wyświetlana jest w następujący sposób:

A co jeśli chcesz dodać do tego styl, np. napisać kursywą?

Możesz to osiągnąć, wprowadzając niewielkie modyfikacje powyższych fragmentów kodu.

Po prostu skopiuj ten kod do pliku functions.php motywu potomnego:

 add_filter( 'wc_price', 'woo_format_price_italics', 10, 4 ); 
function woo_format_price_italics( $return, $price, $args, $unformatted_price ) { 
$jednostka = intval( $cena ); 
$decimal = sprintf( '%02d', ( $cena-$jednostka ) * 100 ); 
return sprintf( '<i>%s %d.%s</i>', get_woocommerce_currency_symbol(), $unit, $decimal ); 
}

Spowoduje to wyświetlenie ceny wraz z kropką dziesiętną kursywą:

Niewielka zmiana we fragmencie kodu zapobiegnie również wyświetlaniu części dziesiętnej:

 add_filter( 'wc_price', 'woo_format_price_italics', 10, 4 ); 
function woo_format_price_italics( $return, $price, $args, $unformatted_price ) { 
$jednostka = intval( $cena ); 
return sprintf( '<i>%s %d</i>', get_woocommerce_currency_symbol(), $unit); 
}

Jak widzisz, możesz zobaczyć cenę tutaj kursywą, bez części dziesiętnej:

Przestudiowanie fragmentu pozwoli Ci łatwo sformatować ceny WooCommerce na swój własny sposób.