Pasek darmowej wysyłki WooCommerce: postęp do progu

Klient, który wie dokładnie, ile jeszcze dorzucić do darmowej wysyłki, zachowuje się inaczej niż ten, który nie wie. Pierwszy ma cel i powód, by kupować dalej; drugi ma co najwyżej mgliste wspomnienie reguły gdzieś w regulaminie. Darmowa wysyłka to jeden z najsilniejszych powodów, dla których ludzie dorzucają kolejny produkt do koszyka, ale działa jako motywator tylko wtedy, gdy cel jest widoczny w momencie, w którym klient podejmuje decyzję. Pasek postępu do darmowej wysyłki zmienia statyczną regułę w żywy, policzalny cel pokazany wprost na koszyku i w kasie. Ten przewodnik wyjaśnia, co taki pasek robi, dlaczego podnosi koszyki, co odróżnia przydatny pasek od obciążenia i jak radzi sobie z tym Nudge.

Czym jest pasek darmowej wysyłki i dlaczego ma znaczenie

Pasek darmowej wysyłki to mały wskaźnik postępu, który mówi klientom, ile jeszcze muszą wydać, by odblokować darmową wysyłkę. Gdy produkty wchodzą do koszyka i z niego wychodzą, pasek się wypełnia, a brakująca kwota maleje. Po osiągnięciu progu przełącza się z komunikatu “ile brakuje” na komunikat sukcesu, który potwierdza, że cel został osiągnięty.

Powód, dla którego to działa, jest behawioralny, a nie kosmetyczny. Zapis “darmowa wysyłka od 200 zł” ukryty w polityce wysyłki nic nie da klientowi, który ma w koszyku 168 zł, bo nie ma tej liczby przed oczami i nie pójdzie jej szukać. Pokaż tę samą regułę jako “Dodaj jeszcze 32,00 zł, by otrzymać darmową wysyłkę” tuż nad podsumowaniem koszyka, a dajesz konkretny, osiągalny cel dokładnie w chwili, gdy klient zastanawia się, czy dorzucić jeszcze jeden produkt. Różnica między “prawie u celu” a “zakwalifikowany” to właśnie ten rodzaj zachęty, który podnosi średnią wartość zamówienia bez żadnego rabatu.

Jest druga strona medalu, o której warto powiedzieć szczerze: pasek postępu pomaga tylko wtedy, gdy liczba na nim jest prawdziwa. Pasek, który pokazuje błędny próg, spóźnia się za koszykiem albo trwale stoi jako ukończony, jest gorszy niż jego brak, bo uczy klientów, żeby go ignorować. Dlatego szczegóły wdrożenia opisane niżej liczą się tak samo jak sam pomysł.

Ostrzeżenie: Pasek, który pokazuje błędny próg, spóźnia się za koszykiem albo trwale stoi jako ukończony, jest gorszy niż jego brak, bo uczy klientów, żeby go ignorować.

Czego szukać

Nie każdy pasek darmowej wysyłki pomaga. Kilka cech odróżnia ten, który zarabia na swoje miejsce, od tego, który po cichu szkodzi stronie:

• Trafny próg. Kwota na pasku musi odpowiadać prawdziwej regule darmowej wysyłki. Najpewniej zagwarantujesz to, odczytując ją wprost z metody wysyłki WooCommerce, żeby liczba na pasku i liczba, która faktycznie przyznaje darmową wysyłkę, nigdy się nie rozjechały po zmianie ceny czy edycji reguły.
• Aktualizacja na żywo. Pasek powinien renderować się ponownie wraz ze zmianą koszyka, a nie pokazywać nieaktualną liczbę z momentu załadowania strony. Jeśli klient doda produkt, a brakująca kwota się nie zmieni, pasek traci jego zaufanie.
• Brak przeskoków układu. Pasek, który pojawia się po wyrenderowaniu strony, spycha treść w dół i szkodzi Core Web Vitals. Tor powinien rezerwować wysokość przed renderowaniem, żeby nic nie skakało.
• Lekki front. Pasek postępu nie potrzebuje ciężkiej biblioteki JavaScript. Czysty JavaScript utrzymuje szybkość sklepu i nie dokłada kolejnej zależności do strony koszyka.
• Dostępność. Prawdziwa rola paska postępu z wartościami ARIA, a nie tylko kolorowy pasek, żeby czytniki ekranu przekazywały ten sam cel, który widzą klienci widzący.
• Sensowny stan pusty. Gdy nie skonfigurowano celu, koszyk jest pusty albo funkcja jest wyłączona, pasek powinien się ukryć, zamiast renderować coś zepsutego lub zawsze ukończonego.
• Łatwe stylowanie. Kolory i rozmiary powinny być regulowane z poziomu CSS bez edycji znaczników, żeby pasek pasował do marki i respektował tryb ciemny.

