Віджет 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;
}
Як додати стилі на сайт
- Через панель Elementor: Якщо ви використовуєте кастомні стилі в Elementor, додайте CSS у розділ Custom CSS у налаштуваннях віджета або сторінки.
- Через файл стилів теми: Вставте код у файл
style.cssвашої теми або дочірньої теми. - Через плагін: Використовуйте плагін, наприклад, 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, зробивши його стильним і зручним для користувачів. Підкреслення активної категорії та акуратне форматування підкатегорій покращать навігацію та візуальну привабливість вашого інтернет-магазину. Експериментуйте з кольорами та відступами, щоб ідеально вписати віджет у дизайн вашого сайту!
