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

Проблема: отсутствие визуальных иконок рядом с названиями атрибутов в WooCommerce

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

Диагностика проблемы

Чтобы понять, почему иконки не отображаются, проверьте:

• Имеются ли у вас иконки (SVG, PNG) или шрифты иконок, готовые для вставки.
• Подключена ли кастомная функция, которая выводит иконки рядом с атрибутами.
• Наследует ли ваша тема стандартные WooCommerce хуки для вывода атрибутов.
• Не конфликтуют ли другие хуки или стили, скрывающие иконки.

Для проверки откройте консоль браузера (F12) и убедитесь, что нет ошибок загрузки ресурсов иконок.

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

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

Создайте папку icons в вашей дочерней теме и загрузите туда иконки в формате SVG или PNG, например:

• color-red.svg
• color-blue.svg
• size-small.svg

2. Добавление кода в functions.php дочерней темы

Используем хук woocommerce_attribute_label, который позволяет фильтровать название атрибута. Добавим к названию иконку в зависимости от значения.

add_filter('woocommerce_attribute_label', 'add_icon_after_attribute_label', 10, 3);
function add_icon_after_attribute_label($label, $name, $product) {
    // Получаем объект продукта
    if (!$product) {
        $product = wc_get_product(get_the_ID());
    }

    if (!$product) return $label;

    // Получаем все атрибуты товара
    $attributes = $product->get_attributes();

    if (!isset($attributes[$name])) return $label;

    $attribute = $attributes[$name];

    // Получаем значения атрибута (термины)
    $values = [];
    if ($attribute->is_taxonomy()) {
        $terms = wp_get_post_terms($product->get_id(), $attribute->get_name(), ['fields' => 'names']);
        $values = $terms;
    } else {
        $values = explode('|', $attribute->get_options());
    }

    // Для примера возьмём первый термин
    $first_value = reset($values);

    // Маппинг значений к иконкам
    $icons_map = [
        'Red' => get_stylesheet_directory_uri() . '/icons/color-red.svg',
        'Blue' => get_stylesheet_directory_uri() . '/icons/color-blue.svg',
        'Small' => get_stylesheet_directory_uri() . '/icons/size-small.svg',
    ];

    $icon_html = '';
    if (isset($icons_map[$first_value])) {
        $icon_url = esc_url($icons_map[$first_value]);
        $icon_html = ' <img src="' . $icon_url . '" alt="' . esc_attr($first_value) . ' icon" style="width:16px;height:16px;vertical-align:middle;">';
    }

    return $label . $icon_html;
}

3. Подключение иконок в шаблоне (если нужно)

Если вы выводите атрибуты вручную, например, в шаблонах WooCommerce, убедитесь, что используете функцию wc_attribute_label(), чтобы фильтр работал.

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

• Откройте страницу товара с соответствующими атрибутами.
• Проверьте, что после названия атрибута отображается иконка.
• Включите инспектор элементов, чтобы удостовериться, что <img> с иконкой загружен корректно.
• Если иконки не появились, проверьте правильность путей к иконкам и наличие файлов.

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

• Иконки не отображаются — проверьте URL и права доступа к файлам иконок.
• Ошибка PHP или белый экран — проверьте корректность синтаксиса кода, используйте отладчик WP_DEBUG.
• Иконки выводятся не для всех атрибутов — убедитесь, что маппинг $icons_map соответствует именно тем значениям атрибутов, которые есть у товара.
• Конфликт стилей или размер иконок слишком большой — добавьте CSS-правила для корректного отображения (например, style="width:16px;height:16px;vertical-align:middle;").

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

• Используйте SVG с минимальной и безопасной разметкой — избегайте внедрения скриптов в SVG.
• Храните иконки в дочерней теме для возможности обновлять родительскую тему без потери изменений.
• Кешируйте страницы, чтобы не нагружать сервер повторной генерацией HTML с иконками.
• Минимизируйте количество иконок, чтобы не замедлять загрузку страницы.

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