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

Диагностика проблемы: почему нужно удалять CSS WooCommerce на страницах оплаты и доставки

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

Типичные симптомы:

• долгая загрузка страницы оформления заказа;
• конфликты стилей с темой или плагинами;
• разрушение верстки форм оплаты и доставки;
• избыточный CSS, который не используется на этих страницах.

Как определить, какие стили WooCommerce грузятся на страницах оплаты и доставки

Для анализа можно использовать инструменты разработчика в браузере (Chrome DevTools):

1. Откройте страницу оформления заказа или доставки;
2. Во вкладке Network отфильтруйте по CSS;
3. Обратите внимание на файлы, загружаемые из /wp-content/plugins/woocommerce/assets/css/;
4. Посмотрите секцию Sources, чтобы понять, какие стили подключены через wp_enqueue_style.

Также можно временно отключить стили с помощью фильтров и проверить, какие элементы страницы сломаются.

Пошаговое решение: удаляем CSS WooCommerce на страницах оплаты и доставки без ущерба

Основная задача — отключить загрузку CSS WooCommerce на страницах checkout и cart, но оставить необходимый минимальный набор стилей. Для этого используйте хук wp_enqueue_scripts с приоритетом 20 и функцию wp_dequeue_style.

Пример кода для файла functions.php темы или собственного плагина:

function wpskins_remove_woocommerce_checkout_styles() {
    if ( function_exists('is_checkout') && is_checkout() ) {
        // Отключаем базовые стили WooCommerce
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_style('woocommerce-smallscreen');

        // Оставляем стили оплаты, если нужны (опционально)
        // wp_dequeue_style('woocommerce-checkout'); // отключить, если есть
    }
    if ( function_exists('is_cart') && is_cart() ) {
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_style('woocommerce-smallscreen');
    }
}
add_action('wp_enqueue_scripts', 'wpskins_remove_woocommerce_checkout_styles', 20);

Если после отключения стилей верстка сломалась, можно оставить woocommerce-layout или добавить свои кастомные стили для корректного отображения.

Как проверить, что решение сработало

• Перейдите на страницу оформления заказа и доставки;
• Откройте Инструменты разработчика → Network → CSS и убедитесь, что файлы woocommerce-general.css, woocommerce-layout.css и woocommerce-smallscreen.css не загружаются;
• Проверьте визуальное отображение форм и элементов — все должно работать корректно;
• С помощью Lighthouse или PageSpeed Insights замерьте скорость загрузки страницы — должна улучшиться.

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

• Удаление стилей ломает оформление форм. Решение: не отключайте woocommerce-layout или добавьте свои CSS-правила для корректировки.
• Отключение стилей применяется на всех страницах. Проверьте условия is_checkout() и is_cart(), чтобы фильтровать только нужные страницы.
• Кэширование мешает увидеть изменения. Очистите кэш браузера, плагина кэширования и CDN.
• Другие плагины или тема подключают стили WooCommerce повторно. Проверьте приоритеты хуков и порядок подключения.

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

• Не отключайте стили WooCommerce полностью, если не уверены, что сможете заменить их своими, чтобы не ухудшить UX и не потерять клиентов.
• Используйте условные теги WordPress (is_checkout(), is_cart()) для максимальной точечности оптимизации.
• Регулярно проверяйте сайт после обновления WooCommerce — могут появиться новые стили или измениться handle стилей.
• Используйте инструменты типа Clearfy Pro для комплексной оптимизации и удаления лишних стилей.

Сравнение способов удаления CSS WooCommerce на страницах оплаты и доставки