2 skuteczne sposoby dostosowania stron kasowych WooCommerce

Każdego roku marki e-commerce tracą 18 miliardów dolarów przychodów ze sprzedaży z powodu porzucania koszyków. Jedną z głównych przyczyn jest skomplikowany proces realizacji transakcji.

Strona kasy służy jako ostateczna brama, która zmienia przeglądarki w klientów. Idealna strona kasy musi zapewniać użytkownikom płynną transakcję od początku do końca. Jeśli chcesz zwiększyć liczbę konwersji i poprawić wyniki finansowe swoich sklepów, zoptymalizowanie strony kasy WooCommerce jest koniecznością!

W tym artykule wyjaśnimy, dlaczego powinieneś dostosować strony kasy WooCommerce. Ponadto wprowadzono również 2 skuteczne sposoby stylizacji i wykorzystania strony kasy.

Zacznijmy!

• Poznaj strony kasowe WooCommerce
• Dlaczego powinieneś dostosować strony kasy WooCommerce
• Jak ręcznie dostosować strony kasy WooCommerce za pomocą kodu?
• Edytuj strony kasy WooCommerce za pomocą wtyczek

Poznaj strony kasowe WooCommerce

Domyślnie strona kasy WooCommerce wygląda raczej nudno i prosto. Jego obowiązkiem nie jest niczym innym, jak wymaganie od kupujących wprowadzenia pewnych podstawowych informacji, w tym imienia i nazwiska, adresu, numerów telefonów, adresu e-mail, notatek do zamówień i danych rozliczeniowych itp.

Chociaż te dane są niezbędne dla stron internetowych do przetwarzania danych płatności i dla klientów do sfinalizowania zakupu, nie pomagają one w zwiększeniu konwersji ani zmniejszeniu porzucania koszyka.

Co więcej, domyślna strona kasy nie jest ukierunkowana na kluczowe informacje, a także nie przedstawia żadnego strategicznego porządku. Dlatego musisz wprowadzić kilka poprawek na swojej stronie kasy, zarówno pod względem projektu, jak i treści.

Zanim przejdziemy do 2 skutecznych sposobów dostosowywania stron kasy WooCommerce, omówmy dalej korzyści płynące z dostosowywania strony kasy.

Dlaczego powinieneś dostosować strony kasy WooCommerce

Pierwszą i najważniejszą korzyścią jest zapewnienie szybkich i łatwych zakupów, które zapewniają klientom bezproblemowe zakupy online.

Dostosowując stronę kasy, możesz zmieść cały kłaczek i skupić się tylko na najważniejszych szczegółach. Poproszenie klientów o zakończenie procesu realizacji transakcji z wieloma polami wejściowymi na wielu stronach może spowodować, że zabraknie im pary. Doprowadzi to do dużej szansy na porzucenie strony.

Ponadto próba dostosowania stron kasowych WooCommerce zapewnia Twojemu sklepowi wyjątkowy, profesjonalny wygląd i styl. Pozostanie domyślnym sprawia, że ​​Twoja witryna tonie jak kamień wśród tysięcy sklepów WooCommerce. Optymalizacja strony kasy, w tym projekt, sprawi, że Twój sklep będzie wyróżniał się z tłumu i wywoła poruszenie wśród klientów.

Podsumowując, te pomysły mają ten sam cel: zabijanie porzucania wózków.

Podczas gdy kupujący w sklepach stacjonarnych rzadko porzucają swoje koszyki, porzucanie koszyków online jest dość częste. W którym średnie współczynniki porzucania koszyków na stronach kasy wynoszą aż 87%.

A według badań instytutu Baymard, wśród powodów porzucania przy kasie, zbyt długi lub skomplikowany proces kasowy zajmuje 27%.

W rezultacie, aby zmniejszyć wskaźnik porzucania koszyka, należy zwrócić uwagę na wrażenia użytkownika w procesie „przed kasą”.

Istnieje wiele sposobów na zapewnienie lepszej obsługi użytkownika, na przykład poprzez:

• Zmiana szablonów i projektów kasy
• Dodawanie, usuwanie i zmiana kolejności pól
• Uczynienie wymaganych pól opcjonalnymi
• Optymalizacja symbolu zastępczego i etykiet
• Pobieranie kosztów bezpłatnej wysyłki
• Tworzenie jednostronicowej kasy