Jak robi to Nudge

Nudge dla WooCommerce to darmowa wtyczka open source stworzona dokładnie do tego zadania, a wersja darmowa to kompletny pasek darmowej wysyłki, a nie okrojone demo. Każda z poniższych możliwości jest częścią darmowej wtyczki.

Pasek postępu darmowej wysyłki na koszyku, pokazujący klientowi, ile jeszcze dorzucić, by odblokować darmową dostawę.

• Automatyczny próg z WooCommerce. W domyślnym trybie automatycznym Nudge odczytuje minimalną kwotę zamówienia z włączonych metod darmowej wysyłki i używa najmniejszej spośród stref wysyłki, więc nie utrzymujesz tej liczby w dwóch miejscach. Jeśli wolisz przypiąć konkretną kwotę, tryb ręczny pozwala wpisać stałą wartość, a ta sama kwota służy też jako fallback, gdy tryb automatyczny nie znajdzie kwalifikującej się metody.

Wskazówka: Preferuj tryb automatyczny, żeby pasek odczytywał próg wprost z Twojej metody darmowej wysyłki WooCommerce. Wpisanie liczby na sztywno tworzy drugie miejsce do aktualizacji, a dzień, w którym obie się rozejdą, to dzień, w którym pasek zaczyna okłamywać klientów.

• Aktualizacja na żywo malutkim skryptem. Pasek renderuje się ponownie z koszykiem i płynnie animuje szerokość między stanami, korzystając z małego skryptu bez własnego jQuery. Ruch jest wyciszany dla klientów, którzy ustawili prefers-reduced-motion.
• Koszyk i kasa, klasyczne i bloki. Nudge renderuje się na klasycznych szablonach Koszyk i Kasa oraz w blokach Koszyk i Kasa WooCommerce. Każde miejsce włączasz niezależnie w ustawieniach, więc możesz pokazać pasek na koszyku, w kasie albo w obu miejscach.
• Dostępność domyślnie. Pasek wystawia prawdziwy role=progressbar z aria-valuenow, aria-valuemin i aria-valuemax oraz czytelny komunikat tekstowy, więc postęp jest zapowiadany, a nie pozostawiony jako niemy kolorowy pasek.
• Zero przeskoków układu. Tor rezerwuje wysokość przed renderowaniem, więc dodanie paska nie dokłada do strony żadnego CLS.
• Stylowanie i tryb ciemny. Kolory i rozmiary wystawione są jako zmienne CSS --nudge-*, a pasek dostosowuje się do ciemnych schematów kolorów, więc motyw może go przekolorować bez ruszania znaczników.
• Edytowalne komunikaty z tokenem. Komunikaty postępu i sukcesu piszesz samodzielnie. Komunikat postępu przyjmuje token {amount}, który jest zastępowany brakującą sumą sformatowaną w walucie sklepu, więc “Dodaj jeszcze {amount}, by otrzymać darmową wysyłkę!” staje się na froncie “Dodaj jeszcze 32,00 zł, by otrzymać darmową wysyłkę!”.
• Cisza, gdy nie ma czego pokazać. Gdy pasek jest wyłączony, koszyk jest pusty albo nie da się ustalić progu, Nudge nie renderuje nic, a przy wyłączonej funkcji jego style i skrypty w ogóle nie wczytują się na froncie.
• Samodzielny i porządny. Nudge nie wykonuje żadnych zewnętrznych żądań HTTP: bez analityki, bez zdalnych fontów, bez wywołań licencyjnych. Przechowuje tylko dwie opcje we własnej bazie danych, dołącza plik POT do tłumaczeń, usuwa swoje opcje przy odinstalowaniu i deklaruje zgodność z HPOS oraz blokami Koszyk i Kasa.

