Pasek darmowej wysyłki do WooCommerce: pokaż klientom, ile brakuje, i podnieś koszyk

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; drugi ma mgliste wspomnienie reguły z regulaminu. Pasek postępu do darmowej wysyłki zmienia tę regułę w żywy, widoczny cel na koszyku i w kasie. Ten przewodnik wyjaśnia, co taki pasek robi, czego szukać 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ę na komunikat sukcesu.

Ma znaczenie, bo darmowa wysyłka to jeden z najsilniejszych powodów, dla których ludzie dorzucają kolejny produkt, ale tylko wtedy, gdy cel jest jasny. Próg ukryty w drobnym druku nie robi nic. Pasek, który mówi, ile brakuje, dokładnie tam, gdzie klient podejmuje decyzję, daje konkretny powód, by sięgnąć po następny produkt.

Czego szukać

Nie każdy pasek darmowej wysyłki pomaga. Kilka cech odróżnia przydatny od obciążenia:

• Trafny próg. Kwota na pasku powinna odpowiadać prawdziwej regule darmowej wysyłki. Najbezpieczniej odczytać ją wprost z metody wysyłki WooCommerce, żeby obie nigdy się nie rozjechały.
• Aktualizacja na żywo. Pasek powinien renderować się ponownie wraz ze zmianą koszyka, a nie pokazywać nieaktualnej liczby z momentu załadowania strony.
• Brak przeskoków układu. Pasek pojawiający się po załadowaniu spycha treść w dół i szkodzi Core Web Vitals. Tor powinien rezerwować miejsce z wyprzedzeniem.
• Lekki front. Pasek postępu nie potrzebuje ciężkiej biblioteki. Czysty JavaScript utrzymuje szybkość sklepu.
• Dostępność. Prawdziwa rola paska postępu z wartościami ARIA, a nie tylko kolorowy pasek, żeby czytniki ekranu przekazywały ten sam cel.
• Sensowny stan pusty. Gdy nie skonfigurowano celu, pasek powinien się ukryć, zamiast pokazywać coś zepsutego.

Jak robi to Nudge

Nudge dla WooCommerce to darmowa wtyczka open source skupiona dokładnie na tym. Wersja darmowa to kompletny pasek darmowej wysyłki:

• Automatyczny próg. Nudge odczytuje minimalną kwotę zamówienia z aktywnej metody darmowej wysyłki WooCommerce, używając najmniejszej kwoty w strefach, z ręcznym fallbackiem, jeśli wolisz stałą liczbę.
• Aktualizacja na żywo. Pasek renderuje się ponownie z koszykiem i animuje płynnie, malutkim skryptem bez własnego jQuery.
• Koszyk i kasa. Pokazuje się na klasycznych szablonach oraz w blokach Koszyk i Kasa WooCommerce, a każde miejsce włączasz w ustawieniach.
• Dostępność domyślnie. Prawdziwy role=progressbar z aria-valuenow, aria-valuemin i aria-valuemax oraz czytelna alternatywa tekstowa.
• Zero przeskoków układu. Tor rezerwuje wysokość z góry, więc pasek nie powoduje CLS.
• Stylowanie. Kolory jako zmienne CSS, świadome trybu ciemnego.
• Konfigurowalne komunikaty. Użyj tokenu {amount} w komunikacie postępu i ustaw osobny komunikat sukcesu po osiągnięciu celu.
• Gotowość do tłumaczeń. Plik POT w zestawie, czyste odinstalowanie oraz zgodność z HPOS i blokami.

Gdy nie skonfigurowano celu darmowej wysyłki, Nudge ukrywa pasek, zamiast pokazywać zepsuty lub zawsze ukończony.

Dla sklepów, które chcą więcej, Nudge PRO to osobna, płatna edycja rozszerzająca darmowy pasek. PRO dodaje pływający pasek postępu mini-koszyka na każdej stronie sklepu, cele per strefa wysyłki, by różne strefy mogły mieć różne progi, nagrody progowe łączące do trzech kamieni milowych wartości koszyka z własnymi komunikatami i znacznikami oraz analitykę konwersji, która zlicza wyświetlenia paska i osiągnięcia progu per miejsce. To funkcje tylko PRO; wersja darmowa pokrywa jeden próg darmowej wysyłki na koszyku i w kasie.

Nudge a domyślny WooCommerce

WooCommerce potrafi oferować darmową wysyłkę od progu, ale nie mówi 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
Dostępny pasek postępu	nie dotyczy	Tak, role=progressbar z ARIA
Stan pusty bez celu	nie dotyczy	Pasek się ukrywa
Koszt	Za darmo (rdzeń nie ma paska)	Za darmo; PRO dodaje pływający pasek, cele per strefa, nagrody progowe, analitykę

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. Nudge robi to za darmo na koszyku i w kasie, a PRO dokłada pływający pasek, cele per strefa, nagrody progowe i analitykę, gdy są potrzebne.