рис. начало/связанные со знаниями/WordPress/Содержание Подробности

Углублённый анализ настраиваемых полей оформления заказа в WooCommerce: полное руководство от создания до обработки данных.

3-минутное чтение
2026-03-13
2026-06-03
2,560
Я получаю комиссионные, когда вы совершаете покупки по ссылкам ниже, без дополнительных затрат для вас.

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

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

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

WooCommerce предоставляет два основных типа хуков (hooks), предназначенных для обработки данных, связанных с процессом оформления заказа:woocommerce_checkout_fields и woocommerce_checkout_update_order_metaПервый инструмент используется для определения и отображения полей, второй — для хранения данных в этих полях.

Рекомендуемое чтение Разработка плагинов WordPress от новичка до мастера: пошагово научим вас создавать собственные уникальные функции。

Используйте хаки (hooks) для добавления полей.

Самый важный шаг – это… woocommerce_checkout_fields Фильтр-хук позволяет добавлять пользовательские поля в массив полей для оформления заказа. Структура этого массива ясна, что облегчает размещение полей в разделе, отвечающем за создание счета-фактуры.billing“Доставка” (Delivery)shipping“Особые примечания к заказу” (Order Remarks)orderСуществующие разделы диска, такие как %s и %1$s, а также разделы типа {{var}}, могут быть использованы. Кроме того, возможно создание пользовательских разделов по своим требованиям.custom）。

Ультахост (UltaHost) – хостинг-провайдер, предоставляющий услуги хостинга для сайтов, построенных на платформе WordPress.
Гарантия возврата средств в течение 30 дней, неограниченная пропускная способность интернет-канала и объем баз данных, бесплатная защита от DDoS-атак. При покупке на срок 3 лет предоставляется скидка в размере 501 ТБ до 4 ТБ.
UltaHost ЛОГО страница доступа

Приведённый ниже пример кода демонстрирует, как добавить в нижнюю часть области информации о счёте текстовое поле с номером налогового кода компании и поле с опцией выбора “Нужен ли счёт-фактура”.

/**
 * 在结账页面添加自定义字段
 */
add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_fields' );
function custom_add_checkout_fields( $fields ) {

// 在“账单”字段组中添加一个“公司税号”文本字段
    $fields['billing']['billing_vat_number'] = array(
        'label'        => __( '公司税号 / VAT Number', 'your-text-domain' ),
        'placeholder'  => _x( '请输入您的公司税号', 'placeholder', 'your-text-domain' ),
        'required'     => false, // 非必填
        'class'        => array( 'form-row-wide' ), // 宽度样式
        'clear'        => true, // 清除浮动
        'priority'     => 25, // 显示顺序，数字越小越靠前
    );

// 在“账单”字段组中添加一个“是否需要发票”单选框
    $fields['billing']['billing_invoice_needed'] = array(
        'type'         => 'radio',
        'label'        => __( '是否需要纸质发票？', 'your-text-domain' ),
        'required'     => true,
        'class'        => array( 'form-row-wide' ),
        'clear'        => true,
        'priority'     => 30,
        'options'      => array(
            'yes' => __( '是，需要纸质发票', 'your-text-domain' ),
            'no'  => __( '否，不需要', 'your-text-domain' )
        )
    );

return $fields;
}

Проверка и сохранение данных в полях

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

/**
 * 保存自定义结账字段的值到订单元数据
 */
add_action( 'woocommerce_checkout_update_order_meta', 'custom_save_checkout_fields' );
function custom_save_checkout_fields( $order_id ) {

if ( ! empty( $_POST['billing_vat_number'] ) ) {
        // 使用 sanitize_text_field 进行清洁处理，防止恶意代码
        update_post_meta( $order_id, '_billing_vat_number', sanitize_text_field( $_POST['billing_vat_number'] ) );
    }

if ( ! empty( $_POST['billing_invoice_needed'] ) ) {
        update_post_meta( $order_id, '_billing_invoice_needed', sanitize_text_field( $_POST['billing_invoice_needed'] ) );
    }
}

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

Простое сохранение данных недостаточно: продавцам необходимо иметь доступ к этой информации при управлении заказами в бэк-офисе, а клиенты также должны видеть свои данные в письмах с подтверждением заказа и на странице “Мой аккаунт”.

