Jak zmienić kolejność pól kasy WooCommerce

Czy chcesz zmienić kolejność pól kasy WooCommerce w swoim sklepie internetowym? W tym samouczku pokażemy Ci wszystkie najlepsze sposoby na zmianę kolejności pól kasy.

WooCommerce umożliwia zmianę kolejności i rozmieszczenie wielu elementów w witrynie eCommerce, aby poprawić współczynniki konwersji. Spośród nich pola kasy można również zmienić, aby dopasować je do potrzeb Twojej witryny i klientów.

Ale zanim przejdziemy przez te kroki, zobaczmy, dlaczego być może trzeba je zmienić.

Po co zmieniać kolejność pól kasy?

Po zainstalowaniu WooCommerce w swoim sklepie internetowym, wtyczka domyślnie tworzy kilka niezbędnych stron. Obejmują one koszyk, sklep, moje konto, stronę kasy i tak dalej. Ale jeśli chodzi o stronę kasy, domyślne pola mogą nie mieć zastosowania dla każdego rodzaju witryny eCommerce.

W zależności od Twojej witryny i klientów może być konieczne od czasu do czasu zmienianie kolejności pól kasy WooCommerce. Na przykład na domyślnej stronie kasy klient musi wprowadzić imię, a następnie nazwisko. Jednak w niektórych przypadkach może się okazać, że wpisanie nazwiska na początku lub zapytanie najpierw o adres rozliczeniowy klienta może być bardziej odpowiednie.

Dlatego jeśli chcesz dostosować te pola na podstawie podobnych sytuacji, będziesz musiał zmienić ich kolejność.

Jak zmienić kolejność pól kasy WooCommerce?

Możesz zmienić kolejność pól kasy WooCommerce na 2 główne sposoby w WordPress:

• Z wtyczkami
• Programowo

W tym przewodniku szczegółowo omówimy każdy krok. Zanim jednak zaczniemy, upewnij się, że poprawnie skonfigurowałeś WooCommerce dla swojej witryny i używasz jednego z kompatybilnych motywów WooCommerce.

Zmień kolejność pól kasy WooCommerce za pomocą wtyczek

Wtyczki mogą bardzo pomóc w zwiększeniu funkcjonalności Twojej witryny. Podobnie, jednym z najłatwiejszych sposobów zmiany kolejności pól WooCommerce jest użycie wtyczki. Wszystko, co musisz zrobić, to zainstalować wtyczkę na swojej stronie WordPress i zmienić za jej pośrednictwem pola kasy.

Istnieje wiele wtyczek do kasy WooCommerce, których możesz użyć do dostosowania strony kasy. Ale tylko kilka zapewnia opcję zmiany kolejności pól kasy w WooCommerce.

W tym samouczku użyjemy wtyczki Checkout Manager for WooCommerce , ponieważ jest ona bardzo łatwa w użyciu. Jest to również jedna z najlepszych wtyczek do dostosowywania strony kasy i możesz jej użyć nawet do zmiany kolejności pól kasy.

Ale aby zacząć korzystać z wtyczki, musisz ją zainstalować i aktywować.

1. Zainstaluj i aktywuj wtyczkę

Aby zainstalować wtyczkę, przejdź do Wtyczki> Dodaj nowy z pulpitu WordPress i wyszukaj słowa kluczowe dla wtyczki. Po znalezieniu wtyczki kliknij Zainstaluj teraz .

Po zakończeniu instalacji Aktywuj wtyczkę.

Możesz również zainstalować wtyczkę ręcznie, jeśli chcesz korzystać z wtyczki premium lub wtyczki, która nie jest zawarta w repozytorium WordPress. Wtyczkę należy pobrać z marketplace i przesłać do Twojej witryny. Zapoznaj się z naszym przewodnikiem, aby ręcznie zainstalować wtyczkę WordPress, aby uzyskać więcej informacji.

2. Zmień kolejność pól kasy WooCommerce z opcji wtyczek

Po aktywacji wtyczki możesz zacząć jej używać do zmiany kolejności pól kasy WooCommerce. Po prostu przejdź do WooCommerce > Ustawienia z pulpitu WordPress i otwórz kartę Kasa .

Strona kasy zazwyczaj zawiera szczegóły rozliczenia i wysyłki. Najpierw zmienimy kolejność pól rozliczeniowych. Wybierz więc opcję Płatności na karcie Kasa. Tutaj będziesz mógł zobaczyć wszystkie pola szczegółów płatności.

Teraz wystarczy przeciągnąć i upuścić, aby zmienić kolejność pól szczegółów płatności. Po prostu przeciągnij pola i upuść je w miejscach , w których chcesz je umieścić na swojej stronie kasy. Możesz również użyć strzałek w górę i w dół , aby przesunąć pola do żądanej pozycji.

