Jak stworzyć jednostronicową kasę WooCommerce

Chcesz ograniczyć porzucanie koszyków i zwiększyć współczynniki konwersji? W tym przewodniku dowiesz się, jak utworzyć jednostronicową kasę WooCommerce z wtyczkami i bez, aby pomóc Ci zwiększyć sprzedaż.

Nie jest tajemnicą, że kasa jest jedną z najważniejszych stron sklepu internetowego. Jest to jednak również etap, w którym wielu użytkowników porzuca koszyki. Według ostatnich badań prawie 70% kupujących porzuca koszyk w pewnym momencie, a 21% robi to przy kasie. Czemu? Zwykle dlatego, że proces zakupu jest zbyt długi lub skomplikowany.

Mimo że nie ma jednego rozwiązania, które działałoby dla każdej witryny eCommerce, jednostronicowe strony kasy sprawdzają się lepiej w przypadku większości firm. Dlatego stworzenie jednostronicowej kasy dla Twojego sklepu WooCommerce może pomóc w zmniejszeniu porzucania koszyków i zwiększeniu sprzedaży.

Co to jest jednostronicowa kasa WooCommerce?

W kasie jednostronicowej wszystkie pola kasy są wyświetlane na jednej stronie . Może zawierać zawartość koszyka, szczegóły płatności, adresy rozliczeniowe i wysyłkowe, opcje wysyłki oraz inne informacje, takie jak obrazy, tekst lub dodatkowe formularze kontaktowe.

Głównym celem jednostronicowej kasy jest skrócenie procesu zakupu i ograniczenie porzucania koszyka. Ponieważ klienci wypełniają wszystkie informacje, aby złożyć zamówienie na jednej stronie, istnieje większe prawdopodobieństwo, że zakończą proces.

Korzyści z kas jednostronicowych

Niektóre z zalet jednostronicowych płatności to:

• Pomaga ograniczyć porzucanie koszyków
• Skraca proces realizacji transakcji
• Zwiększa współczynniki konwersji
• Łatwy do zrozumienia, ponieważ kupujący widzą wszystkie informacje, które muszą wypełnić na jednej stronie

Aby uzyskać więcej informacji o kasach jedno- i wielostronicowych, zapoznaj się z tym pełnym przewodnikiem.

Jak stworzyć jednostronicową kasę WooCommerce?

Istnieją różne sposoby tworzenia jednostronicowej kasy WooCommerce :

1. Korzystanie z wtyczki
2. Programowo
3. Z kreatorem stron
4. Z pulpitu WordPress

W tej sekcji przyjrzymy się każdej opcji, abyś mógł wybrać tę, która najlepiej odpowiada Twoim umiejętnościom i potrzebom.

1) Utwórz jednostronicową kasę za pomocą wtyczki

Pierwszą opcją stworzenia jednostronicowej kasy w WooCommerce jest użycie wtyczki. Istnieje wiele jednostronicowych wtyczek do kasy, zarówno bezpłatnych, jak i premium. W tej demonstracji użyjemy WooCommerce Direct Checkout. Ta wtyczka pomoże Ci skrócić proces realizacji transakcji i zwiększyć współczynniki konwersji. Możesz nie tylko utworzyć jednostronicową kasę, ale także usunąć niepotrzebne pola kasy, dodać przycisk szybkiego zakupu i nie tylko.

Jednostronicowa kasa z Direct Checkout

Direct Checkout ma darmową wersję z podstawowymi funkcjami i 3 planami premium z większą liczbą funkcji, które zaczynają się od 19 USD (płatność jednorazowa).

Najpierw pobierz wtyczkę. Możesz to zrobić za pomocą tego linku lub pulpitu WordPress. Po aktywacji przejdź do WooCommerce > Bezpośrednia kasa . Tutaj skonfiguruj go w następujący sposób, aby przekierowywał użytkowników ze sklepu i stron pojedynczych produktów bezpośrednio na stronę kasy.

