Фильтр товаров

Урок 5

Зарегистрируйтесь или войдите и получите бесплатный доступ к первому уроку курса.

Урок 5

Как создать фильтр товаров в WooCommerce? 2 способа

В этом видеоуроке я действительно покажу вам два способа создания фильтра товаров в вашей теме WooCommerce.

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

Наш фильтр будет фильтровать товары:

  • По категориям,
  • По цене,
  • По атрибутам (размеру),
  • + Сортировать их по цене (дешевле/дороже), новизне и популярности.

Уверен, что вы и так знаете, как обычно выглядят и работают фильтры, на тем не менее вот скриншот:

Создание фильтра товаров WooCommerce
На этой гифке я показал в действии фильтрацию товаров по категориям и по цене. Но не забывайте, что у нас ещё будет фильтр по размерам и сортировка!

1. Создание фильтра товаров при помощи виджетов WooCommerce

На самом деле – это очень интересная реализация при помощи функционала виджетов и сайдбаров WordPress.

Эта функция существует потому, что WordPress и WooCommerce всегда оставляют возможность создавать сайты и интернет-магазины людям, которые вообще не разбираются в коде. У меня даже есть отдельный курс по интернет-магазину без кода.

Поэтому, если вы хотите дать администратору сайта с вашей темой максимальную свободу, чтобы он например мог добавлять любые фильтры (по цене, атрибуту) и менять их местами, то это реализация заслуживает быть в вашей теме.

виджеты фильтра товаров в WooCommerce

Однако помните, что при создании фильтра товаров на виджетах у нас есть ограничения – мы не сможем свободно менять любой HTML виджетов фильтра и нам вероятнее всего придётся менять СSS вёрстки, для того, чтобы подстроить его под HTML виджетов.

2. Создание фильтра товаров на чистом коде

Разобравшись с виджетами, в уроке мы сразу же приступим ко второй реализации фильтра – при помощи кода.

Да, я знаю, что виджеты – это тоже по сути код 😁 Но я надеюсь, что вы поняли, что я имею ввиду.

  • Создадим те же самые фильтры – по цене, размеру и категории товаров.
  • Рассмотрим трудности, которые могут встретиться при создании фильтра таким способом.
Купить курс
  • 14 видеоуроков
  • Доступ к HTML + CSS курса
  • Доступ к теме WooCommerce, которая получится в результате
  • Уроки регулярно обновляются в соответствии с изменениями WooCommerce
  • Доступ навсегда
9000 р5400 р
Скидка 40% до 23 мая

Нажав на кнопку, вы соглашаетесь c условиями предоставления услуг и с обработкой персональных данных.