Dodatkowo masz również opcję pozycji dla każdego pola. Pola mogą być umieszczone po lewej lub prawej stronie ekranu lub z dużym obszarem pola. Pola można nawet ukryć, jeśli jest to konieczne, aktywując przełącznik w kolumnie Wyłączone.

Po zmianie kolejności wszystkich pól kasy dla Twojego sklepu WooCommerce, kliknij Zapisz zmiany . Po ponownym załadowaniu strony kasy będziesz mógł zobaczyć nowo zamówione pola.

W ten sam sposób możesz zmienić kolejność pól szczegółów wysyłki. Po prostu wybierz opcję wysyłki z zakładki Do kasy i ponownie uporządkuj pola. Po przestawieniu wszystkich niezbędnych pól, będziesz mógł zobaczyć, że są one również uporządkowane na stronie frontendowej kasy.

Zmień kolejność pól kasy WooCommerce programowo

Możesz także zmienić kolejność pól kasy WooCommerce za pomocą fragmentów kodu, jeśli nie chcesz dodawać żadnych dodatkowych wtyczek do swojej witryny. Ale to podejście jest dla Ciebie odpowiednie tylko wtedy, gdy masz zaawansowaną wiedzę z zakresu programowania.

Ponadto fragmenty kodu są dodawane do pliku functions.php Twojej witryny i możesz je utracić podczas aktualizacji motywu WordPress. Musisz więc utworzyć motyw podrzędny, aby dodać fragmenty. Jeśli potrzebujesz pomocy, możesz nawet użyć jednej z najlepszych wtyczek motywów potomnych do WordPress, aby je utworzyć.

Zalecamy jednak również wykonanie kopii zapasowej witryny WordPress przed dodaniem fragmentów kodu. Plik functions.php jest jednym z podstawowych plików Twojej witryny i wszelkie niechciane zmiany w nim mogą spowodować więcej problemów. Przejdźmy teraz do procesu.

1. Uzyskaj dostęp do pliku functions.php w edytorze motywów

Musisz dodać fragmenty kodu w pliku functions.php z edytora motywów. Aby uzyskać do niego dostęp, przejdź do Wygląd> Edytor motywów z pulpitu WordPress. Następnie wybierz plik functions.php po prawej stronie ekranu w plikach motywu.

Teraz możesz zacząć dodawać fragmenty kodu po przewinięciu do dołu edytora i zaktualizowaniu pliku . W tym samouczku użyliśmy motywu Divi. Może więc wyglądać nieco inaczej niż twój edytor w zależności od używanego motywu.

2. Dodaj fragmenty kodu

Istnieje wiele fragmentów kodu, które możesz dodać do swojej witryny, aby zmienić kolejność pól kasy WooCommerce. Ale najpierw musisz zrozumieć, że pola są podzielone na 4 grupy:

• Adres rozliczeniowy – rozliczeniowy
• Adres do wysyłki – wysyłka
• Logowanie do konta – konto
• Dodatkowe informacje – zamówienie

Ponadto każda z dziedzin w tych grupach ma swój szczególny priorytet. Musisz również znać ich priorytet, jeśli chcesz zmienić kolejność pól.

Możesz znaleźć pola na poniższej liście. Ich priorytetem jest liczba reprezentowana po polach.

• Dane do faktury
  • billing_first_name – 10
  • billing_last_name – 20
  • billing_company – 30
  • billing_address_1 – 40
  • billing_address_2 – 50
  • billing_city – 60
  • billing_postcode – 70
  • billing_country – 80
  • billing_state – 90
  • billing_email – 100
  • billing_phone – 110
• Wysyłka
  • shipping_first_name – 10
  • shipping_last_name – 20
  • shipping_company – 30
  • shipping_address_1 – 40
  • shipping_address_2 – 50
  • shipping_city – 60
  • shipping_postcode – 70
  • shipping_country – 80
  • shipping_state – 90
• Rachunek
  • account_password (bez priorytetu)
• Zamówienie
  • order_comments (bez priorytetu)

Spójrzmy teraz na kilka przykładów:

2.1. Przenieś pole na górę

Jeśli chcesz przenieść pole kasy, aby wyświetlić je u góry lub w pierwszym wierszu, możesz użyć następującego fragmentu kodu.

 add_filter( 'woocommerce_checkout_fields', 'quadlayers_email_top' );

function quadlayers_email_top( $checkout_fields ) {
$checkout_fields['billing']['billing_email']['priority'] = 5;
zwróć $checkout_fields;
}

Domyślnie imię ma najwyższy priorytet z 10. Tak więc, jeśli chcesz zmienić kolejność pola na górę, po prostu upewnij się, że priorytet pola jest mniejszy niż 10 .

W naszym przypadku priorytet pola e-mail wynosi 5. Dlatego jest on umieszczony na górze w polu kasy.

2.2. Przenieś pole do innej grupy

Użycie fragmentu kodu do zmiany kolejności pola kasy WooCommerce nie ogranicza się tylko do przeniesienia pola na górę. Możesz modyfikować lub tworzyć więcej fragmentów kodu, aby przenieść pole do innej grupy.

