Перейти до вмісту
🚫 Індекс в чекауті WooCommerce заважає покупцям: 4 способи зняти перевірку

🚫 Індекс в чекауті WooCommerce заважає покупцям: 4 способи зняти перевірку

Чому валідація поштового індексу — це зайвий бар’єр

WooCommerce за замовчуванням вимагає заповнення поля поштового індексу та валідує його. Але реальність така: десятки країн Африки, Центральної Америки та Океанії взагалі не використовують zip-коди. Покупець із Кенії чи Ямайки вводить випадкові цифри, отримує помилку та йде.

Зайві поля та помилки на сторінці оформлення замовлення безпосередньо б’ють по конверсії. За даними Baymard Institute, 17% покупців із США кидали чекаут саме через надто довге або складне оформлення. Прибрати одне-два непотрібні поля — це найдешевший спосіб підняти продажі без рекламного бюджету.

Нижче наведено чотири способи вимкнути валідацію: від повного видалення поля до простого перейменування. Обирайте під свою аудиторію.

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

  • Повністю видаляємо поле індексу через unset(), для магазинів, яким індекс не потрібен узагалі
  • Робимо індекс необов’язковим, для магазинів зі змішаною географією
  • Прибираємо зайві поля з форми виставлення рахунку, якщо індекс — це лише частина проблеми
  • Змінюємо назву поля на зрозумілу користувачеві, мінімальне втручання
  • Розглядаємо плагіни, якщо не хочете чіпати код

Спосіб 1: Повністю прибрати поле індексу з чекауту

Найрадикальніший і найчистіший метод. Хук woocommerce_checkout_fields дає повний контроль над усіма полями чекауту: беремо масив, вирізаємо billing_postcode і повертаємо назад.

Код додається у functions.php дочірньої теми:

1/**
2 * Прибираємо поле поштового індексу (billing_postcode) з чекауту.
3 */
4add_filter( 'woocommerce_checkout_fields', 'quadlayers_remove_billing_postcode_checkout' );
5function quadlayers_remove_billing_postcode_checkout( $fields ) {
6 unset( $fields['billing']['billing_postcode'] );
7 return $fields;
8}

Що тут відбувається. Хук woocommerce_checkout_fields отримує весь масив полів чекауту: і billing, і shipping, і order. Функція unset() вирізає зі секції billing конкретний ключ billing_postcode. Масив повертається у WooCommerce вже без поля індексу, воно зникає і з форми, і з валідації.

Але якщо ваша аудиторія змішана і комусь індекс усе ж потрібен, дивіться спосіб 2.

Спосіб 2: Зробити поштовий індекс необов’язковим

Замість видалення поля можна просто зняти позначку обов’язковості. Поле залишається на сторінці, але покупець спокійно пропускає його без помилки.

Тут використовуємо фільтр woocommerce_default_address_fields, він відповідає за налаштування за замовчуванням для всіх адресних полів:

1/**
2 * Робимо поле поштового індексу необов'язковим.
3 */
4add_filter( 'woocommerce_default_address_fields', 'quadlayers_optional_postcode_checkout' );
5function quadlayers_optional_postcode_checkout( $p_fields ) {
6 $p_fields['postcode']['required'] = false;
7 return $p_fields;
8}

Відмінність від першого способу, у хуці. woocommerce_default_address_fields працює на рівень нижче: він задає властивості самих полів (label, placeholder, required) до того, як вони потраплять у billing- та shipping-секції. Тому ключ тут просто postcode, без префікса billing_.

Підходить магазинам, які продають і в країни з індексами, і без.

Спосіб 3: Прибрати зайві поля з форми виставлення рахунку

Часто проблема ширша за один індекс. Поля company, address_2, а також city і state теж не завжди потрібні: кожне додає тертя в чекауті.

Той самий хук woocommerce_checkout_fields прибирає будь-яке поле за його ідентифікатором. Ось повний список доступних ключів для billing-секції:

1unset( $fields['billing']['billing_company'] );
2unset( $fields['billing']['billing_address_2'] );
3unset( $fields['billing']['billing_city'] );
4unset( $fields['billing']['billing_state'] );
5unset( $fields['billing']['billing_phone'] );

Імена самоочевидні. Префікс billing_ вказує, що поле належить формі виставлення рахунку. Наприклад, щоб прибрати company і address_2 разом з індексом:

1/**
2 * Прибираємо company, address_2 та postal code з чекауту.
3 */
4add_filter( 'woocommerce_checkout_fields', 'quadlayers_remove_billing_fields' );
5function quadlayers_remove_billing_fields( $fields ) {
6 unset( $fields['billing']['billing_company'] );
7 unset( $fields['billing']['billing_address_2'] );
8 unset( $fields['billing']['billing_postcode'] );
9 return $fields;
10}

Усередині однієї функції спокійно вживаються кілька unset(), просто перелічуєте ключі, які хочете приховати.

Спосіб 4: Перейменувати поле на зрозуміле користувачеві

Мінімальне втручання з максимальним ефектом. Ви не чіпаєте валідацію, просто змінюєте загадковий напис «Postcode / ZIP» на те, що зрозуміло вашій аудиторії. Наприклад, «Район» або «Індекс (якщо є)».

Використовуємо хук gettext, той самий, через який WordPress і WooCommerce перекладають інтерфейс:

