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

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

В интернет-магазинах на WooCommerce часто требуется визуально выделить товары с особыми характеристиками (например, "Новинка", "Хит", "Распродажа") прямо в каталоге рядом с названием. Добавление иконок решает эту задачу без необходимости создавать отдельные метки или использовать сторонние плагины.

Основная проблема — как корректно добавить иконки после названия товара в шаблоне WooCommerce, сохраняя совместимость с темой и не ухудшая производительность.

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

1. Создаем функцию для добавления иконок

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

add_filter('the_title', 'wpicons_add_icon_after_product_title', 10, 2); 
function wpicons_add_icon_after_product_title($title, $id) {
    if (!is_admin() && is_shop() || is_product_category() || is_product_tag()) {
        $product = wc_get_product($id);
        if ($product) {
            // Проверяем условие для иконки, например, новый товар
            if ($product->is_on_sale()) {
                // Добавляем иконку распродажи после названия
                $icon = ' <span class="wpicons-sale-icon" title="Распродажа">🔥</span>';
                $title .= $icon;
            }
        }
    }
    return $title;
}

2. Стилизация иконок в CSS

Чтобы иконка корректно отображалась и не ломала дизайн, добавим базовые стили в файл темы или кастомный CSS:

.wpicons-sale-icon {
    color: #e74c3c;
    font-size: 1.2em;
    margin-left: 5px;
    vertical-align: middle;
}

3. Дополнительные условия для других иконок

Можно расширить функцию, добавив разные иконки для разных условий. Например, для "Новинки" используем дату публикации:

if (strtotime($product->get_date_created()) > strtotime('-30 days')) {
    $icon_new = ' <span class="wpicons-new-icon" title="Новинка">🎉</span>';
    $title .= $icon_new;
}

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

1. Откройте страницу магазина или категорию товаров на сайте.
2. Проверьте, что после названий товаров, которые находятся на распродаже, отображается огненная иконка.
3. Если добавляли иконку "Новинка", проверьте товары, добавленные недавно (например, за последние 30 дней), наличие соответствующей иконки.
4. Включите инспектор браузера, чтобы убедиться, что HTML-код и CSS-стили применяются корректно.

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

• Иконки не отображаются: возможно, фильтр the_title не срабатывает, если название товара выводится нестандартным способом в теме. Проверьте, что в шаблоне используется the_title() для заголовков продуктов.
• Иконки отображаются в админке: добавьте проверку !is_admin() в условии, чтобы исключить админ-панель.
• Дублирование иконок: если тема кэширует заголовки или подключает иконки самостоятельно, отключите встроенные функции или скорректируйте приоритет хука.
• Нарушение верстки: проверьте CSS-стили, используйте vertical-align и margin для корректного выравнивания иконок.

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

• Не используйте тяжелые изображения для иконок — предпочтительнее HTML-символы (Unicode) или SVG с инлайновым кодом.
• Избегайте подключать сторонние библиотеки иконок без необходимости — это уменьшит количество запросов и улучшит скорость.
• При работе с условиями для отображения иконок используйте кэширование WooCommerce, чтобы не нагружать базу лишними запросами.
• Всегда проверяйте, что добавляемый HTML безопасен и не может привести к XSS-уязвимостям (в данном случае используется статический код, что безопасно).

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