Як зробити фільтр товарів за властивостями в створити сортування і підбір товарів по атрибутам
Привіт, друзі! У цьому уроці ми поговоримо про те, як зробити фільтр товарів за властивостями (атрибутам) в інтернет магазині WooCoomerce.
В одному з минулих уроків ми з Вами говорили про те, як в інтернет магазині WooCommerce зробити порівняння товарів. Сьогодні ми перейдемо до наступного, не менш цікавого етапу в улучшенііінтернет магазину - створення фільтра за властивостями товарів.
Як створити підбір товарів за властивостями (атрибутам) товару
Створювати віджет з фільтром товарів за властивостями ми будемо за допомогою плагіна YITH WooCommerce Ajax Navigation. За допомогою цього плагіна можна зробити фільтр по будь-яким характеристикам (атрибутам, властивостям) товару.
Для прикладу. давайте створимо фільтр товарів за кольором. В інтернет магазинах фільтр за кольором дуже популярний і поширений віджет, і я сподіваюся що даний приклад як і цей урок буде Вам цікавий. Отже, приступимо!
2. Перейдіть в Зовнішній вигляд -> Віджети.
3. Після активації плагіна з'явилося два нових віджета: YITH WooCommerce Ajax Navigation і YITH WooCommerce Ajax Reset Navigation.
Додайте їх на сайдбар (бічну панель) яка відображається на сторінці магазину.
Важливо! Плагін фільтрує товари по заданих в товарах атрибутам (властивостями). Їх потрібно попередньо додати в кожному товарі. Про те як додавати атрибути до товару ми говорили в уроці по створенню варіативних товарів.
4. Після додавання віджетів на сайдбар потрібно зробити наступне: вказуємо назву віджета, вибираємо атрибут, за яким будемо фільтрувати товари, і якщо Ви робите фільтр за кольором - виберіть Type: Color.
Також можна вибрати і інші типи фільтра:
- List - стандартний варіант, при якому властивості будуть відображатися списком
- Color - вибираємо при створенні фільтра за кольором
- Label - можна призначити своє ім'я для кожного властивості
- Dropdown - список, що випадає
Далі виберіть колір кнопки для кожного кольору і натисніть кнопку «Зберегти».
На віджеті YITH WooCommerce Ajax Reset Navigation потрібно вказати тільки ім'я для кнопки скидання фільтра.
Готово! Фільтр товарів за кольором створений! Але є одна деталь, яка псує весь зовнішній вигляд фільтра - маленькі квадратики над кнопками властивостей.
Прибираємо некрасиві квадратики з фільтра
Для того щоб прибрати ці непотрібні і псують зовнішній вигляд фільтра елементи, додайте в CSS наступний код:
Після чого у Вас вийде гарний фільтр:
Також варто зауважити, що при виборі характерістікістраніца не перезапускається. Це значно зручніше. ніж при кожному виборі потрібного властивості чекати перезавантаження сторінки.
Привіт, друзі! У цьому уроці ми поговоримо про те, як зробити фільтр товарів за властивостями (атрибутам) в інтернет магазині WooCoomerce. В одному з минулих уроків ми з Вами говорили про те, як в інтернет магазині WooCommerce зробити порівняння товарів. Сьогодні ми перейдемо до наступного, не менш цікавого етапу в поліпшенні інтернет магазину - створення фільтра за властивостями товарів. Як створити підбір товарів за властивостями (атрибутам) товару Створювати віджет з фільтром товарів за властивостями ми будемо за допомогою плагіна YITH WooCommerce Ajax Navigation. За допомогою цього плагіна можна зробити фільтр по будь-яким характеристикам (атрибутам, властивостям) товару. Для прикладу, давайте створимо фільтр товарів за кольором. В інтернет магазинах фільтр за кольором дуже ...