Rozważmy na przykład następujący fragment:

 add_filter( 'woocommerce_checkout_fields', 'quadlayers_billing_email_another_group' );
function quadlayers_billing_email_another_group( $checkout_fields ){
// 1. Przypisujemy tablicę pól do innej grupy tutaj
$checkout_fields['order']['billing_email'] = $checkout_fields['billing']['billing_email'];
// 2. Usuń pole z poprzedniej lokalizacji
unset( $checkout_fields['billing']['billing_email'] );
zwróć $checkout_fields;
}

Jak widać, e-mail rozliczeniowy został przeniesiony do grupy informacji dodatkowych. Podobnie możesz zmienić kod zgodnie z potrzebami swojej witryny i użyć go do przenoszenia pól w różnych grupach.

Jeśli potrzebujesz dodatkowej pomocy, nawet WooCommerce udostępnił szczegółowy przewodnik po edycji pól kasy za pomocą kodów. Po prostu kliknij tutaj, aby go zobaczyć.

Bonus: Włącz bezpośrednie płatności w WooCommerce

Ponieważ znasz już proces zmiany kolejności pól kasy WooCommerce, może lepiej skrócić proces kasy również w swojej witrynie. A jeśli chcesz uprościć ten proces, pominięcie strony koszyka to jedna z najlepszych praktyk. W ten sposób klienci mogą zostać przekierowani bezpośrednio na stronę kasy, jeśli chcą kupić tylko kilka produktów.

Aby włączyć bezpośrednią płatność, użyjemy wtyczki Direct Checkout for WooCommerce . Jest to prosta wtyczka, która pozwala Twoim klientom pominąć stronę koszyka i przekierować ich na stronę kasy. Ale aby zacząć korzystać z wtyczki, musisz ją najpierw zainstalować i aktywować.

Przejdź ponownie do Wtyczki> Dodaj nowy z pulpitu WordPress i wyszukaj wtyczkę. Następnie kliknij Zainstaluj teraz i aktywuj wtyczkę , gdy tylko instalacja się zakończy.

Teraz musisz dostosować niektóre domyślne ustawienia WooCommerce. Można je znaleźć w WooCommerce > Ustawienia w zakładce Produkty z pulpitu WordPress. Tutaj wybierz opcję Ogólne , a zobaczysz ogólne opcje produktów WooCommerce.

Następnie przejdź do zachowania dodawania do koszyka i zaznacz obie opcje , aby nie kolidowały z ustawieniami wtyczki.

Następnie otwórz kartę Bezpośrednia realizacja transakcji i również tutaj wybierz opcję Ogólne . Teraz ustaw przekierowanie Dodano do koszyka na jako Kasa z menu rozwijanego. Na koniec zapisz zmiany .

To wszystko, klienci zostaną przekierowani na stronę kasy zamiast strony koszyka w Twojej witrynie. Mamy również szczegółowy przewodnik, jak pominąć stronę koszyka, jeśli potrzebujesz więcej informacji.

Wniosek

Oto różne sposoby, dzięki którym możesz zmienić kolejność pól kasy WooCommerce w swojej witrynie. Jest to bardzo dobra personalizacja, którą możesz zastosować na swojej stronie kasy, aby zadowolić swoich klientów. W zależności od Twojej witryny może to być również łatwiejsze dla Ciebie.

Podsumowując , omówiliśmy dwa najlepsze sposoby zmiany kolejności pól kasy. Oni są:

• Korzystanie z wtyczki
• Programowo

Korzystanie z wtyczki to jeden z najszybszych sposobów na zmianę kolejności pól. Wystarczy dostosować niektóre opcje z pulpitu nawigacyjnego WooCommerce i zmienić kolejność pól. Jeśli jednak chcesz bardziej zaawansowanego podejścia i masz wiedzę techniczną, możesz również zmienić ich kolejność za pomocą fragmentów kodu.

Dodatkowo dołączyliśmy również krótki samouczek, aby uprościć proces realizacji transakcji poprzez pominięcie strony koszyka. Jeśli chcesz jeszcze bardziej ulepszyć swoją stronę kasy, mamy również szczegółowe przewodniki dotyczące optymalizacji kasy WooCommerce, tworzenia kasy jednostronicowej, zmiany, przejścia do tekstu kasy i tak dalej.

Mamy nadzieję, że ten samouczek był dla Ciebie przydatny. Oto kilka artykułów, które mogą Cię zainteresować:

• Jak zmienić komunikaty o błędach w kasie WooCommerce?
• Najlepsze wtyczki WooCommerce One Page Checkout (bezpłatne i płatne)
• Jak dodać pola warunkowe do kasy WooCommerce

Czy możesz teraz zmienić kolejność pól kasy? Czy miałeś jakieś problemy? Daj nam znać w komentarzach!