• Dodano do koszyka alert : Zastępuje alert „Wyświetl koszyk” bezpośrednim kasą
• Dodano do koszyka link : Zastępuje link „Wyświetl koszyk” bezpośrednim kasą
• Przekierowanie koszyka : Pozwala zmienić zachowanie przycisku Dodaj do koszyka
• Przekierowanie koszyka do : możesz wybrać, gdzie przekierować użytkowników po dodaniu czegoś do koszyka. W takim przypadku przekierujemy ich do kasy
• Zastąp adres URL koszyka : ponieważ gdy kupujący doda coś do koszyka, przekierujemy ich do kasy, zastąpimy adres URL koszyka linkiem do kasy

Należy pamiętać, że zmiany te będą dotyczyć stron sklepu, pojedynczych produktów i kategorii. Dodatkowo upewnij się, że nie masz żadnego linku, który prowadzi użytkowników do koszyka, ponieważ zamierzamy go wyłączyć.

Otóż ​​to! Właśnie uprościłeś proces kasy, przekierowując klientów ze stron produktów i sklepów bezpośrednio do kasy. Ponadto kupujący będą mogli edytować i potwierdzać swoje zamówienia na stronie kasy.

Możesz utworzyć jednostronicową kasę za pomocą bezpłatnej wersji WooCommerce Direct Checkout, ale jeśli chcesz, aby więcej funkcji przeniosło Twoją kasę na wyższy poziom, możesz sprawdzić niektóre plany premium.

2) Programowo utwórz jednostronicową kasę

W tej sekcji użyjemy niektórych skryptów PHP i stylów CSS, aby dodać funkcje do jednostronicowego zamówienia, które stworzyliśmy za pomocą wtyczki. Dlatego zalecamy zajrzenie do pierwszej sekcji oraz zainstalowanie i skonfigurowanie wtyczki, aby utworzyć kasę na jednej stronie. Zajmie to dosłownie kilka minut.

Gdy to zrobisz, zobaczmy, jak w pełni programowo dostosować jednostronicową stronę płatności .

UWAGA : ponieważ będziemy edytować niektóre podstawowe pliki motywów, przed rozpoczęciem upewnij się, że utworzyłeś kopię zapasową swojej witryny i masz zainstalowany motyw potomny. Możesz użyć dowolnej z tych wtyczek motywów potomnych lub utworzyć własną, postępując zgodnie z tym przewodnikiem.

2.1) Dodaj metadane produktu do strony kasy

Zacznijmy od dodania informacji o produkcie, który kupuje użytkownik. Na stronie kasy wyświetlimy nazwę, miniaturę i opis produktu.

Ponieważ wyłączyliśmy stronę koszyka, po dodaniu produktu do koszyka kupujący zostaną przekierowani do kasy. Mimo że strona koszyka jest ukryta, możemy jej użyć do pobrania z niej wszystkich informacji o produkcie.

Aby to zrobić, po prostu wklej następujący kod do pliku functions.php motywu potomnego:

 // zaczep do wyświetlania metadanych produktu
 add_action('woocommerce_checkout_before_customer_details','QuadLayers_product_meta');
 funkcja QuadLayers_product_meta(){
 echo '<div class="custom-product"><h2>Zamierzasz kupić ';
 $koszyk = WC()->koszyk->get_cart();
 foreach( $cart as $cart_item_key => $cart_item ){
 $produkt = $cart_item['data'];
 echo $product->get_name()."</h2>";
 echo $produkt->get_image();
 echo "<span>".$product->get_description()."</span>";
 }
 echo "<h3>Dokończ zamówienie, wypełniając poniższy formularz</h3>";
 }

Aby to przetestować, kliknij przycisk zakupu na dowolnym produkcie, a po przekierowaniu na stronę kasy zobaczysz coś takiego:

2.2) Nadpisywanie pliku szablonu kasy WooCommerce

Plik odpowiedzialny za wydrukowanie strony kasy to form-checkout-php i znajduje się we wtyczce WooCommerce w folderze szablonów: /woocommerce/templates/checkout.

Aby zastąpić ten plik, skopiuj oryginalny plik z wtyczki WooCommerce i wklej go w folderze kasy , w katalogu WooCommerce motywu podrzędnego.

