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

Почему нужно отключать стили WooCommerce

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

Диагностика: какие стили WooCommerce загружаются на вашем сайте

Для начала нужно проверить, какие CSS-файлы WooCommerce подключаются на страницах, где они не нужны. Откройте любую не-WooCommerce страницу (например, блог) и в инструментах разработчика браузера (Chrome DevTools) перейдите в раздел Network или Sources. Найдите файлы, содержащие woocommerce в названии, например:

• woocommerce-layout.css
• woocommerce-smallscreen.css
• woocommerce.css

Если эти файлы загружаются на страницах без WooCommerce, их можно отключить.

Как отключить CSS стили WooCommerce программно

WordPress и WooCommerce предоставляют хук woocommerce_enqueue_styles, который позволяет изменить список стилей, подключаемых плагином. Для отключения всех стилей можно вернуть пустой массив или selectively отключить определённые стили.

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

add_filter('woocommerce_enqueue_styles', '__return_empty_array');

Этот код полностью отключит все стили WooCommerce. Если вам нужно отключить только часть стилей, используйте более точечный подход:

add_filter('woocommerce_enqueue_styles', 'custom_disable_woocommerce_styles');
function custom_disable_woocommerce_styles($styles) {
    unset($styles['woocommerce-layout']);
    unset($styles['woocommerce-smallscreen']);
    // Оставляем основной стиль, если нужен
    // unset($styles['woocommerce-general']);
    return $styles;
}

Отключение стилей WooCommerce только на ненужных страницах

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

add_filter('woocommerce_enqueue_styles', 'conditional_disable_woocommerce_styles');
function conditional_disable_woocommerce_styles($styles) {
    if (!is_woocommerce() && !is_cart() && !is_checkout() && !is_account_page()) {
        return array(); // отключаем все стили на страницах, не связанных с магазином
    }
    return $styles;
}

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

После добавления кода обновите страницу без WooCommerce и проверьте в DevTools, что CSS-файлы WooCommerce не загружаются. Для этого:

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

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

• Отключение стилей на всех страницах без исключения. Это ломает внешний вид магазина, так как важные стили не загружаются. Используйте условные теги WordPress (is_woocommerce() и др.) для исключения.
• Добавление кода в неподходящее место. Код должен быть в functions.php дочерней темы или отдельном плагине, а не в сторонних плагинах или шаблонах.
• Кэширование не обновляется. Очистите кэш браузера, кеш плагинов и серверный кеш после внесения изменений.

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

• Используйте плагин Clearfy Pro (https://wpshop.ru/plugins/clearfy) для автоматической оптимизации стилей и скриптов, включая очистку CSS WooCommerce.
• Минимизируйте и объединяйте CSS после отключения лишних стилей для снижения количества HTTP-запросов.
• Используйте CDN для ускорения доставки статики.
• Тестируйте сайт на разных устройствах, чтобы убедиться в корректном отображении без отключенных стилей.

Сравнение способов отключения CSS WooCommerce