Как удалить критические CSS стили WooCommerce без повреждения функционала

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

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

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

Для начала нужно понять, какие CSS-файлы WooCommerce подключаются и на каких страницах:

• Откройте сайт в браузере, перейдите на страницу, где не нужен WooCommerce (например, блог или главная без товаров).
• В консоли разработчика (DevTools) во вкладке Network отфильтруйте по CSS.
• Найдите файлы, содержащие woocommerce в имени (обычно woocommerce.css, woocommerce-layout.css, woocommerce-smallscreen.css).
• Запомните URL и посмотрите, загружаются ли они на странице.

Если на страницах без магазина стили загружаются — это повод удалить их.

Пошаговое решение: удаление CSS WooCommerce из ненужных страниц

Самый безопасный способ — использовать условные теги WordPress для отключения стилей на страницах, где они не нужны.

1. Добавление функции в functions.php вашей темы или в плагин

function remove_woocommerce_styles_on_non_shop_pages() {
    // Проверяем, что подключен WooCommerce
    if ( class_exists('WooCommerce') ) {
        // Удаляем стили WooCommerce на всех страницах, кроме магазина и страниц корзины, оформления заказа и аккаунта
        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' );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'remove_woocommerce_styles_on_non_shop_pages', 99 );

Этот код отключит стандартные стили WooCommerce на всех страницах, кроме основных страниц магазина.

2. Проверка правильности названий стилей

Иногда тема или плагины могут регистрировать свои стили с другими именами. Чтобы выявить их, можно подключить временный сниффер:

add_action('wp_print_styles', function() {
    global $wp_styles;
    foreach( $wp_styles->queue as $handle ) {
        if ( strpos($handle, 'woocommerce') !== false ) {
            error_log('WooCommerce style enqueued: ' . $handle);
        }
    }
});

После этого смотрите в debug.log список стилей и при необходимости добавляйте их в wp_dequeue_style.

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

• Очистите кэш сайта и браузера.
• Зайдите на страницу без WooCommerce — проверьте в DevTools, что стили не загружаются.
• Перейдите на страницу магазина, корзины, оформления заказа и аккаунта — стили должны отображаться корректно.
• Проверьте визуально, что дизайн не сломан.

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

• Стили остаются загруженными на страницах без магазина: Проверьте приоритет хука (99 в примере), возможно, нужно увеличить.
• Дизайн магазина сломан после удаления стилей: Убедитесь, что не отключаете стили на страницах магазина и проверьте наличие кастомных стилей, которые могут зависеть от стандартных.
• Название стилей не совпадает: Используйте сниффер, чтобы найти все стилевые хендлы, связанные с WooCommerce.
• Проблемы с кэшированием: Очистите кэш плагинов и CDN, чтобы изменения вступили в силу.

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

• Отключайте только CSS, не отключайте JS WooCommerce без полного понимания, так как это может повредить функционал.
• Используйте условные теги WordPress (is_woocommerce(), is_cart(), is_checkout(), is_account_page()) для точечного контроля.
• Для больших магазинов рассматривайте использование плагинов оптимизации, например, Clearfy Pro, который позволяет управлять загрузкой стилей и скриптов.
• Тестируйте изменения на staging-сайте перед продакшеном.

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