Полное руководство по настройке пользовательских полей для оформления заказов в WooCommerce: от создания до проверки их корректности

Зачем нужны пользовательские поля оформления заказа

Стандартный процесс оформления заказов в WooCommerce собирает базовую и универсальную информацию, такую как имя, адрес, номер телефона и электронная почта. Однако, если у вашего бизнеса есть специфические требования, такой набор данных оказывается недостаточным. Путем добавления пользовательских полей вы можете обеспечить покупателям более удобный и индивидуализированный опыт покупок.

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

С технической точки зрения, страница оформления заказа в WooCommerce представляет собой форму, состоящую из ряда стандартных полей. Структура этой формы определяется так называемыми “хуками действий” (Action Hooks) и «хуками фильтров» (Filter Hooks). Это позволяет нам с помощью плагинов или функций тем использовать эти хуки для внесения изменений в процесс оформления заказа — добавления, удаления или модификации полей. Понимание этого основного механизма является ключевым для выполнения любых пользовательских настроек.

Рекомендуемое чтение Полное руководство по разработке электронных магазинов на платформе WooCommerce: от создания до реализации сложных функций。

Три способа создания пользовательских полей для оформления заказа (процесса оплаты):

WooCommerce предоставляет гибкие возможности для добавления пользовательских полей; вы можете выбрать наиболее подходящий способ в зависимости от своего уровня подготовки и требований.

Ультахост (UltaHost) – хостинг-провайдер, предоставляющий услуги хостинга для сайтов, построенных на платформе WordPress.

Гарантия возврата средств в течение 30 дней, неограниченная пропускная способность интернет-канала и объем баз данных, бесплатная защита от DDoS-атак. При покупке на срок 3 лет предоставляется скидка в размере 501 ТБ до 4 ТБ.

страница доступа

Использование плагинов для быстрого и безкодового добавления элементов в сайт.

Для веб-мастеров, не знающих программирования, или для проектов, требующих быстрого запуска, использование специализированных плагинов является наиболее удобным решением. На рынке существуют отличные плагины, такие как “Checkout Field Editor for WooCommerce” или “WooCommerce Checkout Manager”.

Эти плагины обычно предоставляют интуитивно понятный интерфейс в бэкенде, позволяющий добавлять новые поля путем кликов и выбора. Вы можете задавать типы полей (текстовые поля, выпадающие меню, чекбоксы, опционные кнопки), их метки, указывать, является ли поле обязательным для заполнения, а также определять их местоположение на странице оформления заказа (в разделе счета или разделе информации о доставке). Для использования плагинов не требуется написание кода, что значительно снижает технические требования к пользователю и подходит для большинства стандартных случаев. Однако стоит учитывать, что плагины могут увеличивать нагрузку на веб-сайт, и при очень сложной пользовательской логике их использование может оказаться неэффективным или несовершенно гибким.

Добавление пользовательских полей с помощью кода

Это самый мощный и гибкий способ – он позволяет вносить изменения в настройки темы (тематики сообщений или страниц). functions.php Для этого можно воспользоваться существующими файлами или создать собственный плагин. Ключевой момент заключается в использовании соответствующих функций и механизмов, предусмотренных системой. woocommerce_checkout_fields Фильтровые хаки (filter hooks).

Этот хук позволяет вам изменять массив полей, используемых при оформлении заказа. Например, если вы хотите добавить поле для ввода названия компании в разделе “Информация о счете”, вы можете написать следующий код:

Рекомендуемое чтение Как добавить пользовательские поля и метаданные на страницу товара в WooCommerce?。

add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_field' );
function custom_add_checkout_field( $fields ) {
    $fields['billing']['billing_company_custom'] = array(
        'label'       => __('公司名称（自定义）', 'woocommerce'),
        'placeholder' => _x('请输入您的完整公司名', 'placeholder', 'woocommerce'),
        'required'    => true,
        'class'       => array('form-row-wide'),
        'clear'       => true,
        'priority'    => 25, // 控制显示顺序，数字越小越靠前
    );
    return $fields;
}

