Віджет 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, зробивши його стильним і зручним для користувачів. Підкреслення активної категорії та акуратне форматування підкатегорій покращать навігацію та візуальну привабливість вашого інтернет-магазину. Експериментуйте з кольорами та відступами, щоб ідеально вписати віджет у дизайн вашого сайту!