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

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

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

Чтобы понять, какие стили загружаются, откройте страницу оплаты (checkout) и доставки (shipping) на сайте, затем в браузере через инструменты разработчика (DevTools) перейдите на вкладку Network — отфильтруйте по CSS. Обратите внимание на файлы woocommerce.css и дочерние стили плагинов или темы, которые влияют на оформление.

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

Пошаговое решение: выборочное отключение CSS WooCommerce на страницах оплаты и доставки

1. Отключаем стили WooCommerce на страницах оплаты и доставки

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

add_action('wp_enqueue_scripts', 'remove_woocommerce_checkout_shipping_css', 99); 
function remove_woocommerce_checkout_shipping_css() {
    if (is_checkout() || is_page('shipping')) { // замените 'shipping' на ID или слаг вашей страницы доставки
        // Отключаем встроенные стили WooCommerce
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_style('woocommerce-smallscreen');
    }
}

Этот код отключит основные стили WooCommerce, но только на страницах оплаты и доставки. Для страницы доставки is_page('shipping') замените на реальный ID или слаг страницы.

2. Подключаем минимальные необходимые стили вручную

Чтобы избежать сломанных элементов, создайте кастомный CSS-файл с минимальными стилями для форм оплаты и доставки. Например, создайте файл custom-checkout.css в папке темы и подключите его так:

add_action('wp_enqueue_scripts', 'enqueue_custom_checkout_styles', 100);
function enqueue_custom_checkout_styles() {
    if (is_checkout() || is_page('shipping')) {
        wp_enqueue_style('custom-checkout-styles', get_stylesheet_directory_uri() . '/custom-checkout.css');
    }
}

В custom-checkout.css пропишите только самые необходимые правила для корректного отображения форм, например:

form.checkout {
    max-width: 600px;
    margin: 0 auto;
}
.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
}
.woocommerce-checkout-payment {
    margin-top: 20px;
}

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

1. Очистите кэш сайта и браузера, если используете кеширующие плагины (WP Rocket, Clearfy Pro и др.).

2. Загрузите страницы оплаты и доставки в режиме инкогнито.

3. Проверьте, что все поля формы отображаются корректно, кнопки активны, ошибки валидации работают.

4. С помощью DevTools убедитесь, что стили WooCommerce не загружаются, а подключается только ваш кастомный CSS.

5. Протестируйте оплату — убедитесь, что процесс заказа проходит без ошибок.

Частые ошибки и способы их устранения

• Ошибка: Формы оплаты или доставки выглядят сломанными или элементы не стилизованы.
  Причина: Отключены все стили WooCommerce, а кастомный CSS не покрывает все необходимые правила.
  Решение: Добавьте в кастомный CSS дополнительные правила для элементов форм, или оставьте подключение woocommerce-layout.
• Ошибка: Сценарии оплаты не работают, появляется ошибка JavaScript.
  Причина: Иногда отключение стилей ведёт к конфликтам с JS, который ожидает определённые классы.
  Решение: Проверьте консоль браузера, верните отключённые стили по частям, чтобы понять, какой именно влияет на JS.
• Ошибка: Страница доставки не определяется корректно функцией is_page().
  Причина: Неправильный ID или слаг страницы.
  Решение: Используйте get_the_ID() или var_dump(get_queried_object()) для определения правильного идентификатора.

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

• После внесения изменений используйте инструменты типа GTmetrix или Google PageSpeed Insights для проверки скорости загрузки страниц оплаты и доставки.
• Минимизируйте кастомный CSS, удаляя неиспользуемые правила.
• Обязательно тестируйте интеграцию с платежными шлюзами после отключения стилей.
• Если вы используете плагин Clearfy Pro, можно дополнительно очистить неиспользуемые стили и метаданные для ускорения загрузки.

Сравнение подходов по отключению CSS WooCommerce на страницах оплаты и доставки