W domyślnej kasie WooCommerce układ jest ustawiony na dwie kolumny. W pierwszej kolumnie wyświetlane są formularze fakturowania, wysyłki i dodatkowe, a w drugiej szczegóły zamówienia.

Możesz to zmienić, edytując klasę HTML elementu <div> zawierającego formularze, od col2-set do col1-set w następujący sposób:

 <div class="col1-set">

Po tej prostej edycji wszystkie formularze będą wyświetlane w jednej kolumnie o pełnej szerokości, tak jak poniżej:

Następnie zmodyfikujemy tytuł szczegółów zamówienia i zmienimy go z „Twoje zamówienie” na „Przegląd zamówienia” za pomocą następującego skryptu:

 <h3><?php esc_html_e( 'Przegląd zamówienia', 'woocommerce' ); ?></h3>

To tylko kilka prostych przykładów tego, co możesz tutaj zrobić. Nie krępuj się iść dalej i wprowadzać własne dostosowania. Tutaj możesz użyć dowolnej z natywnych funkcji WordPressa. Więcej informacji na temat haków kasowych można znaleźć w tym artykule.

Aby dowiedzieć się więcej o tym, jak programowo dostosowywać szablony WooCommerce, zapoznaj się z tym pełnym przewodnikiem.

2.3) Dodaj koszyk do strony kasy

Możesz użyć krótkich kodów na stronie kasy, więc jeśli chcesz dodać tam koszyk, możesz użyć krótkiego kodu koszyka WooCommerce w następujący sposób:

 echo do_shortcode(' [ woocommerce_cart ] ');

Aby wyświetlić koszyk tuż przed szczegółami zamówienia, wklej ten skrypt PHP do pliku functions.php motywu potomnego:

 add_action('woocommerce_checkout_after_customer_details','QuadLayers_add_cart_checkout');
 funkcja QuadLayers_add_cart_checkout(){
       echo do_shortcode(' [ woocommerce_cart ] ');
 }

Powinieneś teraz zobaczyć koszyk z produktami dodanymi przez użytkownika na końcu formularzy kasowych:

2.4) Dodaj niestandardową treść do strony kasy

Kiedy klienci przeglądają szczegóły zamówienia, mogą wybrać metodę płatności i kliknąć „Złóż zamówienie”, aby sfinalizować zakup. Ponieważ ten blok jest wyświetlany w prawej kolumnie, wstawimy trochę treści po lewej stronie, aby uzyskać zrównoważony projekt.

Jest to niestandardowa funkcja treści, która zostanie wklejona do pliku functions.php , w którym wyjaśnimy niektóre zasady zwrotów, metody płatności, dostawę i tak dalej. Możesz go spersonalizować i dostosować do swojego sklepu:

 add_action('woocommerce_checkout_before_order_review','QuadLayers_add_column_before_order_review');
funkcja QuadLayers_add_column_before_order_review(){    
    printf(' <div><h3>Więcej informacji o Twoim zamówieniu:</h3>
 <p>Dziękujemy bardzo za zakup w naszym sklepie. Oto kilka przydatnych informacji, które możesz potrzebować</p>
 <ul>
 <li>Dokładamy wszelkich starań, aby dostarczyć tak szybko, jak to możliwe, ale w celu utrzymania optymalnej obsługi Twój produkt może potrwać do dwóch dni roboczych przed przybyciem</li>
 <li>Nasze zasady dotyczące zwrotów pozwalają poprosić o wymianę do 15 dni po zakupie. <a href="#">Przeczytaj tutaj zasady sklepu</a></li>
 <li>Jeśli wybierzesz metodę płatności kartą kredytową, w niektórych przypadkach może to spowodować opóźnienie w dostawie o dwa dni</li>
 <li>Jeśli nie jesteś zadowolony z tego, co otrzymałeś, możesz również zdecydować się na zwrot pieniędzy zgodnie z naszą polityką zwrotów</li>
 <li>Czy masz kupon rabatowy? Jeśli zauważysz, weź go tutaj i wróć, abyś mógł go zastosować</ li>
 </ul>
 </div>','woocommerce');
}

A oto efekt końcowy:

2.5) Dodanie stylów CSS do strony kasy