Отображается на странице редактирования заказов в бэкенде.

Можно сделать это. woocommerce_admin_order_data_after_billing_address Подобно другим механизмам, значения пользовательских полей выводятся на страницу деталей заказа в разделах “Адрес для выставления счета” или “Адрес доставки”.

Рекомендуемое чтение Руководство по разработке плагинов для WordPress: создание вашего первого функционального расширения с нуля.。

/**
 * 在后台订单详情页显示自定义字段
 */
add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_display_admin_order_meta', 10, 1 );
function custom_display_admin_order_meta( $order ) {
    $vat_number = $order->get_meta( '_billing_vat_number' );
    $invoice_needed = $order->get_meta( '_billing_invoice_needed' );

if ( $vat_number ) {
        echo '<p><strong>' . __( '公司税号:', 'your-text-domain' ) . '</strong> '`. esc_html($vat_number).`'</p>';
    }
    if ( $invoice_needed ) {
        $display_text = ( $invoice_needed == 'yes' ) ? __( '是', 'your-text-domain' ) : __( '否', 'your-text-domain' );
        echo '<p><strong>' . __( '需要纸质发票:', 'your-text-domain' ) . '</strong> '`.esc_html($display_text)`.'</p>';
    }
}

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

Чтобы клиенты также могли видеть эту информацию, нам необходимо включить её в электронные письма с заказами, а также на страницы подтверждения заказа (с благодарностью). woocommerce_email_order_meta_keys Фильтр может автоматически добавлять указанные ключи метаданных во все уведомительные электронные письма. Кроме того, используется… woocommerce_order_details_after_order_table Действия, связанные с определенными событиями, могут отображаться в разделе подробностей заказа на пользовательском интерфейсе.

/**
 * 将自定义字段添加到订单邮件中
 */
add_filter( 'woocommerce_email_order_meta_keys', 'custom_add_order_meta_to_email' );
function custom_add_order_meta_to_email( $keys ) {
    $keys[] = '_billing_vat_number';
    $keys[] = '_billing_invoice_needed'; // 邮件中会以键的格式显示，通常需要进一步美化
    return $keys;
}

/**
 * 在前台订单详情（感谢页面、我的账户-订单详情）中显示自定义字段
 */
add_action( 'woocommerce_order_details_after_order_table', 'custom_display_order_data_frontend', 10, 1 );
function custom_display_order_data_frontend( $order ) {
    $vat_number = $order-&gt;get_meta( '_billing_vat_number' );
    if ( $vat_number ) {
        echo '<h2>' . __( '附加信息', 'your-text-domain' ) . '</h2>'echo '<table class="shop_table shop_table_responsive additional_info">'echo '<tr><th>' . __( '公司税号:', 'your-text-domain' ) . '</th><td>'`. esc_html($vat_number).`'</td></tr>'echo '</table>';
    }
}

Расширенные приложения и логика условий для полей

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

Реализация условного отображения значений полей

С помощью JavaScript/jQuery вы можете динамически отображать или скрывать одно поле в зависимости от значения другого поля (например, страны, штата или значения из выпадающего списка). Например, текстовое поле с инструкциями по отправке счета-фактуры будет отображаться только в том случае, если пользователь выберет вариант “Необходим счет-фактура в печатном формате”.

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

Для реализации этой функции необходимо добавить соответствующий код в JavaScript-файл темы или использовать другие способы для настройки поведения сайта. wp_enqueue_script Запустите скрипт в очередь выполнения и отслеживайте изменения в значениях полей на странице оформления заказа; в зависимости от этих изменений управляйте состоянием отображения целевых полей.

Добавить пользовательскую проверку для поля

Хотя в WooCommerce уже предусмотрена функция обозначения полей как “обязательных” (required),required => true）验证，但有时你需要更复杂的验证规则，比如税号的特定格式。可以通过 woocommerce_checkout_process Для добавления пользовательской логики проверки используются действия-хаки (action hooks).

/**
 * 在结账过程中验证自定义字段
 */
