У WooCommerce фільтри товарів можна налаштувати двома способами: 1) за допомогою стандартних блоків; 2) за допомогою сторонніх плагінів. У статті розберемо загальний принцип налаштування фільтрів, розповімо про особливості обох способів та нюанси, які потрібно враховувати під час вибору способу для вашого магазину.
Загальний принцип
У WordPress для роботи з фільтрами товарів передбачений спеціальний розділ — «Вигляд – Віджети». У ньому ви помітите кілька областей, куди можна додавати блоки. Залежно від вашої теми, кількість зон буде відрізнятися. Зазвичай це кілька бічних панелей (для основного сайту та для магазину), шапка та підвал.
Розкривши потрібну область, ви побачите стандартний редактор блоків WordPress, тільки більш вузький. Ви можете додавати до нього будь-які блоки, які мають відображатися у цій зоні на сайті. У нашому випадку — блоки з фільтрами товарів.
Параметри кожного блоку відображатимуться на бічній панелі праворуч. Так само як при створенні сторінок або записів.
Нюанс №1 👀
Якщо з назви області з віджетами незрозуміло, де на сайті вона відображатиметься, зайдіть у розділ «Вигляд – Налаштувати – Віджети» та перейдіть у вікні редактора на потрібну сторінку. Якщо для цієї сторінки зареєстрована область віджетів, її назва відобразиться на бічній панелі зліва.
Нюанс №2 👀
Іноді, щоб побачити зону для віджетів у налаштуванні теми, потрібно спочатку увімкнути відображення бічної панелі у розділі «Зовнішній вигляд – Налаштувати». Для магазину це зазвичай робиться в підрозділі налаштування WooCommerce.
Стандартні блоки WooCommerce
Ці блоки встановлюються разом із плагіном WooCommerce. Щоб знайти їх, відкрийте повний список блоків і прокрутіть його до секції «WooCommerce». Там будуть блоки не тільки для фільтрів, але в контексті фільтрів нас цікавлять блоки «Фільтри товарів», «Пошук товарів» та «Список категорій».
Фільтри товарів
Це комлексний блок, у який вкладено одразу декілька фільтрів:
- Активні фільтри — відображає фільтри, які відвідувач застосував у себе у браузері.
- Ціна — повзунок для вибору мінімальної та максимальної ціни.
- Рейтинг — дозволяє вибрати лише такі товари, які оцінили певну кількість зірок.
- Атрибут — список значень будь-якого зі створених атрибутів (за замовчуванням буде обрано перший атрибут).
- Статус — дозволяє вибрати тільки ті товари, які є у наявності.
Щоб швидко перейти до потрібного фільтра, використовуйте режим «Огляд документа» у шапці сторінки. Так буде легко видалити конкретний фільтр, передвинути його на інше місце чи просто вибрати потрібний блок.
Щоб додати додатковий фільтр, наприклад, фільтр по іншому атрибуту або список усіх категорій у магазині, виберіть у огляді документа материнський блок «Фільтри товарів», потім натисніть кнопку плюс у нижній частині блоку.
Фільтри для кожного атрибута будуть у самому низу у списку блоків.
Щоб побачити налаштування зовнішнього вигляду фільтра, розкрийте бічну панель у шапці сторінки праворуч.
Пошук товарів
Цей блок додасть в сайдбар поле для пошуку, щоб відвідувачі магазину могли ввести назву товару, який їх цікавить. У параметрах блоку можна додати рамку навколо блоку, змінити стиль кнопки (з текстом або позначкою) або взагалі приховати її.
Якщо хочете змінити розмір слова «Пошук» над полем для введення, вимкніть опцію «Показати ярлик введення» і додайте над цим блоком блок «Абзац» або «Заголовок».
Список категорій
Цей блок додає на бічну панель список усіх категорій із посиланнями на них. У його параметрах ви можете вибрати, чи це має бути повний список або випадаючий список. Також є можливість показати/сховати такі метадані: кількість товарів у кожній категорії, зображення категорії, порожні категорії, ієрархію категорій.
За замовчуванням блок не має заголовка. Якщо він потрібен, додатково додайте до нього блок «Заголовок».
Плагіни для налаштування фільтрів
Кожен плагін має власний розділ з параметрами, де ви зможете додати потрібні фільтри, налаштувати їх зовнішній вигляд та логіку відображення.
Після створення фільтрів цю справу доведеться додати у розділі «Вигляд – Віджети» за допомогою шорткоду або блоку «Віджет».
Ось декілька популярних варіантів плагінів для налаштування фільтрів:
- Filter Everything — WooCommerce Product & WordPress Filter
- Product Filter by WBW
- Advanced AJAX Product Filters for WooCommerce
- HUSKY – Products Filter Professional for WooCommerce
Нюанс 👀
Усі плагіни умовно-безкоштовні. Це означає, що частина функцій буде доступна лише у платній версії. Якщо якась важлива для вас функція доступна лише платно в одному плагіні, вона може бути доступна безкоштовно в іншому. Тому є сенс випробувати кілька варіантів, якщо з першого разу не знайшли те, що потрібно.
Який спосіб вибрати
Якщо коротко, обидва способи робочі. Просто стандартні блоки — це мінімалістичний варіант у плані налаштувань, а плагіни — більш просунутий.
Нижче розглянемо обидва способи трохи детальніше через призму двох критеріїв, які здалися нам найбіль важливими: 1) контроль над зовнішнім виглядом; 2) дизайн на мобільних пристроях.
Критерій №1: Контроль за зовнішнім виглядом
Ми подивилися фільтри в різних інтернет-магазинах та виділили кілька особливостей, які можуть бути важливими для їхніх власників:
- різні набори фільтрів для різних категорій товарів;
- фільтри приховані за замовчуванням, розкриваються за кліком;
- кольори/картинки/емодзі у рядках з варіантами.
Стандартні блоки не дозволяють налаштувати ці особливості. Фільтри, які ви додасте на бічну панель, будуть відображатися у всіх категоріях, будуть розкриті за замовчуванням без можливості згорнути або додати картинки до рядків з варіантами.
Це може бути проблемою для невеликих магазинів, де в усіх товарів однакові характеристики. Незважаючи на мінімальну гнучкість, це все одно робочий спосіб для використання якого не потрібно встановлювати додаткові плагіни.
Якщо дуже хочеться зробити фільтри прихованими за замовчуванням, цього можна досягти за допомогою блоку «Деталі». У редакторі віджетів потрібно додати спочатку його, а вже до нього додавати блок з фільтром. Мінус цього способу може знадобитися вручну скоригувати стилі за допомогою CSS-коду.
Плагіни дозволяють більш елегантно налаштувати кожну з описаних особливостей. Якщо потрібно, можна створити свій набір фільтрів для різних категорій, зробити фільтри згорнутими за замовчуванням, а в рядки зі значеннями додати не тільки емодзі, а й власні картинки.
Нюанс 👀
Все залежить від конкретного плагіна. У деяких із них може і не бути якоїсь опції, а в деяких вона може бути доступна лише у платній версії.
Критерій №2: Дизайн на мобільних пристроях
За замовчуванням на смартфонах та планшетах бічна колонка з фільтрами зміщується вниз — під сітку з товарами. Через це користувачеві потрібно буде щоразу перегортати сторінку в самий низ, щоб використовувати фільтри. Це не обов’язково погано, просто підійде не всім.
Як правило, цю проблему вирішують таким чином: міняють місцями колонки на мобільних пристроях, а самі фільтри ховають за кнопкою, щоб вони відображалися або відразу під нею, або на бічній панелі, що виїжджає.
Якщо ви використовуєте стандартні блоки, це можна зробити лише засобами вашої теми (у розділі «Вигляд – Налаштувати»). Якщо ви використовуєте плагін, така опція може бути доступна також у параметрах плагіна.
Нюанс 👀
Розробники тем та плагінів часто роблять елегантне рішення у вигляді кнопки частиною платного функціоналу. Тому, якщо хочете вирішити проблему елегантно і при цьому безкоштовно, можливо, доведеться заморочитися. Наприклад, використовувати блок «Деталі» та стилізувати його за допомогою CSS-коду.
Стандартні блоки. Поміняти колонки подекуди можна в розділі «Вигляд – Налаштувати». У деяких темах (наприклад, Blocksy або OceanWP) для цього є спеціальний перемикач.
Якщо такого перемикача немає, то доведеться додавати свій CSS-код у розділі «Зовнішній вигляд – Налаштувати – Додатково». Іноді розробники теми самі публікують у себе документації статті з таким кодом як безкоштовне рішення. Щоб можна було просто скопіювати та вставити. Наприклад, така стаття є у документації Astra.
Сховати фільтри за кнопкою можна або у параметрах теми (наприклад, у OceanWP ця опція доступна безкоштовно), або за допомогою блоку «Деталі» у розділі «Вигляд – Віджети». Додайте цей блок і покладіть блоки з фільтрами всередину нього. Швидше за все, його також доведеться стилізувати за допомогою CSS-коду, щоб вийшло красиво.
Плагіни. Іноді, якщо поміняти колонки місцями і додати кнопку «Фільтри» не можна у параметрах теми, це можна зробити у параметрах плагіна (наприклад, у плагіні Filter Everything ця опція доступна безкоштовно).
При цьому ніхто не заважає використовувати як опції в параметрах теми, якщо вони є, так і опції в параметрах плагіна. Можливо, вам вдасться налаштувати все ідеально саме за допомогою комбінації опцій. Звичайно, для цього доведеться перепробувати різні варіанти, але така реальність — гарні рішення вимагають зусиль.
Нюанс 👀
Опції у параметрах плагіна, які змінюють місцями бічну та основну колонку, можуть працювати не з кожною темою. З одною проблеми не буде і все стане як треба, з іншою нічого не зміниться.
Що далі
Сподіваємося, інформація у цій статті була для вас корисною. Розкажіть про рішення, яке ви вибрали, щоб зробити красиві фільтри у своєму магазині. Можливо, ваш досвід допоможе іншим заощадити час.
Також, якщо у вас є думки про те, як ми могли б покращити статтю для інших, поділіться їм у коментарях. Може, якась інформація вже застаріла або ми прогавили якийсь цікавий плагін/тему з поля зору.