Jak dodać przycisk do wyczyszczenia koszyka w WooCommerce

Przycisk czyszczenia koszyka pomaga klientom, którzy często zaczynają konfigurację zamówienia od nowa. Sprawdza się w zamówieniach B2B, konfiguratorach zestawów oraz na wspólnych stanowiskach zakupowych, gdy usuwanie wielu pozycji po kolei byłoby uciążliwe.

Zalecamy przycisk, gdy klient może łatwo odtworzyć zamówienie i często zmienia jego wariant. Nie umieszczaj go obok przycisku przejścia do kasy ani zmiany ilości, jeśli pomyłka oznacza utratę długiej konfiguracji.

Na współdzielonym urządzeniu bieżący koszyk może zawierać produkty dodane przez poprzednią osobę. Dodaj wyraźne potwierdzenie, a po opróżnieniu pokaż pusty stan koszyka i możliwość powrotu do katalogu.

W całej ścieżce zakupowej sprawdź również, czy koszyk sklepu ułatwia przejście do kasy. Jeśli potrzebujesz przebudować sam sklep i jego proces zakupowy, sklep internetowy WooCommerce dopasowany do sprzedaży obejmuje zaprojektowanie i wdrożenie tego doświadczenia.

Koszyk WooCommerce przechowuje pozycje w kontekście sesji klienta, a ciasteczka pomagają rozpoznać, kiedy jego zawartość się zmieniła. WooCommerce opisuje `woocommerce_cart_hash` i `woocommerce_items_in_cart` jako ciasteczka sesyjne związane ze zmianami koszyka oraz `wp_woocommerce_session_` jako identyfikator pozwalający odnaleźć dane sesji. Dokumentacja ciasteczek WooCommerce podaje te role, a domyślny czas trwania sesji koszyka wynosi 48 godzin od dodania produktu według dokumentacji czasu sesji koszyka.

Tabela pokazuje, że przycisk powinien opróżniać pozycje koszyka, a nie resetować całą sesję klienta.

Koszyk klasyczny korzysta ze strony zawierającej shortcode `[woocommerce_cart]`, a Cart Block jest blokowym widokiem koszyka. WooCommerce 8.3 wprowadził Cart i Checkout Blocks jako domyślne dla nowych sklepów korzystających z tej wersji; istniejące sklepy zachowują dotychczasowy wariant po aktualizacji. FAQ WooCommerce o blokach Cart i Checkout doprecyzowuje ten zakres, a dokumentacja shortcode'ów stron opisuje `[woocommerce_cart]`.

AJAX oznacza aktualizację części strony bez pełnego przeładowania. Po opróżnieniu koszyka sklep powinien zsynchronizować pozycje, sumę, komunikat pustego koszyka i mini koszyk. Zmiana danych sesji bez odświeżenia tych elementów może pozostawić na ekranie nieaktualną zawartość.

Rozszerzenie do czyszczenia koszyka wybierz według tego, czy obsługuje Cart Block, czy koszyk klasyczny. W panelu WordPressa przejdź do Strony > Wszystkie strony i edytuj stronę koszyka: blok Cart oznacza widok blokowy, a shortcode `[woocommerce_cart]` oznacza wariant klasyczny.

Tabela pozwala odrzucić rozszerzenie, które nie obsługuje widoku używanego w sklepie.

Przed instalacją sprawdź dokumentację autora, datę aktualizacji, obsługiwane wersje WooCommerce i wymagane uprawnienia. Wypróbuj rozszerzenie na stagingu, czyli kopii sklepu przeznaczonej do testów. Nie zakładaj, że motyw ma wbudowane opróżnianie koszyka; potwierdź to w jego dokumentacji.

Własny przycisk powinien wysyłać żądanie POST, a handler powinien sprawdzić żądanie, dostępność koszyka WooCommerce i kontekst sesji przed wywołaniem `WC()->cart->empty_cart()`. POST służy tu do zmiany stanu, a nie do pobrania strony.

Umieść kod w małej własnej wtyczce albo motywie potomnym. Aktualizacja motywu nadrzędnego może nadpisać jego pliki, dlatego nie dopisuj funkcji bezpośrednio do jego `functions.php`.

Nonce WordPressa to token do weryfikowania żądań. Dokumentacja WordPressa podaje, że dla niezalogowanych użytkowników rdzeń domyślnie generuje ten sam nonce, ponieważ ich identyfikator użytkownika ma wartość `0`; taki token sam nie chroni gości przed CSRF. Jeśli własna funkcja ma obsługiwać gości, musi powiązać identyfikator nonce z losowym identyfikatorem sesji gościa przez mechanizm sesji i filtr `nonce_user_logged_out` albo zastosować inne zabezpieczenie związane z sesją WooCommerce. Dokumentacja nonce WordPress opisuje ten przypadek i wskazuje, że nonce nie zastępuje uwierzytelniania ani kontroli dostępu.