Gdy nie skonfigurowano celu darmowej wysyłki, Nudge ukrywa pasek, zamiast pokazywać zepsuty lub zawsze ukończony, co trzyma Cię po właściwej stronie zasady “zły pasek jest gorszy niż brak paska”.

Uwaga: Przy wyłączonej funkcji albo gdy nie da się ustalić progu, Nudge nie renderuje nic, a jego style i skrypty w ogóle nie wczytują się na froncie, więc brak celu nie kosztuje Cię żadnej wagi strony.

Konfiguracja krok po kroku

Uruchomienie działającego paska zajmuje kilka minut:

1. Zainstaluj wtyczkę z Wtyczki → Dodaj nową albo wgraj ją do /wp-content/plugins/nudge. WooCommerce musi być zainstalowane i aktywne.
2. Aktywuj wtyczkę. Nudge startuje włączony, z miejscami na koszyku i w kasie domyślnie aktywnymi.
3. Wejdź w WooCommerce → Nudge. Potwierdź, że pasek jest włączony, i wybierz, gdzie się pokazuje: koszyk, kasa lub oba. Pokazanie go w obu miejscach trzyma cel przed oczami klienta przez cały zakup.
4. Zostaw źródło progu na Automatyczne, jeśli masz metodę darmowej wysyłki WooCommerce, żeby pasek śledził Twoją prawdziwą regułę. Przełącz na Ręczne i wpisz stałą kwotę, jeśli wolisz ustawić liczbę samodzielnie; ta kwota działa też jako fallback dla trybu automatycznego.
5. Opcjonalnie zmień komunikaty postępu i sukcesu. Ekran ustawień pokazuje podgląd każdego z nich na żywo, więc widzisz, co przeczytają klienci.

Strona ustawień ma podpowiedzi pod każdym polem oraz podgląd komunikatów, więc nie musisz zaglądać do dokumentacji podczas konfiguracji.

Ekran ustawień Nudge, na którym wybierasz miejsca wyświetlania, źródło progu oraz komunikaty postępu i sukcesu.

Praktyczne wskazówki

Pasek daje mechanizm; to, jak go użyjesz, decyduje, czy faktycznie podniesie koszyki.

• Preferuj tryb automatyczny. Odczytywanie progu z metody wysyłki trzyma pasek blisko realnej konfiguracji sklepu. Gdy wpiszesz próg ręcznie, tworzysz drugie miejsce do aktualizacji przy każdej zmianie reguły darmowej wysyłki. Jeśli zapomnisz o zmianie, pasek pokaże klientom nieaktualną kwotę.
• Ustaw próg, który ludzie naprawdę osiągną. Cel darmowej wysyłki ustawiony daleko ponad średnią wartością zamówienia bardziej frustruje, niż motywuje. Celuj nieco powyżej typowego koszyka, żeby “jeszcze jeden produkt” wydawał się osiągalny, a nie jak druga osobna transakcja.

Wskazówka: Celuj z progiem nieco powyżej typowej wartości koszyka, żeby “jeszcze jeden produkt” wydawał się osiągalny, a nie jak druga osobna transakcja.

