LOADING

Onepage checkout w WooCommerce

Domyślnie po przejściu na koszyk użytkownik ma kilka kroków zakupów – w pierwszym weryfikuje zawartość koszyka, w następnym kroku podaje dane, wybiera dostawę itd. i przechodzi do płatności.

Zamiast prowadzić użytkownika po kolejnych krokach ścieżki, można załatwić wszystko w ramach jednej strony – czyli użytkownik przechodzi na koszyk i tu od razu może zweryfikować jego zawartość, podać swoje dane, wybrać przesyłkę oraz sfinalizować zamówienie.

Onepage checkout czy jednak kilka kroków?

To temat na dłuższą dyskusję – więcej o różnych koszykach można poczytać tutaj .

Specjaliści od UX-a widzą kilka problemów z upraszczaniem do jednego kroku. Nagle użytkownik w ramach jednej podstrony dostaje dużo pól do wypełnienia jak dane, przesyłka, koszyk, dostawa itd.

Szczególnie może to mocno rozciągnąć formularz na urządzeniach mobilnych.

Trudniej jest na koszyku osadzonym na tylko jednej stronie rozmieścić tyle formularzy, by zachować dobre usability. Stąd koszyk powinien być dopasowany do danego sklepu.

Czasem rzeczywiście rozbicie koszyka na 2-3 kroki będzie lepszym wyjściem, bo nie przestraszy użytkownika mnóstwem pól do wyboru.

Onepage checkout w naszym sklepie – kiedy konieczne są poprawki

W naszym przypadku sprawa była dość prosta – klienci będą kupować raczej 1-2 produkty, będzie jedna opcja wysyłki, brak rozbudowanego formularza np. o kraje do wysyłki itd. Zdecydowaliśmy się na onepage checkout.

Po drodze pojawił się jednak problem. Domyślnie szablon dawał dużo opcji, które wprowadzały chaos.

Wszystko wrzucone razem na jedną stronę koszyka dawało kupującym wiele możliwości wyboru, ale większość była zbędna. Przykładem niech będą opcje przy samym koszyku:

woocommerce-koszyk-przedMamy tu pola do zmiany ilości, cena powtórzona, trzy przyciski do czyszczenia koszyka, aktualizacji, kontynuacji…

Specyfika sklepu jest taka, że może raz na 100 zakupów ktoś zdecyduje się na zmianę i kupno 2 tych samych kompozycji zamiast jednej. Te wszystkie przyciski są w przypadku naszego sklepu niepotrzebne, stąd decyzja o znacznym uproszczeniu.

Po wstępnych zmianach wygląda to następująco:

woocommerce-koszyk-po

Jak widać wpisuje się to bardziej w ogólny minimalizm sklepu oraz nie odwraca uwagi kupującego.

Jeśli ktoś będzie chciał zamówienie to nadal ma ikonę kosza, która po kliknięciu sama przeładuje stronę i zaktualizuje koszyk.

Zmian w koszyku było u nas dużo więcej, zresztą nadal pracujemy by ko lepiej dopracować.

Dajemy to jako przykład że przejście z koszyka rozłożonego na kroki na koszyk typu onepage to nie tak szybka i prosta sprawa. Będą konieczne poprawki w CSS, w wyglądzie i układzie koszyka po to by był przejrzysty i dobrze spełniał swoją funkcję.

Jak zrobić onepage checkout w WooCommerce

Sprawa jest bardzo prosta. Jak można przypuszczać, załatwimy to darmową wtyczką, a konkretnie Bootstrap one page woocommerce checkout.

Co prawda wtyczka była ostatni raz aktualizowana 2 lata temu, ale nadal działa dobrze. Po instalacji i włączeniu możemy przejść do ustawień wtyczki (Ustawienia -> Checkout settings) i tak naprawdę tu interesuje nas shortcode, który kopiujemy:

shortcode-koszyk

Przy okazji można zmienić liczbę kolumn wyświetlania, ale w większości przypadków zostawimy to raczej domyślnie na jednej kolumnie.

Przechodzimy do menu Strony i tam wyszukujemy stronę Koszyk, klikamy przycisk edycji tejże strony.

Następnie w polu treści strony usuwamy stary shortcode i zastępujemy go skopiowanym:

woocommerce-koszyk-shortcode

To tyle. Zapisujemy i sprawdzamy czy wszystko działa jak powinno.

Jak wspomnieliśmy, samo przejście na jednostronicowy koszyk nie jest trudne i da się to szybko zrobić za pomocą wtyczki.

Jednak wiele szablonów nie będzie do tego dostosowanych i po wykonaniu zmiany trzeba będzie wprowadzić poprawki w układzie i stylowaniu koszyka.

menu poradnika