Jak dostosować stronę koszyka i kasy w WooCommerce
Zoptymalizuj ścieżkę zakupową, uprość formularz zamówienia i zmniejsz porzucanie koszyka — bez programowania
Spis treści
- Strony koszyka i kasy w WooCommerce — jak działają
- Jak edytować i dostosować stronę koszyka
- Jak zoptymalizować stronę kasy w WooCommerce krok po kroku
- Jak skonfigurować kasę jednostronicową i kasę dla gości
- Często zadawane pytania
Strony koszyka i kasy w WooCommerce — jak działają
Koszyk i kasa to dwa najważniejsze etapy ścieżki zakupowej w sklepie WooCommerce. To tutaj klienci ostatecznie decydują, czy sfinalizują zakup — i tutaj statystycznie dochodzi do największego odpływu. Zrozumienie architektury tych stron to pierwszy krok do ich skutecznej optymalizacji.
Strona koszyka (Cart) to miejsce, gdzie klient przegląda wybrane produkty przed przejściem do płatności. Może tu zmienić ilości produktów, usunąć pozycje z koszyka, wpisać kod kuponu rabatowego i sprawdzić szacowane koszty wysyłki. Na stronie koszyka pojawia się też sekcja cross-sell z propozycjami powiązanych produktów.
Strona kasy (Checkout) to formularz zbierający dane klienta niezbędne do realizacji zamówienia: imię i nazwisko, adres rozliczeniowy, ewentualnie adres dostawy (jeśli inny niż rozliczeniowy), dane kontaktowe, notatka do zamówienia, metoda płatności i metoda dostawy. Po wypełnieniu formularza i kliknięciu "Złóż zamówienie" klient trafia na stronę potwierdzenia (Order Received).
WooCommerce tworzy strony koszyka i kasy automatycznie podczas instalacji i przypisuje je w Ustawieniach → Zaawansowane → Ustawienia strony. Możesz zmienić przypisanie stron w dowolnym momencie — przydatne, gdy chcesz przetestować alternatywną wersję strony kasy bez usuwania oryginalnej.
Od WooCommerce 8.3 dostępna jest nowa wersja bloków koszyka i kasy oparta na edytorze bloków Gutenberg. Jeśli Twój motyw ją obsługuje, masz znacznie więcej możliwości wizualnej edycji obu stron bez pisania kodu. Starsze motywy korzystają z tradycyjnych szablonów PHP — tam customizacja wymaga edycji plików motywu lub wtyczek.
Jak edytować i dostosować stronę koszyka
Przejdź do Strony → Wszystkie strony i znajdź stronę Koszyk (Cart). Kliknij Edytuj. Jeśli Twój motyw obsługuje blokowy koszyk WooCommerce, zobaczysz blok Koszyk w edytorze Gutenberg — możesz kliknąć na jego poszczególne elementy i edytować je wizualnie: zmieniać kolory, czcionki, kolejność sekcji i etykiety przycisków.
W blokowym koszyku WooCommerce możesz kliknąć przycisk "Przejdź do kasy" i zmienić jego tekst, kolor tła i kolor tekstu bezpośrednio w panelu po prawej stronie edytora. Możesz też dodać powyżej koszyka własne bloki Gutenberga — np. pasek z ikonkami bezpieczeństwa (kłódka SSL, znane logo metod płatności), tekst promocyjny ("Zamów do 15:00 — wysyłka dziś") lub licznik odliczający czas do końca oferty.
W ustawieniach WooCommerce → Ustawienia → Ogólne możesz włączyć lub wyłączyć kupony (pole Włącz używanie kodów kuponów). Jeśli korzystasz z blokowego koszyka, sekcja kuponu jest widoczna domyślnie i możesz ją ukryć w ustawieniach bloku. Kalkulator wysyłki na stronie koszyka włączysz lub wyłączysz w WooCommerce → Ustawienia → Wysyłka → Opcje wysyłki.
Komunikaty wyświetlane na stronie koszyka (np. "Twój koszyk jest pusty") możesz edytować przez wtyczkę do tłumaczeń, taką jak Loco Translate — bez modyfikowania plików wtyczki. Dodaj elementy budujące zaufanie: ikony metod płatności, certyfikatu SSL, informację o darmowej wysyłce od określonej kwoty lub pasek postępu pokazujący, ile brakuje do darmowej dostawy.
Jak zoptymalizować stronę kasy w WooCommerce krok po kroku
Strona kasy to najczulszy punkt sklepu — zbyt skomplikowany formularz to jeden z głównych powodów porzucania koszyka. Badania Baymard Institute pokazują, że 17% klientów opuszcza kasę, bo proces jest zbyt długi lub skomplikowany. Optymalizacja kasy to bezpośrednia inwestycja w konwersję.
Pierwszym krokiem jest usunięcie zbędnych pól. Sprawdź formularz kasy i zastanów się, które pola są naprawdę konieczne dla Twojego rodzaju sprzedaży. Sklep sprzedający produkty cyfrowe nie potrzebuje pola Adres dostawy, Telefon może być opcjonalny, a pole Firma jest potrzebne tylko, jeśli sprzedajesz B2B. Skorzystaj z wtyczki Checkout Field Editor for WooCommerce (bezpłatna), żeby ukryć lub usunąć niepotrzebne pola bez edycji kodu.
Drugą ważną zmianą jest logiczne pogrupowanie pól. Standardowy formularz kasy WooCommerce jest stosunkowo czytelny, ale możesz poprawić jego układ. Umieść najważniejsze pola na górze (imię, nazwisko, e-mail), a rzadziej wypełniane (firma, NIP, notatka) na dole lub schowaj je za linkiem "Dodaj szczegóły faktury".
Zadbaj o walidację pól w czasie rzeczywistym — klient powinien natychmiast widzieć, że wpisał błędny e-mail lub że pole jest wymagane, a nie dopiero po kliknięciu "Złóż zamówienie". Wiele nowoczesnych motywów i wtyczek kasy to obsługuje. Czerwone obramowanie błędnego pola z czytelną informacją zwrotną znacząco redukuje frustrację.
Jak skonfigurować kasę jednostronicową i jak ustawić kasę dla gości
Kasa dla gości (Guest Checkout) to możliwość złożenia zamówienia bez zakładania konta. To jedno z najważniejszych ustawień wpływających na konwersję — 24% klientów porzuca koszyk, gdy jest zmuszonych do założenia konta. Włącz kasę dla gości w WooCommerce → Ustawienia → Konta i prywatność. Zaznacz opcję Zezwól klientom na składanie zamówień bez konta. Możesz równocześnie zostawić opcję logowania dla tych, którzy mają już konto — wyświetli się przyjazny formularz logowania na górze strony kasy.
Warto też włączyć opcję automatycznego tworzenia konta przy kasie — zaznacz Automatycznie generuj hasło konta dla klientów. Klient składa zamówienie jak gość (podaje tylko e-mail), ale WooCommerce tworzy dla niego konto w tle i wysyła dane logowania e-mailem. To kompromis między wygodą gościa a korzyścią sklepu z posiadania bazy klientów.
Kasa jednostronicowa (One Page Checkout) to format, w którym klient widzi koszyk, formularz zamówienia i podsumowanie na jednej stronie bez przeskakiwania między podstronami. Standardowy WooCommerce używa układu dwustronicowego (koszyk → kasa). One Page Checkout wdroży wtyczka taka jak:
- CartFlows — rozbudowany kreator lejków sprzedażowych z kasą jednostronicową i możliwością order bumps (dodatkowe oferty przed płatnością).
- WooCommerce One Page Checkout — oficjalna wtyczka WooCommerce (płatna), integruje koszyk i kasę na jednej stronie z możliwością wyboru produktów bezpośrednio na stronie kasy.
- FunnelKit Checkout (dawniej WooFunnels) — alternatywa z rozbudowanymi opcjami customizacji i A/B testami.
Niezależnie od wybranego rozwiązania, po wdrożeniu kasy jednostronicowej monitoruj współczynnik konwersji przez minimum 2-4 tygodnie przed oceną jej skuteczności. Kasa jednostronicowa sprawdza się szczególnie przy prostych produktach i małym asortymencie. Przy złożonych zamówieniach (wiele opcji wysyłki, produkty zmienne) tradycyjny dwuetapowy proces może być czytelniejszy.
Często zadawane pytania
Jak dodać pole na NIP/fakturę do formularza zamówienia?
Najprościej dodasz pole NIP do formularza kasy przez wtyczkę WooCommerce Checkout Field Editor (bezpłatna lub premium) lub Flexible Checkout Fields. Dodajesz nowe pole tekstowe (np. "NIP") w sekcji rozliczeniowej formularza, ustawiasz jego etykietę, placeholder i opcjonalnie oznaczasz jako wymagane. Dane z pola trafiają do szczegółów zamówienia w panelu administracyjnym i mogą być uwzględniane w e-mailach z potwierdzeniem. Dla bardziej rozbudowanych rozwiązań faktury VAT sprawdź wtyczkę WooCommerce PDF Invoices & Packing Slips.
Jak skonfigurować przekierowanie po złożeniu zamówienia?
Domyślnie po złożeniu zamówienia WooCommerce przekierowuje klienta na stronę Dziękujemy (Order Received). Możesz zmienić tę stronę lub dodać do niej własną treść, edytując stronę kasy w WordPress i dodając specjalny shortcode lub blok. Jeśli chcesz przekierować klienta na zupełnie inną stronę (np. stronę podziękowania z ofertą specjalną), użyj wtyczki WooCommerce Thank You Page Customizer lub Custom Thank You Pages for WooCommerce. Zaawansowane przekierowania (np. zależne od wybranej metody płatności) wymagają krótkiego kodu w functions.php.
Jak zmniejszyć porzucanie koszyka w WooCommerce?
Porzucanie koszyka to jeden z największych problemów sklepów internetowych — statystycznie ok. 70% koszyków jest porzucanych. Najskuteczniejsze działania to: uproszczenie procesu kasy (mniej pól, kasa dla gości, kasa jednostronicowa), wyraźne oznaczenie bezpieczeństwa transakcji (ikony SSL, znane metody płatności), dodanie kilku metod płatności, pokazanie kosztów wysyłki jak najwcześniej (nie dopiero na kasie) oraz wdrożenie kampanii odzyskiwania porzuconych koszyków przez e-mail — wtyczki Abandoned Cart Lite for WooCommerce lub CartFlows pozwalają wysyłać automatyczne przypomnienia do klientów, którzy nie dokończyli zakupu.
Potrzebujesz pomocy z WooCommerce?
Zespół smartxhosting.pl pomoże Ci skonfigurować sklep WooCommerce na hostingu WordPress. Hosting WordPress od 10 zł/miesiąc z darmowym SSL i codziennym backupem.
Skontaktuj się z nami