• Pokaż go przynajmniej na koszyku. To na koszyku zapada decyzja o dorzuceniu kolejnego produktu. Kasa jest przydatnym wzmocnieniem, ale to na koszyku pasek zarabia na swoje miejsce.
• Napisz komunikat, który nazywa nagrodę. “Dodaj jeszcze {amount}, by otrzymać darmową wysyłkę!” jest jaśniejsze niż sama liczba, a komunikat sukcesu to mały moment satysfakcji, który warto dobrze sformułować.
• Dopasuj pasek do marki. Ponieważ kolory są zmiennymi CSS, kilka linijek CSS sprawia, że pasek wygląda natywnie, a nie doklejony, zarówno w jasnym, jak i w ciemnym motywie.

Nudge a domyślny WooCommerce

WooCommerce potrafi oferować darmową wysyłkę od progu, ale nie robi nic, by powiedzieć klientowi, jak blisko jest. Oto różnica dla samego paska postępu:

Funkcja	Domyślny WooCommerce	Nudge (darmowy)
Darmowa wysyłka od progu	Tak, jako metoda wysyłki	Korzysta z tej samej metody
Pokazuje, ile brakuje	Nie	Tak, brakująca kwota na żywo
Próg utrzymywany w synchronizacji	nie dotyczy	Odczyt automatyczny z metody
Aktualizacja przy zmianie koszyka	Nie	Tak, na żywo
Miejsce na koszyku i w kasie	nie dotyczy	Oba, klasyczne i bloki
Przeskoki układu (CLS)	nie dotyczy	Zero, tor rezerwuje wysokość
Wymagane jQuery	nie dotyczy	Nie, malutki skrypt w czystym JS
Respektowanie reduced-motion	nie dotyczy	Tak
Dostępny pasek postępu	nie dotyczy	Tak, role=progressbar z ARIA
Edytowalne komunikaty	nie dotyczy	Tak, z tokenem {amount}
Stan pusty bez celu	nie dotyczy	Pasek się ukrywa, zasoby się nie wczytują
Koszt	Za darmo (rdzeń nie ma paska)	Za darmo; PRO dodaje pływający pasek, cele per strefa, nagrody progowe, analitykę

Wersja darmowa a PRO

Wersja darmowa to kompletny pasek darmowej wysyłki: próg automatyczny lub ręczny, aktualizacja na żywo, miejsce na koszyku i w kasie, dostępne znaczniki, edytowalne komunikaty, stylowanie i czysty stan pusty są w pełni wliczone.

Nudge PRO to osobny, płatny dodatek, który wymaga zainstalowanej i aktywnej darmowej wtyczki; rozszerza ją, a nie zastępuje, i jest dystrybuowany przez Freemius. PRO dodaje pływający pasek mini-koszyka pokazywany na każdej stronie sklepu (nie tylko na koszyku i w kasie), więc cel podąża za klientem podczas przeglądania, z umiejscowieniem u góry lub na dole oraz własnym komunikatem i kolorami. Dodaje progi per strefa wysyłki, więc tryb automatyczny może użyć minimalnej kwoty darmowej wysyłki z dopasowanej strefy klienta zamiast najmniejszej kwoty spośród wszystkich stref. Dodaje nagrody progowe, łącząc do trzech kamieni milowych wartości koszyka z własnymi komunikatami i znacznikami na koszyku, w kasie i na pływającym pasku. Dodaje też analitykę konwersji, która agreguje wyświetlenia paska i osiągnięcia progu per miejsce w WooCommerce → Nudge Analytics. To funkcje tylko PRO; wersja darmowa pokrywa jeden próg darmowej wysyłki na koszyku i w kasie.

W skrócie

Pasek darmowej wysyłki działa, gdy pokazuje prawdziwą brakującą kwotę, aktualizuje się na żywo, pozostaje dostępny i nie dodaje przeskoków układu. Najczystsza konfiguracja odczytuje próg wprost z metody wysyłki WooCommerce, żeby liczba nigdy się nie rozjechała, i ukrywa pasek, gdy nie ma prawdziwego celu do pokazania. Nudge robi to wszystko za darmo na koszyku i w kasie, a PRO dokłada pływający pasek, cele per strefa, nagrody progowe i analitykę, gdy chcesz pójść dalej.