Z tego artykułu dowiesz się jak poprawnie zmienić treść przycisku Dodaj do koszyka, który widoczny jest w archiwum produktów oraz na stronie z pojedynczym produktem.
Zmiana tekstu tego przycisku możliwa jest na dwa sposoby. Możemy użyć do tego wtyczki, dzięki której dodamy własny kod php lub utworzymy Child Theme naszego motywu i zrobimy to, umieszczając ten sam kod w pliku functions.php motywu potomnego.
Co to jest motyw potomny, jak go stworzyć, do czego go używamy, co dzięki niemu zyskujemy opisuję dosyć szczegółowo w innym artykule na moim blogu. Sprawdź: Co to jest motyw potomny i jak go stworzyć?
Sposób pierwszy – kod w pliku functions.php motywu potomnego
Edytujemy plik functions.php i na końcu dodajemy poniższy kod:
/**
* Change Add to cart text on single product page
*/
function mhs_woocommerce_custom_single_add_to_cart_text() {
return esc_html__( 'Kupuję!', '_themename' );
}
add_filter( 'woocommerce_product_single_add_to_cart_text', 'mhs_woocommerce_custom_single_add_to_cart_text' );
/**
* Change Add to cart text on product archives page
*/
function mhs_woocommerce_custom_product_add_to_cart_text() {
return esc_html__( 'Kupuję!', '_themename' );
}
add_filter( 'woocommerce_product_add_to_cart_text', 'mhs_woocommerce_custom_product_add_to_cart_text' ); Na różnych stronach można znaleźć bardzo podobny kod, lecz nie do końca jest on bezpieczny. Ktoś wrzucił kod, który działa, ale moim zdaniem nie do końca jest on bezpieczny i wymaga pewnych modyfikacji.
Przykłady z internetu
W większości przykładów z internetu do zwracania tekstu użyto funkcji __( 'treść przycisku', 'woocommerce' ), co oczywiście zadziała, ale nie jest dobrym rozwiązaniem. Są dwa powody, dla których moim zdaniem nie jest to właściwy sposób.
Po pierwsze – zła funkcja internalizacji.
Dzięki internalizacji mamy możliwość przetłumaczenia naszego motywu lub wtyczki na inne języki. W tym przypadku: __( 'treść przycisku', 'woocommerce' ) tekst treść przycisku będziemy mogli przetłumaczyć na inne języki. Problem w tym, że używając funkcji __() do tłumaczenia, będzie możliwość użycia w tłumaczeniu języka html, który może w niepowołanych rękach popsuć naszą stronę. Może być użyty do złych celów. Na przykład do uruchomienia jakiegoś skryptu. Dlatego dużo lepszym rozwiązaniem będzie użycie bardziej restrykcyjnej funkcji do tłumaczenia, którą jest esc_html__(). Dzięki tej funkcji, wszystkie tagi html zostaną zamienione na zwykły tekst i wyświetlone na stronie.
Dla przykładu jeśli ktoś zmieni nasze tłumaczenie z treść przycisku na <strong>treść przycisku</strong>, to na stronie wyświetli się pogrubiony napis treść przycisku. Natomiast jeśli do powyższego przykładu użyjemy funkcji esc_html__(), to na stronie zamiast pogrubionego tekstu pojawi nam się po prostu tekst <strong>treść przycisku</strong>.
Po drugie – niewłaściwy identyfikator (text domain).
Co to jest text domain? Jest to unikalny identyfikator danego motywu lub wtyczki, który jest wykorzystywany przez WordPressa do rozróżnienia wszystkich załadowanych tłumaczeń. Dzięki temu CMS wie, że tłumaczenie o danym identyfikatorze dotyczy konkretnej wtyczki lub motywu.
Teraz, dlaczego nasz text domain powinien być inny niż woocommerce? Ponieważ, woocommerce jest to identyfikator przypisany do wtyczki WooCommerce. Czyli w tym momencie chcemy, tak jakby podpiąć nasze tłumaczenie, jako oryginalne tłumaczenie pochodzące bezpośrednio od wtyczki, co moim zdaniem nie jest do końca w porządku. To przecież dzięki naszemu motywowi potomnemu ten tekst zostanie zmieniony i powinno to być przypisane do naszego identyfikatora motywu. To od niego pochodzi funkcja, która tłumaczy ten tekst. Dlatego w powyższym kodzie zamień fragment '_themename' na 'twój-identyfikator-motywu-potomnego', Twój text domain przypisany do motywu potomnego.
Sposób drugi – wtyczka
Wyszukujemy i instalujemy wtyczkę (Code Snippetst), o której już kiedyś wspominałem w innym artykule: jak ukryć liczbę produktów przy nazwie kategorii?
Po zainstalowaniu i aktywowaniu wtyczki przechodzimy do Fragmenty kodu -> Dodaj nowy.
Wprowadzamy dowolny tytuł, poniżej wklejamy nasz kod oraz zaznaczamy opcję Wykonuj tylko w interfejsie użytkownika witryny. Pozostałe opcje pozostawiamy bez zmian. Na końcu klikamy Zapisz zmiany i aktywuj.
Jak widać taki sposób również działa.
