Перейти до вмісту
🛡 Захист чекауту WooCommerce: 2 способи додати CAPTCHA за 15 хвилин

🛡 Захист чекауту WooCommerce: 2 способи додати CAPTCHA за 15 хвилин

Спам-замовлення, боти в кошику та фальшиві реєстрації, через це проходить кожен магазин на WooCommerce. Чистити базу від сміттєвих замовлень вручну ніхто не хоче, а кожен десятий лід від бота — це втрачений час і гроші.

CAPTCHA вирішує проблему за 10 хвилин налаштування. Без плагінів-комбайнів, без правок ядра.

Нижче, два робочих способи додати перевірку на чекауті: через безплатний плагін і через код у functions.php. Плюс бонус: захист сторінки входу за ті самі 5 хвилин.

Що таке CAPTCHA і навіщо вона на чекауті

💡 Швидкий огляд:

  • Що таке CAPTCHA та які типи бувають, коротко, без теорії заради теорії
  • Два способи встановлення: через безплатний плагін reCAPTCHA for WooCommerce і через код
  • Бонус: CAPTCHA на сторінці входу в адмінку, захист від брутфорсу
  • Типові помилки під час налаштування та як їх уникнути

CAPTCHA (Completely Automated Public Turing Test to Tell Computers and Humans Apart) — це тест, який відрізняє живого відвідувача від бота. Користувач ставить галочку «Я не робот», розв’язує просту картинку або головоломку, і тільки після цього форма надсилається. Бот таке не пройде: йому потрібно зрозуміти задачу, якої він не навчений.

Для WooCommerce-магазину CAPTCHA на чекауті, не примха, а необхідність. Спам-боти вміють заповнювати поля оформлення замовлення та натискати «Надіслати»: власник отримує десятки порожніх замовлень, які висять в адмінці та забивають CRM. Реальний кейс: після ввімкнення reCAPTCHA на тестовому сайті кількість фальшивих замовлень впала до нуля за добу, без фільтрів, без банів за IP, без правок .htaccess.

Шість основних типів CAPTCHA: текстова (спотворені літери та цифри), аудіо (для людей із порушеннями зору), математична (прості приклади на кшталт «3 + 4»), графічна (вибрати всі картинки зі світлофором), головоломка (перетягнути пазл) і невидима (reCAPTCHA v3, працює у фоновому режимі, аналізує поведінку користувача). Для магазину найкраще підходить reCAPTCHA v2 (checkbox) або невидима v3, вони не дратують покупців і водночас відсікають переважну більшість ботів.

Огляд плагінів: що ставити на WooCommerce

На ринку три основні плагіни, які закривають задачу. Розберемо коротко, який для чого підходить.

ReCAPTCHA for WooCommerce (RelyWP)

Сторінка деталей плагіна reCAPTCHA для WooCommerce, що показує опис плагіна та список підтримуваних форм

Безплатний, без преміум-версії взагалі. Підтримує reCAPTCHA v2 на чекауті, сторінці входу, реєстрації та скиданні пароля. 40 000+ активних встановлень, рейтинг 4,5 на WordPress.org. Встановлюється за хвилину: API-ключі Google → позначити галочками форми → готово. Мінус: тільки v2, v3 не підтримується, якщо потрібна невидима перевірка, дивіться альтернативи.

Advanced Google reCAPTCHA (WebFactory)

Огляд плагіна зі згадкою про інтеграцію розширеного CAPTCHA для оформлення замовлення WooCommerce, форм входу та областей коментарів

200 000+ встановлень, рейтинг 4,8 на WordPress.org. Закриває чекаут WooCommerce, Easy Digital Downloads, BuddyPress і стандартні форми WordPress. Підтримує v2 і v3, є математична капча як fallback. Безплатна версія покриває 90% задач; PRO-версія додає блокування за країнами. З нюансів: інтерфейс на любителя (вкладки старого дизайну), а у відгуках періодично спливають конфлікти з кастомними темами.

ReCaptcha by BestWebSoft

Графічна реклама «Супер захист від спаму» для форм WordPress з помітним синім значком галочки

Безплатна версія + преміум за $24 на рік. v2, v3 та enterprise-режим. Налаштування розміру та розташування віджета, мультимовність, RTL. Мінус: прив’язка до Google-сервісів, для проєктів під GDPR може бути критично. Але як робочий інструмент, надійний, перевірений на десятках live-проєктів.

Спосіб 1: CAPTCHA через плагін (без коду)

