🛡 Dodajemy trust-badges na checkout WooCommerce: 3 sposoby od prostego do zaawansowanego

Klient dotarł do kasy, wprowadził adres, wybrał dostawę i wyszedł. Nie zapłacił. Dlaczego?

19% porzuconych koszyków to efekt tego, że strona płatności nie wygląda na bezpieczną. To dane Baymard Institute za 2025 rok, a za każdym procentem stoją realne utracone pieniądze.

Trust-badges, ikony bezpieczeństwa, logotypy systemów płatności, gwarancje zwrotu rozwiewają ten strach w kilka minut. Pokażemy trzy sposoby dodania ich do kasy WooCommerce: od wbudowanego edytora blokowego (całkowicie bez wtyczek) po hak PHP dla tych, którzy chcą pełnej kontroli.

Czym są trust-badges i po co umieszczać je w kasie

💡 Szybki przegląd:

• Określ, jakiego typu badge potrzebujesz: bezpieczeństwo, płatność, gwarancja, opinie
• Wybierz sposób umieszczenia: edytor blokowy, wtyczka lub kod
• Pobierz obrazy z oficjalnych centrów marki systemów płatności
• Umieść badge obok przycisku „Zamawiam"
• Sprawdź, czy badge są widoczne na mobilnej wersji kasy

Trust-badge to niewielka ikona lub plakietka na stronie składania zamówienia, która mówi klientowi: „tutaj jest bezpiecznie". Może to być ikona SSL, logotypy Visa i Mastercard, plakietka „30 dni na zwrot" lub pieczęć Norton Secured.

Mechanizm jest prosty. Osoba widzi znajomy logotyp systemu płatności, podświadomie ufa. Widzi „Money-Back Guarantee", ryzyko maleje. Widzi „Ocena 4.9/5 na podstawie 13 000+ opinii klientów", działa dowód społeczny.

Standardowo WooCommerce nie pokazuje nic poza polami formularza i przyciskiem „Place Order". Żadnych sygnałów bezpieczeństwa. Właśnie dlatego trust-badges to nie ozdoba, a narzędzie konwersyjne.

7 Typów trust-badges, które naprawdę konwertują

Nie wszystkie badge działają tak samo. Siedem poniższych kategorii pokrywa praktycznie każde zadanie, od bezpieczeństwa płatności po dowód społeczny.

Ważna kwestia: badge certyfikacyjnych (Norton, McAfee, BBB) nie można po prostu pobrać z internetu i powiesić. Narusza to zasady FTC w USA i szkodzi reputacji, jeśli wyjdzie na jaw. Plakietka Norton Secured jest dostępna dopiero po zakupie certyfikatu SSL DigiCert, a McAfee Secure po przeskanowaniu strony przez TrustedSite (od 30 USD/mies.). Logotypy systemów płatności można legalnie pobrać z oficjalnych centrów marki: Visa Brand Center, Mastercard Brand Center, PayPal Logo Center, strona marki Stripe.

Sposób 1: Edytor blokowy WordPress (bez wtyczek)

Najprostsza droga to użycie wbudowanego edytora bloków. Od wersji WooCommerce 8.3 (listopad 2023) blok kasy stał się standardem dla wszystkich nowych sklepów i można dodać obraz bezpośrednio z panelu administracyjnego.

Najpierw prześlij ikony do biblioteki multimediów WordPress: Multimedia → Dodaj nowy. Zalecamy skompresowane pliki PNG lub SVG do 100 KB każdy.

Następnie otwórz stronę kasy: Strony → Zamówienie (lub Wygląd → Edytor → Strony → Checkout, jeśli masz motyw blokowy). Kliknij „+" nad blokiem kasy lub pod nim, dodaj blok „Obraz" dla pojedynczego badge lub „Galeria" dla rzędu logotypów płatności.

W ustawieniach bloku ustaw wyrównanie do środka, maksymalną szerokość 60-120px na badge i koniecznie wpisz tekst alternatywny, to ważne zarówno dla dostępności, jak i SEO. Zapisz stronę.