add_action( 'woocommerce_checkout_process', 'custom_validate_checkout_fields' );
function custom_validate_checkout_fields() {
    // 如果“公司税号”字段不为空，则检查其格式（示例：假设是15位数字）
    if ( ! empty( $_POST['billing_vat_number'] ) && ! preg_match( '/^d{15}$/', $_POST['billing_vat_number'] ) ) {
        wc_add_notice( __( '错误：公司税号格式不正确，应为15位数字。', 'your-text-domain' ), 'error' );
    }
}

Оптимизация производительности и лучшие практики

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

Рекомендуемое чтение Руководство по расширенной разработке для WooCommerce: настройка пользовательских полей от создания до отображения.。

Оптимизация загрузки и отображения полей

  • Избирательное загрузочное поведение скриптов: на странице оформления заказа загружаются только те JavaScript-скрипты, которые необходимы для отображения полей, значения которых зависят от определенных условий.
  • Разумное установление приоритетов: как это сделать? priority Параметры должны быть расположены таким образом, чтобы обеспечить правильный порядок полей и избежать ненужной перестройки их расположения на экране.
  • Упростить. class Массив: добавляйте только необходимые стили (классы). form-row-wide или form-row-first。

Безопасность и очистка данных

  • Всегда очищайте и проверяйте данные перед сохранением.update_post_meta) и отображение (echoПеред использованием пользовательских данных обязательно следует… sanitize_text_field(), esc_html(), wp_kses_post() Эти функции используются для обработки данных, что является ключевым мероприятием по предотвращению атак типа кросс-сайтового скриптинга (XSS).
  • Используйте правильные типы данных: для числовых или данных в определенном формате стоит рассмотреть возможность применения соответствующих типов данных. sanitize_key() Или используйте пользовательские регулярные выражения для проверки и очистки данных.

резюме

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

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

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

Данные из пользовательских полей сохраняются в качестве “метаданных заказа”. Это используется при… update_post_meta( $order_id, ‘_field_key’, $value ); При сохранении данные будут сохранены в системе WordPress. wp_postmeta В таблице базы данных связь между заказами (типом пользовательской статьи) и другими данными осуществляется через определенные поле (филиры). post_id Связь между элементами данных. Имена ключей обычно начинаются с подчеркивающей черты, что указывает на то, что они относятся к скрытой (невидимой для пользователя) метаданным информации.

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

Как заставить пользовательские поля сохраняться в учетной записи пользователя во время регистрации?

Если вы разрешаете создание учетных записей во время оформления заказа и хотите, чтобы такие поля, как “Название компании”, также сохранялись в данных пользователя, необходимо обновлять пользовательские данные одновременно с сохранением метаданных заказа. Для этого можно воспользоваться соответствующими функциями системы управления пользовательскими профилями. update_user_meta( $customer_id, ‘billing_company’, $value );Обратите внимание: для получения правильного идентификатора пользователя (user ID) обычно необходимо использовать данные, полученные во время регистрации пользователя или в процессе входа в систему.

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

Если значение поля не отображается в электронном письме, наиболее распространенная причина — это забыть включить соответствующий элемент данных в содержимое письма. woocommerce_email_order_meta_keys Фильтр добавляет имена своих ключей в переменные электронного письма. Кроме того, в шаблоне письма может отсутствовать код, отвечающий за отображение пользовательских метаданных. Убедитесь, что имена ваших полей правильно включены в массив фильтров, а также что шаблон письма (например…) email-order-details.phpПоддерживается отображение универсальных метаданных.

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

Можно. Кроме стандартных вариантов… billing、shipping、order Группируйте, и вы сможете это сделать в woocommerce_checkout_fields Создайте совершенно новую группу в фильтре, например… custom_sectionЗатем используйте… woocommerce_checkout_after_customer_details или woocommerce_before_order_notes Действия-хаки (action hooks), в сочетании с… do_action(‘woocommerce_checkout_’ . $section); Вы можете отобразить эти поля из новой группы в любом месте на странице, где это необходимо. Для этого потребуется знать структуру шаблона оформления заказов в WooCommerce.

Что дальше, что дальше?

Если вы создаёте или оптимизируете веб-сайт на WordPress, следующим шагом будет ознакомление с темами, связанными с оптимизацией производительности, настройкой плагинов и кастомизацией темы.

Расширенное чтение и практические знания

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

Теги.