Этот код добавляет текстовое поле, заполнение которого является обязательным, в раздел счета-фактуры. Ключевым моментом является имя ключа в массиве полей (например, …). billing_company_custom) и набор полей, в котором оно находится (['billing'] или ['shipping']、['order']）。

Использование функций условной логики в WooCommerce

Иногда бывает необходимо, чтобы определенное поле отображалось только при соблюдении определенных условий. Например, поле с текстом поздравления для подарочной открытки должно появляться только тогда, когда клиент выбирает услугу “Подарочная упаковка”. Это можно реализовать с помощью JavaScript или плагинов, поддерживающих условную логику.

Для реализации чистого кода (то есть кода, не включающего в себя внешние библиотеки или компоненты) обычно необходимы определенные инструменты и подходы. woocommerce_after_checkout_billing_form или woocommerce_after_checkout_shipping_form Для отображения HTML-структуры полей можно использовать специальные “хаки” (способы программного обработки данных), а также написать скрипты на jQuery для обработки изменений в других полях (например, в чекбоксах) с целью управления их отображением или скрытием. Однако этот подход предъявляет определенные требования к уровню знаний JavaScript. Проще всего воспользоваться плагинами для управления полями, которые предоставляют возможность настраивать логику условий визуального отображения данных.

hosting.com Общий хостинг

Высокая производительность благодаря процессорам AMD EPYC, SSD-накопителям NVMe и LiteSpeed, круглосуточная экспертная поддержка, передовые меры безопасности, включая SSL, защиту от грубой силы, вредоносных программ и DDoS, экономия до 73%

страница доступа

Проверьте и сохраните данные из пользовательских полей.

Просто отображать поля на странице недостаточно; крайне важными шагами являются проверка их корректности (валидности) и безопасное сохранение данных в базе данных.

Проверка данных на стороне клиента (фронтенда) и на стороне сервера (бэкенда)

Для предотвращения отправки недействительных или вредоносных данных необходимо проводить проверку на стороне сервера (на бэкенде). Это достигается с помощью специальных механизмов обработки данных. woocommerce_checkout_process Реализовано с использованием действий-хуков (action hooks).

Продолжая пример: если мы добавим… billing_company_custom Это обязательное поле; мы должны убедиться, что клиент не оставил его пустым.

Рекомендуемое чтение Практическое развитие с использованием WooCommerce: создание профессионального электронного магазина с нуля。

add_action('woocommerce_checkout_process', 'custom_validate_checkout_field');
function custom_validate_checkout_field() {
    if ( isset($_POST['billing_company_custom']) && empty($_POST['billing_company_custom']) ) {
        wc_add_notice( __( '请填写“公司名称（自定义）”。', 'woocommerce' ), 'error' );
    }
}

wc_add_notice() Функция отображает сообщение об ошибке в верхней части страницы оформления заказа, предотвращая его отправку до тех пор, пока пользователь не исправит ошибку. В этом сообщении можно реализовать более сложную логику проверки, например, проверку формата электронной почты, диапазона чисел или соответствия регулярным выражениям.

Сохранить данные из поля в заказ.

После успешной проверки необходимо сохранить значения пользовательских полей в метаданных заказа (Order Meta), чтобы их можно было просматривать позже в бэкенде и в электронных письмах. Для этого потребуется использовать соответствующие инструменты или функции системы управления заказами. woocommerce_checkout_update_order_meta Акционные хаки (Action Hooks).

Общий хостинг InterServer

Общий хостинг $2.50 USD в месяц, первый месяц $0.1 USD промо-код tryinterserver, 461 скрипт облачных приложений, установка в один клик.

страница доступа

add_action('woocommerce_checkout_update_order_meta', 'custom_save_checkout_field');
function custom_save_checkout_field( $order_id ) {
    if ( ! empty($_POST['billing_company_custom']) ) {
        update_post_meta( $order_id, '_billing_company_custom', sanitize_text_field($_POST['billing_company_custom']) );
    }
}

update_post_meta() Функция сохраняет очищенные значения полей в формате пар ключ-значение. wp_postmeta В таблицах имена ключей обычно начинаются с подчеркивания (например: _billing_company_customЭто позволяет рассматривать такие данные как “скрытые” метаданные в некоторых веб-интерфейсах, работающих в фоновом режиме.

Отображение данных полей на фронтенде и бэкенде

После сохранения данных необходимо убедиться, что к ним будет возможно получить доступ и осуществлять их управление в нескольких ключевых местах (системных модулях или интерфейсах).

Отображать в деталях заказа и в электронном письме.

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

Для изменения деталей заказа в административной панели можно воспользоваться соответствующими инструментами или функциями. woocommerce_admin_order_data_after_billing_address Хук (Hook):

add_action('woocommerce_admin_order_data_after_billing_address', 'custom_display_field_in_admin', 10, 1);
function custom_display_field_in_admin($order){
    $company_custom = get_post_meta( $order->get_id(), '_billing_company_custom', true );
    if ( $company_custom ) {
        echo '<p><strong>'.__('自定义公司名').':</strong> '.$company_custom.'</p>';
    }
}

Аналогичным образом, используйте… woocommerce_email_order_meta_fields Фильтр позволяет добавить это поле в содержимое электронного письма с заказом.

Отображать в разделе “Мой аккаунт” в виде списка заказов.

Когда клиенты просматривают детали своих прошлых заказов на странице своего аккаунта, они также должны видеть информацию, которую они ввели в то время. Это достигается с помощью… woocommerce_order_details_after_order_table Реализация действий-хуков (action hooks):

add_action('woocommerce_order_details_after_order_table', 'custom_display_field_in_order_view', 10, 1);
function custom_display_field_in_order_view( $order ) {
    $company_custom = get_post_meta( $order->get_id(), '_billing_company_custom', true );
    if ( $company_custom ) {
        echo '<h2>'.__('额外信息').'</h2>'echo '<table class="woocommerce-table shop_table extra_info"><tbody>'echo '<tr><th>'.__('自定义公司名').':</th><td>'.$company_custom.'</td></tr>'echo '</tbody></table>';
    }
}

резюме

Добавление пользовательских полей в процесс оформления заказов в WooCommerce представляет собой комплексный процесс, включающий анализ требований, разработку, реализацию и управление данными. Ключевым моментом является понимание и эффективное использование системы хуков (hooks) в WooCommerce. woocommerce_checkout_fields Добавление полей в фильтры и их использование woocommerce_checkout_process Действие было проверено и одобрено. woocommerce_checkout_update_order_meta Данные сохраняются в результате выполнения определенных действий, после чего они передаются на сервер, в электронные письма и на пользовательский интерфейс с помощью нескольких механизмов отображения. Для начинающих пользователей рекомендуется начать с использования надежных плагинов; разработчикам, желающим добиться высокой степени настройки системы и повышения ее производительности, лучше всего использовать собственный код. В любом случае важны четкое проектирование потока данных и строгая проверка их корректности – это ключ к стабильности работы системы и улучшению пользовательского опыта.

Часто задаваемые вопросы

Почему добавленные пользовательские поля не отображаются на странице оформления заказа?

Пожалуйста, выполните следующие шаги для устранения проблемы: во-первых, убедитесь, что ваш код был правильно включен в файл темы (theme file). functions.php В файле или пользовательском плагине нет синтаксических ошибок. Во-вторых, проверьте, правильно ли ключи массива полей вложены друг в друга. $fields['billing']、$fields['shipping'] или $fields['order'] 之中。然后，查看浏览器控制台是否有 JavaScript 错误，这可能与字段的 class 或优先级设置冲突。最后，清空网站和浏览器的缓存后再次尝试。

Как сделать пользовательские поля выборочными или обязательными к заполнению?

При добавлении полей с помощью кода вы можете задать их значения в массиве полей. 'required' => true или 'required' => falseЕсли поле уже является обязательным, но вы хотите сделать его необязательным, достаточно изменить соответствующие настройки в системе управления контентом. woocommerce_checkout_fields В функции фильтрации этот поле… required Достаточно изменить значение параметра на `false`. Обратите внимание, что после этого изменения также необходимо соответствующим образом скорректировать или удалить соответствующие элементы кода. woocommerce_checkout_process Внутри содержится логика проверки.

Где в базе данных хранятся данные из пользовательских (пользовательских определенных) полей?

Значения пользовательских полей хранятся в основном в базе данных WordPress. wp_postmeta В таблицах базы данных (префиксы таблиц могут отличаться) каждая запись хранится по-отдельному. post_id(Соответствует ID заказа) и wp_posts Связь между заказами в таблице осуществляется следующим образом: meta_key(То есть имя клавиши, которое вы использовали при сохранении, например…) _billing_company_customОни обозначаются определенными символами или маркерами.meta_value Тогда сохраняется фактическое значение поля. Вы можете это сделать с помощью инструментов управления базой данных или функций, предоставляемых системой WordPress. get_post_meta() Функция обрабатывает и проверяет эти данные.

Можно ли отображать разные пользовательские поля в зависимости от конкретного продукта?

Можно, но для этого потребуется более сложная логика. Один из распространенных способов заключается в следующем: сначала добавляется пользовательский раздел или метафильтр для продукта, позволяющий определить его тип. Затем, на странице оформления заказа, используется эта информация для корректной обработки данных. woocommerce_after_checkout_form Необходимо с помощью специальных механизмов (например, хуков) вывести HTML-код всех возможных пользовательских полей, но по умолчанию их скрыть с помощью CSS. Затем напишите JavaScript-скрипт, который будет отслеживать изменения в содержимом корзины покупок или выбор конкретных товаров, и в зависимости от типа товаров в корзине динамически отображать или скрывать соответствующие группы полей. Наконец, на этапе проверки и сохранения данных на серверной стороне также необходимо условно обрабатывать значения этих полей в зависимости от их типа.