Как добавить дополнительные поля в WooCommerce через хуки

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

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

Использование хуков (actions и filters) — это рекомендуемый способ кастомизации WooCommerce. Это позволяет внедрять изменения в нужные места без изменения ядра плагина и тем самым избежать проблем при обновлениях. WooCommerce предоставляет множество хуков, которые можно использовать для добавления, изменения и валидации полей.

Например, для добавления поля на страницу оформления заказа используется хук woocommerce_checkout_fields, а для вывода поля в админке заказа — woocommerce_admin_order_data_after_billing_address.

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

Рассмотрим, как добавить дополнительное текстовое поле "Номер квартиры" на страницу оформления заказа.

add_filter('woocommerce_checkout_fields', 'wpmarket_add_custom_checkout_field');
function wpmarket_add_custom_checkout_field($fields) {
    $fields['billing']['billing_apartment_number'] = array(
        'type'        => 'text',
        'label'       => 'Номер квартиры',
        'placeholder' => 'Введите номер квартиры',
        'required'    => false,
        'class'       => array('form-row-wide'),
        'priority'    => 65,
    );
    return $fields;
}

Этот код добавляет новое поле в блок Billing (платежная информация). Параметр priority управляет порядком вывода поля.

Валидация и сохранение поля

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

add_action('woocommerce_checkout_process', 'wpmarket_validate_custom_checkout_field');
function wpmarket_validate_custom_checkout_field() {
    if ( isset($_POST['billing_apartment_number']) && strlen($_POST['billing_apartment_number']) > 10 ) {
        wc_add_notice('Номер квартиры не должен превышать 10 символов', 'error');
    }
}

add_action('woocommerce_checkout_update_order_meta', 'wpmarket_save_custom_checkout_field');
function wpmarket_save_custom_checkout_field($order_id) {
    if ( ! empty($_POST['billing_apartment_number']) ) {
        update_post_meta($order_id, '_billing_apartment_number', sanitize_text_field($_POST['billing_apartment_number']));
    }
}

Функция wpmarket_validate_custom_checkout_field проверяет длину введенного значения и выводит ошибку, если условие не выполнено. Функция wpmarket_save_custom_checkout_field сохраняет значение в метаданные заказа.

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

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

add_action('woocommerce_admin_order_data_after_billing_address', 'wpmarket_display_custom_field_admin_order', 10, 1);
function wpmarket_display_custom_field_admin_order($order){
    $apartment_number = get_post_meta($order->get_id(), '_billing_apartment_number', true);
    if ($apartment_number) {
        echo '<p><strong>Номер квартиры:</strong> ' . esc_html($apartment_number) . '</p>';
    }
}

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

Добавление поля на страницу товара с использованием хуков

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

Рассмотрим пример добавления текстового поля "Персональная надпись" на страницу товара:

add_action('woocommerce_before_add_to_cart_button', 'wpmarket_add_custom_product_field');
function wpmarket_add_custom_product_field() {
    echo '<p class="form-field"><label for="personal_message">Персональная надпись</label><input type="text" id="personal_message" name="personal_message" /></p>';
}

add_filter('woocommerce_add_cart_item_data', 'wpmarket_add_custom_product_field_to_cart', 10, 2);
function wpmarket_add_custom_product_field_to_cart($cart_item_data, $product_id) {
    if (!empty($_POST['personal_message'])) {
        $cart_item_data['personal_message'] = sanitize_text_field($_POST['personal_message']);
    }
    return $cart_item_data;
}

add_filter('woocommerce_get_item_data', 'wpmarket_display_custom_cart_item_data', 10, 2);
function wpmarket_display_custom_cart_item_data($item_data, $cart_item) {
    if (!empty($cart_item['personal_message'])) {
        $item_data[] = array(
            'key' => 'Персональная надпись',
            'value' => wc_clean($cart_item['personal_message'])
        );
    }
    return $item_data;
}

Здесь мы добавили поле перед кнопкой "Добавить в корзину", сохранили данные в корзине и вывели их в корзине и в заказе.

Дополнительная обработка в заказе

Чтобы сохранить пользовательскую надпись в заказе, нужно добавить следующий код:

add_action('woocommerce_add_order_item_meta', 'wpmarket_save_custom_order_item_meta', 10, 2);
function wpmarket_save_custom_order_item_meta($item_id, $values) {
    if (!empty($values['personal_message'])) {
        wc_add_order_item_meta($item_id, 'Персональная надпись', $values['personal_message']);
    }
}

Использование плагина Clearfy Pro для управления кастомными полями

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

Заключение

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