Ograniczenia metody: edytor blokowy pozwala umieścić badge wokół bloku kasy, ale nie wewnątrz, na przykład bezpośrednio pod przyciskiem „Zamawiam". Jeśli potrzebujesz precyzyjnego pozycjonowania, przejdź do sposobu 2 lub 3.

Sposób 2: Skrypt PHP przez WPCode

Klasyczna metoda to dodanie kodu do functions.php motywu potomnego. Nie zalecamy jednak bezpośredniej edycji plików motywu: błąd składni i strona pada z „białym ekranem śmierci". Bezpieczniej jest użyć darmowej wtyczki WPCode (dawniej Code Snippets): zapewnia ona piaskownicę dla kodu PHP i ochronę przed błędami krytycznymi.

Zainstaluj WPCode z repozytorium WordPress.org, utwórz nowy skrypt (Code Snippets → Add Snippet → Add Your Custom Code) i wklej:

1
add_action( 'woocommerce_review_order_after_payment', 'ts_display_trust_seal_on_checkout_page' );
2
function ts_display_trust_seal_on_checkout_page() {
3
    $trust_seal_image_url = 'https://your-site.com/wp-content/uploads/trust-seal.png';
4
    echo '<div class="trust-badge-wrapper"><img src="' . esc_url( $trust_seal_image_url ) . '" alt="Secure checkout — SSL encrypted" /></div>';
5
}

Hak woocommerce_review_order_after_payment umieszcza badge zaraz po bloku płatności, przed przyciskiem „Zamawiam". Zastąp URL ścieżką do swojego obrazu. Funkcja esc_url() ekranuje URL dla bezpieczeństwa wyjścia.

Aktywuj skrypt, przełącznik „Active" w WPCode. Następnie otwórz kasę od frontendu i upewnij się, że badge wyświetla się na swoim miejscu.

Inne przydatne haki WooCommerce do umieszczania badge:

• woocommerce_review_order_before_payment, przed blokiem płatności;
• woocommerce_before_checkout_form, na samym początku formularza kasy;
• woocommerce_after_checkout_form, po całym formularzu.

Zmieniaj hak, aż trafisz w odpowiednią pozycję. Żadnych poprawek w motywie, wszystko przez WPCode.

Sposób 3: Wtyczka FunnelKit Funnel Builder

Jeśli chcesz nie tylko dodać badge, ale przebudować całą kasę pod kątem konwersji, sięgnij po FunnelKit Funnel Builder. To wtyczka z gotowymi szablonami stron składania zamówienia, gdzie trust-badges są już wbudowane w projekt.

Po instalacji FunnelKit przejdź do FunnelKit → Store Checkout → Create Store Checkout. Wybierz szablon, zaimportuj go i otwórz w edytorze. Wtyczka jest kompatybilna z Elementor, Divi, Bricks, Oxygen i Gutenberg.

Badge dodaje się przez przeciąganie widżetów w wybrane miejsce szablonu. Można umieścić ikony bezpieczeństwa pod podsumowaniem zamówienia, logotypy systemów płatności obok wyboru metody płatności, a plakietkę gwarancji bezpośrednio nad przyciskiem. Darmowa wersja FunnelKit oferuje podstawową funkcjonalność; wersja Pro otwiera dostęp do kasy wieloetapowej, testów A/B i dodatkowych szablonów.

Skąd brać obrazy do trust-badges: szybki przewodnik

Odpowiednie obrazy to połowa sukcesu. Skopiowana z grafiki Google ikona PayPal wygląda na rozmytą i może naruszać zasady marki. Oto legalne źródła:

Oficjalne centra marki (bezpłatnie, czysto licencyjnie):

• Visa Brand Center, logotypy Visa;
• Mastercard Brand Center, symbole Mastercard;
• PayPal Logo Center, przyciski i ikony PayPal;
• Stripe Brand Page, logotypy i oznaczenia „Powered by Stripe".

Generatory i banki zdjęć (dla gwarancji, dostawy, opinii):