Найпростіший шлях. Беремо reCAPTCHA for WooCommerce, він безплатний, легкий і не потребує танців із бубном.

Крок 1: Встановлення та активація

Заходимо в адмінку WordPress: Plugins → Add New. У рядку пошуку вводимо recaptcha for woo.

Знайшли, натискаємо Install Now, чекаємо пару секунд і активуємо.

Репозиторій плагінів WordPress, що показує реCAPTCHA для WooCommerce зі значними кнопками Встановити зараз та Активувати

Після активації в меню Settings з’явиться пункт reCAPTCHA WooCommerce.

Меню налаштувань, що відображає елемент reCAPTCHA WooCommerce після активації, позначений виділеннями 7 та 8

Крок 2: API-ключі Google

Заходимо на сторінку створення ключів reCAPTCHA. Заповнюємо:

  • Label, будь-яке ім’я (наприклад, «Мій магазин»)
  • reCAPTCHA type, v2 (прапорець «I'm not a robot»)
  • Domains, домен магазину без https://
Сторінка налаштувань Google reCAPTCHA, що показує введене «Test» та вибрані радіокнопки для Challenge (v2)

Тиснемо Submit, система видасть Site Key і Secret Key.

Панель налаштувань WordPress із ієрархічним списком стандартних сторінок сайту, включаючи Про нас, Кошик, Оформлення замовлення та Контакти

Крок 3: Налаштування плагіна

Копіюємо ключі та вставляємо в поля плагіна: Settings → reCAPTCHA WooCommerce.

На сторінці налаштувань плагіна відображаються поля для Site Key та Site Secret, а також прапорці для захисту оформлення замовлення WooCommerce

Прокручуємо нижче, секція WooCommerce Forms. Позначаємо прапорцем WooCommerce Checkout (і Login/Register, якщо потрібно захистити вхід).

Налаштування форм WooCommerce містить прапорці для опцій Оформлення замовлення, Лише гостьове оформлення, Вхід та Реєстрація

Зберігаємо зміни.

Крок 4: Перевірка

На тій самій сторінці налаштувань є кнопка Test API Response. Натискаємо, якщо ключі правильні, побачимо зелений статус.

Готово. Тепер на сторінці оформлення замовлення перед кнопкою «Оформити замовлення» буде капча. Перевірте в режимі інкогніто, бот-тест має з’явитися.

Спосіб 2: CAPTCHA через код (без зайвих плагінів)

Якщо не хочете встановлювати ще один плагін, ось сніпет, який додає reCAPTCHA на оформлення замовлення через functions.php.

Крок 1: Підготовка

Перед редагуванням коду зробіть повний бекап сайту. Редагуємо файл functions.php дочірньої теми або використовуємо плагін Code Snippets — це безпечніше: помилка в коді не покладе сайт, сніпет просто вимкнеться.

Крок 2: Код

Нижче наведено дві функції PHP. Перша виводить віджет reCAPTCHA на чекауті, друга перевіряє відповідь Google під час надсилання замовлення.

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');

Що тут відбувається:

  • woocommerce_checkout_order_review, хук, який спрацьовує під час виведення блоку замовлення на чекауті. На нього вішаємо виведення <div> з data-атрибутом data-sitekey (той самий Site Key із консолі Google).
  • woocommerce_checkout_process, хук валідації під час надсилання замовлення. Функція надсилає відповідь капчі на сервер Google через siteverify-ендпоінт, декодує JSON і, якщо перевірку не пройдено, додає помилку через wc_add_notice(), штатний механізм WooCommerce.
  • Якщо на хостингу вимкнено allow_url_fopen (функція file_get_contents для URL не працює), замініть її на wp_remote_get(), він працює через cURL і не залежить від php.ini.

Крок 3: Вставлення та перевірка

Додайте код через Code Snippets або в functions.php дочірньої теми, збережіть.

Фрагмент PHP додає захист CAPTCHA до оформлення замовлення WooCommerce, виділяючи рядки 14 та 15

Після збереження зайдіть на сторінку чекауту в режимі інкогніто, має з’явитися віджет reCAPTCHA. Спробуйте надіслати замовлення без позначки: з’явиться помилка «Please verify that you are not a robot».

Бонус: CAPTCHA на сторінці входу

Чекаут, не єдина больова точка. Брутфорс-атаки на /wp-login.php і /my-account/ тривають цілодобово, навіть на невеликих магазинах. Ті самі reCAPTCHA for WooCommerce закривають форму входу за пару кліків.

Заходимо в Settings → reCAPTCHA WooCommerce, секція WooCommerce Forms, і вмикаємо Login:

Панель налаштувань зі списком форм WooCommerce з перемикачами, що показує увімкнений «WooCommerce Login» та кнопку Зберегти зміни нижче

Зберегли, і /my-account/ захищено. Якщо потрібно закрити ще й /wp-login.php, цей самий плагін підтримує WordPress-форми: та сама логіка, позначка WordPress Login Form.

Типові проблеми та як їх вирішити

  • Капча не з’являється на чекауті. Перевірте ключі: Site Key і Secret Key мають бути від v2 («I'm not a robot» Checkbox), а не від v3. Якщо версія не збігається, віджет просто не рендериться.
  • Капча відображається двічі. Найімовірніше, у вас активні два плагіни з reCAPTCHA одночасно (наприклад, один у темі, інший окремо). Вимкніть дублікат.
  • Помилка «Invalid key» під час тесту API. Або помилка під час копіювання ключів, або ключі створені для іншого домену. Перестворіть ключі та перевірте домен у консолі Google.
  • Конфлікт із кастомним шаблоном чекауту. Перемкніться на стандартну тему (Storefront) і перевірте: якщо капча з’явилася, проблема в хуках вашої теми. Рішення: кастомний хук у коді (Спосіб 2) із прив’язкою до вашого шаблону.
  • Чекаут не завантажується після ввімкнення CAPTCHA. Очистіть кеш (плагін + браузер), вимкніть мініфікацію JS на час тесту: конфлікти найчастіше виникають через агресивну оптимізацію скриптів.
  • Покупці скаржаться, що капча відхиляє реальних людей. Знизьте чутливість у налаштуваннях reCAPTCHA або перейдіть на v2 Checkbox: він м’якший за v3 і не блокує за «підозрілою» поведінковою моделлю.

⁉️🤔 Часті запитання

Чи потрібна CAPTCHA на чекауті, якщо вже встановлено антиспам-плагін?

Антиспам-плагіни на кшталт Akismet захищають коментарі та форми зворотного зв’язку, але не чекаут WooCommerce. Боти для фальшивих замовлень обходять стандартні фільтри: їм не потрібні поля коментарів, вони заповнюють саме форму оформлення. CAPTCHA закриває цю діру.

Яку версію reCAPTCHA обрати, v2 чи v3?

Для магазину ми радимо v2 Checkbox: відвідувач ставить одну галочку, і замовлення йде. v3 працює у фоновому режимі та може заблокувати реального покупця, якщо його поведінкова модель здасться системі «підозрілою», а на чекауті кожен клієнт на вагу золота.

Чи можна захистити капчею лише гостьовий чекаут, а залогінених користувачів пропускати?

Так. У плагіні reCAPTCHA for WooCommerce галочка WooCommerce Checkout вмикає капчу для всіх. Щоб пропускати залогінених, доведеться додати умову в код (Спосіб 2): обгорнути хук у if (!is_user_logged_in()). Без коду, лише плагінами з умовною логікою на кшталт Advanced Google reCAPTCHA PRO.

Чи впливає CAPTCHA на швидкість завантаження чекауту?

Помітно, ні. Скрипт reCAPTCHA завантажується асинхронно й лише на тих сторінках, де форма реально виводиться. Жодного зайвого навантаження на весь сайт. На практиці різниця у швидкості чекауту до та після, у межах 100-200 мс.

Підсумки

Додати CAPTCHA на чекаут WooCommerce — це завдання на 15 хвилин, а ефект, чистий. Жодних спам-замовлень, жодного ручного чищення бази, жодних ботів у воронці.

Якщо не хочете ставити зайві плагіни, беріть другий спосіб із кодом. Він додає рівно дві функції у functions.php і не потребує оновлень. Якщо віддаєте перевагу підходу «поставив і забув», reCAPTCHA for WooCommerce: безплатний, 40 тисяч встановлень, живі оновлення та підтримка Block Checkout з коробки.

Перевірте, що капча працює на всіх пристроях: відкрийте чекаут із телефона та з десктопа в режимі інкогніто. Якщо на мобільному віджет з’їжджає, поправте CSS-контейнер або перемкніть розмір віджета на Compact у консолі Google reCAPTCHA. П’ять хвилин тесту зараз зекономлять години розгрібання спам-замовлень потім.