Как сделать фильтр товаров по свойствам в 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.