• Canva, setki edytowalnych szablonów dla zapytania „trust badge";
• Freepik i Flaticon, wektorowe ikony systemów płatności i bezpieczeństwa (Freepik wymaga atrybucji w darmowym planie).

Czego nie wolno:

• Kopiować ikon Norton/McAfee/BBB, jeśli nie masz certyfikacji, to naruszenie;
• Używać rozmytych JPEG, tylko PNG lub SVG;
• Umieszczać logotypu systemu płatności, którego nie akceptujesz.

⁉️🤔 Często zadawane pytania

Czym są trust-badges dla WooCommerce?

Ikony lub plakietki na stronie składania zamówienia, które pokazują klientowi, że sklep jest bezpieczny: certyfikaty SSL, ikony systemów płatności, gwarancje zwrotu, pieczęcie Norton i McAfee, oceny Trustpilot.

Czy trust-badges pomagają zwiększyć konwersję?

Tak. Dane Baymard Institute za 2025 rok pokazują: 19% użytkowników porzuca koszyk właśnie dlatego, że kasa nie wygląda na bezpieczną. Badge ze znajomymi logotypami systemów płatności i SSL bezpośrednio rozwiewają ten strach.

Gdzie najlepiej umieszczać trust-badges w kasie?

Obok przycisku „Zamawiam" lub zaraz pod blokiem płatności. Klient podejmuje ostateczną decyzję właśnie w tym momencie, a badge usuwa ostatnie wątpliwości.

Który sposób dodawania wybrać: kod, wtyczka czy edytor blokowy?

Edytor blokowy: jeśli masz WooCommerce 8.3+ i wystarczy umieścić ikony wokół bloku kasy. Wtyczka FunnelKit: jeśli chcesz gotowe szablony i nie dotykać kodu. WPCode: jeśli potrzebujesz precyzyjnego pozycjonowania lub konkretnego haka.

Czy certyfikat SSL i trust-badge to to samo?

Nie. Certyfikat SSL szyfruje dane między przeglądarką a serwerem, to ochrona techniczna. Trust-badge to sygnał wizualny: pokazuje użytkownikowi, że ochrona istnieje. Jedno bez drugiego nie działa: badge bez SSL oszukuje klienta, SSL bez badge traci efekt konwersyjny.

Skąd brać obrazy do trust-badges legalnie?

Pobieraj logotypy z oficjalnych centrów marki: Visa Brand Center, Mastercard Brand Center, PayPal Logo Center. Używaj skompresowanych PNG do 100 KB lub SVG. Do niestandardowych badge typu „Money-Back Guarantee" i „Free Shipping" nadają się szablony Canva lub ikony wektorowe Freepik.

Podsumowanie: który sposób wybrać do swojego zadania

Wybór sposobu sprowadza się do trzech pytań: wersja WooCommerce, gotowość do ingerencji w kod i czy potrzebna jest przebudowa całej kasy.

Jeśli WooCommerce 8.3 lub nowszy i wystarczy dodać kilka ikon, sięgnij po edytor blokowy. To nic nie kosztuje, nie wymaga wtyczek, robi się to w pięć minut.

Jeśli potrzebujesz precyzyjnego pozycjonowania (pod przyciskiem, między polami formularza), zainstaluj WPCode i użyj haków WooCommerce. Ten sam woocommerce_review_order_after_payment działa na każdej wersji i nie zależy od motywu.

Jeśli jesteś gotów zainwestować w konwersję na poważnie, FunnelKit daje gotową, zoptymalizowaną kasę z badge, testami A/B i formularzem wieloetapowym. Darmowa wersja pokrywa podstawowe potrzeby, Pro dla sklepów z obrotem.

Główna zasada nie zależy od sposobu: badge muszą być prawdziwe. Nie wieszaj ikony Norton, jeśli nie masz certyfikatu DigiCert. Nie pokazuj Stripe, jeśli nie podłączyłeś Stripe. Jeden demaskujący zrzut ekranu w mediach społecznościowych kosztuje więcej niż jakikolwiek zysk konwersyjny.