Виджет Product Categories в Elementor — это инструмент для отображения категорий товаров в интернет-магазине на базе WooCommerce. Однако стандартный внешний вид виджета может быть слишком простым и не всегда соответствует дизайну сайта. В этой статье мы разберем, как стилизовать виджет Product Categories, чтобы он выглядел современно, аккуратно и выделял активную категорию с помощью подчеркивания. Мы также оптимизируем отображение подкатегорий и добавим визуальные улучшения для лучшего пользовательского опыта.

Шаг 1: Базовая структура и сброс стилей

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

.woocommerce .product-categories {
    padding-left: 0;
    margin-left: 0;
    margin-top: 0;
}

.woocommerce .product-categories > li {
    list-style: none;
    margin-bottom: 4px;
}

• padding-left: 0 и margin-left: 0 убирают лишние отступы у основного списка категорий.
• list-style: none удаляет маркеры списка.
• margin-bottom: 4px добавляет небольшой зазор между категориями для лучшей читаемости.

Шаг 2: Стилизация ссылок категорий

Теперь настроим внешний вид ссылок для основных категорий и подкатегорий. Мы используем шрифт «Open Sans» для единообразия и задаем базовые параметры текста.

.woocommerce .product-categories > li > a {
    font-family: "Open Sans", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #0D141A;
    text-decoration: none;
    transition: all 0.3s ease;
}

.woocommerce .product-categories > li > a:hover {
    color: #0D141A;
    opacity: 0.8;
}

• font-family: «Open Sans», Sans-serif задает современный и читаемый шрифт.
• font-size: 16px и font-weight: 500 обеспечивают оптимальную читаемость.
• text-decoration: none убирает подчеркивание по умолчанию.
• transition: all 0.3s ease добавляет плавное изменение стилей при наведении.
• opacity: 0.8 на :hover создает легкий эффект при наведении, сохраняя цвет текста.

Шаг 3: Стилизация подкатегорий

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

.woocommerce .product-categories .children li {
    list-style: none;
    position: relative;
    padding-left: 1em;
    margin-bottom: 5px;
    margin-top: 5px;
}

.woocommerce .product-categories .children li::before {
    content: "-";
    position: absolute;
    left: 0;
    color: #666;
    font-weight: normal;
}

.woocommerce .product-categories .children li a {
    font-family: "Open Sans", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #0D141A;
    text-decoration: none;
    transition: all 0.3s ease;
}

.woocommerce .product-categories .children li a:hover {
    opacity: 0.8;
}

• padding-left: 1em создает отступ для подкатегорий, чтобы они визуально отделялись.
• content: «-«; добавляет дефис перед подкатегориями для обозначения иерархии.
• color: #666 для дефиса делает его менее заметным, чтобы не отвлекать внимание от текста.
• margin-bottom: 5px; margin-top: 5px задают равномерные отступы между подкатегориями.

Шаг 4: Подчеркивание активной категории

Чтобы выделить текущую (активную) категорию, добавим подчеркивание с помощью класса current-cat, который автоматически применяется WooCommerce.

.widget_product_categories .product-categories .current-cat > a {
    text-decoration: underline;
    text-decoration-color: #0D141A;
    text-decoration-thickness: 2px;
}

• text-decoration: underline добавляет подчеркивание активной категории.
• text-decoration-color: #0D141A задает цвет подчеркивания, соответствующий тексту.
• text-decoration-thickness: 2px делает подчеркивание более заметным, но не слишком громоздким.

Шаг 5: Корректировка отступов для подкатегорий

Иногда подкатегории могут смещаться из-за особенностей верстки. Чтобы скорректировать их положение, добавим отрицательный отступ:

.children {
    margin-left: -22px;
}

• margin-left: -22px выравнивает подкатегории относительно основного списка, компенсируя возможные смещения в макете.

Итоговый код CSS

Вот полный код для стилизации виджета Product Categories:

.woocommerce .product-categories {
    padding-left: 0;
    margin-left: 0;
    margin-top: 0;
}

.woocommerce .product-categories > li {
    list-style: none;
    margin-bottom: 4px;
}

.woocommerce .product-categories > li > a {
    font-family: "Open Sans", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #0D141A;
    text-decoration: none;
    transition: all 0.3s ease;
}

.woocommerce .product-categories > li > a:hover {
    color: #0D141A;
    opacity: 0.8;
}

.woocommerce .product-categories .children li {
    list-style: none;
    position: relative;
    padding-left: 1em;
    margin-bottom: 5px;
    margin-top: 5px;
}

.woocommerce .product-categories .children li::before {
    content: "-";
    position: absolute;
    left: 0;
    color: #666;
    font-weight: normal;
}

.woocommerce .product-categories .children li a {
    font-family: "Open Sans", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #0D141A;
    text-decoration: none;
    transition: all 0.3s ease;
}

.woocommerce .product-categories .children li a:hover {
    opacity: 0.8;
}

.children {
    margin-left: -22px;
}

.widget_product_categories .product-categories .current-cat > a {
    text-decoration: underline;
    text-decoration-color: #0D141A;
    text-decoration-thickness: 2px;
}

Как добавить стили на сайт

1. Через панель Elementor: Если вы используете кастомные стили в Elementor, добавьте CSS в раздел Custom CSS в настройках виджета или страницы.
2. Через файл стилей темы: Вставьте код в файл style.css вашей темы или дочерней темы.
3. Через плагин: Используйте плагин, например, Custom Functions Plugin или Code Snippets, чтобы добавить CSS в секцию <style>.

Дополнительные советы

• Адаптивность: Проверьте, как виджет выглядит на мобильных устройствах. При необходимости добавьте медиа-запросы, например:

@media (max-width: 768px) {
    .woocommerce .product-categories > li > a {
        font-size: 14px;
    }
    .woocommerce .product-categories .children li a {
        font-size: 14px;
    }
}

• Цветовая схема: Если ваш сайт использует другую палитру, замените #0D141A и #666 на цвета, соответствующие вашему дизайну.
• Тестирование: Проверьте отображение в разных браузерах, чтобы убедиться, что стили применяются корректно.

С помощью приведенного CSS-кода вы можете преобразить стандартный виджет Product Categories от Elementor, сделав его стильным и удобным для пользователей. Подчеркивание активной категории и аккуратное форматирование подкатегорий улучшат навигацию и визуальную привлекательность вашего интернет-магазина. Экспериментируйте с цветами и отступами, чтобы идеально вписать виджет в дизайн вашего сайта!