wpconsult.ru wordpress WP Consult

WooCommerce: как вывести дополнительное поле с информацией в строке заказа на странице оформления

Какая задача и зачем выводить дополнительное поле в строке заказа

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

Это поможет улучшить UX на этапе оформления и даст администратору быстрый доступ к важным данным при обработке заказов.

Диагностика: как понять, что поле не выводится и где вставлять код

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

Для вывода информации в строке товара в корзине и в заказе используются хуки:

  • woocommerce_cart_item_name — фильтр для названия товара в корзине;
  • woocommerce_order_item_name — фильтр для названия товара в заказе;
  • woocommerce_checkout_cart_item_quantity — для количества и дополнительной информации в корзине.

Проверить, что поле не выводится, можно, просмотрев страницу оформления заказа и проверив HTML-код строки товара. Если дополнительной информации нет, значит, вывод не реализован.

Пошаговое решение: вывод дополнительного поля в строке заказа

1. Добавляем кастомное поле к товарам

Для примера добавим поле product_custom_code через произвольное поле (custom field) в карточке товара (админка → товары → произвольные поля) или программно:

add_action('woocommerce_product_options_general_product_data', function() {
    woocommerce_wp_text_input([
        'id' => 'product_custom_code',
        'label' => __('Код продукта', 'woocommerce'),
        'desc_tip' => true,
        'description' => __('Введите код продукта для отображения в заказе', 'woocommerce'),
    ]);
});

add_action('woocommerce_process_product_meta', function($post_id) {
    $code = isset($_POST['product_custom_code']) ? sanitize_text_field($_POST['product_custom_code']) : '';
    update_post_meta($post_id, 'product_custom_code', $code);
});

2. Передаем значение поля в данные корзины

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

add_filter('woocommerce_add_cart_item_data', function($cart_item_data, $product_id) {
    $custom_code = get_post_meta($product_id, 'product_custom_code', true);
    if ($custom_code) {
        $cart_item_data['product_custom_code'] = $custom_code;
    }
    return $cart_item_data;
}, 10, 2);

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

Добавим вывод к названию товара в корзине и в заказе:

add_filter('woocommerce_cart_item_name', function($product_name, $cart_item, $cart_item_key) {
    if (!empty($cart_item['product_custom_code'])) {
        $product_name .= '<br><small class="product-custom-code">' . esc_html($cart_item['product_custom_code']) . '</small>';
    }
    return $product_name;
}, 10, 3);

add_filter('woocommerce_order_item_name', function($item_name, $item) {
    $product_id = $item->get_product_id();
    $custom_code = get_post_meta($product_id, 'product_custom_code', true);
    if ($custom_code) {
        $item_name .= '<br><small class="product-custom-code">' . esc_html($custom_code) . '</small>';
    }
    return $item_name;
}, 10, 2);

4. Добавим стили для читаемости

add_action('wp_head', function() {
    echo '<style>.product-custom-code { color: #666; font-size: 12px; }</style>';
});

Проверка результата после внедрения

1. Зайдите в админку, отредактируйте товар и заполните поле «Код продукта».

2. Добавьте этот товар в корзину на фронтенде.

3. Перейдите на страницу корзины и оформления заказа — в названии товара должна отображаться дополнительная информация с кодом.

4. После оформления заказа зайдите в админку → WooCommerce → Заказы, откройте заказ — в списке товаров также должен отображаться код.

Частые ошибки и как их исправить

  • Поле не отображается в корзине: проверьте, что в woocommerce_add_cart_item_data действительно передаётся значение, и что название фильтра woocommerce_cart_item_name используется правильно.
  • Поле отображается, но пустое: убедитесь, что поле заполнено у товара, а также что ключ метаполя совпадает с тем, что вы используете в коде.
  • Информация не сохраняется при обновлении корзины: возможно, нужно добавить передачу данных через woocommerce_get_cart_item_from_session, чтобы кастомные данные не терялись при перезагрузках.

Практические советы по производительности и безопасности

  • Используйте sanitize_text_field для очистки данных, получаемых из формы.
  • Для вывода метаданных используйте esc_html или другие функции экранирования, чтобы избежать XSS-уязвимостей.
  • Кешируйте значения, если поле запрашивается часто, чтобы не вызывать лишних запросов к базе.
  • Добавьте условие, чтобы не выполнять лишний PHP-код на страницах, где корзина и оформление не используются.

Сравнение вариантов вывода дополнительной информации

МетодОписаниеПлюсыМинусы
Через хуки WooCommerce (код)Добавление поля и вывод через хуки в functions.php или плагинеЛегко кастомизировать, не требует плагиновНужно писать и поддерживать код
Плагины для пользовательских полейИспользование плагинов типа Advanced Custom Fields + интеграция с WooCommerceУдобный интерфейс, много функцийМогут быть избыточными, нагрузка на сайт
Плагины WooCommerce Custom FieldsСпециализированные плагины для расширения полей WooCommerceГотовые решения, без кодаМогут конфликтовать, не всегда гибкие
×

AI-плагин от WPShop.ru

анализирует конкурентов

пишет статьи

готовит SEO

генерирует изображения

и еще кое-что...
WPGPT
Плагин, который наполняет ваш сайт WordPress
Узнать больше