Как удалить CSS стили WooCommerce для улучшения производительности сайта

Почему стоит удалять ненужные стили WooCommerce

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

Удаление неиспользуемых CSS сокращает объем загружаемых данных, ускоряет рендеринг страниц и улучшает пользовательский опыт.

Диагностика: как определить, какие стили WooCommerce загружаются

Чтобы понять, какие CSS-файлы WooCommerce подключаются на вашем сайте и насколько они нужны, сделайте следующее:

• Откройте любую страницу сайта с магазином и без него;
• В инструментах разработчика (Chrome DevTools) во вкладке Network отфильтруйте файлы по CSS;
• Обратите внимание на пути и имена файлов, содержащих "woocommerce";
• Проверьте, используются ли стили из этих файлов на вашей странице (во вкладке Elements смотрите, применяются ли классы);
• Используйте Coverage (в DevTools) для определения, сколько CSS кода реально применяется.

Пошаговое решение: как отключить ненужные стили WooCommerce

По умолчанию WooCommerce подключает стили через хук wp_enqueue_scripts. Чтобы удалить стили, используйте следующий код в functions.php вашей темы или в отдельном плагине:

add_action('wp_enqueue_scripts', function() {
    if (!is_woocommerce() && !is_cart() && !is_checkout() && !is_account_page()) {
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_style('woocommerce-smallscreen');
    }
}, 99);

Объяснение:

• Проверяем, что текущая страница не относится к WooCommerce (товары, корзина, оформление заказа, аккаунт);
• Удаляем три основных стиля WooCommerce, которые подключаются на всех страницах;
• Приоритет 99 гарантирует, что стили уже подключены и их можно удалить.

Удаление стилей для отдельных страниц товаров

Если у вас есть страницы, где WooCommerce не используется, но вы хотите отключить стили на конкретных шаблонах, можно расширить условие:

if (!is_woocommerce() && !is_cart() && !is_checkout() && !is_account_page() && !is_product_category()) {
    // dequeue styles
}

Как проверить, что стили действительно отключились

• Откройте страницу без WooCommerce (например, главную или блог);
• Через DevTools проверьте вкладку Network — файлы woocommerce-general.css и другие должны отсутствовать;
• Проверьте Elements — классы WooCommerce могут присутствовать, но стили не применяются;
• Проверьте визуально, чтобы не было сбоев в отображении;
• Для контроля скорости используйте инструменты PageSpeed Insights или GTmetrix — время загрузки и объем CSS должны уменьшиться.

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

• Удаление стилей на страницах WooCommerce: если забыть нужные условия, стили удалятся и страницы магазина сломаются. Проверяйте все условия с помощью функций is_woocommerce(), is_cart(), is_checkout(), is_account_page().
• Использование приоритета: если приоритет слишком маленький (меньше 10), стили ещё не подключены и wp_dequeue_style() не сработает.
• Кэширование: после изменений очистите кэш браузера и плагинов кеширования.
• Кастомные стили плагинов: если вы используете дополнительные плагины к WooCommerce, они могут подключать свои стили — их нужно отключать отдельно.

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

• Используйте минимизацию и объединение CSS после удаления лишних файлов, чтобы дополнительно ускорить загрузку.
• Если вы работаете с CDN, убедитесь, что кеш очищен и обновлен для новых настроек.
• Регулярно проверяйте актуальность условий в коде, поскольку обновления WooCommerce могут менять названия стилей или логику подключения.
• Для сложных магазинов с кастомными шаблонами рассмотрите использование специализированных плагинов, например, Clearfy Pro для тонкой оптимизации WooCommerce (https://wpshop.ru/plugins/clearfy?utm_source=wpskins.ru&utm_medium=article&utm_campaign=optimizaciya-woocommerce-udaleniye-neispolzuemyh-stiley).

Таблица сравнения способов отключения стилей WooCommerce

wp_dequeue_style('woocommerce-general');