Как использовать SVG-иконки в WooCommerce без плагинов

Почему стандартно WooCommerce не поддерживает SVG иконки

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

Диагностика проблемы: почему SVG не загружается

Основные симптомы:

• При попытке загрузить SVG в медиабиблиотеку WordPress появляется ошибка «Этот тип файла не разрешен для загрузки»;
• SVG загружается, но не отображается в WooCommerce, либо отображается как пустой квадрат;
• Ошибки безопасности в консоли браузера или в логах сервера.

Пошаговое решение: разрешаем загрузку и безопасную обработку SVG

1. Добавляем поддержку SVG в WordPress с проверкой MIME-типа

Добавьте следующий код в functions.php вашей активной темы или в кастомный плагин:

function wpicons_allow_svg_upload($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter('upload_mimes', 'wpicons_allow_svg_upload');

Этот фильтр разрешит загрузку SVG в медиабиблиотеку.

2. Обезопасиваем SVG путем удаления скриптов и потенциально опасных атрибутов

SVG — это XML, в котором могут быть вредоносные скрипты. Лучше использовать библиотеку для очистки SVG. Ниже пример простого решения с использованием PHP:

function wpicons_sanitize_svg($file) {
    if ($file['type'] === 'image/svg+xml') {
        $content = file_get_contents($file['tmp_name']);
        // Удаляем все <script> теги
        $content = preg_replace('#<script(.*?)>(.*?)</script>#is', '', $content);
        file_put_contents($file['tmp_name'], $content);
    }
    return $file;
}
add_filter('wp_handle_upload_prefilter', 'wpicons_sanitize_svg');

Этот код удаляет скрипты из SVG перед загрузкой. Для более надежной очистки стоит использовать готовые библиотеки (например, svg-sanitizer).

3. Встраиваем SVG в WooCommerce с помощью PHP-хака

Чтобы добавить SVG-иконки, например, рядом с кнопкой «Добавить в корзину», используйте следующий пример:

add_action('woocommerce_after_shop_loop_item', 'wpicons_add_svg_icon_to_product', 10);
function wpicons_add_svg_icon_to_product() {
    $svg_path = get_stylesheet_directory() . '/images/cart-icon.svg';
    if (file_exists($svg_path)) {
        echo file_get_contents($svg_path);
    }
}

SVG-файл положите в папку вашей темы, например images/cart-icon.svg. Аналогично можно добавить SVG к другим элементам WooCommerce.

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

• Зайдите в медиабиблиотеку и попробуйте загрузить SVG-файл. Ошибка загрузки отсутствует;
• Перейдите на страницу магазина WooCommerce — иконка SVG отображается рядом с кнопкой «Добавить в корзину»;
• Проверьте исходный код страницы: SVG встроен инлайн, без ссылок на внешние файлы;
• В консоли браузера и логах сервера отсутствуют ошибки безопасности, связанные с SVG.

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

• SVG не загружается, ошибка «тип файла не разрешен»: Проверьте, что фильтр upload_mimes добавлен и работает. Очистите кэш браузера и повторите попытку.
• SVG загружается, но не отображается: Убедитесь, что MIME-тип указан правильно, а SVG корректен. Иногда помогает открыть SVG в редакторе и сохранить заново без лишних метаданных.
• SVG содержит опасные скрипты: Используйте фильтр wp_handle_upload_prefilter для очистки или применяйте специализированные библиотеки очистки.
• SVG ломает верстку: Добавьте CSS для контроля размеров и расположения, например, svg { width: 24px; height: 24px; vertical-align: middle; }.

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

• SVG — это векторные изображения, они очень легкие и масштабируемые, но всегда проверяйте содержимое перед загрузкой;
• Храните SVG-файлы в вашей теме или дочерней теме, чтобы избежать конфликтов и упростить обновления;
• Для динамических иконок используйте инлайн SVG, чтобы избежать лишних HTTP-запросов;
• Ограничьте права на загрузку SVG только для доверенных пользователей, так как SVG может содержать вредоносный код;
• Регулярно обновляйте и проверяйте код, особенно если используете сторонние SVG;
• Для WooCommerce можно оптимизировать SVG, используя спрайты, чтобы уменьшить количество загружаемых файлов.

Сравнение способов добавления SVG в WooCommerce