W pliku function.php zobaczysz, że dodaliśmy własną klasę, którą nazwaliśmy custom-product . Użyjemy tej klasy do stylizacji zawartości za pomocą niektórych skryptów CSS. Dodatkowo możemy nadać ostatnie szlify projektowi naszej nowej jednostronicowej kasy bez korzystania z naszej niestandardowej klasy.

To jest pełny skrypt CSS, którego używaliśmy w tym samouczku. Po prostu skopiuj go i wklej do pliku style.css swojego motywu potomnego:

 /* ukryj tytuł formularza rozliczeniowego */
.woocommerce-billing-fields > h3:nth-child(1){
    Nie wyświetla się;
}
/* masz zamiar kupić... */
.produkt-niestandardowy > h2:nth-child(1){
    wyrównanie tekstu: środek;
}
/* obraz */
img.attachment-woocommerce_thumbnail:nth-child(2){
    margines:auto;
}
/* opis */
.produkt-niestandardowy > span:nth-child(3){
    margines:auto;
    szerokość:50%;
    Blok wyświetlacza;
}
/* Zrealizuj zamówienie ...*/
.produkt-niestandardowy > h3:n-te-dziecko(4){
    wyrównanie tekstu: środek;
    margines: 25px 0 25px 0;
}
/* więcej informacji.. */
.produkt-niestandardowy > div:nth-child(8){
    pływak:w lewo;
    szerokość:47%;
}
#Szczegóły klienta{
    margines-dolny:40px;
}

UWAGA : w tej demonstracji użyliśmy motywu Storefront, więc może być konieczne dostosowanie selektorów CSS, jeśli używasz innego motywu lub jeśli dodałeś własne dostosowania.

Następnie, jeśli wszystko poszło dobrze, na stronie kasy powinieneś zobaczyć następujące informacje:

Otóż ​​to! Właśnie utworzyłeś programowo w pełni dostosowaną jednostronicową kasę WooCommerce .

3) Utwórz jednostronicową kasę za pomocą narzędzia do tworzenia stron

Inną interesującą opcją tworzenia i dostosowywania jednostronicowej kasy w WooCommerce jest użycie kreatora stron. Istnieje kilka kreatorów stron. W tej demonstracji użyjemy Site Origin. Z ponad milionem aktywnych instalacji, jest to jeden z najpopularniejszych kreatorów stron ze względu na swoją prostotę i wydajność.

Proces jest podobny dla większości kreatorów stron, więc niezależnie od tego, którego używasz, powinieneś być w stanie bez problemu postępować zgodnie z przewodnikiem.

Najpierw pobierz Site Origin z repozytorium WordPressa, zainstaluj go i aktywuj w swojej witrynie. Następnie otwórz stronę kasy z edytorem i dodaj do niej nazwę. Nazwiemy to kasą One Page.

Jak widać, strona kasy to tylko krótki kod WooCommerce umieszczony w bloku Gutenberga. Jeśli wyłączyłeś bloki Gutenberga w zapleczu, zobaczysz również ten sam krótki kod, ale w starym edytorze tekstu. Po prostu usuń blok shortcode i dodaj jeden z kreatorów stron.

Teraz możemy zacząć tworzyć w pełni spersonalizowaną, jednostronicową kasę za pomocą kreatora stron. Możesz dodać dowolny widżet w kolumnach i ustawić go w żądanym układzie. Pamiętaj, że musisz wstawić

 [ woocommerce_checkout ]

shortcode ponownie, w przeciwnym razie nie zadziała.

I tu pojawia się najlepsza część. Możesz także użyć dowolnego z dostępnych widżetów lub modułów w układzie kreatora stron. Dodatkowo możesz dołączyć inne skróty. Koszyk i „Moje konto” są dość powszechne.

