Как программно изменить скин WooCommerce в зависимости от категории товара

Автор: Егор Савельев | Опубликовано: 20.05.2026

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

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

Как определить категорию товара на странице товара

Для изменения скина нужно сначала понять, к какой категории принадлежит текущий товар. Для этого используйте функцию has_term() или получите категории через wp_get_post_terms().

global $post;
$categories = wp_get_post_terms($post->ID, 'product_cat');
// Выводим названия категорий
foreach ($categories as $category) {
    echo $category->name . ' ';
}

Или проверить наличие категории по слагу:

if (has_term('my-category-slug', 'product_cat', $post->ID)) {
    // Действия для категории
}

Пошаговое решение: изменение скина через условные стили и переопределение шаблонов

1. Добавляем уникальный класс к тегу `body` на страницах товаров нужных категорий

add_filter('body_class', function($classes) {
    if (is_product()) {
        global $post;
        $terms = wp_get_post_terms($post->ID, 'product_cat');
        foreach ($terms as $term) {
            $classes[] = 'category-skin-' . sanitize_html_class($term->slug);
        }
    }
    return $classes;
});

Это позволит в CSS таргетировать конкретные категории через классы .category-skin-slug.

2. Подключаем стили для разных категорий

Добавьте в functions.php условную загрузку CSS:

add_action('wp_enqueue_scripts', function() {
    if (is_product()) {
        global $post;
        $terms = wp_get_post_terms($post->ID, 'product_cat');
        foreach ($terms as $term) {
            $css_file = get_stylesheet_directory() . '/css/skin-' . $term->slug . '.css';
            if (file_exists($css_file)) {
                wp_enqueue_style('skin-' . $term->slug, get_stylesheet_directory_uri() . '/css/skin-' . $term->slug . '.css', [], null);
            }
        }
    }
});

Создайте CSS-файлы с уникальными стилями, например, skin-electronics.css, skin-clothing.css.

3. Переопределяем шаблоны для конкретных категорий (по необходимости)

Для более глубокой кастомизации можно использовать фильтр template_include:

add_filter('template_include', function($template) {
    if (is_product()) {
        global $post;
        if (has_term('electronics', 'product_cat', $post->ID)) {
            $new_template = locate_template('single-product-electronics.php');
            if ($new_template) {
                return $new_template;
            }
        }
    }
    return $template;
});

Создайте файл single-product-electronics.php в папке темы, скопировав базовый single-product.php и модифицируя под нужный дизайн.

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

Откройте страницу товара, проверьте в инструментах разработчика наличие класса category-skin-* в <body>.
Убедитесь, что подключились нужные CSS-файлы (см. вкладку Network в DevTools).
Проверьте визуальные изменения в соответствии с категориями.
Если изменяли шаблоны, убедитесь, что в HTML разметке есть отличия, например особые блоки или элементы.

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

Класс body не добавляется. Проверьте, что функция add_filter('body_class') подключена в functions.php, и тема использует вызов body_class() в шаблоне.
Стили не подключаются. Убедитесь, что CSS-файлы существуют в папке темы и пути указаны корректно. Проверьте регистр и отсутствие опечаток в названиях.
Шаблон не переопределяется. Файл шаблона должен лежать в корне темы (или дочерней темы). Проверьте, что locate_template() возвращает путь к нужному файлу.
Конфликты стилей. Используйте более специфичные селекторы или !important аккуратно, чтобы переопределить базовые стили.

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

Не подключайте лишние CSS. Загружайте стили только для нужных категорий и только на страницах товаров (is_product()).
Кэшируйте результаты получения категорий, если используете в сложных условиях, чтобы снизить нагрузку.
Избегайте дублирования стилей между файлами, выделяйте общие правила в базовый CSS.
Если используете кастомные шаблоны, тестируйте обновления WooCommerce и темы, чтобы избежать конфликтов.

Сравнение способов кастомизации скинов WooCommerce по категориям

Метод	Преимущества	Недостатки
Добавление классов и CSS	Простота, быстрое внедрение, легкий контроль	Ограниченная глубина изменений, возможны конфликты стилей
Переопределение шаблонов	Максимальная гибкость, полный контроль верстки	Требует больше времени, сложнее поддерживать
Плагины для кастомизации	Упрощают процесс, можно без кода	Могут замедлять сайт, ограничения по функционалу