woocommerce_checkout_fields - 20 Примеры кода для настройки проверки WooCommerce

Настроить свой застройка WooCommerce без плагина? Это возможно - если вам удобно с несколькими линиями PHP. В этом посте вы найдете 20 готовых к использованию фрагментов кода, используя фильтр woocommerce_checkout_fields . Они охватывают реальные случаи, такие как снятие полей, переименование ярлыков или добавление новых вариантов.

Если вы не занимаетесь кодированием, не беспокойтесь - мы также покажем вам, как использовать плагин гибкого поля оформления заказа, чтобы визуально достичь того же результата.

Что такое настройка проверки и как это помогает улучшить конверсии?

Ваша проверка, где посетители становятся клиентами. Но если это загромождено ненужными полями или не хватает гибкости, это может вызвать трение. Настройка кассе помогает уменьшить отказ, ускорить покупки и создать лучший опыт.

Woocommerce поставляется с гибким фильтром: woocommerce_checkout_fields . Вы можете использовать его для изменения счетов, доставки или дополнительных полей. Это идеально подходит для разработчиков, которые хотят контролировать видимость, порядок и контент.

20 примеров кода с использованием фильтра woocommerce_checkout_fields

Ниже приведены 20 примеров. Добавьте эти фрагменты в functions.php вашего дочерней темы. Php или пользовательский плагин.

1. Снимите поле второго адреса

 // This code allows disabling the second address field. add_filter('woocommerce_checkout_fields','hide_address_2_field_classic_checkout'); function hide_address_2_field_classic_checkout($fields) { unset ($fields['billing']['billing_address_2']); return $fields; }

2. Скрытие поля телефона

 // This code allows hiding the phone field add_filter('woocommerce_checkout_fields', 'hide_billing_phone_field_classic_checkout'); function hide_billing_phone_field_classic_checkout($fields) { unset ($fields['billing']['billing_phone']); return $fields; }

3. Сделайте поле электронной почты необязательным

 // This code makes the email field optional add_filter('woocommerce_checkout_fields', 'optional_billing_email_field_classic_checkout'); function optional_billing_email_field_classic_checkout($fields) { $fields['billing']['billing_email']['required'] = false; return $fields; }

4. Измените заполнители на поля имени и фамилии

 // This code allows adding the placeholder of the name and last name fields add_filter('woocommerce_checkout_fields', 'add_name_placeholders_classic_checkout'); function add_name_placeholders_classic_checkout($fields) { $fields['billing']['billing_first_name']['placeholder'] = 'Enter your name'; $fields['billing']['billing_last_name']['placeholder'] = 'Enter your surname'; return $fields; }

5. Переименование «Фамилия» на «фамилию»

 // This code allows changing the last name field's label add_filter('woocommerce_checkout_fields', 'change_last_name_label_classic_checkout'); function change_last_name_label_classic_checkout($fields) { $fields['billing']['billing_last_name']['label'] = 'Surname'; return $fields; });

6. Добавьте пользовательское текстовое поле

 // This code allows adding a new text field after the email field add_filter('woocommerce_checkout_fields', 'add_custom_text_field_classic_checkout'); function add_custom_text_field_classic_checkout($fields) { $fields['billing']['billing_extra_field'] = [ 'label' => 'Custom text field', 'type' => 'text', 'required' => false, 'priority' => 120, ]; return $fields; }

7. Добавьте текстовое значение для инструкций по доставке

 // This code allows adding a textarea field after the email field and the custom field from the previous example - with further priority add_filter('woocommerce_checkout_fields', 'add_custom_textarea_field_classic_checkout'); function add_custom_textarea_field_classic_checkout($fields) { $fields['billing']['delivery_instructions'] = [ 'label' => 'Delivery instructions', 'type' => 'textarea', 'required' => false, 'priority' => 130, ]; return $fields; }

8. Установите пользовательский класс CSS

 // This code allows adding custom CSS classes to the first and last name fields add_filter('woocommerce_checkout_fields', 'add_custom_css_classes_classic_checkout'); function add_custom_css_classes_classic_checkout($fields) { $fields['billing']['billing_first_name']['class'] = ['form-row-wide primary']; $fields['billing']['billing_last_name']['class'] = ['form-row-wide secondary effect']; return $fields; }

9. Измените приоритет поля электронной почты

 /* This code allows moving email after the last name field. The default priority for billing fields: billing_first_name (10) billing_last_name (20) billing_company (30) billing_country (40) billing_address_1 (50) billing_address_2 (60) billing_city (70) billing_state (80) billing_postcode (90) billing_phone (100) billing_email (110) */ add_filter('woocommerce_checkout_fields', 'place_email_after_last_name_classic_checkout'); function place_email_after_last_name_classic_checkout($fields) { $fields['billing']['billing_email']['priority'] = 25; return $fields; }

10. Удалить поле почтового индекса

 // This code allows disabling the postcode field. add_filter('woocommerce_checkout_fields','disable_postcode_field_classic_checkout'); function disable_postcode_field_classic_checkout($fields) { unset ($fields['billing']['billing_postcode']); return $fields; }

11. Перезаурядный имя после фамилии

 // This code allows moving the first name field after the last name field add_filter('woocommerce_checkout_fields', 'place_first_name_after_last_name_classic_checkout'); function place_first_name_after_last_name_classic_checkout($fields) { $fields['billing']['billing_first_name'] = array( 'priority' => 22, 'class' => 'form-row-last', 'label' => 'First name', ); $fields['billing']['billing_last_name']['class'] = 'form-row-first'; return $fields; }

