Как удалить класс WooCommerce из HTML элементов без плагинов

Автор: Евгения Данилова | Опубликовано: 16.06.2026

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

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

Для диагностики используйте инструменты разработчика браузера (F12) и найдите, какие классы WooCommerce добавляются к <body>, карточкам товаров, кнопкам и другим элементам. Классы выглядят как woocommerce-page, product-type-simple, woocommerce-loop-product__title.

Пошаговое решение: удаляем и фильтруем классы WooCommerce через functions.php

1. Удаление классов из <body>

Классы WooCommerce добавляются в тело страницы через фильтр body_class. Можно отфильтровать и удалить ненужные:

add_filter('body_class', 'remove_woocommerce_body_classes', 20, 1);
function remove_woocommerce_body_classes($classes) {
    // Удаляем все классы начинающиеся с 'woocommerce'
    foreach ($classes as $key => $class) {
        if (strpos($class, 'woocommerce') === 0) {
            unset($classes[$key]);
        }
    }
    return $classes;
}

2. Удаление классов из карточек товаров

Карточки товаров используют функцию wc_product_class() для классов. Можно перехватить фильтр post_class и убрать классы WooCommerce:

add_filter('post_class', 'remove_woocommerce_product_classes', 20, 3);
function remove_woocommerce_product_classes($classes, $class, $post_id) {
    if (get_post_type($post_id) === 'product') {
        foreach ($classes as $key => $class_name) {
            if (strpos($class_name, 'product') === 0 || strpos($class_name, 'woocommerce') === 0) {
                unset($classes[$key]);
            }
        }
    }
    return $classes;
}

3. Удаление классов с кнопок и других элементов

Для кнопок WooCommerce часто используются классы button и woocommerce-*. Чтобы переопределить, можно использовать JavaScript или фильтры WooCommerce, но лучший способ — переопределять шаблоны в теме и менять классы вручную.

Например, для кнопки добавления в корзину можно скопировать шаблон woocommerce/templates/loop/add-to-cart.php в вашу тему и отредактировать HTML, убрав лишние классы.

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

После добавления кода в functions.php очистите кеш сайта и браузера. Зайдите на любую страницу WooCommerce и откройте инструменты разработчика (F12). Проверьте <body> и карточки товаров на отсутствие классов, начинающихся с woocommerce или product (если вы их удаляли).

На странице товара или магазина проверьте визуально, что стили не сломались. Если стили пропали, возможно, нужно добавить собственные CSS.

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

Удаление нужных классов ломает стили: Перед удалением проверьте, какие классы используются темой и плагинами. Удаляйте только те, что действительно конфликтуют.
Классы возвращаются после обновления WooCommerce: Код в functions.php работает при каждой загрузке. Если классы возвращаются, проверьте, нет ли в теме или плагинах других функций, которые добавляют классы повторно.
Удаление классов из кнопок без замены ломает функционал: Классы кнопок нужны для JavaScript WooCommerce. Если удаляете, замените их на свои, учитывая JS-логику.

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

Не используйте тяжелые регулярные выражения для фильтрации классов — используйте strpos для быстрой проверки префикса.
Для оптимизации кеширования используйте хуки с приоритетом 20 или выше, чтобы убедиться, что фильтры применятся после WooCommerce.
Не удаляйте классы, если не понимаете их роли — это может повредить SEO или функционалу.

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

Способ	Плюсы	Минусы
Фильтр body_class и post_class в functions.php	Простой, не требует плагинов, гибкий	Требует знаний PHP, можно удалить важные классы
Переопределение шаблонов WooCommerce	Полный контроль над HTML и классами	Требует поддержки при обновлениях WooCommerce
Использование JavaScript для удаления классов	Можно быстро убрать классы после загрузки	Менее производительно, возможны мигания стилей