To jest podstawowy przykład, więc musisz dostosować każdy widżet i dostosować stronę kasy do swoich potrzeb. Pamiętaj też, że każdy kreator stron działa inaczej, więc nawet jeśli proces jest podobny, może być konieczne dostosowanie niektórych rzeczy. Generalnie najlepiej sprawdzają się szablony o pełnej szerokości i bez paska bocznego.

4) Utwórz jednostronicową kasę za pomocą edytora bloków Gutenberg

Podobnie możesz dostosować swoją jednostronicową kasę WooCommerce za pomocą edytora bloków Gutenberga. W tym celu na pulpicie WordPress otwórz stronę kasy, a zobaczysz blok z krótkim kodem kasy. Dodajmy więcej bloków do tej strony, klikając przycisk dodawania bloku ( + ) i wybierając Kolumny .

Tutaj możesz użyć dowolnego z dostępnych bloków i skrótów, aby w pełni dostosować stronę kasy. Alternatywnie, jeśli masz umiejętności kodowania, możesz również edytować kasę, wstawiając własny kod HTML z blokiem kodu. W tym demo dodaliśmy koszyk i moje skrócone kody konta w 2 kolumnach, więc wygląda to tak:

I w ten sposób możesz łatwo utworzyć jednostronicową kasę w WooCommerce za pomocą edytora bloków Gutenberg.

Ostateczne wskazówki

• Tworząc jednostronicową kasę, zawsze miej na uwadze główny cel kasy: umożliwienie klientom składania zamówień tak łatwo, jak to możliwe. Należy unikać wszelkich treści, które odwracają uwagę użytkowników od tego celu.
• Wszystkie informacje, które użytkownicy muszą przejrzeć przed kliknięciem przycisku „Złóż zamówienie”, powinny być dostępne na tej samej stronie, aby mogli zrobić wszystko ze strony kasy. Uwzględnij wszystkie niezbędne informacje i unikaj wstawiania linków, które prowadzą użytkowników pod inny adres URL.
• Użytkownicy nie lubią długich stron z treścią podczas zakupów. Zachowaj prostotę i czystość oraz skup się na osiągnięciu wydajnej i profesjonalnej strony kasy

Wniosek

Podsumowując, jednostronicowe kasy pomogą skrócić proces zakupu, zmniejszyć porzucanie koszyków i zwiększyć współczynniki konwersji. Chociaż w niektórych przypadkach wielostronicowe kasy mogą być bardziej efektywne, w większości sklepów krótsze kasy zwykle działają lepiej.

W tym przewodniku widzieliśmy różne sposoby tworzenia jednostronicowej kasy w WooCommerce:

• Z wtyczką
• Programowo
• Z kreatorem stron
• Korzystanie z edytora bloków Gutenberg

Jeśli potrzebujesz szybkiego i wydajnego rozwiązania, skorzystaj z Direct Checkout . Ta wtyczka freemium umożliwia zbudowanie jednostronicowej kasy w kilka minut, a także zawiera kilka funkcji, które pomogą Ci ulepszyć kasę i zwiększyć sprzedaż. Na przykład możesz usunąć pola kasy, dodać przyciski szybkiego zakupu i szybkiego podglądu i wiele więcej. Jeśli nie chcesz instalować dodatkowej wtyczki i używasz kreatora stron, możesz utworzyć stronę kasy za pomocą edytora bloków Gutenberg lub za pomocą kreatora stron.

Z drugiej strony, jeśli masz umiejętności kodowania, masz więcej opcji edycji strony kasy. Po utworzeniu kasy za pomocą wtyczki Direct Checkout możesz dodać skrypty PHP i CSS, aby w pełni dostosować kasę. W tym artykule widzieliśmy kilka przykładów, ale możesz zrobić o wiele więcej. Możesz użyć ich jako podstawy i bawić się, aby znaleźć to, co działa najlepiej dla Ciebie.

Jaka jest twoja ulubiona metoda tworzenia jednostronicowej kasy w WooCommerce? Czy znasz jakieś inne, które powinniśmy uwzględnić? Daj nam znać w sekcji komentarzy poniżej!