Jak dodać nowe pola do formularza zamówienia produktu w WooCommerce

Dla każdego marketera, analityka oraz właściciela sklepu www ważnymi metrykami są wskaźnik odrzuceń i współczynnik konwersji. Za ich pomocą można przeanalizować stronę według przyjazności do użytkowników i modyfikować projekt w zależności od potrzeb odwiedzających. A ulepszając znaczenia tych metryk, można zwiększyć liczbę sprzedawanych produktów i wreszcie dochody sklepu internetowego. Ale dzisiejszy mój artykuł nie będzie poświęcony temu tematowi, chociaż jest związany z nim. Pokażę Ci jak można zmodyfikować formularz zamówienia i dodać do niego nowe pola dla otrzymania dodatkowej informacji o klientach.

Wypełnienie formularzu z danymi osobowymi jest faktycznie ostatnim krokiem (jeśli nie brać pod uwagę wybór sposobu płatności) przed zamówieniem produktu. Ale dość często użytkownicy rezygnują z zakupu właśnie na tym krokowi. Przyczyna tego zjawiska kryje się w nie zrozumiałej strukturze formularzu i dużej liczbie dostępnych pól do wypełnienia. Innymi słowy im więcej czasu użytkownik musi spędzić przy wypełnienia formularzu zamówienia, tym mniej chce dokonać swój zakup. Dlatego ważne jest, aby ten formularz zawierał tylko niezbędne pola: imię i nazwisko, adres, telefon i e-mail. Więcej dodatkowych pól może negatywnie wpłynąć na wskaźnik odrzuceń.

Jeśli mówić o WooCommerce, to standardowy formularz zamówienia zawiera tylko niezbędne pola wspomniane powyżej. Oprócz tego on jest intuicyjnie zrozumiały dla osób, którzy pierwszy raz robią zakup na stronie sklepu www. Standardowy formularz zamówienia wygląda następująco (rys. 1):

Jednak czasem może wyniknąć potrzeba otrzymać dodatkową informację od klientów. Na przykład, chcemy zapytać ich skąd się dowiedzieli o naszym sklepie www? W tym przypadku do standardowego formularzu zamówienia należy dodać nowe pole. Zrobić to można w prosty sposób, modyfikując plik functions.php motywu domyślnego.

Przejść do pliku functions.php motywu można za pomocą menadżera plików, połączenia ftp oraz wbudowanego edytora WordPress. Skorzystamy się z ostatniego sposobu. W panelu administracyjnym przejdziemy do sekcji Wygląd – Edytor.  Po lewej stronie wybierzemy odpowiedni plik functions.php i otworzymy go. Na samym końcu należy dodać następujący kod:

W tym kodzie mamy funkcję my_custom_checkout_field, która do formularzu zamówienia dodaje pole „Skąd się o nas dowiedziałeś”(rys. 2).

Zapisujemy zmiany i przechodzimy na stronę z formularzem (rys. 3).

Jak widać z rysunku 3 dodaliśmy własne pole do formularza zamówienia. Jednak jego wypełnienie nie jest wymagane dla realizacji zakupu. Jeśli chcesz, aby to pole było wymagane, do pliku functions.php należy dodać następny kod:

Za pomocą funkcji my_custom_checkout_field_process sprawdzamy, czy nasze pole zostało wypełnione. Jeśli ono jest puste, pojawia się odpowiedni komunikat: Prosimy podać odpowiedź w nasze nowe pole (rys. 4):

Dodaliśmy już nowe pole i jest ono wymagane do wypełnienia. Ale jeśli wypełnimy go, to informacja nie będzie zapisywana do danych meta zamówienia, czyli nie możemy skorzystać się z niej w przyszłości. Dlatego aby znaczenie pola było uwzględniane, do pliku functions.php trzeba dodać taki kod:

No i na sam koniec, wyświetlimy znaczenie pola na stronie edytowania zamówienia. Dlatego w plik funkcji motywu dodamy poniższy kod:

Zapisujemy wszystkie wprowadzone do pliku zmiany i przechodzimy do testowania. Dlatego zrobimy przykładowe zamówienie i wpiszemy dowolne dane w nasz formularz. Po złożeniu wniosku, możemy sprawdzić, czy informacja wpisana w pole „Skąd się o nas dowiedziałeś” będzie widoczna na stronie edytowania zamówienia. Dlatego przechodzimy do panelu administracyjnego i wybieramy sekcje WooCommerce – Zamówienie (rys. 5).

Wybieramy nasze zamówienia i otwieramy go dla edytowania (rys. 6).

Jak widać z rysunku 6, dodane przez nas pole i jego znacznie jest widoczne. A więc powyższy kod działa poprawnie.

No i na sam koniec, w jakości bonusu, pokaże Ci jak wymagane pole standardowego formularzu zrobić nie wymaganym. Dla przykładu wieziemy pole „Telefon”, które jest oznaczone „gwiazdką”. Dzięki dodaniu następnego kodu użytkownicy nie muszą podawać swój numer przed złożeniem wniosku.

Aby sprawdzić, że wprowadzone zmiany działają, należy przejść do formularzu zamówienia. Pole „Telefon” już nie ma „gwiazdki” i nie jest wymagane do wypełnienia (rys. 7).

Podsumowanie

Jeśli prowadzisz sklep internetowy, to na pewno chcesz dowiedzieć się więcej o swoich klientach. Otrzymaną informację można używać dla prowadzenia ciekawych kompanii reklamowych, tworzenia spersonalizowanych newsletterów oraz ulepszenia strony www. Jednym ze sposobów na uzyskanie takiej informacji jest formularz zamówienia. Dzisiejszy przykład pozwoli Ci dodawać nowe pola i zbierać dodatkowe wiadomości o osobach zamawiających produkty. Jednak musisz uważać, że zwiększenie liczby pól w formularzu zamówienia może negatywnie wpłynąć na wskaźnik odrzuceń. A więc uważaj na to przed wszystkimi modyfikacjami.

P.S. Jeśli masz pytania i uwagi proszę je zostawiać w komentarzach poniżej.