WooCommerce — одна из самых популярных платформ для создания интернет-магазинов на WordPress. Часто возникает необходимость настроить поля оформления заказа (checkout fields), чтобы собрать именно ту информацию, которая нужна бизнесу. В этой статье подробно разберём, как изменить, добавить или удалить поля в форме оформления заказа WooCommerce с примерами кода и рекомендациями по использованию плагинов.
Почему стоит настраивать поля оформления заказа в WooCommerce
Стандартный набор полей WooCommerce не всегда подходит для всех магазинов. Например, вам может понадобиться добавить поле для ввода ИНН, номер паспорта, выбрать дату доставки или убрать ненужные поля, чтобы упростить процесс оформления заказа и повысить конверсию.
Правильная настройка полей позволяет:
- Собрать всю необходимую информацию от клиента;
- Упростить и ускорить оформление заказа;
- Избежать лишних данных, которые могут отпугнуть покупателя;
- Интегрировать дополнительные проверки и валидацию данных.
Основные способы изменения полей оформления заказа в WooCommerce
Есть три главных способа изменить поля на странице оформления заказа:
1. Использование плагинов
Для тех, кто не хочет писать код, есть множество плагинов, например:
- WooCommerce Checkout Manager — позволяет добавлять, редактировать и удалять поля, задавать обязательность и типы полей.
- Clearfy Pro — оптимизирует WooCommerce и позволяет убирать ненужные поля оформления заказа для повышения скорости и удобства.
Однако для тонкой настройки и интеграции с бизнес-логикой лучше использовать код.
2. Изменение полей через хуки и фильтры
WooCommerce предоставляет фильтр woocommerce_checkout_fields, с помощью которого можно изменять поля формы на лету.
Пример функции с префиксом wpcompany_, добавляющей поле ИНН:
function wpcompany_add_custom_checkout_field( $fields ) {
$fields['billing']['billing_inn'] = array(
'type' => 'text',
'label' => 'ИНН',
'required' => true,
'class' => array('form-row-wide'),
'clear' => true,
'priority' => 25,
);
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wpcompany_add_custom_checkout_field' );Этот код добавит новое обязательное текстовое поле в раздел «Платежные данные».
3. Валидация и сохранение новых полей
Добавленное поле нужно валидировать и сохранять. Ниже пример валидации поля ИНН и сохранения его в мета-данных заказа:
function wpcompany_validate_custom_checkout_field() {
if ( empty( $_POST['billing_inn'] ) ) {
wc_add_notice( 'Пожалуйста, введите ИНН.', 'error' );
} elseif ( ! preg_match('/^\d{10}|\d{12}$/', $_POST['billing_inn'] ) ) {
wc_add_notice( 'Введите корректный ИНН из 10 или 12 цифр.', 'error' );
}
}
add_action( 'woocommerce_checkout_process', 'wpcompany_validate_custom_checkout_field' );
function wpcompany_save_custom_checkout_field( $order_id ) {
if ( ! empty( $_POST['billing_inn'] ) ) {
update_post_meta( $order_id, '_billing_inn', sanitize_text_field( $_POST['billing_inn'] ) );
}
}
add_action( 'woocommerce_checkout_update_order_meta', 'wpcompany_save_custom_checkout_field' );Теперь ИНН будет сохранён и доступен в админке заказа.
Удаление и изменение стандартных полей WooCommerce
Чтобы убрать ненужные поля, например, поле «Компания» или «Адрес 2», можно изменить массив полей так:
function wpcompany_remove_checkout_fields( $fields ) {
unset( $fields['billing']['billing_company'] );
unset( $fields['billing']['billing_address_2'] );
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wpcompany_remove_checkout_fields' );Также можно изменить метки, сделать поля необязательными или изменить классы CSS через этот же фильтр.
Добавление условных полей в оформление заказа
Иногда нужно показывать поля в зависимости от выбранных опций. Например, если способ доставки — самовывоз, поле с адресом доставки скрывается.
Для этого понадобится добавить JavaScript на страницу оформления заказа. Пример простого скрипта для показа/скрытия поля:
function wpcompany_conditional_checkout_fields_script() {
if ( ! is_checkout() ) return;
?>
<script type="text/javascript">
jQuery(function($){
function toggleAddress2() {
var shippingMethod = $('input[name="shipping_method[0]"]:checked').val();
if ( shippingMethod && shippingMethod.indexOf('local_pickup') !== -1 ) {
$('#shipping_address_2_field').hide();
} else {
$('#shipping_address_2_field').show();
}
}
toggleAddress2();
$('form.checkout').on('change', 'input[name="shipping_method[0]"]', toggleAddress2);
});
</script>
<?php
}
add_action( 'wp_footer', 'wpcompany_conditional_checkout_fields_script' );Так вы можете гибко управлять отображением полей, улучшая UX.
Практические советы и лучшие практики
При работе с полями оформления заказа учитывайте:
- Минимизируйте количество обязательных полей — это повышает конверсию;
- Обязательно валидируйте пользовательский ввод, чтобы избежать ошибок и некорректных данных;
- Используйте префиксы в названиях функций (например,
wpcompany_), чтобы избежать конфликтов; - Тестируйте изменения на копии сайта перед публикацией;
- Для сложных изменений с условной логикой лучше использовать специализированные плагины или создавать собственный плагин с кодом.
Использование плагина WPCompany Expert Review для сбора отзывов в чекауте
Если вам нужно собрать отзывы или комментарии прямо в процессе оформления заказа, плагин Expert Review отлично интегрируется с WooCommerce. Он позволяет добавлять поля для отзывов и рейтингов, которые можно отображать на страницах товаров.
Подключение происходит через настройки плагина, что удобно и не требует кодинга.