Суббота, Декабрь 16Полезные советы и секреты в мире IT и создание сайтов, а так же новости.

Как сделать фильтр товаров по свойствам в плагине WooCommerce

Как сделать фильтр товаров по свойствам в WooCommerce

В интернет — магазине WooCommerce есть возможность делать сравнение товаров. Но можно еще  улучшить его —  создать фильтр по свойствам товаров.

Создание подбора товаров по свойствам (атрибутам) товара.

Создавать виджет с фильтром товаров по свойствам возможно, используя плагин YITH WooCommerce Ajax Navigation. С его помощью можно сделать фильтр по любым характеристикам (атрибутам, свойствам) товара.

В качестве примера, создадим фильтр товаров по цвету — это популярный и распространенный виджет, и многим он будет интересен.

1. Установите и активируйте плагин YITH WooCommerce Ajax Navigation.

Установите и активируйте плагин YITH WooCommerce Ajax Navigation. 

2. Перейдите во Внешний вид -> Виджеты.

Описание: Как создать подбор товаров по свойствам

3. После активации плагина появилось два новых виджета: YITH WooCommerce Ajax Navigationи YITH WooCommerce Ajax Reset Navigation.

 После активации плагина появилось два новых виджета: YITH WooCommerce Ajax Navigationи YITH WooCommerce Ajax Reset Navigation

Добавьте их на сайдбар (боковую панель) которая отображается на странице магазина.

Не забывайте — плагин фильтрует товары по заданным в них атрибутам (свойствам).  В каждом товаре их надо предварительно добавить.

4. После добавления виджетов на сайдбар надо указать название виджета и выбрать атрибут, по которому будут фильтроваться товары. Если делается фильтр по цвету — выбираем Type: Color.

Можно выбирать и другие типы фильтра:

  • List — стандартный вариант, при котором свойства будут отображаться списком
  • Color — выбираем при создании фильтра по цвету
  • Label — можно назначить свое имя для каждого свойства
  • Dropdown — выпадающий список

Далее выберите цвет кнопки для каждого цвета и нажмите кнопку «Сохранить».

На виджете YITH WooCommerce Ajax Reset Navigation нужно указать только имя для кнопки сброса фильтра.

На виджете YITH WooCommerce Ajax Reset Navigation нужно указать только имя для кнопки сброса фильтра 

Таким образом, фильтр товаров по цвету создан, но его внешний вид портят маленькие квадратики над кнопками свойств.

 Таким образом, фильтр товаров по цвету создан, но его внешний вид портят маленькие квадратики над кнопками свойств

Чтобы Убирать ненужные квадратики с фильтра добавляем в CSS такой код: 

1

2

3

.widget_layered_nav li:before {

    display: none!important;

}

После чего у Вас получится красивый фильтр:

После чего у Вас получится красивый фильтр 

Удобно, что при выборе характеристики страница не перезагружается, поэтому не надо при каждом выборе свойства ждать перезагрузку страницы.

Ответим на Ваши вопросы в комментариях.

Добавить комментарий

%d такие блоггеры, как: