Jak dodać pola warunkowe do kasy WooCommerce

Chcesz stworzyć logikę warunkową dla swojego sklepu? Trafiłeś we właściwe miejsce. Z tego przewodnika dowiesz się, jak dodać pola warunkowe do kasy WooCommerce .

Kasa jest jedną z najważniejszych stron dla każdego sklepu eCommerce. Istnieją miliony witryn konkurujących o tych samych użytkowników. Aby więc wyprzedzić konkurencję, powinieneś dostosować i zoptymalizować swoją kasę tak bardzo, jak to możliwe. Jedną z najciekawszych opcji, aby to zrobić, jest dodanie pól warunkowych do zamówienia WooCommerce .

Te pola pozwalają tworzyć logikę warunkową i wyświetlać tylko te pola, które klienci muszą wypełnić na stronie kasy, aby przyspieszyć proces zakupu. Lepiej więc zrozummy, czym są pola warunkowe i jak mogą pomóc Ci przenieść Twój sklep na wyższy poziom.

Co to są pola warunkowe?

Pola warunkowe to pola, które mają logikę warunkową, dzięki czemu po spełnieniu warunku pojawia się lub jest ukryte inne pole. Aby utworzyć logikę warunkową, potrzebujesz co najmniej jednego pola nadrzędnego i co najmniej jednego pola podrzędnego, które zależą od wartości przyjmowanych przez pole nadrzędne . Na przykład, jeśli oferujesz swoim klientom możliwość zapłaty za pomocą PayPal lub karty kredytowej, możesz chcieć wyświetlić pola danych karty kredytowej tylko wtedy, gdy użytkownicy wybiorą opcję Karta kredytowa . Jeśli chcą zapłacić przez PayPal, te pola się nie pojawią. W ten sposób poprawiasz wrażenia użytkownika na swojej stronie i zwiększasz współczynniki konwersji.

Czym jest logika warunkowa?

Zanim zaczniemy, musisz mieć jasne pojęcie o tym, czym jest logika warunkowa, więc zagłębmy się nieco głębiej. Kiedy tworzysz logikę warunkową, chcesz, aby pole warunkowe robiło X, jeśli warunek jest spełniony lub prawdziwy, ale robiło Y, jeśli warunek jest fałszywy lub nie jest spełniony .

Zgodnie z naszym przykładem karty kredytowej chcemy, aby pola danych karty kredytowej pojawiały się tylko wtedy, gdy klient wybierze opcję płatności kartą kredytową. Ten przykład jest dość prosty, ale logika warunkowa może osiągnąć wyższy poziom złożoności podczas pracy z kilkoma typami pól i/lub dodawania wielu warunków i akcji.

Na stronie kasy WooCommerce możesz ustawić warunek dla pojedynczego pola. Wartość, którą klient wprowadzi w tym polu, zostanie porównana z ustawieniami i jeśli warunek zostanie spełniony, działaniem będzie wyświetlenie pola.

Aby utworzyć logikę warunkową na stronie kasy, musisz użyć co najmniej dwóch pól. Rodzic i jego dziecko. Pole, w którym sprawdzane są wartości, nazywa się polem nadrzędnym . A ten, w którym tworzysz logikę warunkową, aby pojawiła się lub nie tylko wtedy, gdy warunek jest prawdziwy, jest polem potomnym . Jak zobaczymy w tym przewodniku, pole nadrzędne może mieć wiele pól podrzędnych i wiele warunków warunkowych.

Jak dodać pola warunkowe do kasy WooCommerce

W tej sekcji zobaczymy, jak używać i dodawać logikę warunkową i pola warunkowe do kasy w WooCommerce. Programowe tworzenie użytecznej logiki warunkowej wymaga dużo kodowania, dlatego zalecamy użycie wtyczki. W tej demonstracji użyjemy Menedżera transakcji.

Ta wtyczka umożliwia dodawanie, dostosowywanie i usuwanie różnych typów pól na stronie kasy. Ponadto możesz zastosować nieograniczoną liczbę warunkowych walidacji za pomocą wielu niestandardowych pól na stronie kasy WooCommerce. Dzięki ponad 80 000 aktywnych pobrań jest to jedna z najlepszych dostępnych wtyczek do kasy. Ma darmową wersję z podstawowymi funkcjami, które można pobrać stąd, oraz trzy plany premium, które zaczynają się od 19 USD.

Podzieliliśmy post na różne sekcje, dzięki czemu możesz przejść bezpośrednio do sekcji, która Cię interesuje. Bez zbędnych ceregieli zobaczmy, jak dodać pola warunkowe do strony kasy w WooCommerce .

