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

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

Страница оформления заказа WooCommerce по умолчанию содержит такие основные поля, как имя, адрес, электронная почта и т. д., но для многих специфических бизнес-сценариев этих полей недостаточно. Например, магазину, продающему торты на заказ, может понадобиться ввести “Поздравительное сообщение на торте”, оптовому сайту B2B - “Налоговый номер компании”, а сайту по продаже билетов на мероприятия - “Идентификационный номер участника для проверки”. В этих случаях разработчикам придется расширять функциональность, настраивая поля оформления заказа для удовлетворения уникальных потребностей в сборе данных.

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

Основные методы и крючки с пояснениями

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

Фильтры для добавления полей

Добавление полей осуществляется в основном с помощью woocommerce_checkout_fields Для этого используется фильтр. Этот фильтр позволяет вставлять новые поля ввода в различные разделы формы оформления заказа, такие как область “Счет”, область “Доставка” или настраиваемая область “Дополнительная информация о заказе”, Выпадающие меню или флажки.

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

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

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

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

Крючки для полей валидации

Когда пользователь отправляет форму оформления заказа, мы должны убедиться, что данные в пользовательских полях соответствуют требованиям. Для этого используется woocommerce_checkout_process Крючок действия. В функции обратного вызова этого хука мы имеем доступ к функции обратного вызова, которая была создана с помощью функции $_POST Глобальная переменная передает данные и проверяет их.

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

Крючки для сохранения и отображения данных

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

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

Практика: добавьте поле “сообщение о подарке”

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

Шаг 1: Добавьте поля на страницу оформления заказа

Во-первых, нам нужно использовать woocommerce_checkout_fields фильтр, чтобы зарегистрировать это новое поле. Мы добавим его после поля “Примечания к заказу”. Вот код реализации, который необходимо добавить в дочернюю тему functions.php файл или добавляется с помощью плагина Custom Functions.

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_field' );
function add_custom_checkout_field( $fields ) {
    $fields['order']['gift_message'] = array(
        'type'        => 'textarea',
        'class'       => array('form-row-wide'),
        'label'       => __('礼品祝福留言', 'your-text-domain'),
        'placeholder' => __('请输入您想写在贺卡上的祝福语（可选）', 'your-text-domain'),
        'required'    => false,
        'priority'    => 25, // 显示在订单备注（priority 21）之后
    );
    return $fields;
}

Этот код создает textarea Поле типа “Сообщение с пожеланиями в подарок” с соответствующими заполнителями и классами CSS.priority Параметр управляет его положением на экране.

Шаг 2: Сохранить данные полей в заказе

Далее нам нужно сохранить сообщение, заполненное пользователем при создании заказа. Это делается с помощью функции woocommerce_checkout_update_order_meta Крючки для реализации.

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

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

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

add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['gift_message'] ) ) {
        update_post_meta( $order_id, '_gift_message', sanitize_textarea_field( $_POST['gift_message'] ) );
    }
}

Здесь мы проверяем $_POST['gift_message'] есть ли значение, и если да, используйте sanitize_textarea_field() После безопасной очистки функции она передается через update_post_meta() Сохраните его как метаданные заказа с метаключом под названием _gift_message。

Шаг 3: Отображение данных в бэк-офисе и в электронных письмах

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

// Отображение на странице подробностей заказа в админке
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_field_admin' );
function display_custom_field_admin( $order ) {
    $gift_message = get_post_meta( $order->get_id(), '_gift_message', true );
    if ( $gift_message ) {
        echo'<p><strong>' . __( 'Gift Message:', 'your-text-domain' ) . '</strong><br />' . esc_html( $gift_message ) . '</p>';
    }
}

// Отображение в письме с подтверждением заказа
add_filter( 'woocommerce_email_order_meta_fields', 'display_custom_field_in_email', 10, 3 );
function display_custom_field_in_email( $fields, $sent_to_admin, $order ) {
    $gift_message = get_post_meta( $order-&gt;get_id(), '_gift_message', true );
    if ( $gift_message ) {
        $fields['gift_message'] = array(
            'label' =&gt; __('Gift Message', 'your-text-domain' ), 'value' =&gt; wptext_message
            'value' =&gt; wptexturize( $gift_message ),
        );
    }
    return $fields.
}

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