12. Добавьте флажок для запроса счета

 // This code allows adding a custom checkbox for invoice request. add_filter('woocommerce_checkout_fields', 'add_custom_checkbox_field_classic_checkout'); function add_custom_checkbox_field_classic_checkout($fields) { $fields['billing']['request_invoice'] = [ 'label' => 'Request invoice', 'type' => 'checkbox', 'required' => false, 'priority' => 140, ]; return $fields; }

13. Добавить выберите «Выберите» для времени доставки

 // This code allows adding a custom select field add_filter('woocommerce_checkout_fields', 'add_custom_select_classic_checkout'); function add_custom_select_classic_checkout($fields) { $fields['billing']['delivery_time'] = [ 'label' => 'Delivery time', 'type' => 'select', 'options' => [ '' => 'Select...', 'morning' => 'Morning', 'evening' => 'Evening', ], 'priority' => 150, ]; return $fields; }

14. Комментарии перед заполнением

 // This code allows adding a default field value for order notes add_filter('woocommerce_checkout_fields', 'add_default_value_extra_notes_classic_checkout'); function add_default_value_extra_notes_classic_checkout($fields) { $fields['order']['order_comments']['default']= 'No comments'; return $fields; }

15. Добавить поля пользовательского номера

 // This code allows adding a custom number field add_filter('woocommerce_checkout_fields', 'add_custom_number_field_classic_checkout'); function add_custom_number_field_classic_checkout($fields) { $fields['billing']['number_field'] = [ 'label' => 'Number field', 'type' => 'number', 'validate' => 'number', 'required' => false, 'priority' => 200, ]; return $fields; }

16. Добавьте сборщик даты

 // This code adds a custom date picker add_filter('woocommerce_checkout_fields', 'add_custom_datepicker_classic_checkout'); function add_custom_datepicker_classic_checkout($fields) { $fields['billing']['pickup_date'] = [ 'label' => 'Pickup date', 'type' => 'date', 'validate' => 'date', 'required' => false, 'priority' => 170, ]; return $fields; }

17. Отключить проверку телефона

 // This code removes the phone field validation add_filter('woocommerce_checkout_fields', 'remove_phone_field_validation_classic_checkout'); function remove_phone_field_validation_classic_checkout($fields) { $fields['billing']['billing_phone']['validate'] = false; return $fields; }

18. Сделайте полю для судоходства

 /* This code allows moving shipping country after the last field. The default priority for shipping fields: shipping_first_name (10) shipping_last_name (20) shipping_company (30) shipping_country (40) shipping_address_1 (50) shipping_address_2 (60) shipping_city (70) shipping_state (80) shipping_postcode (90) */ add_filter('woocommerce_checkout_fields', 'place_country_after_last_field_classic_checkout'); function place_country_after_last_field_classic_checkout($fields) { $fields['shipping']['shipping_country']['priority'] = 999; return $fields; }

19. Удалить поле почтового индекса доставки

 // This code allows disabling the shipping postcode field. add_filter('woocommerce_checkout_fields','disable_shipping_postcode_field_classic_checkout'); function disable_shipping_postcode_field_classic_checkout($fields) { unset ($fields['shipping']['shipping_postcode']); return $fields; }

20. Добавьте пользовательское поле за заказами.

 // This code allows adding a new text field after the order notes add_filter('woocommerce_checkout_fields', 'add_custom_text_field_after_order_notes_classic_checkout'); function add_custom_text_field_after_order_notes_classic_checkout($fields) { $fields['order']['order_extra_field'] = [ 'label' => 'Text field', 'type' => 'text', 'required' => false, 'priority' => 20, ]; return $fields; }

Как настроить оформление заказа без кодирования, используя гибкие поля проверки

Не разработчик? Без проблем. Гибкий плагин поля оформления заказа позволяет делать все вышеперечисленное - визуально, с вашей панели WordPress.

• Добавить, удалить и переставить поля с помощью перетаскивания
  

  

• Редактировать этикетки, заполнители и значения по умолчанию
• Установить поля по мере необходимости, необязательно или скрытые
  

  

• Применить классы CSS или правила проверки
  

  

• Выберите раздел: Биллинг, доставка или дополнительная информация
• Назначить значения по умолчанию для тестирования или UX -целей
• Все без редактирования PHP или написания пользовательского кода

Результаты без развития накладных расходов.

Гибкая проверка Fields Pro - расширенные функции

Хотите больше силы и гибкости? Pro Version добавляет расширенные возможности:

• Условная логика для отображения/укрытия на основе содержания корзины или пользовательских данных
• Поддержка дополнительных типов поля: сборщик даты, сборщик времени, радио с цветами или изображениями и многое другое
• Контроль видимости для пользовательских ролей - отображать разные поля для пользователей B2B и B2C
• Полевой дисплей на основе выбранной доставки или способа оплаты
• Дополнительная цена за настройки поля

Вы можете увидеть функции плагина на странице продукта.

Сводка: Какой метод лучше всего подходит для вашей проверки?

Использование woocommerce_checkout_fields - это мощный способ настройки проверки WooCommerce - но это требует тщательного кодирования и тестирования. Кроме того, нужно позаботиться о коде и обновлениях тем.

Если вы уверены, что редактируете свою тему, приведенные выше примеры должны помочь вам справиться с самыми распространенными сценариями.

Но для всех остальных, гибкие поля оформления заказа для плагина WooCommerce предлагают не-код, удобную альтернативу с еще большим количеством опций в Pro версии.

Ключевые моменты

• Фильтр woocommerce_checkout_fields позволяет настроить форму проверки с помощью PHP
• Вы можете использовать его, чтобы добавить, удалить, переименовать, переупорядочить или стиль полей
• Гибкий плагин поля оформления заказа делает то же самое, но без необходимости кодировать
• Pro Version добавляет условную логику, дополнительные типы поля и правила полевых цен
• Выберите метод, который соответствует вашему рабочему процессу: код для управления, плагин для скорости