1. Jak stworzyć logikę warunkową
2. Logika warunkowa z wieloma niestandardowymi polami podrzędnymi
3. Jak korzystać z wielu niestandardowych pól i połączonych warunkowych
4. Czego nie możesz zrobić, korzystając z logiki warunkowej

1. Jak stworzyć logikę warunkową?

Teraz, gdy masz już jasne pojęcie, czym jest logika warunkowa i jak działa, zobaczmy, jak utworzyć pole logiki warunkowej za pomocą wtyczki WooCommerce Checkout Manager. Stwórzmy warunek, aby wyświetlić komunikat, gdy użytkownik wpisze „ admin ” jako imię w formularzu rozliczeniowym. Aby to zrobić, najpierw przejdź do WooCommerce > Kasa > Rozliczenia na pulpicie WordPress. Tam naciśnij przycisk Dodaj nowe pole .

Otworzy się okno. To jest edytor pól nowego pola. Tam wybierz Wiadomość jako typ i wypełnij opcje, takie jak Etykieta, Typ i Wiadomość. Dodatkowo wybierz Imię jako pole nadrzędne w prawej kolumnie. Na koniec wpisz „ admin ” pod imieniem i naciśnij Zapisz .

Jak widać, ustawiamy pole Imię jako pole nadrzędne. Teraz czas to przetestować. Przejdź do strony kasy w interfejsie użytkownika i wpisz „ admin ” w polu imienia. Powinieneś zobaczyć taki komunikat ostrzegawczy.

Jest to prosty przykład, ale warunki warunkowe mogą zawierać wiele pól, a przy korzystaniu z wielu pól warunkowych i niestandardowych rzeczy mogą być bardzo złożone. Tak więc, aby łatwo nimi zarządzać, możesz zobaczyć, które pole ma warunek, a pole nadrzędne na ekranie menedżera pól odpowiedniego formularza zamówienia ( Rozliczenia, wysyłka, dodatkowe ).

W ten sposób możesz dodać pole warunkowe do kasy w WooCommerce za pomocą Menedżera kasy. Przyjrzyjmy się teraz bardziej złożonemu przykładowi. I oczywiście najlepsze jest to, że nie ma ograniczeń co do liczby pól niestandardowych, które mogą zastosować te same lub różne warunki do tego samego pola nadrzędnego.

2. Logika warunkowa z wieloma niestandardowymi polami podrzędnymi

Załóżmy teraz, że chcesz dać kupującym możliwość otrzymywania zakupionych produktów w jednym z Twoich centrów dystrybucji lub wybrania standardowej dostawy do określonej lokalizacji. W tym celu możesz użyć pola typu radio, aby klienci mogli wybrać jedną z dwóch opcji.

Utwórz nowe pole nadrzędne

Więc najpierw przejdź do WooCommerce > Kasa i utwórz pole typu radio. W tym przykładzie nazwiemy to pole „Dostawa”. Następnie wejdź w Opcje. Nazwiemy je na wynos i dostawa. Tutaj możesz również wybrać cenę dla każdej opcji i ustawić ją jako domyślną. Ponieważ chcemy wyświetlać klientom różne pola w zależności od pola wyboru, które wybrali, użyjemy niektórych domyślnych pól kasy WooCommerce dla opcji Dostawa . W ten sposób kupujący mogą wypełnić swoje dane, aby otrzymać produkty pod wybrany przez siebie adres. Edytuj więc domyślne pola WooCommerce: stan, miasto, kod pocztowy i adres. Następnie utwórz tę samą logikę warunkową dla każdego z nich. Dodatkowo utworzymy warunek warunkowy i wybierzemy typ pola radiowego Dostawa jako pole nadrzędne i wyświetlimy pole Stan, jeśli użytkownicy wybiorą opcję Dostawa. Oczywiście możesz zrobić to samo dla wszystkich tych pól lub niektórych z nich. W tym przykładzie utworzymy warunkowe następujące pola:

• stan rachunku
• billing_city
• billing_postcode
• Adres do faktury 1

Utwórz niestandardowe pole podrzędne

