Kategoria WooCommerce to zbiór różnych mini-porad oraz wpisów instruktażowych związanych z jednym z najpopularniejszych otwartych e-commerców (obok Magento, PrestaShop), a na pewno najpopularniejszym na WordPressie. Tak będzie i dzisiaj, krótki poradnik jak zmienić tekst w polu „Uwagi do zamówienia„.
Dlaczego, po co?
Na jednym z sklepów, który serwisujemy i obsługujemy jest możliwość wyboru metody wysyłki „Paczkomat”, niestety klient nie posiada jeszcze umowy partnerskiej z InPostem, dlatego nie da się zintegrować sklepu z InPostem. Do czasu uzyskania ID partnera InPost, aby ułatwić obsłudze sklepu ręczne nadawanie paczek do paczkomatów, potrzebujemy uzyskać od klienta informację o adresie lub numerze paczkomatu.
Dlatego już na podstronie koszyka pod metodą wysyłki „Paczkomat 24/7 InPost” widnieje dodatkowa informacja: „Prosimy po wyborze w „dodatkowych uwagach” podać adres lub nr paczkomatu.”
Taki opis bez problemu, bez dodatkowego kodowania ustawiamy w kokpicie WordPress. Po zalogowaniu wybieramy WooCommerce > Ustawienia > Wysyłka, a następnie wybieramy konkretną metodę wysyłki i dodajemy opis.
Jak zmienić tekst „Uwagi do zamówienia” na podstronie Zamówienie?
Aby ponownie przypomnieć klientowi o podaniu tej informacji wykorzystujemy do tego pole „Uwagi do zamówienia” na kolejnej podstronie po Koszyku, czyli „Zamówienie”. Standardowo druga kolumna na tej podstronie wygląda następująco:
Za pomocą poniższego kodu możemy dostać się do pól label oraz placeholder w „woocommerce_checkout_fields„. Odpowiednio zmodyfikuj tekst i wklej poniższy kod w pliku functions.php w motywie potomnym.
/* Change order comments on checkout */
function wplab_change_order_comments( $fields )
{
$fields['order']['order_comments']['placeholder'] = 'Podaj informacje niezbędne dla kuriera, adres lub nr paczkomatu (jeśli wybrałeś wysyłkę do paczkomatu) itp.';
$fields['order']['order_comments']['label'] = 'Uwagi do zamówienia';
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wplab_change_order_comments' );
Po wgraniu pliku na serwer, na podstronie Zamówienie „Uwagi do zamówienia” będą wyglądać następująco:
Dodatkowo możemy jeszcze ostylować pole tekstowe np. zmienić kolor tła, dodać kolorowe obramowanie, większy font itd. Dostosuj wedle uznania poniższy kod i wklej go do pliku z stylami (pewnie będzie to style.css lub theme.css) w motywie potomnym.
body.woocommerce-checkout p#order_comments_field textarea {
min-height: 70px;
padding: 1rem;
}
Po nadpisaniu style.css pole wygląda już o wiele lepiej!
To by było na tyle! Jeśli masz jakiś problem z powyższym kodem daj znać bezpośrednio na hello@wp-lab.pl.