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

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

Зачем нужны динамические поля в WooCommerce

Динамические поля позволяют расширить функциональность вашего интернет-магазина, подстроив его под конкретные бизнес-задачи. Например:

• Добавление опций персонализации товара (гравировка, цвет, размер, дополнительные услуги).
• Сбор дополнительных данных от клиента при оформлении заказа (номер паспорта, дата события и пр.).
• Изменение цены товара в зависимости от выбранных опций.

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

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

Для начала добавим поле на страницу товара. Используем хук woocommerce_before_add_to_cart_button, который выводит содержимое перед кнопкой «Добавить в корзину».

function wpcoding_add_custom_field_to_product() {
    echo '<p class="form-field wpcoding-custom-field">'
        . '<label for="wpcoding_custom_input">Персонализация (текст):</label>'
        . '<input type="text" id="wpcoding_custom_input" name="wpcoding_custom_input" value="" />'
        . '</p>';
}
add_action('woocommerce_before_add_to_cart_button', 'wpcoding_add_custom_field_to_product');

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

Обработка и валидация данных при добавлении в корзину

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

function wpcoding_validate_custom_field($passed, $product_id, $quantity) {
    if (isset($_POST['wpcoding_custom_input']) && empty(trim($_POST['wpcoding_custom_input']))) {
        wc_add_notice(__('Пожалуйста, заполните поле персонализации.'), 'error');
        return false;
    }
    return $passed;
}
add_filter('woocommerce_add_to_cart_validation', 'wpcoding_validate_custom_field', 10, 3);

function wpcoding_add_custom_data_to_cart_item($cart_item_data, $product_id, $variation_id) {
    if (!empty($_POST['wpcoding_custom_input'])) {
        $cart_item_data['wpcoding_custom_input'] = sanitize_text_field($_POST['wpcoding_custom_input']);
    }
    return $cart_item_data;
}
add_filter('woocommerce_add_cart_item_data', 'wpcoding_add_custom_data_to_cart_item', 10, 3);

Таким образом, мы не позволяем добавить товар без заполнения поля и сохраняем введённые данные в объекте корзины.

Отображение данных в корзине и заказе

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

function wpcoding_display_custom_field_cart($item_data, $cart_item) {
    if (isset($cart_item['wpcoding_custom_input'])) {
        $item_data[] = array(
            'key' => __('Персонализация', 'wpcoding'),
            'value' => wc_clean($cart_item['wpcoding_custom_input'])
        );
    }
    return $item_data;
}
add_filter('woocommerce_get_item_data', 'wpcoding_display_custom_field_cart', 10, 2);

function wpcoding_display_custom_field_order($item_id, $item, $order) {
    if ($custom_value = wc_get_order_item_meta($item_id, 'wpcoding_custom_input', true)) {
        echo '<p>&ltstrong>' . __('Персонализация:', 'wpcoding') . '</strong> ' . esc_html($custom_value) . '</p>';
    }
}
add_action('woocommerce_order_item_meta_end', 'wpcoding_display_custom_field_order', 10, 3);

Теперь дополнительное поле отображается в корзине, на странице оформления и в деталях заказа в админке.

Изменение цены товара в зависимости от поля

Если требуется менять цену товара в зависимости от введённого значения, например, добавлять фиксированную сумму за персонализацию, можно использовать фильтр woocommerce_before_calculate_totals.

function wpcoding_add_custom_price($cart) {
    if (is_admin() && !defined('DOING_AJAX')) return;

    foreach ($cart->get_cart() as $cart_item_key => $cart_item) {
        if (isset($cart_item['wpcoding_custom_input'])) {
            $additional_price = 100; // добавляем 100 рублей
            $original_price = $cart_item['data']->get_price();
            $cart_item['data']->set_price($original_price + $additional_price);
        }
    }
}
add_action('woocommerce_before_calculate_totals', 'wpcoding_add_custom_price', 20);

В этом примере к цене товара добавляется фиксированная сумма за персонализацию.

Заключение

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

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

Если хотите автоматизировать импорт товаров с кастомными полями, обратите внимание на WPCoding — плагин для разработки и импорта через REST API.