Часто стандартных полей в форме заказа WordPress бывает недостаточно для сбора всей нужной информации от клиентов. В этой статье мы подробно разберём, как добавить пользовательские поля в форму заказа на сайте WordPress, используя как плагины, так и собственные функции. Это особенно актуально для интернет-магазинов и сервисов, где требуется собирать дополнительные данные, например, дату доставки, пожелания или дополнительные контакты.
Почему важно расширять форму заказа в WordPress
Стандартные формы заказа часто ограничены базовыми полями: имя, телефон, адрес и email. Однако в реальных условиях бизнеса требуется собрать дополнительную информацию, чтобы повысить качество обслуживания или автоматизировать процесс обработки заказов. Например, можно добавить поле для выбора времени доставки, поле с комментариями или согласие на обработку персональных данных.
Без расширения формы многие важные данные теряются, и приходится связываться с клиентом дополнительно, что снижает эффективность работы сайта и уровень сервиса.
Добавление дополнительных полей помогает также соответствовать требованиям законодательства, собирая согласия и уведомления.
Использование плагинов для добавления полей в форму заказа
Для большинства пользователей самый простой и безопасный способ расширить форму заказа — использовать специальные плагины. Они позволяют добавлять поля без навыков программирования и обеспечивают совместимость с ядром WordPress и популярными плагинами для интернет-магазинов, например WooCommerce.
Популярные плагины для расширения формы заказа
- WooCommerce Checkout Field Editor — позволяет добавлять, редактировать и удалять поля на странице оформления заказа. Поддерживает разные типы полей: текст, выпадающие списки, флажки.
- Flexible Checkout Fields — простой интерфейс для добавления и настройки полей, управление отображением и обязательностью заполнения.
- Checkout Manager for WooCommerce — расширенный функционал с возможностью создания сложных полей и групп.
Использование плагинов экономит время и минимизирует ошибки. Ниже рассмотрим пример добавления простого текстового поля с помощью кода, если хочется контролировать процесс самостоятельно.
Добавление пользовательских полей в форму заказа через код
Если вы хотите добавить поле в форму заказа без плагинов, можно использовать хуки WooCommerce и WordPress. Ниже приведён пример добавления текстового поля "Комментарий к заказу" на страницу оформления заказа.
Добавление поля на страницу оформления заказа
add_action('wpedu_add_custom_checkout_field', 'wpedu_custom_checkout_field');
function wpedu_custom_checkout_field() {
woocommerce_form_field('wpedu_order_comment', array(
'type' => 'text',
'class' => array('wpedu-order-comment form-row-wide'),
'label' => __('Комментарий к заказу'),
'placeholder' => __('Введите комментарий'),
'required' => false,
), '');
}
// Используем правильный хук для WooCommerce
add_action('woocommerce_after_order_notes', 'wpedu_custom_checkout_field');В этом коде мы подключаем функцию wpedu_custom_checkout_field к хуку woocommerce_after_order_notes, что выводит поле после стандартных заметок к заказу.
Сохранение данных пользовательского поля
Для того чтобы данные из нового поля сохранялись в заказе, нужно обработать их при оформлении заказа:
add_action('woocommerce_checkout_update_order_meta', 'wpedu_save_custom_checkout_field');
function wpedu_save_custom_checkout_field($order_id) {
if (!empty($_POST['wpedu_order_comment'])) {
update_post_meta($order_id, '_wpedu_order_comment', sanitize_text_field($_POST['wpedu_order_comment']));
}
}Эта функция сохранит комментарий в метаполе заказа с ключом _wpedu_order_comment.
Отображение пользовательского поля в админке заказа
Чтобы менеджеры могли видеть данные из дополнительного поля в админке WordPress, добавим вывод этого поля на страницу заказа:
add_action('woocommerce_admin_order_data_after_billing_address', 'wpedu_display_custom_field_admin_order', 10, 1);
function wpedu_display_custom_field_admin_order($order){
$comment = get_post_meta($order->get_id(), '_wpedu_order_comment', true);
if ($comment) {
echo '<p><strong>'.__('Комментарий к заказу').':</strong> ' . esc_html($comment) . '</p>';
}
}Теперь комментарий будет отображаться в разделе с данными покупателя.
Дополнительные советы по работе с пользовательскими полями
Валидация и безопасность
Очень важно валидировать и очищать данные, которые вводит пользователь. В примерах выше используется функция sanitize_text_field(), которая удаляет нежелательные символы и предотвращает XSS-атаки.
Если добавляете обязательные поля, то нужно добавить проверку на заполнение перед сохранением заказа, используя хук woocommerce_checkout_process. Например:
add_action('woocommerce_checkout_process', 'wpedu_validate_custom_field');
function wpedu_validate_custom_field() {
if (empty($_POST['wpedu_order_comment'])) {
wc_add_notice(__('Пожалуйста, заполните комментарий к заказу.'), 'error');
}
}Различные типы полей
WooCommerce позволяет добавлять не только текстовые поля, но и радиокнопки, чекбоксы, выпадающие списки и даже поля даты. Для создания сложных форм можно комбинировать разные типы полей, что улучшит UX и позволит максимально гибко собирать информацию.
Локализация и удобство пользователей
Обязательно используйте функции локализации WordPress, такие как __() и _e(), чтобы ваша форма могла использоваться на любом языке. Также продумывайте подсказки и placeholder, чтобы пользователю было понятно, какую информацию от него ждут.
Заключение
Добавление пользовательских полей в форму заказа WordPress — это мощный инструмент для улучшения взаимодействия с клиентами и сбора важных данных. Выбор между плагинами и кодом зависит от ваших задач и навыков. Плагины подойдут для быстрого решения, а код даёт полный контроль и гибкость.
Используйте предложенные примеры как основу, адаптируйте их под свои нужды и не забывайте про безопасность и удобство пользователей.