Z tego powodu poniższa logika opisuje wyłącznie operację handlera, a nie gotowy kod do wklejenia: zweryfikuj token powiązany z właściwym użytkownikiem lub sesją, sprawdź metodę żądania POST, upewnij się, że `WC()->cart` jest dostępny, wywołaj `empty_cart()`, a następnie przekieruj do koszyka lub zwróć odpowiedź AJAX. Dla gości nie wdrażaj handlera, dopóki token nie jest indywidualny dla ich sesji.

Cart Block ma osobne punkty rozszerzeń i korzysta z Store API. Klasyczny formularz lub handler może więc nie odświeżyć bloku; dokumentacja WooCommerce opisuje jego mechanizmy rozszerzania Cart i Checkout Blocks. Kod czyszczący koszyk klasyczny traktuj jako osobną implementację i testuj Cart Block oddzielnie.

Test przycisku wykonaj dla pustego i niepustego koszyka, gościa i zalogowanego klienta oraz każdego widoku używanego w sklepie. Porównaj stan sesji z tym, co pokazują koszyk, kasa i licznik w nagłówku.

Wykonaj te próby na stagingu:

1. Dodaj jeden produkt, opróżnij koszyk i sprawdź pusty stan po odświeżeniu.
2. Dodaj kilka produktów z różnymi ilościami i sprawdź, czy zniknęły wszystkie.
3. Powtórz próbę jako gość i zalogowany klient.
4. Sprawdź Cart Block i koszyk klasyczny, jeśli oba są dostępne.
5. Skontroluj mini koszyk, sumę, kupon i przejście do kasy.
6. Powtórz próbę na telefonie oraz w drugiej przeglądarce.

W narzędziach deweloperskich przeglądarki otwórz Network i sprawdź status żądania oraz odpowiedź. W Console sprawdź błędy JavaScript. Jeśli produkty wracają dopiero przy kasie, wstrzymaj publikację i sprawdź, która integracja odtwarza ich stan.

Perspektywa KC Mobile: podczas wdrożeń porównujemy dane sesji, stronę koszyka i licznik w nagłówku. Różne wyniki w tych miejscach pomagają odróżnić błąd zapisu od problemu z odświeżaniem widoku.

Moment, w którym produkty wracają, pomaga wskazać, czy problem dotyczy sesji, cache, JavaScriptu czy odświeżenia widoku. Zapisz objaw i wykonaj test w drugiej przeglądarce, zanim zaczniesz wyłączać rozszerzenia.

Tabela wiąże widoczny moment powrotu produktów z pierwszym testem diagnostycznym.

Wyklucz strony koszyka i kasy z cache, ponieważ zawierają dynamiczne dane sesji; WooCommerce opisuje to w instrukcji naprawy stron, które się nie wyświetlają. Następnie wyłączaj po jednej wtyczce na stagingu i odtwarzaj ten sam scenariusz. Przy problemie po aktualizacji wykorzystaj testy WooCommerce po aktualizacji oraz diagnostykę błędów WooCommerce API.

Ryzyko przypadkowego opróżnienia koszyka zmniejsza czytelna etykieta, odsunięcie przycisku od zakupu i potwierdzenie akcji. Komunikat powinien wyjaśniać, że usunięte zostaną wszystkie produkty z bieżącego koszyka.

Dialog potwierdzenia powinien mieć osobne opcje wykonania i anulowania; anulowanie musi pozostawić koszyk bez zmian. Zapewnij obsługę klawiaturą, widoczny fokus i dostępną nazwę przycisku.

Operację modyfikującą koszyk wykonuj przez POST z walidacją żądania, nie przez link GET. Na wspólnym stanowisku poinformuj, że koszyk dotyczy bieżącej sesji przeglądarki, aby następna osoba nie usunęła przypadkiem produktów poprzednika.

Bezpieczne wdrożenie wymaga kopii sklepu, testu na stagingu i próbnego zamówienia po zmianie. Sprawdź działanie przycisku po zmianie motywu, rozszerzeń i wersji WooCommerce.

Przed publikacją sprawdź:

• kopię plików i bazy oraz wersje WordPressa, WooCommerce i motywu;
• działanie w używanym typie koszyka, dla gościa i zalogowanego klienta;
• anulowanie akcji, ponowne dodanie produktu, przejście do kasy i testowe zamówienie;
• widok mobilny, komunikaty, obsługę klawiaturą i wykluczenie koszyka z cache.

Po publikacji powtórz test czyszczenia i zamówienia. Jeśli sklep wymaga szerszej przebudowy koszyka i procesu sprzedaży, wdrożenie sklepu WooCommerce może objąć dopasowanie tych elementów. Przy problemach z porzuceniami sprawdź również diagnozę i odzyskiwanie porzuconego koszyka WooCommerce.

• Koszyk WooCommerce nie odświeża się automatycznie: diagnostyka błędu AJAX
• Testy po aktualizacji WooCommerce: co sprawdzić przed wznowieniem sprzedaży
• Gratis w koszyku WooCommerce: jak ustawić darmowy produkt
• MailerLite i porzucone koszyki: konfiguracja dla sklepu krok po kroku