Następnie musisz utworzyć nowe pole niestandardowe, które pojawi się, gdy klient wybierze opcję Na wynos , abyś mógł wysłać produkt do jednego z centrów dystrybucyjnych. Ponownie przejdź do ustawień wtyczki i utwórz pole typu Select . Aktywuj warunkowe pole wyboru, wybierz Dostawa jako rodzic i nazwij go Zabierz w sekcji Dostawa . Następnie musisz utworzyć adresy centrów dystrybucyjnych. Przejdź więc do sekcji Opcje i dodaj kilka adresów. Na koniec zapisz zmiany. Teraz czas sprawdzić frontend. Przejdź do strony kasy i wybierz niektóre z nowo utworzonych opcji. Na przykład, gdy użytkownicy wybiorą opcję Na wynos, możesz wybrać jedno z centrów dystrybucyjnych. Z drugiej strony, jeśli wybiorą opcję Dostawa , muszą podać adres, pod który chcą otrzymać swoje produkty. UWAGA : Dodaliśmy dwa dodatkowe pola do wyświetlania komunikatu informacyjnego, po jednym dla każdej opcji, używając tych samych warunków, których użyliśmy w innych polach. Teraz wiesz, jak dodać pola warunkowe do kasy WooCommerce przy użyciu bardziej złożonej logiki. Możesz jednak pójść nieco dalej i stworzyć jeszcze bardziej złożoną logikę. Zobaczmy, jak tworzyć łańcuchy warunkowe .

3. Jak korzystać z wielu niestandardowych pól i połączonych warunkowych

Kiedy pracujesz z wieloma powiązanymi warunkami warunkowymi, sprawy mogą być dość skomplikowane. Znakomitym tego przykładem są łańcuchy warunkowe . Jest to warunek zastosowany do pola, które ma inny warunek w innym polu. Aby lepiej to zrozumieć, możesz pomyśleć o warunku z warunkiem podrzędnym, który ma inny warunek podrzędny i tak dalej. Poziom hierarchii warunków warunkowych i liczba pól niestandardowych, których można użyć, jest nieograniczona, dzięki czemu można tworzyć bardzo złożoną logikę z wieloma zależnościami.

Tworzenie połączonego warunkowego

Stwórzmy więc bardziej złożony przykład, używając połączonych warunków. Załóżmy, że chcesz zapewnić swoim klientom możliwość dodania dodatkowego pakietu do zamówienia. Dostępne opcje to Tektura, Prezent i Styropian. Najpierw dodaj pole typu checkbox, aby klient mógł poprosić o pakiet dodatkowy. W zakładce Cena edytora pól wprowadź cenę, którą chcesz dodać do aktualnego zamówienia, gdy klient zaznaczy checkbox Pakiet Extra. Następnie musisz popracować nad opcjami opakowań, które zaoferujesz swoim klientom. Umożliwimy kupującym wybranie więcej niż jednej opcji, więc utworzymy typ pola wielokrotnego wyboru. Dodaj etykietę i wybierz Dodatkowy pakiet jako pole nadrzędne, aby logika warunkowa wyglądała tak: Następnie przejdź do zakładki Opcje i utwórz opcje dla swoich klientów. Na tym ekranie możesz ustawić inną cenę dla każdej alternatywy. Ponieważ już ustawiliśmy cenę podczas tworzenia pola wyboru, nie użyjemy tutaj tej opcji. Kiedy to skończysz, nadszedł czas, aby sprawdzić frontend. Jeśli wszystko działa poprawnie, powinieneś mieć możliwość wybrania wielu opcji podczas sprawdzania pola Dodatkowe opakowanie : Użyliśmy tutaj pojedynczego warunku, aby wyświetlić pole wielokrotnego wyboru. Teraz utwórzmy łańcuch warunkowy z każdą z opcji/wartości pola nadrzędnego.

Dodaj wiele opcji

Wybierzmy więc opcję Opakowanie na prezent i zastosujmy kilka warunków. Utwórzmy niestandardowe pole radia i wypełnij edytor w następujący sposób. Będziemy oferować kilka wydruków papierowych do pakowania prezentów, więc wykorzystamy to pole, aby klienci mogli wybrać jeden z nich. Aby to zrobić, przejdź do sekcji Opcje i skonfiguruj wydruki papieru dla pola radiowego. Skonfigurowaliśmy opcje w ten sposób: A na interfejsie zobaczysz coś takiego: Ponieważ wyświetlamy opakowania na prezenty, lepiej wyświetlać obrazy zamiast tekstu. Aby wyświetlić obrazy w każdej opcji, wykorzystaliśmy kilka obrazów, które wcześniej wrzuciliśmy do biblioteki. Możesz wprowadzić obrazy dla etykiety każdej opcji za pomocą następującego kodu: <img class=”paper-style” src=”#path of your image url”> Do tej pory utworzyłeś połączoną logikę warunkową, która obejmuje dwa poziomy oraz dwa warunki, które są od siebie zależne. Dodatkowe opakowanie ->(warunek 1)-> Rodzaj opakowania ->(warunek 2)-> Opakowanie na prezent

Dodanie kolejnego poziomu warunkowego

