Фильтр товаров для WooCommerce: собственный модуль для «МодульСтроя»

При обновлении сайта компании «МодульСтрой» мы разработали собственный плагин фильтрации товаров — Samolet WooCommerce Filter. Он помогает подобрать строительные материалы по характеристикам и цене, а владельцу сайта — настроить отдельный набор фильтров для каждого раздела каталога.

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

Задача: учитывать различия между товарами

Один общий набор характеристик неудобен для неоднородного каталога. Параметры бетона нужны в разделе «Бетон, раствор», но в другой категории покупатель будет выбирать материал по другим свойствам. Поэтому в модуле предусмотрели настройки для каждой товарной категории.

Фильтр использует уже существующие данные WooCommerce: товары, категории, цены и глобальные атрибуты. Для бетона подключили марку, класс прочности, морозостойкость и водонепроницаемость. В интерфейсе также есть поиск по названию и диапазон стоимости.

Как покупатель подбирает подходящий материал

Посетитель открывает категорию и отмечает нужные характеристики. Например, выбирает марку М150 и класс прочности В10. На снимке, сделанном 11 октября 2026 года, такому сочетанию соответствуют два товара. Количество зависит от состава каталога и заполненных свойств на момент просмотра.

Несколько значений одной характеристики расширяют выбор. Если отметить М150 и М200, фильтр покажет товары любой из этих двух марок. Разные характеристики применяются совместно: выбранная марка и класс прочности должны совпасть у одного товара. Это позволяет постепенно уточнять запрос — от нескольких подходящих марок до конкретного сочетания свойств.

Активные условия появляются над фильтром отдельными метками. Покупатель видит, что именно ограничивает выдачу, и может убрать одну характеристику, сохранив остальные. Для возврата к исходному каталогу предусмотрен общий сброс.

Рядом со значениями отображаются счётчики подходящих товаров. Они учитывают условия, выбранные в других группах. Недоступные невыбранные варианты блокируются: посетитель сразу видит, какие сочетания доступны при текущем отборе. Если подходящих товаров нет, каталог показывает сообщение и предлагает сбросить фильтры.

Поиск по названию и диапазону цены

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

Стоимость можно задать двумя способами: ввести значения «от» и «до» или передвинуть границы ползунка. Числовые поля позволяют указать точный бюджет, а ползунок — быстро изменить диапазон без набора цифр.

На следующем снимке диапазон 4 500–5 500 рублей применён вместе с маркой М150 и классом В10. В выдаче остаётся товар, который соответствует всем этим условиям. Здесь цена уточняет уже выбранные характеристики.

Обновление каталога и ссылка на выбранные условия

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

Выбранные условия сохраняются в адресе страницы. Ссылку можно скопировать, передать коллеге или открыть повторно с тем же отбором. Кнопки браузера «Назад» и «Вперёд» восстанавливают предыдущие состояния фильтра. Сортировка и переход между страницами результатов тоже сохраняют условия.

Предусмотрен и обычный режим работы: если JavaScript отключён, форма применяет фильтры через обновление страницы. Возможность отбора товаров сохраняется, хотя способ обновления интерфейса меняется.

На телефоне — отдельная панель фильтров

На компьютере параметры располагаются рядом с карточками. На телефоне и планшете фильтр открывается по кнопке «Фильтры» в отдельной выезжающей панели. Так характеристики получают достаточно места на узком экране.

Панель остаётся открытой после обновления результатов. Можно последовательно выбрать марку, класс прочности и стоимость, не открывая фильтр заново после каждого действия. Закрыть её можно крестиком, нажатием на затемнение или клавишей Escape. За панелью блокируется прокрутка страницы; для работы с клавиатуры предусмотрено управление фокусом.

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

Как владелец сайта управляет фильтрами

В панели WordPress появился отдельный раздел «Фильтр товаров». Администратор выбирает категорию и задаёт, какие элементы должны видеть её посетители: поиск по названию, диапазон цены и нужные характеристики.

Для атрибутов можно изменить публичные подписи и порядок отображения. Например, марку поставить выше класса прочности, а техническое название характеристики заменить понятной покупателю формулировкой. Эти настройки позволяют выстроить фильтр под логику выбора конкретного материала.

Здесь есть важная зависимость от данных каталога. Новую характеристику сначала создают как глобальный атрибут WooCommerce и заполняют её значения у товаров. Затем подключают атрибут к фильтру нужной категории. Плагин использует эти свойства при отборе; их содержание задаёт администратор.

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

Отдельные страницы для востребованных сочетаний

Фильтр может создавать множество комбинаций параметров. Для обычных результатов отбора предусмотрены ограничения индексации и указание основной страницы категории. Это помогает управлять техническими вариантами адресов, которые возникают при выборе условий.

Для сочетаний, под которые нужна самостоятельная посадочная страница, предусмотрен отдельный реестр SEO-страниц. Администратор выбирает комбинацию и готовит для неё собственный адрес, заголовок, поисковые метаданные и текст. Например, на сайте есть страница «Бетон М150 класса В10».

Такие страницы создаются осознанно: под определённую группу товаров и понятную задачу посетителя. Модуль позволяет разделить обычный подбор в каталоге и подготовленные страницы с самостоятельным содержанием.

Опубликованные страницы, разрешённые к индексации, включаются в отдельную XML-карту через интеграцию с Yoast SEO. Если посетитель дополнительно уточняет фильтры на такой странице, новые комбинации снова ограничиваются от индексации. Само наличие посадочной страницы не гарантирует позиции или трафик: модуль даёт средства для её подготовки и управления.

Самостоятельный плагин для других каталогов

Samolet WooCommerce Filter отделён от проектного плагина «МодульСтроя». Техническое название разработки — samolet-woo-filter. Он работает с WordPress и WooCommerce и не требует Elementor. Расположение и оформление фильтра при этом могут зависеть от темы сайта.

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

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

В этом проекте мы связали подбор товара с тем, как устроен сам каталог: характеристиками конкретных категорий, понятными условиями отбора и настройками в панели WordPress. При переносе такого подхода на другой магазин первым шагом будет разбор его товаров и способов выбора — он определит, какие фильтры действительно нужны покупателю.