Перейти к содержимому
BIS Arts
  • Услуги
    • Создание сайта под ключ
    • Одностраничный лендинг-сайт
    • Многостраничный сайт
    • Интернет-магазин
    • Обслуживание и доработки сайта
    • Разработка логотипа
  • Уроки
  • Портфолио
  • Отзывы
  • Контакты
  • Услуги
    • Создание сайта под ключ
    • Одностраничный лендинг-сайт
    • Многостраничный сайт
    • Интернет-магазин
    • Обслуживание и доработки сайта
    • Разработка логотипа
  • Уроки
  • Портфолио
  • Отзывы
  • Контакты
Whatsapp Telegram-plane
+7(900)247-59-69
Главная / Уроки / Woocommerce / Как сделать фильтр товаров в Woocommerce

Как сделать фильтр товаров в Woocommerce

  • 24 января, 2020
  • Один комментарий
Содержание

В Woocommerce фильтр товаров можно сделать с помощью встроенного функционала, а можно с помощью плагина. Мы рассмотрим оба варианта.

Виды фильтров товаров

В Woocommerce предусмотрено два вида фильтрации товаров:

  • Фильтр по цене
  • Фильтр по атрибутам

Фильтр товаров по цене

Фильтр по цене настраивать не нужно, его нужно только активировать, установив в нужном месте соответствующий виджет. Для этого в админ панели переходим во вкладку "внешний вид/виджеты" и выбираем из списка "Фильтр товаров по цене". Затем, в зависимости от вашей темы, вставляем виджет в нужную ячейку. Настроек у виджета нет, кроме возможности поменять название.

Фильтр товаров по атрибутам

Чтобы настроить фильтр по атрибутам, нужно сначала создать необходимые атрибуты, а потом у нужных товаров их прописать.

Для этого идём во вкладку "товары/атрибуты". Там создаём нужные атрибуты и их значения.

Например создаём атрибут "бренд" со значениями "Liqui Moly", "Motul", "Shell" и т.п.

Настройка фильтров по атрибутам

После этого переходим в интересующие нас товары и присваиваем им необходимые атрибуты.

добавление атрибутов товарам в Woocommerce

После настройки всех атрибутов, переходим в раздел виджеты и добавляем "фильтр по атрибутам". Данный виджет имеет настройки. Можно изменить тип отображения (список или выпадающий список) и поменять вид сортировки ("и/или" - суммируются атрибуты при фильтрации или нет).

добавление фильтра товаров в Woocommerce

В результате мы получим следующую картину.

Woocommerce фильтр товаров

Ещё есть один виджет "активные фильтры", который показывает, какие атрибуты в данный момент используются для фильтрации товаров. В принципе он дублирует работу двух предыдущих виджетов, так как по ним и так видно, что сейчас задействовано в фильтрах - поэтому его можно и не использовать.

Плагин фильтра товаров для Woocommerce

Вывод фильтров стандартными средствами немного неудобен, так как для каждого атрибута нужно добавлять отдельный виджет. Да и внешний вид "по умолчанию" выглядит не очень симпатично. Поэтому для реализации этого функционала можно использовать плагин Premmerce WooCommerce Product Filter.

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

плагин Premmerce WooCommerce Product Filter

Далее идём в виджеты и добавляем "Premmerce активные фильтры" и "Premmerce фильтры". В результате получаем следующий вид.

Woocommerce фильтр товаров

Один ответ

  1. Сергей Кизим:
    09.01.2025 в 23:36

    Спасибо за рекомендацию, Premmerce вроде неплохо выглядит на первый взгляд. Буду пилить )

    Ответить

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Категории
Сайтостроение
Сайтостроение
WordPress
WordPress
WooCommerce
Elementor
elementor
Дизайн
Монетизация
Монетизация
реклама
BIS Arts

Услуги по созданию и обслуживанию сайтов

  • Услуги
  • Портфолио
  • Отзывы
+7 (900) 247-59-69
пн-пт с 10:00 до 19:00
Whatsapp Telegram Envelope
Copyright © 2013 — 2025 BIS Arts
Политика конфиденциальности
  • Услуги
    • Создание сайта под ключ
    • Одностраничный лендинг-сайт
    • Многостраничный сайт
    • Интернет-магазин
    • Обслуживание и доработки сайта
    • Разработка логотипа
  • Уроки
  • Портфолио
  • Отзывы
  • Контакты
  • +7 (900) 247-59-69
  • Написать в Whatsapp
  • Написать в Telegram
Свяжитесь с нами
  • Позвонить
  • Написать в WhatsApp
  • Написать в Telegram
  • Написать письмо
Позвонить
Написать в WhatsApp
Написать в Telegram
Написать письмо