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

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

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

Чтобы понять, какие стили грузятся, используйте инструменты разработчика в браузере (F12) на страницах оформления заказа и доставки. Вкладка "Network" покажет, какие CSS-файлы подгружаются, а "Elements" — к каким элементам применяются стили.

Проверка подключаемых стилей WooCommerce

function debug_woocommerce_styles() {
    global $wp_styles;
    echo '<pre>';
    print_r( $wp_styles->queue );
    echo '</pre>';
}
add_action('wp_footer', 'debug_woocommerce_styles');

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

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

В WooCommerce стили подключаются через функцию wc_enqueue_styles(), которая регистрирует массив стилей для разных частей магазина. Чтобы удалить стили страниц оплаты и доставки без ущерба для функционала, нужно сделать следующее:

1. Использовать хук wp_enqueue_scripts с приоритетом выше 20;
2. Проверить, что мы на странице оформления заказа (checkout) или доставки;
3. Удалить нужные стили из очереди с помощью wp_dequeue_style() и wp_deregister_style();
4. Оставить критичные стили, чтобы не сломать форму.

Пример кода:

add_action('wp_enqueue_scripts', 'custom_remove_checkout_delivery_styles', 15);
function custom_remove_checkout_delivery_styles() {
    if ( function_exists('is_checkout') && is_checkout() ) {
        // Удаляем стили WooCommerce для страниц оформления заказа и доставки
        wp_dequeue_style('woocommerce_checkout');
        wp_deregister_style('woocommerce_checkout');

        wp_dequeue_style('woocommerce_checkout_payment');
        wp_deregister_style('woocommerce_checkout_payment');

        // Можно удалить и другие CSS, если уверены
        //wp_dequeue_style('select2');
        //wp_deregister_style('select2');
    }
}

Важно: is_checkout() возвращает true и на странице оплаты, и на странице доставки (если используется стандартный шаблон WooCommerce).

Как определить, что стили можно удалить?

Рекомендуется сначала отключить один стиль, проверить страницу оформления заказа, убедиться, что форма и кнопки работают и выглядят корректно. Если все в порядке, можно удалять следующие стили. Если что-то ломается — вернуть обратно.

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

Чтобы проверить, что стили действительно удалены и функционал остался:

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

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

• Ломается верстка формы заказа — значит удалён критичный стиль. Попробуйте отключать стили по одному, возвращая необходимые.
• Плагины платежных систем перестали работать — возможно, они зависят от стилей WooCommerce. Проверьте документацию плагина и не удаляйте связанные с ним CSS.
• Стили не удаляются — проверьте приоритет хука wp_enqueue_scripts, он должен быть меньше 20, чтобы удалить стили до их подключения.
• Кэширование мешает проверке — очистите кэш плагинов (например, WP Rocket, Clearfy Pro) и браузера.

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

• Используйте дочернюю тему для добавления кода, чтобы избежать потери изменений при обновлении темы.
• Оптимизируйте загрузку скриптов и стилей, отключая ненужные не только на страницах оплаты, но и в других частях магазина.
• Минимизируйте CSS и объединяйте файлы, используя плагины оптимизации или серверные инструменты.
• Используйте Clearfy Pro для комплексной очистки и ускорения загрузки WooCommerce, включая удаление неиспользуемых CSS и метаданных (https://wpshop.ru/plugins/clearfy?utm_source=wpskins.ru&utm_medium=article&utm_campaign=woocommerce-kak-udalit-css-stili-stranits-oplaty-i-dostavki-bez-povrezhdeniya-funkcionala).

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