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

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

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

Подключение иконок: выбор формата и способа вставки

Для начала определимся с форматом иконок. Чаще всего используют SVG иконки — они масштабируются без потерь качества и легко стилизуются через CSS. Можно хранить SVG прямо в коде или подключать через спрайт.

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

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M3 3H21V13H3V3Z" stroke="#4CAF50" stroke-width="2"/>
  <path d="M3 13L7 21H17L21 13" stroke="#4CAF50" stroke-width="2"/>
</svg>

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

1. Создайте дочернюю тему

Чтобы избежать потери изменений при обновлении темы, работайте с дочерней темой. Создайте папку, подключите style.css и functions.php согласно стандарту WordPress.

2. Используйте хук woocommerce_after_single_product_summary

Этот хук позволяет добавить контент после основного описания товара и блока с дополнительной информацией.

3. Добавьте функцию вывода иконок

function wpicons_add_icons_after_description() {
    echo '<div class="wpicons-after-description" style="display:flex;gap:15px;margin-top:20px;">';

    // Иконка доставки
    echo '<div class="icon-delivery" title="Быстрая доставка">';
    echo '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">';
    echo '<path d="M3 3H21V13H3V3Z" stroke="#4CAF50" stroke-width="2"/>';
    echo '<path d="M3 13L7 21H17L21 13" stroke="#4CAF50" stroke-width="2"/>';
    echo '</svg>';
    echo '<span>Быстрая доставка</span>';
    echo '</div>';

    // Иконка гарантии
    echo '<div class="icon-warranty" title="Гарантия качества">';
    echo '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">';
    echo '<circle cx="12" cy="12" r="10" stroke="#2196F3" stroke-width="2"/>';
    echo '<path d="M8 12L11 15L16 9" stroke="#2196F3" stroke-width="2"/>';
    echo '</svg>';
    echo '<span>Гарантия качества</span>';
    echo '</div>';

    echo '</div>';
}
add_action('woocommerce_after_single_product_summary', 'wpicons_add_icons_after_description', 15);

4. Добавьте стили для иконок

В style.css дочерней темы добавьте:

.wpicons-after-description {
  align-items: center;
}
.wpicons-after-description div {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: #444;
}
.wpicons-after-description svg {
  margin-bottom: 5px;
}

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

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

Если иконки не отображаются, откройте консоль браузера (F12) и убедитесь, что ошибок JavaScript нет, а HTML-код и SVG присутствуют в DOM.

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

• Иконки не отображаются — проверьте, что функция подключена к правильному хуку и дочерняя тема активна.
• SVG не видны — проверьте корректность SVG-кода, отсутствие конфликтов CSS (например, display:none).
• Стили не применяются — убедитесь, что style.css дочерней темы подключен и не переопределяется стилями основной темы.
• Проблемы с адаптивностью — используйте flexbox и медиазапросы для корректного отображения на мобильных.

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

• Встраивание SVG в код предпочтительнее, чем подключение через внешние файлы, чтобы избежать дополнительных HTTP-запросов.
• Оптимизируйте SVG через сервисы типа SVGOMG для уменьшения размера.
• Используйте семантические теги и атрибуты title для повышения доступности.
• Не добавляйте слишком много иконок, чтобы не перегружать страницу визуально и по загрузке.

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