Pójdźmy trochę dalej i dodajmy nowy poziom warunkowości. Na ostatnim zrzucie ekranu zobaczysz, że pojawiło się nowe pole o nazwie Karta podarunkowa, które daje użytkownikom możliwość dodania do pakietu dedykowanej karty podarunkowej. W tym celu pobierzemy dodatkowe 4 USD. Ponadto użyjemy warunkowego, aby wyświetlić nowe niestandardowe pole i umożliwić użytkownikom wprowadzanie tekstu, który chcą wydrukować na karcie podarunkowej. Stwórzmy więc nowe pole wyboru i skonfigurujmy je w następujący sposób: Możesz zobaczyć, jak odnosimy się do tego samego pola nadrzędnego i używamy tego samego warunku, którego użyliśmy w przypadku opakowania na prezent w poprzednim kroku. Następnie dodaj obszar tekstowy, aby użytkownicy mogli wpisać tekst, który chcą zobaczyć na karcie podarunkowej, i skonfigurować go w następujący sposób: To jest ostatni warunek. Ma niestandardowe pole Karta podarunkowa jako pole nadrzędne i Tekst karty podarunkowej jako pole podrzędne. Więc teraz, gdy kupujący wybiorą opcję Karta podarunkowa, zobaczą to: I tak tworzysz złożoną logikę i dodajesz kilka pól warunkowych do strony kasy w WooCommerce. W tej kolejności połączyliśmy trzy warunki i kilka pól niestandardowych: Dodatkowe opakowanie ->(warunek 1)-> Rodzaj opakowania ->(warunek 2)-> Opakowanie na prezent ->(warunek 3)->Karta podarunkowa

4. Czego nie możesz zrobić, używając logiki warunkowej?

Użyj pól z różnych formularzy

W WooCommerce pola warunkowe muszą odnosić się do pola nadrzędnego znajdującego się w tym samym formularzu. Na stronie kasy znajdują się trzy formularze: rozliczenia, wysyłka i dodatkowe formularze. Każdy z nich działa jako osobny formularz i nie może mieć warunków zależnych od pól z innego formularza.

Warunkowe na polach bez wartości (przycisk, nagłówek, komunikaty)

Nie możesz używać przycisków, komunikatów i typów pól nagłówka jako pól nadrzędnych, ponieważ nie mają one żadnej wartości umożliwiającej sprawdzenie, czy warunek jest spełniony.

Edytuj identyfikatory lub nazwy pól

Aby zapewnić poprawną integrację z WooCommerce, nie możesz edytować nazw pól i identyfikatorów. Dotyczy to zarówno domyślnych pól WooCommerce, jak i wszelkich dodanych pól niestandardowych.

Uruchom inną akcję inną niż wyświetlanie/ukrywanie pola

W WooCommerce pola warunkowe mogą wykonać jedną akcję: wyświetlić określone pole, gdy warunek jest prawdziwy. Oznacza to, że niestety nie możesz dodać rabatu, produktu, edytować zamówienia ani wykonać żadnej innej czynności, gdy warunek jest spełniony.

Zastosuj warunki do wartości pól poza kasą

Na koniec, warunki warunkowe mogą sprawdzać tylko wartości innego pola kasy w tym samym formularzu. Nie możesz więc sprawdzić warunków, które sprawdzają ilość produktu, cenę całkowitą, rolę użytkownika ani nic innego, co nie jest wartością pola kasy.

Wniosek

Podsumowując, logika warunkowa może pomóc poprawić wrażenia użytkownika i zwiększyć współczynniki konwersji w Twojej witrynie. Dlatego dodanie pól warunkowych do zamówienia WooCommerce to świetny sposób na przeniesienie sklepu na wyższy poziom.

Z tego przewodnika dowiedziałeś się, jak tworzyć i konfigurować dodatkowe pola za pomocą wtyczki WooCommerce Checkout Manager. Dodaliśmy pola niestandardowe i stworzyliśmy zarówno prostą logikę warunkową, jak i bardziej złożone przykłady z połączonymi warunkami warunkowymi. Na koniec przyjrzeliśmy się ograniczeniom logiki warunkowej w WooCommerce.

Tutaj widzieliśmy kilka przykładów, ale to tylko wierzchołek góry lodowej. Jest wiele rzeczy, które możesz zrobić z polami warunkowymi, aby ulepszyć proces realizacji transakcji. Dlatego zalecamy tworzenie niestandardowych pól i zabawę z warunkami warunkowymi.

Aby uzyskać więcej informacji o tym, jak w pełni wykorzystać swoją kasę, możesz zapoznać się z naszym przewodnikiem, aby zoptymalizować kasę WooCommerce i naszym samouczkiem, aby wyłączyć weryfikację kodu pocztowego. Daj nam znać, jeśli masz jakiekolwiek pytania lub wątpliwości, aby dodać pola warunkowe do kasy. Chętnie Ci pomożemy!