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

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

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

Для начала нам нужно добавить новое поле в раздел оформления заказа. Допустим, нам нужно добавить поле "Номер офиса" для доставки. Это поле не входит в стандартный набор WooCommerce, и его нужно внедрить в блок с адресом доставки.

Используем хук woocommerce_after_order_notes для вывода поля после стандартных заметок к заказу. Пример кода:

add_action('woocommerce_after_order_notes', 'wporders_add_custom_checkout_field');
function wporders_add_custom_checkout_field( $checkout ) {
    echo '<div id="wporders_custom_checkout_field">';

    woocommerce_form_field( 'office_number', array(
        'type'          => 'text',
        'class'         => array('wporders-office-number form-row-wide'),
        'label'         => __('Номер офиса доставки'),
        'placeholder'   => __('Введите номер офиса'),
        'required'      => false,
    ), $checkout->get_value( 'office_number' ));

    echo '</div>';
}

Этот код выведет текстовое поле с лейблом и плейсхолдером. Атрибут required можно выставить в true, если поле обязательно к заполнению.

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

Чтобы избежать пустого или некорректного ввода, нужно добавить проверку заполнения поля перед созданием заказа. Для этого используем фильтр woocommerce_checkout_process:

add_action('woocommerce_checkout_process', 'wporders_validate_custom_checkout_field');
function wporders_validate_custom_checkout_field() {
    if ( isset($_POST['office_number']) && empty(trim($_POST['office_number'])) ) {
        wc_add_notice( __('Пожалуйста, укажите номер офиса доставки.'), 'error' );
    }
}

В этом примере поле обязательно. Если нужна необязательная логика, проверку можно изменять.

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

Чтобы информация сохранялась вместе с заказом и была доступна в админке, нужно добавить её в метаданные заказа с помощью хуков woocommerce_checkout_update_order_meta:

add_action('woocommerce_checkout_update_order_meta', 'wporders_save_custom_checkout_field');
function wporders_save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['office_number'] ) ) {
        update_post_meta( $order_id, '_office_number', sanitize_text_field( $_POST['office_number'] ) );
    }
}

Используем префикс _ для приватных метаполей.

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

Чтобы менеджер магазина видел введённый номер офиса прямо в карточке заказа, добавим отображение метаданных в админ-панель заказа:

add_action( 'woocommerce_admin_order_data_after_billing_address', 'wporders_display_custom_field_admin_order', 10, 1 );
function wporders_display_custom_field_admin_order( $order ) {
    $office_number = get_post_meta( $order->get_id(), '_office_number', true );
    if ( $office_number ) {
        echo '<p><strong>Номер офиса доставки:</strong> ' . esc_html( $office_number ) . '</p>';
    }
}

Это добавит строку с номером офиса под адресом оплаты в админке заказа.

Вывод пользовательского поля на странице «Спасибо за заказ» и в письмах

Важно, чтобы покупатель видел введённые данные после оформления и в письме с подтверждением. Для этого используем хуки woocommerce_thankyou и фильтр woocommerce_email_order_meta_fields.

Пример вывода на странице «Спасибо за заказ»:

add_action( 'woocommerce_thankyou', 'wporders_display_custom_field_thankyou', 20 );
function wporders_display_custom_field_thankyou( $order_id ) {
    $office_number = get_post_meta( $order_id, '_office_number', true );
    if ( $office_number ) {
        echo '<p><strong>Номер офиса доставки:</strong> ' . esc_html( $office_number ) . '</p>';
    }
}

Чтобы добавить поле в письма, регистрируем метаданные для вывода в email:

add_filter( 'woocommerce_email_order_meta_fields', 'wporders_add_custom_field_to_email', 10, 3 );
function wporders_add_custom_field_to_email( $fields, $sent_to_admin, $order ) {
    $office_number = get_post_meta( $order->get_id(), '_office_number', true );
    if ( $office_number ) {
        $fields['office_number'] = array(
            'label' => __('Номер офиса доставки'),
            'value' => $office_number,
        );
    }
    return $fields;
}

Расширение функционала: использование плагина Clearfy Pro для оптимизации кода

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

Итоги и рекомендации по безопасности

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

Также рекомендуем тестировать новые поля на совместимость с другими плагинами и темами, особенно если вы используете кастомные шаблоны WooCommerce.