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

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

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

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

1. Подключаем иконки FontAwesome через functions.php

Если на сайте ещё не подключён набор иконок, можно добавить FontAwesome CDN, чтобы использовать готовые иконки без установки плагина:

function wpicons_enqueue_fontawesome() {
    wp_enqueue_style('fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', array(), '6.4.0');
}
add_action('wp_enqueue_scripts', 'wpicons_enqueue_fontawesome');

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

WooCommerce выводит заголовок товара с помощью хука woocommerce_shop_loop_item_title. Мы можем добавить наш код с приоритетом, чтобы сразу после заголовка вставить иконки:

function wpicons_add_icons_after_product_title() {
    global $product;
    $icons = '';
    
    // Пример: иконка "Новинка" для товаров, созданных меньше 30 дней назад
    $newness_days = 30;
    $created = strtotime($product->get_date_created());
    if ($created && (time() - $created < DAY_IN_SECONDS * $newness_days)) {
        $icons .= '<i class="fas fa-star" title="Новинка" style="color:#f39c12;margin-left:5px;"></i>';
    }
    
    // Пример: иконка "Скидка" для товаров со скидкой
    if ($product->is_on_sale()) {
        $icons .= '<i class="fas fa-tag" title="Скидка" style="color:#e74c3c;margin-left:5px;"></i>';
    }
    
    // Добавьте свои условия и иконки по необходимости
    echo $icons;
}
add_action('woocommerce_shop_loop_item_title', 'wpicons_add_icons_after_product_title', 11);

3. Добавление иконок на страницу одиночного товара

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

function wpicons_add_icons_after_single_product_title() {
    global $product;
    $icons = '';

    // Пример: иконка "Бесплатная доставка" для товаров с меткой
    if (has_term('free-shipping', 'product_tag', $product->get_id())) {
        $icons .= '<i class="fas fa-truck" title="Бесплатная доставка" style="color:#27ae60;margin-left:10px;"></i>';
    }

    echo $icons;
}
add_action('woocommerce_single_product_summary', 'wpicons_add_icons_after_single_product_title', 6);

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

• Перейдите в каталог товаров WooCommerce. Рядом с заголовками товаров должны появиться иконки «звёздочка» для новинок и «ярлык» для товаров со скидкой.
• Откройте страницу одиночного товара, где задан тег free-shipping. После названия товара должна отображаться иконка грузовика.
• Проверьте в инструментах разработчика браузера, что подключён CSS FontAwesome (вкладка Network > CSS).
• Убедитесь, что иконки имеют корректные стили и отображаются без сбоев.

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

• Иконки не отображаются: Проверьте подключение FontAwesome. Ошибка в URL или конфликт с другими стилями могут привести к отсутствию отображения.
• Иконки не появляются после заголовка: Убедитесь, что приоритет хука больше 10, иначе они могут выводиться до заголовка.
• Ошибка PHP из-за отсутствия объекта $product: Подключайте код только в WooCommerce-шаблонах, где $product определён. Можно добавить проверку if (!$product) return;.
• Стили иконок конфликтуют с темой: Измените CSS-стили в коде, добавьте уникальные классы и используйте инспектор браузера для отладки.

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

• Подключайте FontAwesome с конкретной версией и с CDN, чтобы избежать потерь в производительности.
• Не используйте слишком много иконок на одной странице — это увеличит нагрузку.
• Кэшируйте страницы и используйте оптимизацию CSS, чтобы минимизировать влияние добавленных стилей.
• Если планируется много кастомных иконок, рассмотрите создание собственного SVG-спрайта — это уменьшит количество HTTP-запросов.

Сравнение вариантов реализации иконок рядом с заголовком товара