Skip to content
🛡 Ochrona checkoutu WooCommerce: 2 sposoby na dodanie CAPTCHA w 15 minut
WooCommerceWtyczki WordPressWordPress
7 min1,494 słów

🛡 Ochrona checkoutu WooCommerce: 2 sposoby na dodanie CAPTCHA w 15 minut

Spamowe zamówienia, boty w koszyku i fałszywe rejestracje, przez to przechodzi każdy sklep na WooCommerce. Nikt nie chce ręcznie czyścić bazy ze śmieciowych zamówień, a co dziesiąty lead od bota to stracony czas i pieniądze.

CAPTCHA rozwiązuje problem w 10 minut konfiguracji. Bez kombajnów wtyczek, bez grzebania w jądrze.

Poniżej dwa działające sposoby na dodanie weryfikacji w checkoucie: przez darmową wtyczkę i przez kod w functions.php. Plus bonus: ochrona strony logowania w te same 5 minut.

Czym jest CAPTCHA i po co ją dodawać w checkoucie

💡 Szybki przegląd:

  • Czym jest CAPTCHA i jakie są jej rodzaje, krótko, bez teorii dla teorii
  • Dwa sposoby instalacji: przez darmową wtyczkę reCAPTCHA for WooCommerce i przez kod
  • Bonus: CAPTCHA na stronie logowania do panelu administracyjnego, ochrona przed brute force
  • Typowe błędy podczas konfiguracji i jak ich uniknąć

CAPTCHA (Completely Automated Public Turing Test to Tell Computers and Humans Apart) to test, który odróżnia żywego użytkownika od bota. Użytkownik zaznacza pole „Nie jestem robotem", rozwiązuje prosty obrazek lub łamigłówkę i dopiero wtedy formularz zostaje wysłany. Bot tego nie przejdzie: musiałby zrozumieć zadanie, do którego nie został wytrenowany.

Dla sklepu WooCommerce CAPTCHA w checkoucie to nie fanaberia, a konieczność. Boty spamowe potrafią wypełniać pola formularza zamówienia i klikać „Wyślij": właściciel dostaje dziesiątki pustych zamówień, które wiszą w panelu administracyjnym i zaśmiecają CRM. Przykład z życia: po włączeniu reCAPTCHA na testowej stronie liczba fałszywych zamówień spadła do zera w ciągu doby, bez filtrów, bez banowania po IP, bez edycji .htaccess.

