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

Диагностика проблемы: почему стандартный вид товара в заказах не подходит

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

Проверить текущее отображение можно в админке: «WooCommerce → Заказы → Просмотр заказа». Если вид товара не содержит нужных данных, значит придется кастомизировать вывод.

Как изменить вид отображения товара в заказах WooCommerce через код

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

Хук woocommerce_order_item_name позволяет изменить HTML с названием товара в списках заказов. Добавим миниатюру и артикул товара рядом с названием.

add_filter('woocommerce_order_item_name', 'custom_woocommerce_order_item_name', 10, 3);
function custom_woocommerce_order_item_name($item_name, $item, $is_visible) {
    $product = $item->get_product();
    if (!$product) {
        return $item_name;
    }

    // Получаем миниатюру товара
    $thumbnail = $product->get_image(array(50, 50));

    // Получаем артикул
    $sku = $product->get_sku();
    $sku_display = $sku ? ' <small>(SKU: ' . esc_html($sku) . ')</small>' : '';

    // Формируем новый вид названия
    $new_name = $thumbnail . ' ' . $item_name . $sku_display;
    return $new_name;
}

Шаг 2. Подключаем кастомный CSS для правильного отображения

Чтобы миниатюры не ломали верстку, добавим простой стиль в файл темы style.css или через wp_add_inline_style:

.woocommerce table.shop_table.order_details td.product-name img {
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 4px;
}

Как проверить, что изменение сработало

• Создайте или откройте существующий заказ в WooCommerce.
• Перейдите в админке в «WooCommerce → Заказы» и откройте заказ на просмотр.
• В разделе товаров убедитесь, что рядом с названием товара появилась миниатюра и артикул (если есть).
• Проверьте отображение на фронтенде в личном кабинете пользователя (если тема поддерживает вывод заказов).

Частые ошибки при изменении вида товара в заказах WooCommerce

• Отсутствие продукта в объекте заказа: если $item->get_product() возвращает null, не пытайтесь выводить миниатюру — товар мог быть удалён.
• Неправильный размер миниатюры: используйте фиксированные размеры в get_image() — иначе может ломаться верстка.
• Отсутствие проверки SKU: многие товары не имеют SKU, проверяйте на пустоту перед выводом.
• Забыли добавить CSS: без стилей миниатюры могут перекрывать текст или иметь неподходящий размер.

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

• Кэшируйте результаты в transient, если заказ содержит много товаров и вы хотите оптимизировать нагрузку (для больших магазинов).
• Экранируйте все выводимые данные через esc_html() или wp_kses_post(), чтобы избежать XSS-уязвимостей.
• Не используйте плагины для простой кастомизации вывода — так снижается нагрузка и риск конфликтов.
• Тестируйте изменения на staging-сервере перед запуском на продакшене.

Сравнение способов изменения вида товара в списке заказов WooCommerce