1/**
2 * Змінюємо назви полів чекауту через gettext.
3 */
4add_filter( 'gettext', 'quadlayers_billing_field_strings', 20, 3 );
5function quadlayers_billing_field_strings( $translated_text, $text, $domain ) {
6 switch ( $translated_text ) {
7 case 'Postcode / ZIP':
8 $translated_text = __( 'Area code', 'woocommerce' );
9 break;
10 }
11 return $translated_text;
12}

Хочете перейменувати кілька полів, додаєте case-и всередину switch:

1function quadlayers_billing_field_strings( $translated_text, $text, $domain ) {
2 switch ( $translated_text ) {
3 case 'Billing details':
4 $translated_text = __( 'Order information', 'woocommerce' );
5 break;
6 case 'Ship to a different address?':
7 $translated_text = __( 'Send to other location please', 'woocommerce' );
8 break;
9 case 'Company name':
10 $translated_text = __( 'Company', 'woocommerce' );
11 break;
12 case 'Postcode / ZIP':
13 $translated_text = __( 'Area code', 'woocommerce' );
14 break;
15 }
16 return $translated_text;
17}

На скриншоті вище, результат комбінації підходів: кілька полів приховано, поле індексу перейменовано на «Area code» і зроблено необов’язковим, заголовки billing- і shipping-секцій замінено на свої. Чекаут став коротшим і зрозумілішим без плагінів.

Плагіни для керування полями чекауту

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

Checkout Field Manager for WooCommerce

Checkout Field Manager, один із найпопулярніших редакторів полів чекауту. Дозволяє додавати, видаляти та перевпорядковувати поля в секціях Billing, Shipping і Additional, усе через візуальний інтерфейс.

Плагін безплатний, базова версія покриває основні сценарії: приховати поле, зробити його необов’язковим, перейменувати. Для умовної логіки (показати поле лише для певної країни) та додаткових типів полів є преміум-версія.

Direct Checkout for WooCommerce

Direct Checkout for WooCommerce (раніше називався «WooCommerce Direct Checkout») вирішує ширше завдання, спрощує весь процес оформлення замовлення. Крім видалення полів він уміє: пропускати кошик і вести одразу на чекаут, змінювати текст кнопки «Add to cart», додавати AJAX-додавання в кошик на сторінках товарів.

Обидва плагіни регулярно оновлюються та сумісні з актуальними версіями WordPress і WooCommerce.

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

Чи можна вимкнути валідацію лише для певних країн?

Так. Ви можете повісити перевірку на WC()->customer->get_billing_country() усередині фільтра woocommerce_checkout_fields і застосовувати unset() або required = false лише для списку країн без індексів. Так покупці з Німеччини чи США продовжать бачити обов’язкове поле, а клієнти з Кенії, ні.

Чи зламається доставка після вимкнення валідації індексу?

Залежить від служби доставки. Поштові сервіси на кшталт USPS або Royal Mail використовують індекс для розрахунку тарифів, для них поле краще залишити обов’язковим або хоча б видимим. Якщо ви продаєте цифрові товари або працюєте з кур’єрською доставкою по місту, індекс можна сміливо прибирати. Протестуйте розрахунок вартості для кожної зони доставки після змін.

Код не працює, поле індексу залишилося на місці. В чому річ?

Три часті причини. Перша: кеш, скиньте кеш сайту та браузера, після правки functions.php відкрийте чекаут у режимі інкогніто. Друга: інший плагін або тема перевизначає поле пізніше вашого фільтра, спробуйте збільшити пріоритет хука: add_filter( 'woocommerce_checkout_fields', '...', 99 ). Третя: ви редагуєте не той functions.php, код має бути у файлі активної (дочірньої) теми.

Як прибрати поле індексу без правки functions.php?

Встановіть Checkout Field Manager for WooCommerce, він дозволяє вимикати будь-які поля через адмінку. Або використовуйте плагін Code Snippets: вставте PHP-код зі способу 1 як снипет і активуйте його. Обидва варіанти безпечніші за пряму правку functions.php і не злітають під час оновлення теми.

Що робити, якщо валідацію індексу вимкнено, але WooCommerce все одно видає помилку?

Скоріш за все, помилку генерує не ядро WooCommerce, а сторонній плагін, наприклад, плагін служби доставки або валідатор адрес. Вимкніть плагіни доставки та перевірки адреси по одному і знайдіть винуватця. Також перевірте, чи не задана валідація на рівні JavaScript у темі, іноді розробники дублюють перевірку на фронті.

Практичний приклад із відео

Подивіться живий приклад налаштування полів чекауту, від коду до результату на фронті:

Що ставити: код чи плагін?

Якщо вам потрібно просто прибрати одне-два поля і ви не боїтеся редактора теми, чотирьох рядків PHP зі способу 1 або 2 достатньо. Це легковажно і не додає зайвого коду на сайт.

Якщо полів для налаштування багато, ви часто експериментуєте з чекаутом або не хочете чіпати functions.php, беріть Checkout Field Manager for WooCommerce. Він безплатний і дає візуальний контроль над усіма полями без ризику впустити сайт через одрук у коді.

Для комплексної оптимізації чекауту (пропуск кошика, AJAX-кнопки, кастомні написи), Direct Checkout for WooCommerce закриває все в одному плагіні.

Головне правило: після будь-яких змін пройдіть тестове замовлення від початку до кінця. П’ять хвилин тесту економлять години розбору скарг від реальних покупців.