Jak zmienić tekst Dodaj do koszyka Poradnik WooCommerce z przykładami

Domyślny tekst dodawania do koszyka WooCommerce jest jedną z najczęstszych zmian potrzebnych większości użytkowników WooCommerce, ponieważ wtyczka eCommerce jest używana we wszystkich branżach. Dostosowanie potrzebne właścicielom sklepów lub usługodawcom WooCommerce to niestandardowa wiadomość na przycisku wezwania do działania zamiast domyślnego tekstu 'add to cart' . Na przykład witryna rezerwacji wycieczek będzie wymagać, aby tekst dodawania do koszyka to „Zarezerwuj wycieczkę” lub „Zarezerwuj wakacje”

Dostosowanie WooCommerce

Potrzebnych jest kilka zmian WooCommerce, aby było to całkowicie niestandardowe rozwiązanie eCommerce. Wcześniej rozmawialiśmy o tym, jak zmienić link powrotu do sklepu, jak przekierować po kasie w WooCommerce, jak wylogować się bez wiadomości potwierdzającej i jak przekierować użytkowników WooCommerce po pomyślnym zalogowaniu, wśród kilku innych potrzeb dostosowywania WooCommerce.

Jeśli szukasz łatwego i szybkiego sposobu na zmianę tekstu dodawania do koszyka w WooCommerce, ten samouczek szybko pokaże Ci krok po kroku. Aby zaoszczędzić czas, chciałbym nakreślić 3 kroki, aby szybko przejrzeć:

Krok po kroku WooCommerce Zmień tekst Dodaj do koszyka

1. Znajdź plik funkcji motywu — znajdź plik function.php motywu (ten plik motywu znajduje się w głównym folderze aktywnego motywu) wp-content/themes/your-theme/functions.php . Alternatywnie ten kod może być dołączony do niestandardowej wtyczki i nadal będzie działać. Ważne jest również, aby pamiętać, aby wykonać kopię zapasową motywu WordPress, zanim zaczniesz wprowadzać jakiekolwiek zmiany. Możesz użyć FTP lub Cpanel hostingu, aby zlokalizować ten plik w aktywnym motywie.
2. Dodaj filtr z nowym tekstem – w tym pliku functions.php dodasz hook filtra, który będzie sprawdzał tekst „dodaj do koszyka” i zastępuje go treścią, którą umieścisz w funkcji zwrotnej. Możesz go zastąpić tekstem takim jak „Zarezerwuj wakacje” w przypadku wakacyjnej witryny internetowej lub „Kup utwór muzyczny” w przypadku witryny muzycznej i tak dalej.
3. Kieruj na przyciski pojedyncze i archiwalne – Po dodaniu kodu do pliku możesz teraz zaktualizować, a zmiana tekstu będzie widoczna w przyciskach dodawania do koszyka. Musisz dodać filtr zarówno dla przycisku Dodaj do koszyka na stronie pojedynczej, jak i archiwum. Teraz pozwól, że zilustruję i szczegółowo wyjaśnię te kroki na praktycznym przykładzie i podzielę się z Tobą kodem do zmiany tekstu dodawania do koszyka.

Jak zmienić w szczegółach tekst „Dodaj do koszyka” w WooCommerce

Jak wspomniano w powyższym podsumowaniu, możemy zmienić tekst dodawania do koszyka zarówno dla pojedynczego produktu, jak i stron archiwum, korzystając z filtrów, jak widać w poniższym kodzie. Możemy również dodać więcej funkcjonalności lub logiki, aby kierować reklamy na konkretny produkt, grupę produktów lub rodzaj produktów.

Pojedynczy produkt Woocommerce Zmień tekst dodaj do koszyka

Zacznijmy od zmiany tekstu dodania do koszyka na stronie pojedynczego produktu, jak pokazano na powyższym obrazku. Następnie otwórz plik functions.php i dodaj następujący kod, aby zmienić tekst przycisku, jak pokazano na powyższym obrazku:

 add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_woocommerce_button_text' ); 

function custom_woocommerce_button_text () {

return __( 'Kup komiks', 'text-domain' );

}

W tym przykładzie używam domyślnego motywu WordPress Twenty Seventeen i dodałem kod do pliku functions.php, jak pokazano poniżej:

Możesz również dodać kod do wtyczki, którą budujesz, lub możesz dodać go do innego innego motywu, a wyniki będą takie same. Po dodaniu i aktualizacji tego kodu powinieneś zobaczyć zmiany w interfejsie, jak pokazano poniżej:

Jak WooCommerce Zmień tekst dodaj do koszyka to Kod działa

add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_woocommerce_button_text' );

Pierwsza linia kodu to hook filter, który dodajemy, aby filtrować całą treść publikowaną na stronie produktu. Ten filtr wyszukuje tekst przycisku dodawania do koszyka przy użyciu pierwszego parametru woocommerce_product_single_add_to_cart_text .

Drugi parametr to callback function która zwraca nowy tekst, którego chcemy użyć zamiast domyślnego tekstu przycisku dodawania do koszyka. Możesz zmienić ten tekst na dowolny tekst, który chcesz i zaktualizować zmiany, aby zobaczyć go na żywo we wszystkich przyciskach na jednej stronie.

Archiwa Woocommerce Zmień Tekst dodaj do koszyka

Po pomyślnej zmianie tekstu dodania do koszyka WooCommerce w pojedynczym produkcie zobaczysz, że zmiany nie dotyczą strony archiwum produktów, jak pokazano na poniższym obrazku:

Teraz musimy dodać kolejny filtr, aby wyszukać ten tekst na stronie archiwum i zmienić go na odpowiedni nowy tekst dodawania do koszyka. Powinniśmy więc dodać nowy filtr dla archiwów za pomocą poniższego kodu:

add_filter('woocommerce_product_add_to_cart_text','custom_woocommerce_archives_text');

Jest to kolejny filter podobny do poprzedniego, który używa pierwszego parametru do sprawdzenia tekstu dodania do koszyka. Te zmiany w tekście są zwracane w callback function jak pokazano w kompletnym kodzie poniżej:

 add_filter( 'woocommerce_product_add_to_cart_text', 'custom_woocommerce_archives_text' ); 

funkcja custom_woocommerce_archives_button_text(){

return __( 'Kup komiks', 'text-domain' );

}

Możesz również użyć jednej callback function ponieważ wykonują tę samą pracę zamiast dwóch; jeden dla pojedynczego produktu, a drugi dla archiwów. W takim przypadku będziesz mieć dwa hooki filtrów i jedną funkcję zwrotną, jak pokazano w poniższym kodzie:

 //filtry pojedynczego produktu i archiwów ogólnych

add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_woocommerce_button_text' );
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_woocommerce_button_text' );

//funkcja oddzwaniania 

funkcja custom_woocommerce_button_text(){

return __( 'Kup komiks', 'text-domain' );

}

Wniosek

Omówiliśmy wszystkie szczegóły dotyczące zmiany przycisku Dodaj do koszyka WooCommerce i tekstu linku. Jestem przekonany, że możesz łatwo dodać te fragmenty kodu i uzyskać potrzebne zmiany. Mam nadzieję, że te tutoriale WooCommerce są przydatne. Możesz podzielić się ze mną swoją opinią lub jeśli potrzebujesz programisty WordPress WooCommerce, daj mi znać