Jak dodać dodatkowe pole w formularzu kasowym WooCommerce?

Opublikowany: 2020-09-21

Jak dodać dodatkowe pole w formularzu kasowym WooCommerce? Jeśli prowadzisz sklep WooCommerce, wiesz już o znaczeniu strony kasy. Czasami jednak trzeba dodać dodatkowe pole w formularzu kasy WooCommerce lub inne niestandardowe pola kasy na stronie kasy zgodnie z wymaganiami projektu. To może być ciężka praca dla niektórych właścicieli sklepów WooCommerce i dlatego postanowiłem stworzyć krótki samouczek, w jaki sposób możesz dodać dodatkowe pole w formularzu kasowym WooCommerce.

Strona kasy WooCommerce

Ogólnie rzecz biorąc, strona kasy to termin eCommerce, który odnosi się do strony wyświetlanej klientowi podczas systematycznego procesu kasowania, na ostatnim etapie przed dokonaniem zakupu. Istnieje kilka sposobów na poprawę konwersji strony kasy, ale jednym ze sposobów jest dodanie dodatkowego pola w formularzu kasy WooCommerce, które jest związane z Twoim konkretnym produktem, a także usunięcie wszystkich innych niepotrzebnych pól strony kasy.

Ta strona zawiera pola, które klienci muszą wypełnić. Warto również wspomnieć, że jest to najważniejsza strona zarówno dla sprzedawcy, jak i klienta, ponieważ klienci muszą podać ważne informacje, takie jak adresy, dane do faktury, metoda płatności, które pomogą sprzedawcy dostarczyć produkt do klienta . domyślna strona kasy

Jeśli na tej stronie pojawią się błędy, żaden klient nie będzie mógł dokonać żadnego zakupu. Wpłynęłoby to znacznie na wydajność Twojego sklepu, ponieważ nie będziesz w stanie dokonać żadnej sprzedaży.

Jeśli używasz WooCommerce do zasilania swojego sklepu internetowego, otrzymujesz również stronę kasy. Jeśli jednak znasz WooCommerce, wiesz, że nie daje to możliwości dostosowania strony kasy z ustawień.

Dodaj dodatkowe pole w formularzu kasowym WooCommerce

Istnieje wiele sposobów modyfikowania strony kasy w sklepach WooCommerce, takich jak korzystanie z wtyczki innej firmy, rozszerzeń WooCommerce lub niestandardowego programowania.

Jak wspomniałem wcześniej, niestandardowe pole kasy WooCommerce jest ważne podczas montażu, aby uzyskać dalsze dane od kupujących przed zakończeniem zamówienia.

Czasami potrzebujesz dodatkowych informacji od swoich klientów i potrzebujesz do tego dodatkowego pola.

Teraz, gdy znasz już podstawy, zagłębimy się w samouczek. Aby dodać niestandardowe pole do strony kasy, zastosujemy dwa podejścia:

  • Korzystanie z wtyczki.
  • Tworzenie własnego kodu.

a) Kroki, aby dodać dodatkowe pole do strony kasy WooCommerce za pomocą kodu

To rozwiązanie jest przeznaczone dla osób, które potrafią kodować, takich jak programiści. Ten niestandardowy kod pomoże Ci dodać niestandardowe pole do strony kasy za pomocą kilku prostych kroków.

Oto proste kroki, które musisz wykonać:

  1. Zaloguj się do swojej witryny WordPress i uzyskaj dostęp do pulpitu nawigacyjnego jako administrator.
  2. Z menu Dashboard kliknij menu Wygląd > Menu edytora motywów . Po otwarciu strony Theme Editor poszukaj pliku funkcji motywu, w którym dodamy funkcję, która doda dodatkowe pole do strony kasy w WooCommerce .
  3. Dodaj następujący kod do pliku php :
 /**

* Dodaj niestandardowe pole do strony kasy

*/

add_action('woocommerce_after_order_notes', 'custom_checkout_field');

funkcja custom_checkout_field($checkout)

{

echo '<div id="custom_checkout_field"><h2>' . __('Nowy nagłówek') . '</h2>';

woocommerce_form_field('nazwa_pola_niestandardowego', tablica(

'typ' => 'tekst',

'klasa' => tablica(

„moje-pole-klasa formularz-wiersz-wide”

) ,

'label' => __('Niestandardowe dodatkowe pole') ,

'placeholder' => __('Nowe pole niestandardowe') ,

) ,

$checkout->get_value('custom_field_name'));

echo '</div>';

}
  1. Aby zobaczyć wynik , musisz odświeżyć stronę kasy i powinieneś zobaczyć to: niestandardowe pole w kasie
  2. Należy jednak pamiętać, że musimy zweryfikować dane pola niestandardowego. aby to zrobić, po prostu dodaj następujący kod do pliku functions.php :
 /**

* Proces realizacji transakcji

*/

add_action('woocommerce_checkout_process', 'customised_checkout_field_process');

funkcja customised_checkout_field_process()

{

// Pokaż komunikat o błędzie, jeśli pole nie jest ustawione.

if (!$_POST['customised_field_name']) wc_add_notice(__('Proszę wprowadzić wartość!') , 'error');

}

Jeśli nie ma danych wejściowych w polu niestandardowym, wystąpi błąd i będzie to wynik : brak danych wejściowych w polu niestandardowym

  1. Teraz, gdy dodaliśmy niestandardowe pole kasy i je zweryfikowaliśmy, potwierdźmy teraz, czy dane wprowadzone w niestandardowym polu są zapisywane, czy nie . Można to zrobić za pomocą następującego kodu, który zostanie dodany do pliku functions.php :
 /**

* Zaktualizuj wartość podaną w polu niestandardowym

*/

