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

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

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

Типичные признаки задачи:

• Вы хотите добавить иконки в каталоге товаров (shop, category) и на страницах товара.
• Иконки должны отображаться динамически, в зависимости от метаданных товара (категории, атрибуты, пользовательские поля).
• Хотите решить задачу без ущерба для производительности и без сторонних плагинов.

Пошаговое решение: добавляем иконки после названия товара через хуки WooCommerce

Шаг 1. Подготовка иконок

Для начала подготовьте иконки в формате SVG или PNG и загрузите их в папку темы, например your-theme/assets/icons/. Например, иконка для акции sale.svg, для новинки new.svg.

Шаг 2. Определение условий отображения иконок

Решите, по каким критериям показывать иконки. Пример:

• Товар в категории «Распродажа» — показываем иконку sale.
• Товар с меткой «Новинка» (custom field или тег) — иконка new.

Шаг 3. Добавление функции вывода иконок

Добавьте следующий код в functions.php вашей дочерней темы или в плагин для кастомных функций:

function wpicons_add_icons_after_product_title() {
    global $product;
    if ( ! $product ) {
        return;
    }

    $icons_html = '';

    // Проверка категории "sale"
    if ( has_term( 'sale', 'product_cat', $product->get_id() ) ) {
        $icons_html .= '<img src="' . get_stylesheet_directory_uri() . '/assets/icons/sale.svg" alt="Sale" class="wpicons-icon" /> ';
    }

    // Проверка тега "new"
    if ( has_term( 'new', 'product_tag', $product->get_id() ) ) {
        $icons_html .= '<img src="' . get_stylesheet_directory_uri() . '/assets/icons/new.svg" alt="New" class="wpicons-icon" /> ';
    }

    echo $icons_html;
}

// Добавляем вывод после названия товара в каталоге
add_action( 'woocommerce_shop_loop_item_title', 'wpicons_add_icons_after_product_title', 15 );

Шаг 4. Стилизация иконок

Добавьте CSS в файл стилей темы, чтобы иконки красиво смотрелись рядом с заголовком:

.wpicons-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 5px;
}

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

Откройте страницу магазина (shop) или категорий товаров, где есть товары с категориями или тегами sale и new. После названия каждого товара должны появиться соответствующие иконки.

Если иконки не отображаются:

• Проверьте правильность путей к файлам иконок.
• Убедитесь, что у товаров действительно есть нужные категории или теги.
• Проверьте включён ли код (нет ли ошибок PHP).

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

1. Иконки не показываются после названия товара

• Причина: неправильный приоритет хука или неправильный хук.
• Решение: используйте woocommerce_shop_loop_item_title с приоритетом больше 10 (например, 15) — это гарантирует, что иконки добавятся после заголовка.

2. Неверные пути к иконкам

• Причина: относительный путь или ошибка в get_stylesheet_directory_uri().
• Решение: используйте абсолютные пути через get_stylesheet_directory_uri() и убедитесь, что иконки загружены именно в эту папку.

3. Иконки не адаптируются под разные устройства

• Причина: фиксированный размер иконок.
• Решение: задайте размеры в CSS в относительных единицах (em, rem) или используйте медиазапросы.

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

• Храните иконки в SVG для минимального веса и масштабируемости.
• Оптимизируйте SVG через сервисы вроде SVGO.
• Кешируйте страницу, чтобы не вызывать PHP-функцию на каждый запрос без необходимости.
• Для динамических иконок используйте условные проверки, чтобы не грузить лишние ресурсы.
• Если иконок много, рассмотрите объединение их в спрайт.

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