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

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

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

Где и как выводится цена товара в WooCommerce

Цена на странице товара выводится с помощью функции woocommerce_template_single_price, которая подключается в хуке woocommerce_single_product_summary с приоритетом 10. На странице каталога и в карточках товара используется функция woocommerce_template_loop_price, подключённая к хуку woocommerce_after_shop_loop_item_title с приоритетом 10.

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

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

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

function wpicons_add_icons_after_price() {
    // Пример иконок с использованием FontAwesome
    echo '<span class="wpicons-after-price" style="margin-left:8px;">';
    echo '<i class="fas fa-shipping-fast" title="Быстрая доставка" style="color:#0073aa; margin-right:5px;"></i>';
    echo '<i class="fas fa-lock" title="Безопасная оплата" style="color:#0073aa;"></i>';
    echo '</span>';
}

2. Подключаем функцию к выводу цены на странице товара

add_action('woocommerce_single_product_summary', 'wpicons_add_icons_after_price', 11);

Приоритет 11, чтобы функция сработала сразу после цены (приоритет 10).

3. Добавляем иконки после цены в карточках товаров на страницах каталога

add_action('woocommerce_after_shop_loop_item_title', 'wpicons_add_icons_after_price', 11);

4. Подключаем FontAwesome, если иконки не отображаются

Если тема не подключает FontAwesome, добавьте загрузку в functions.php дочерней темы:

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

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

• Откройте страницу товара на фронтенде и убедитесь, что после цены появились иконки с подсказками (при наведении мыши).
• Перейдите на страницу каталога или архив товаров, проверьте, что иконки отображаются после цены в карточках товаров.
• Проверьте, что отсутствуют ошибки в консоли браузера и что CSS стили корректно применяются.

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

• Иконки не отображаются — проверьте, подключён ли FontAwesome. Если нет, подключите через wp_enqueue_style.
• Иконки отображаются, но криво стилизованы — добавьте дополнительные CSS стили для их выравнивания и отступов.
• Иконки появляются в неправильных местах — убедитесь, что приоритет хука стоит 11, чтобы функция срабатывала после цены.
• Ошибка в консоли, связанная с FontAwesome — проверьте правильность URL подключения стилей и отсутствие конфликтов с другими версиями.

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

• Подключайте FontAwesome с локальной копии или доверенного CDN, чтобы избежать проблем с доступностью и безопасностью.
• Используйте минимальный набор иконок, чтобы не загружать весь пакет — можно собрать кастомный набор через FontAwesome Kits.
• Кэшируйте страницу и CSS для ускорения загрузки и снижения нагрузки на сервер.
• Обрабатывайте вывод иконок через функции с проверками, чтобы избежать XSS и других уязвимостей.

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