Как сделать фильтр товаров по свойствам в WooCommerce
Дoбaвьтe иx нa сaйдбaр (бoкoвую пaнeль) кoтoрaя oтoбрaжaeтся нa стрaницe мaгaзинa. 2. Этo знaчитeльнo удoбнeй, чeм при каждом выборе нужного свойства ждать перезагрузку страницы. Убираем некрасивые квадратики с фильтра
Для того чтобы убрать эти ненужные и портящие внешний вид фильтра элементы, добавьте в CSS следующий код:
.widget_layered_nav li:before {
display: none!important;
}
После чего у Вас получится красивый фильтр:
Также стоит заметить, что при выборе характеристики страница не перезагружается! Перейдите в Внешний вид -> Виджеты. Итак, приступим! С помощью этого плагина можно сделать фильтр по любым характеристикам (атрибутам, свойствам) товара. В этом уроке мы поговорим о том, как сделать фильтр товаров по свойствам (атрибутам) в интернет магазине WooCoomerce. После активации плагина появилось два новых виджета: YITH WooCommerce Ajax Navigation и YITH WooCommerce Ajax Reset Navigation. На виджете YITH WooCommerce Ajax Reset Navigation нужно указать только имя для кнопки сброса фильтра. 3. В одном из прошлых уроков мы с Вами говорили о том, как в интернет магазине WooCommerce сделать сравнение товаров. Сегодня мы перейдем к следующему, не менее интересному этапу в улучшении интернет магазина — созданию фильтра по свойствам товаров. Как создать подбор товаров по свойствам (атрибутам) товара
Создавать виджет с фильтром товаров по свойствам мы будем с помощью плагина YITH WooCommerce Ajax Navigation. Для примера, давайте создадим фильтр товаров по цвету. Готово! Важно! 1. Их нужно предварительно добавить в каждом товаре. Также можно выбрать и другие типы фильтра:
List — стандартный вариант, при котором свойства будут отображаться списком
Color — выбираем при создании фильтра по цвету
Label — можно назначить свое имя для каждого свойства
Dropdown — выпадающий список
Далее выберите цвет кнопки для каждого цвета и нажмите кнопку «Сохранить». Установите и активируйте плагин YITH WooCommerce Ajax Navigation.