Klientka wrzuca produkt do koszyka i... nic. Żadnej ikonki, żadnego licznika, żadnego sygnału, że coś się wydarzyło. Część osób uzna, że sklep nie zadziałał, część zapomni, co dodała, a część po prostu wyjdzie. Widoczny koszyk, czyli ikonka z licznikiem produktów stale obecna w menu lub rogu ekranu, to drobiazg, który realnie domyka sprzedaż: pokazuje klientce postęp zakupów i skraca drogę do kasy do jednego kliknięcia. W tym artykule pokażę, jak go dodać: najpierw bez żadnej wtyczki, potem wtyczkami, a na końcu rozwiążemy zagadkę koszyka, który po kliknięciu pokazywał... logo.
Krok zero: Twój motyw pewnie już to ma
Zanim zainstalujesz cokolwiek, sprawdź motyw. Popularne motywy, w tym Astra i Blocksy, mają wbudowaną ikonę koszyka do włączenia w ustawieniach nagłówka:
Astra: Wygląd → Dostosuj → Nagłówek (w nowszych wersjach kreator nagłówka, do którego przeciągasz element Koszyk WooCommerce). Znajdziesz tam opcje ikony, licznika i zachowania po kliknięciu, w tym wysuwany podgląd koszyka.
Blocksy i inne nowoczesne motywy: analogicznie, element koszyka dodaje się w kreatorze nagłówka w personalizacji.
Wbudowane rozwiązanie motywu ma trzy zalety: zero dodatkowej wtyczki (a mniej wtyczek to szybsza i bezpieczniejsza strona, o czym pisałam przy okazji bezpieczeństwa WordPressa), gwarantowana zgodność stylistyczna z resztą nagłówka i aktualizacje razem z motywem. Wtyczkę instaluj dopiero wtedy, gdy motyw ikony koszyka nie oferuje albo oferuje ją w formie, która Ci nie odpowiada.
Wskazówka z forum: jeśli wzorujesz się na wersji demo motywu, w której ikonka koszyka jest widoczna, to znak, że motyw ją obsługuje i trzeba ją tylko włączyć w ustawieniach, a nie doinstalowywać.
Wtyczki mini cart: kiedy motyw nie wystarcza
Jeśli motyw nie ma ikony koszyka, sięgnij po sprawdzoną wtyczkę. Dwie opcje z forum, które robią dokładnie to, czego szukasz:
Menu Cart for WooCommerce (WP Menu Cart): klasyka gatunku, dodaje ikonę koszyka z licznikiem do wybranego menu. W ustawieniach wskazujesz, w którym menu ma się pojawić, wybierasz styl ikony i to, czy pokazywać kwotę, liczbę produktów, czy jedno i drugie. Lekka i robi jedną rzecz dobrze.
Wtyczki z wysuwanym koszykiem (slide-out mini cart): zamiast przenosić klientkę na stronę koszyka, wysuwają boczny panel z zawartością i przyciskiem do kasy. To współczesny standard w sklepach, bo klientka nie opuszcza strony, na której właśnie kupuje. Szukaj wtyczek typu "side cart" lub "mini cart" i wybieraj te z dużą liczbą aktywnych instalacji oraz niedawnymi aktualizacjami.
Zasada wyboru jak zawsze: jedna wtyczka, konkretna funkcja, dobra reputacja. Unikaj kombajnów, które przy okazji koszyka dorzucają dziesięć innych funkcji.
Zagadka z forum: koszyk, który otwierał logo
A teraz historia, która uczy diagnozy lepiej niż niejeden podręcznik. Kursantka zainstalowała wtyczkę ikony koszyka na motywie Astra. Ikonka pojawiła się, licznik działał, ale kliknięcie w koszyk otwierało... plik graficzny z logo, pod adresem prowadzącym do katalogu uploads. Wymieniła wtyczkę na inną: ten sam efekt.
I to jest właśnie cenna wskazówka: ten sam problem przy dwóch różnych wtyczkach oznacza, że wina nie leży we wtyczce. Ikonka koszyka nie prowadzi donikąd "od siebie", tylko kieruje na stronę koszyka zdefiniowaną w ustawieniach WooCommerce. A tam, w WooCommerce → Ustawienia → Zaawansowane, jako Strona koszyka widniała błędna pozycja: pozostałość po imporcie demo motywu, wskazująca na stronę z plikiem graficznym.
Rozwiązanie zajęło jedno kliknięcie: w WooCommerce → Ustawienia → Zaawansowane ustawić jako Stronę koszyka właściwą stronę Koszyk (a przy okazji sprawdzić pozostałe: Zamówienie, Moje konto, Regulamin). Po zapisaniu ikonka zaczęła prowadzić tam, gdzie trzeba.
Zapamiętaj tę lekcję na przyszłość: importy demo motywów potrafią namieszać w przypisaniu stron systemowych WooCommerce, a objawy bywają tak absurdalne jak koszyk otwierający logo. Gdy sklep zachowuje się dziwnie po imporcie demo, przegląd stron w ustawieniach zaawansowanych WooCommerce to pierwszy przystanek. Drugi to strony koszyka i zamówienia oparte na blokach, o których pisałam przy okazji konfiguracji Przelewy24.
Widoczny koszyk to dopiero początek: UX ścieżki zakupowej
Ikonka koszyka usuwa jedno tarcie na drodze do zakupu, ale takich tarć bywa więcej: ukryty przycisk kasy, zaskakujące koszty dostawy na ostatnim kroku, formularz z dziesięcioma polami. Zanim zainwestujesz w kolejne wtyczki, zrób audyt ścieżki zakupowej, i tu świetnie sprawdza się AI w roli świeżego oka. Mój prompt:
Wciel się w klientkę, która pierwszy raz kupuje w sklepie internetowym z [typ produktów]. Opiszę Ci moją ścieżkę zakupową krok po kroku: [opisz: co widać po dodaniu do koszyka, jak wygląda droga do kasy, jakie pola ma formularz, kiedy pojawiają się koszty dostawy, jakie są metody płatności]. Wskaż każde miejsce, w którym klientka może się zawahać, zgubić lub zrezygnować, uporządkowane od najbardziej krytycznego. Dla każdego podaj konkretną poprawkę możliwą do wdrożenia w WooCommerce bez programisty.
Model językowy zestawi Twój opis z typowymi wzorcami porzucania koszyka i zwróci listę tarć z poprawkami. Najlepsze wyniki daje szczery, szczegółowy opis: jeśli koszty dostawy pojawiają się dopiero w kasie, napisz to, bo właśnie takie rzeczy generują porzucone koszyki. Pełny warsztat projektowania sklepu, który sprzedaje, od pierwszego produktu po automatyzacje, przechodzę z kursantkami w Akademii WordPress + AI.
Krok po kroku
- Sprawdź w personalizacji motywu (kreator nagłówka), czy Twój motyw ma wbudowaną ikonę koszyka, i włącz ją z licznikiem produktów.
- Jeśli motyw jej nie ma, zainstaluj lekką wtyczkę mini cart i skonfiguruj miejsce w menu oraz format licznika.
- Wykonaj test: dodaj produkt do koszyka, sprawdź licznik i kliknij ikonkę, weryfikując, czy prowadzi na stronę koszyka.
- Jeśli kliknięcie prowadzi w dziwne miejsce, popraw przypisanie Strony koszyka w WooCommerce → Ustawienia → Zaawansowane.
- Przetestuj całą ścieżkę zakupową na telefonie, od produktu po płatność.
- Zrób z AI audyt ścieżki zakupowej według mojego prompta i wdróż poprawki od najbardziej krytycznej.