add_action('woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta');

funkcja custom_checkout_field_update_order_meta($order_id)

{

if (!empty($_POST['customised_field_name'])) {

update_post_meta($order_id, 'Some Field',sanitize_text_field($_POST['customised_field_name']));

}

}

Jak działa Kodeks.

Ten kod działa w trzech prostych krokach. W pierwszym fragmencie kodu utworzyłem niestandardowe pole z nagłówkiem. Drugi fragment kodu służy do sprawdzania poprawności danych wejściowych w polu niestandardowym.

Trzeci fragment kodu służy do potwierdzenia, że ​​dane wprowadzone przez klienta w polu niestandardowym są zapisywane, czy nie. Należy również pamiętać, że te fragmenty kodu powinny zostać dodane do pliku functions.php Twojego sklepu WooCommerce.

b) Kroki, aby dodać dodatkowe pole do strony kasy WooCommerce za pomocą wtyczki

To rozwiązanie jest przeznaczone dla użytkowników WordPressa, którzy nie znają się na kodowaniu. To rozwiązanie polega na wykorzystaniu wtyczki WooCommerce Checkout Manager. Menedżer kas WooCommerce

Podam Ci szczegółowy przewodnik systematyczny, który pomoże Ci pobrać wtyczkę i użyć jej do dodania dodatkowego pola na stronie kasy.

Oto kroki, które musisz wykonać:

  1. Zaloguj się do swojej witryny WordPress i uzyskaj dostęp do pulpitu nawigacyjnego jako administrator.
  2. Następnie zainstalujemy wskazaną wcześniej wtyczkę. Jeśli pobrałeś go za pomocą powyższego linku, po prostu przejdź do Wtyczki> Dodaj nowy. Następnie kliknij Prześlij wtyczkę , a następnie Przeglądaj w poszukiwaniu pobranego pliku, jak pokazano poniżej: instalowanie wtyczki
  3. Aby pobrać go bezpośrednio w panelu administracyjnym, po prostu przejdź do Wtyczki> Dodaj nowy. Następnie musisz wyszukać słowo kluczowe dla wtyczki „WooCommerce Checkout Manager”. Musisz go zainstalować i aktywować , jak pokazano poniżej: Instalacja WooCommerce Checkout Manager
  4. Aby utworzyć nowe pola, przejdź do pulpitu WordPress i kliknij WooCommerce > Ustawienia . Następnie kliknij zakładkę Do kasy i kliknij zakładkę Dodatkowe . Kliknij Dodaj nowe pole, jak pokazano poniżej: dodawanie nowego pola za pomocą wtyczki
  5. Pojawi się nowe okno i musisz dodać odpowiednie szczegóły. Pamiętaj, aby zapisać wszystkie wprowadzone zmiany: za pomocą wtyczki
  6. Aby zobaczyć wynik, odśwież stronę kasy, a zobaczysz nowe pole kasy: niestandardowe pole w kasie

Wniosek

W tym krótkim samouczku pokazałem, jak dodać nowe pole do strony kasy. Jestem pewien, że już wiesz, jak dodać dodatkowe pole i wcale nie jest to trudne. Podzieliłem się dwoma rozwiązaniami. Jeden obejmuje użycie kodu PHP, który doda dodatkowe pole, a drugi jest z wtyczką. Wtyczka ma również inne dodatkowe funkcje, na które możesz się przyjrzeć, i jest to rozwiązanie dla osób mniej doświadczonych technicznie. Możesz jednak zmienić nazwy pól w zależności od swoich wymagań.

Podobne artykuły

  1. Jak pominąć koszyk i przekierować do strony kasy WooCommerce
  2. Jak zintegrować Stripe z WooCommerce
  3. Jak usunąć pasek boczny ze strony produktu w motywach WooCommerce?
  4. Jak dodać ikony płatności WooCommerce w stopce [HTML]
  5. Jak uzyskać metody płatności w WooCommerce » Przykład kodu
  6. Jak ukryć produkty bez ceny w WooCommerce
  7. Jak usunąć szczegóły rozliczeniowe z WooCommerce Checkout
  8. Ukryj lub usuń pole ilości na stronie produktu WooCommerce
  9. Jak ukryć pole kodu kuponu WooCommerce?
  10. Jak zmienić nazwę wiadomości o stanie zamówienia w WooCommerce?
  11. Jak usunąć domyślne sortowanie produktów WooCommerce?
  12. Jak sortować kategorie WooCommerce w celu lepszego doświadczenia użytkownika?
  13. Jak dodać obraz produktu stronę kasy WooCommerce
  14. Jak ukryć przycisk Dodaj do koszyka w WooCommerce?
  15. Jak ukryć produkt WooCommerce w wynikach wyszukiwania
  16. Jak ukryć wszystkie produkty ze strony sklepu w WooCommerce?
  17. Jak wyłączyć metodę płatności dla określonej kategorii?
  18. Jak sprawdzić, czy wtyczka jest aktywna w WordPress [ 3 SPOSOBY ]
  19. Jak korzystać z atrybutów produktów WooCommerce krok po kroku [Kompletny przewodnik]
  20. Jak zmienić rozmiar obrazów produktów WooCommerce?
  21. Jak dodawać kategorie do produktów WooCommerce
  22. Jak utworzyć stronę mojego konta w WooCommerce?
  23. Jak utworzyć powiadomienie administratora WooCommerce dla wtyczki – Rozwój WooCommerce
  24. Jak szybko znaleźć swój identyfikator produktu w WooCommerce?
  25. Jak zmienić tekst przycisku kasy w WooCommerce [Złóż zamówienie]