W tym samouczku skoncentrujemy się na optymalizacji pól kasy. Czytaj dalej w kolejnych sekcjach, aby dowiedzieć się, jak dostosować strony kasy WooCommerce z kodami i bez nich.

Jak ręcznie dostosować strony kasy WooCommerce za pomocą kodu?

Jeśli znasz się na technologii WordPress i czujesz się pewnie, dotykając plików PHP i JavaScript, możesz swobodnie edytować swoją stronę kasy za pomocą niestandardowych kodów.

Dostarczymy Ci fragmenty kodu do edycji pól kasy, w tym do zmiany tekstu zastępczego, dodawania i usuwania pól, a także do uczynienia pola wymaganego opcjonalnym. Nie martw się, nie rozbije ci to rozumu!

Edytuj pola kasy

Korzystanie z pliku functions.php Twojej witryny i filtrów WooCommerce do edycji pól kasy. Jak możesz nie wiedzieć, WooCommerce oferuje listę działań i filtrów, które pozwalają dostosować pola kasy prawie tak, jak chcesz, a mianowicie:

• woocommerce_checkout_fields
• woocommerce_billing_fields
• Woocommerce_shipping_fields
• woocommerce_checkout_before_order_review
• woocommerce_checkout_before_customer_details
• woocommerce_after_checkout_form

Następnie, ponieważ użycie filtra woocommerce_checkout_fields umożliwi nadpisanie dowolnego pola, pokażemy Ci, jak się do niego podłączyć i zmienić wyświetlany tekst, całkowicie dodawać i usuwać pola.

Zmień tekst zastępczy

Zakładając, że zmienimy tekst zastępczy w polach order_comments. Oto jak to wygląda domyślnie:

 _x('Uwagi dotyczące zamówienia, np. specjalne uwagi dotyczące dostawy.', 'placeholder', 'woocommerce')

Aby to zmienić, dodaj ten fragment kodu do pliku functions.php:

 // Zaczep się

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Nasza zahaczona funkcja - $fields jest przekazywana przez filtr!

function custom_override_checkout_fields( $fields ) {

$fields['order']['order_comments']['placeholder'] = 'Mój nowy symbol zastępczy';

zwróć $pola;

Dodaj pola do strony kasy WooCommerce

1. Wstaw następujący kod do pliku function.php, aby rozpocząć edycję strony kasy:

 <?php

/**

* Dodaj pole do strony kasy

*/

add_action('woocommerce_after_order_notes', 'customise_checkout_field');

funkcja customise_checkout_field($checkout)

{

echo '<div><h2>' . __('Nagłówek') . '</h2>';

woocommerce_form_field('nazwa_pola_dostosowanego', tablica(

wpisz' => 'tekst',

'klasa' => tablica(

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

),

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

'placeholder' => __('Wskazówka') ,

'wymagane' => prawda,

) , $checkout->get_value('customised_field_name'));

echo '</div>';

}

Po dodaniu tego kodu na stronie kasy pojawi się dodatkowe pole:

2. Dodaj poniższy kod w celu sprawdzenia poprawności danych.

 <?php

/**

* Proces realizacji transakcji

*/

add_action('woocommerce_checkout_process', 'customise_checkout_field_process');

funkcja customise_checkout_field_process()

{

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

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

}

3. Dodaliśmy pola do strony kasy, a także sprawdziliśmy walidację. Nadszedł czas, aby upewnić się, że wszystkie dane wejściowe klienta zostaną poprawnie zapisane.

Można to zrobić za pomocą następującego kodu:

 <?php

/**

* Zaktualizuj wartość pola

*/

add_action('woocommerce_checkout_update_order_meta', 'customise_checkout_field_update_order_meta');

funkcja customise_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']));

}

}

Usuń pola ze strony kasy WooCommerce

Używając kodu podanego poniżej:

 // Zaczep się

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

 

// Nasza zahaczona funkcja - $fields jest przekazywana przez filtr!

