Как добавить иконки в WooCommerce корзину и оформление заказа

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

Зачем нужны иконки в WooCommerce корзине и оформлении заказа

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

При этом важно, чтобы иконки были адаптивными, быстро загружались и не влияли негативно на производительность сайта. Лучший вариант — использовать SVG-иконки или иконки из популярных библиотек.

Добавление иконок в WooCommerce корзину через код

1. Добавление иконки удаления товара из корзины

По умолчанию кнопка удаления товара в WooCommerce — это обычный текстовый крестик. Заменим его на иконку FontAwesome.

add_filter('woocommerce_cart_item_remove_link', 'wpicons_woocommerce_cart_remove_icon', 10, 2);
function wpicons_woocommerce_cart_remove_icon($link, $cart_item_key) {
    $icon = '<i class="fas fa-times"></i>';
    $link = str_replace('×', $icon, $link);
    return $link;
}

Для работы кода подключите FontAwesome в теме или через плагин. Это улучшит визуальную составляющую кнопки удаления товара.

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

Часто пользователи хотят видеть рядом с названием способа оплаты его логотип, чтобы сразу ориентироваться. Добавим иконки для основных способов оплаты:

add_filter('woocommerce_gateway_icon', 'wpicons_add_payment_icons', 10, 2);
function wpicons_add_payment_icons($icon, $gateway_id) {
    switch ($gateway_id) {
        case 'paypal':
            $icon .= '<img src="'.get_stylesheet_directory_uri().'/icons/paypal.svg" alt="PayPal" style="height:20px; margin-left:5px;"/>';
            break;
        case 'stripe':
            $icon .= '<img src="'.get_stylesheet_directory_uri().'/icons/stripe.svg" alt="Stripe" style="height:20px; margin-left:5px;"/>';
            break;
    }
    return $icon;
}

Замените пути на действительные SVG-файлы иконок в вашей теме. Это сделает оформление заказа визуально более информативным.

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

Если хотите быстрее получить красивые иконки без кода, можно использовать плагины. Вот несколько рекомендаций:

• WooCommerce Customizer — добавляет возможность менять иконки и текст кнопок через настройки;
• WPShop My Popup — можно добавить всплывающие подсказки с иконками при наведении на элементы корзины;
• Clearfy Pro — помогает оптимизировать и кастомизировать WooCommerce, включая визуальные элементы.

Эти плагины можно найти на WPSHOP.RU.

Добавление кастомных SVG иконок в WooCommerce с помощью ACF

Для более сложных проектов удобно использовать Advanced Custom Fields (ACF) для загрузки иконок прямо из админки и вывода их на нужных местах.

Пример поля ACF — поле "SVG иконка" типа файл с загрузкой SVG. В шаблоне корзины или оформления заказа можно вывести иконку так:

function wpicons_show_custom_icon($cart_item, $cart_item_key) {
    $icon_id = get_field('svg_icon', $cart_item['product_id']);
    if ($icon_id) {
        $icon_url = wp_get_attachment_url($icon_id);
        echo '<img src="' . esc_url($icon_url) . '" alt="Иконка товара" style="height:24px; margin-right:8px;"/>';
    }
}

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

Оптимизация иконок — советы для WooCommerce

Чтобы иконки не замедляли работу сайта, нужно:

• Использовать SVG вместо растровых форматов — они масштабируются без потери качества и весят меньше.
• Подключать внешние библиотеки (FontAwesome, Ionicons) через CDN или локально, чтобы не было лишних загрузок.
• Кэшировать иконки вместе с остальными ресурсами сайта.
• Использовать lazy load для иконок, которые не видны сразу.

Плагин Clearfy Pro помогает реализовать эти оптимизации автоматически — его стоит рассмотреть для комплексного улучшения WooCommerce.