Sześć głównych typów CAPTCHA: tekstowa (zniekształcone litery i cyfry), audio (dla osób z wadami wzroku), matematyczna (proste działania typu „3 + 4"), graficzna (wybierz wszystkie obrazki z sygnalizacją świetlną), łamigłówka (przeciągnij element układanki) i niewidoczna (reCAPTCHA v3, działa w tle, analizuje zachowanie użytkownika). Dla sklepu najlepiej sprawdza się reCAPTCHA v2 (checkbox) lub niewidoczna v3, nie irytują kupujących, a jednocześnie odcinają zdecydowaną większość botów.

Przegląd wtyczek: co zainstalować na WooCommerce

Na rynku są trzy główne wtyczki, które rozwiązują to zadanie. Omówmy krótko, która do czego się nadaje.

ReCAPTCHA for WooCommerce (RelyWP)

Darmowa, bez żadnej wersji premium. Obsługuje reCAPTCHA v2 w checkoucie, na stronie logowania, rejestracji i resetowania hasła. 40 000+ aktywnych instalacji, ocena 4,5 na WordPress.org. Instaluje się w minutę: klucze API Google → zaznaczyć formularze → gotowe. Minus: tylko v2, v3 nie jest obsługiwana; jeśli potrzebują Państwo niewidocznej weryfikacji, proszę spojrzeć na alternatywy.

Advanced Google reCAPTCHA (WebFactory)

200 000+ instalacji, ocena 4,8 na WordPress.org. Obsługuje checkout WooCommerce, Easy Digital Downloads, BuddyPress i standardowe formularze WordPress. Wspiera v2 i v3, ma matematyczną CAPTCHA jako fallback. Darmowa wersja pokrywa 90% zadań; wersja PRO dodaje blokowanie po krajach. Z niuansów: interfejs dla koneserów (zakładki w starym stylu), a w opiniach okresowo pojawiają się konflikty z niestandardowymi motywami.

ReCaptcha by BestWebSoft

Darmowa wersja + premium za $24 rocznie. v2, v3 i tryb enterprise. Konfiguracja rozmiaru i położenia widżetu, wielojęzyczność, RTL. Minus: powiązanie z usługami Google, co może być krytyczne dla projektów podlegających RODO. Ale jako narzędzie pracy, niezawodne, sprawdzone na dziesiątkach działających projektów.

Sposób 1: CAPTCHA przez wtyczkę (bez kodu)

Najprostsza droga. Bierzemy reCAPTCHA for WooCommerce, jest darmowa, lekka i nie wymaga czarów.

Krok 1: Instalacja i aktywacja

Wchodzimy do panelu administracyjnego WordPress: Wtyczki → Dodaj nową. W pasku wyszukiwania wpisujemy recaptcha for woo.

Znaleźliśmy, klikamy Zainstaluj teraz, czekamy kilka sekund i aktywujemy.

Po aktywacji w menu Settings pojawi się pozycja reCAPTCHA WooCommerce.

Krok 2: Klucze API Google

Wchodzimy na stronę tworzenia kluczy reCAPTCHA. Wypełniamy:

  • Label, dowolna nazwa (np. „Mój sklep")
  • reCAPTCHA type, v2 (pole wyboru „Nie jestem robotem")
  • Domains, domena sklepu bez https://

Klikamy Submit, system wygeneruje Site Key i Secret Key.

Krok 3: Konfiguracja wtyczki

Kopiujemy klucze i wklejamy je w pola wtyczki: Settings → reCAPTCHA WooCommerce.

Przewijamy niżej, do sekcji WooCommerce Forms. Zaznaczamy WooCommerce Checkout (oraz Login/Register, jeśli chcemy chronić logowanie).

Zapisujemy zmiany.

Krok 4: Weryfikacja

Na tej samej stronie ustawień znajduje się przycisk Test API Response. Klikamy go; jeśli klucze są poprawne, zobaczymy zielony status.

Gotowe. Teraz na stronie składania zamówienia, przed przyciskiem „Złóż zamówienie", pojawi się captcha. Proszę sprawdzić w trybie incognito, test antybotowy powinien się wyświetlić.

Sposób 2: CAPTCHA przez kod (bez zbędnych wtyczek)

Jeśli nie chcą Państwo instalować kolejnej wtyczki, oto snippet dodający reCAPTCHA do składania zamówienia przez functions.php.

Krok 1: Przygotowanie

Przed edycją kodu należy wykonać pełną kopię zapasową witryny. Edytujemy plik functions.php motywu potomnego lub korzystamy z wtyczki Code Snippets, to bezpieczniejsze: błąd w kodzie nie wyłączy witryny, snippet po prostu zostanie dezaktywowany.

Krok 2: Kod

Poniżej znajdują się dwie funkcje PHP. Pierwsza wyświetla widżet reCAPTCHA na checkoutie, druga weryfikuje odpowiedź Google podczas wysyłania zamówienia.

1/**
2 * Виведення reCAPTCHA на сторінці чекауту WooCommerce
3 */
4function doublee_show_me_the_checkout_captcha($checkout) {
5    echo '<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>';
6}
7add_action('woocommerce_checkout_order_review', 'doublee_show_me_the_checkout_captcha', 18);
8 
9/**
10 * Перевірка відповіді reCAPTCHA при оформленні замовлення
11 */
12function doublee_process_recaptcha() {
13    $postdata = $_POST['g-recaptcha-response'];
14    $verified_recaptcha = file_get_contents(
15        'https://www.google.com/recaptcha/api/siteverify?secret=YOUR_SECRET_KEY&response=' . $postdata
16    );
17    $response = json_decode($verified_recaptcha);
18    if (!$response->success) {
19        wc_add_notice('Please verify that you are not a robot', 'error');
20    }
21}
22add_action('woocommerce_checkout_process', 'doublee_process_recaptcha');

Co tu się dzieje:

  • woocommerce_checkout_order_review, hak uruchamiany podczas wyświetlania bloku zamówienia na checkoutie. Podpinamy pod niego wyświetlenie <div> z atrybutem data data-sitekey (ten sam Site Key z konsoli Google).
  • woocommerce_checkout_process, hak walidacji podczas wysyłania zamówienia. Funkcja wysyła odpowiedź captchy na serwer Google przez endpoint siteverify-endpoint, dekoduje JSON i, jeśli weryfikacja nie przeszła pomyślnie, dodaje błąd przez wc_add_notice(), standardowy mechanizm WooCommerce.
  • Jeśli na hostingu wyłączono allow_url_fopen (funkcja file_get_contents dla URL nie działa), proszę zastąpić ją przez wp_remote_get(), działa przez cURL i nie zależy od php.ini.

Krok 3: Wstawienie i test

Proszę dodać kod przez Code Snippets lub w functions.php motywu potomnego, zapisać.

Po zapisaniu proszę wejść na stronę checkoutu w trybie incognito, powinien pojawić się widżet reCAPTCHA. Proszę spróbować wysłać zamówienie bez zaznaczenia: pojawi się błąd „Please verify that you are not a robot".

Bonus: CAPTCHA na stronie logowania

Checkout to nie jedyny wrażliwy punkt. Ataki brute force na /wp-login.php i /my-account/ trwają całą dobę, nawet na małych sklepach. Ten sam reCAPTCHA for WooCommerce zamyka formularz logowania za pomocą kilku kliknięć.

Wchodzimy w Settings → reCAPTCHA WooCommerce, sekcja WooCommerce Forms, i włączamy Login:

Zapisaliśmy i /my-account/ jest chronione. Jeśli trzeba zamknąć również /wp-login.php, ta sama wtyczka obsługuje formularze WordPress: ta sama logika, zaznaczenie WordPress Login Form.

Typowe problemy i jak je rozwiązać

  • CAPTCHA nie pojawia się na checkout. Proszę sprawdzić klucze: Site Key i Secret Key muszą pochodzić z wersji v2 (Checkbox „Nie jestem robotem"), a nie z v3. Jeśli wersja się nie zgadza, widget po prostu się nie renderuje.
  • CAPTCHA wyświetla się podwójnie. Najprawdopodobniej mają Państwo aktywne dwie wtyczki z reCAPTCHA jednocześnie (np. jedna w motywie, druga osobno). Proszę wyłączyć duplikat.
  • Błąd „Invalid key" podczas testu API. Albo pomyłka przy kopiowaniu kluczy, albo klucze zostały utworzone dla innej domeny. Proszę utworzyć klucze ponownie i sprawdzić domenę w konsoli Google.
  • Konflikt z niestandardowym szablonem checkoutu. Proszę przełączyć się na standardowy motyw (Storefront) i sprawdzić: jeśli CAPTCHA się pojawiła, problem leży w hookach Państwa motywu. Rozwiązanie: niestandardowy hook w kodzie (Sposób 2) z przypisaniem do Państwa szablonu.
  • Checkout nie ładuje się po włączeniu CAPTCHA. Proszę wyczyścić cache (wtyczka + przeglądarka), wyłączyć minifikację JS na czas testu: konflikty najczęściej wynikają z agresywnej optymalizacji skryptów.
  • Kupujący skarżą się, że CAPTCHA odrzuca prawdziwych ludzi. Proszę obniżyć czułość w ustawieniach reCAPTCHA lub przejść na v2 Checkbox: jest łagodniejszy niż v3 i nie blokuje za „podejrzany" wzorzec zachowania.

⁉️🤔 Często zadawane pytania

Czy CAPTCHA na checkout jest potrzebna, jeśli zainstalowano już wtyczkę antyspamową?

Wtyczki antyspamowe, takie jak Akismet, chronią komentarze i formularze kontaktowe, ale nie checkout WooCommerce. Boty do fałszywych zamówień omijają standardowe filtry: nie potrzebują pól komentarzy, wypełniają właśnie formularz składania zamówienia. CAPTCHA zamyka tę lukę.

Którą wersję reCAPTCHA wybrać, v2 czy v3?

Dla sklepu radzimy v2 Checkbox: odwiedzający zaznacza jedno pole i zamówienie jest realizowane. v3 działa w tle i może zablokować prawdziwego klienta, jeśli jego wzorzec zachowania wyda się systemowi „podejrzany", a na checkout każdy klient jest na wagę złota.

Czy można zabezpieczyć CAPTCHA tylko gościnny checkout, a zalogowanych użytkowników przepuszczać?

Tak. We wtyczce reCAPTCHA for WooCommerce checkbox WooCommerce Checkout włącza CAPTCHA dla wszystkich. Aby przepuszczać zalogowanych, trzeba dodać warunek w kodzie (Sposób 2): opakować hook w if (!is_user_logged_in()). Bez kodu, tylko wtyczkami z logiką warunkową, takimi jak Advanced Google reCAPTCHA PRO.

Czy CAPTCHA wpływa na szybkość ładowania checkoutu?

Odczuwalnie nie. Skrypt reCAPTCHA ładuje się asynchronicznie i tylko na tych stronach, gdzie formularz jest faktycznie wyświetlany. Żadnego dodatkowego obciążenia dla całej witryny. W praktyce różnica w szybkości checkoutu przed i po mieści się w granicach 100-200 ms.

Podsumowanie

Dodanie CAPTCHA do checkoutu WooCommerce to zadanie na 15 minut, a efekt jest czysty. Żadnych spam-zamówień, żadnego ręcznego czyszczenia bazy, żadnych botów w lejku.

Jeśli nie chcą Państwo instalować dodatkowych wtyczek, proszę wybrać drugi sposób z kodem. Dodaje on dokładnie dwie funkcje w functions.php i nie wymaga aktualizacji. Jeśli wolą Państwo podejście „zainstaluj i zapomnij", reCAPTCHA for WooCommerce: darmowa, 40 tysięcy instalacji, bieżące aktualizacje i wsparcie Block Checkout od ręki.

Proszę sprawdzić, czy CAPTCHA działa na wszystkich urządzeniach: proszę otworzyć checkout z telefonu i z komputera w trybie incognito. Jeśli na urządzeniu mobilnym widget się rozjeżdża, proszę poprawić kontener CSS lub przełączyć rozmiar widgetu na Compact w konsoli Google reCAPTCHA. Pięć minut testów teraz zaoszczędzi godziny rozgrzebywania spam-zamówień później.

Redakcja
RedakcjaZespół redakcyjny→ Wszystkie publikacje

Profesjonalny zespół autorów i redaktorów specjalizujących się w tworzeniu treści wysokiej jakości.