Дополнительные советы и заметки

Освоив базовый подход, мы можем изучить более сложные сценарии применения и варианты оптимизации, чтобы сделать пользовательские поля более мощными и простыми в использовании.

Создание условных полей отображения

Иногда отображение поля зависит от значения другого поля. Например, поле “Заголовок счета” отображается только тогда, когда пользователь выбирает “Нужен счет”. Для этого требуется комбинация JavaScript для взаимодействия с внешним интерфейсом. Мы можем добавить триггерное поле (например, флажок) с помощью функции change слушателя событий и затем динамически управлять отображением или скрытием целевого поля. В то же время соответствующая обработка выполняется в логике проверки на стороне сервера.

Защита и очистка данных на местах

Безопасность имеет решающее значение. Вводимые пользователем данные должны всегда проверяться и очищаться по мере их обработки. Для текстовых полей используйте sanitize_text_field() или sanitize_textarea_field(); для почтовых ящиков, использование sanitize_email(). При выводе данных на переднюю панель обязательно используйте esc_html() или wp_kses_post() и другие функции экранированы для предотвращения атак межсайтового скриптинга (XSS).

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

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

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

Совместимость со сторонними плагинами и темами

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

резюме

С помощью руководства в этой статье мы шаг за шагом изучили процесс разработки WooCommerce Custom Checkout Fields, начав с понимания требований. Мы узнали, как использовать woocommerce_checkout_fields、woocommerce_checkout_process и woocommerce_checkout_update_order_meta Эти три основных крючка для добавления, проверки и сохранения полей. А на примере реального кейса “подарочное сообщение” - полная демонстрация всего процесса от создания поля до отображения данных. Наконец, обсуждаются такие продвинутые темы, как условные поля, обработка безопасности и совместимость.

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

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

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

Данные пользовательских полей обычно хранятся как “метаданные заказа” в базе данных WordPress wp_postmeta таблица. Каждый фрагмент данных содержит соответствующий идентификатор заказа (post_id), мета-ключи, которые вы определяете (например. _gift_message) и мета-значения. Вы можете использовать метод объекта WooCommerce Order $order->get_meta(‘_gift_message’) или функции WordPress get_post_meta() чтобы получить эти данные.

Как добавить внешнюю проверку (например, проверку формата) в пользовательское поле?

В дополнение к использованию woocommerce_checkout_process В дополнение к крючкам для проверки на стороне сервера вы также можете добавить к полям атрибуты HTML5 для базовой проверки, такие как pattern для регулярных выражений.type=”email” для форматов почтовых ящиков. Для более сложной проверки в реальном времени необходимо написать код на JavaScript/jQuery, который будет прослушивать поле blur или input событие, проверяет соответствие значения правилам и выдает немедленную обратную связь.

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

Да, но процесс немного отличается; крючки WooCommerce для полей оформления заказа предназначены именно для страницы оформления заказа. Чтобы добавить поля на страницу регистрации “Мой аккаунт”, вам нужно будет использовать другие крючки, предоставляемые WordPress и WooCommerce, такие как woocommerce_register_form чтобы добавить поля.woocommerce_created_customer для сохранения данных поля в пользовательских метаданных. Принцип работы аналогичен полям проверки, но целевой хук и место хранения данных (пользовательские метаданные) отличаются.

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

Сначала проверьте, что ваш код был правильно добавлен в functions.php и что в нем нет синтаксических ошибок. Далее убедитесь, что массив полей имеет правильный ключ, например, если вы добавили его в $fields[‘order’] тем не менее $fields[‘billing’] Разделы. Еще раз проверьте, не переписал ли код какого-либо другого плагина или темы или не удалил ли он ваши поля. Наконец, попробуйте очистить кэш сайта и браузера, так как старые файлы CSS/JS могут влиять на рендеринг.