function custom_override_checkout_fields( $fields ) {

unset($fields['order']['order_comments']);

 

zwróć $pola;

Ustaw pole wymagane jako opcjonalne

Załóżmy, że sprzedajesz produkty wirtualne i chcesz, aby pole „Adres” w sekcji Płatności było opcjonalne. Po prostu dodaj następujący kod do pliku functions.php motywu potomnego.

 add_filter( 'woocommerce_billing_fields', 'wc_address_field_optional');

funkcja wc_address_field_opcjonalne ( $ pola ) {

$fields['billing']['billing_address_1']['required'] = false;

zwróć $pola;

}

Uwaga: Biorąc pod uwagę, że wszelkie błędy pozostawione w pliku function.php mogą spowodować wyłączenie witryny, przed wprowadzeniem jakichkolwiek zmian należy wykonać kopię zapasową witryny. Zalecamy sposób wolny od ryzyka, który odnosi się do korzystania z pliku function.php motywu podrzędnego.

Edytuj stronę kasy WooCommerce za pomocą wtyczek

Jeśli nie jesteś technikiem, skorzystanie z pomocy potężnych wtyczek zawsze będzie dobrym pomysłem.

Wśród tysięcy wtyczek optymalizacyjnych WooCommerce, WooCommerce Checkout Manager jest strzałem w dziesiątkę do dostosowywania stron kasy WooCommerce.

Ta darmowa, ale potężna wtyczka, opracowana przez Quadlayers, jest zdecydowanie tą, której nie chcesz zostawiać na stole.

Wtyczka umożliwia swobodne dostosowywanie stron kasy WooCommerce, włączając/wyłączając pola, ustawiając pola wymagane/opcjonalne i z łatwością rozszerzając dane rozliczeniowe. Możesz poprawić wrażenia użytkownika i zwiększyć sprzedaż, tworząc pola warunkowe. Poza tym nie ogranicza Cię do liczby typów przesyłania plików. Możesz pozwolić klientom na przesyłanie dowolnych plików różnych typów bez wysiłku/bez wysiłku.

Co więcej, jego interfejs użytkownika również zasługuje na kciuk w górę, ponieważ wszystkie modyfikacje są dokonywane po prostu przez włączenie opcji z menu.

Jak więc zoptymalizować stronę kasy WooCommerce za pomocą WooCommerce Checkout Manager?

#1 Dodaj nowe pola do strony kasy

WooCommerce Checkout Manager umożliwia tworzenie niestandardowych pól na stronie kasy w sekcjach Rozliczenia, Wysyłka i Dodatkowe pola.

Po zainstalowaniu i aktywacji wtyczki w panelu administratora przejdź do WooCommerce > Kasa > Rozliczenia.

1. Wybierz „Dodaj nowe pole”.
2. Wpisz nazwę pola, etykietę i symbol zastępczy.
3. Wybierz typy pól.
4. Kliknij „Zapisz”, aby zaktualizować wszystkie zmiany.
   

#2 Usuń pola ze stron kasy

Możesz dowolnie usuwać pola, przełączając przycisk „Wyłącz”.

#3 Zmień położenie pola kasy

Zmiana domyślnej kolejności pól kasy poprzez:

1. Na polu, które chcesz przenieść, kliknij przycisk z trzema pionowymi liniami.
2. Przytrzymaj ten przycisk, przeciągnij i upuść pole do żądanej pozycji.
3. Kliknij „Zapisz zmiany” na dole strony.
   

Zoptymalizuj swoją stronę kasy WooCommerce już teraz!

Modyfikacja strony kasy WooCommerce może mieć ogromne znaczenie dla Twoich sklepów i przenieść proces realizacji transakcji na wyższy poziom. Nawet najmniejsza personalizacja toruje drogę do przyspieszenia procesu kasowania, poprawy doświadczenia zakupowego i zwiększenia sprzedaży.

W tym poście pokazaliśmy 2 sposoby dostosowywania stron kasy WooCommerce. Możesz wybrać rozwiązanie w postaci wtyczki lub bezpośrednio wstawić fragmenty kodu do pliku function.php.

Jeśli chcesz dodać dalszą optymalizację do swojego sklepu, zapoznaj się z tym przewodnikiem, jak dodać niestandardowe pola do stron produktów WooCommerce, aby uzyskać więcej informacji.

Jeśli masz jakiekolwiek pytania dotyczące optymalizacji strony kasy WooCommerce, zostaw komentarz, a my skontaktujemy się z Tobą tak szybko, jak to możliwe.