WooCommerce Product Filters - Плагин WordPress
Это инструмент для создания фильтров товаров ajax, которые делают процесс поиска товаров в вашем магазине простым и быстрым.

Особенности плагина
Плагин предлагает мощные возможности фильтрации для товаров WooCommerce, позволяя пользователям эффективно навигировать и находить конкретные предметы на основе их предпочтений. Он улучшает опыт покупок, позволяя посетителям уточнять поиски продуктов по различным критериям, таким как ценовой диапазон, категория или атрибуты. Кроме того, он плавно интегрируется в WooCommerce, обеспечивая непрерывный и удобный интерфейс как для администраторов сайта, так и для клиентов.
Благодаря широкому спектру вариантов фильтрации, плагин дает возможность владельцам онлайн-магазинов предлагать персонализированный и нацеленный на конкретного покупателя опыт покупок. Он отображает соответствующие продукты на основе предпочтений клиента, что не только повышает удовлетворенность пользователей, но и увеличивает вероятность совершения покупок. Интуитивный дизайн и настраиваемые функции делают его ценным инструментом для оптимизации поиска товаров и улучшения общей пользовательской дружественности сайта.
Одним из ключевых преимуществ плагина является его гибкость в настройке, позволяющая владельцам сайтов настраивать систему фильтрации под свои конкретные потребности. Будь то установка простых фильтров по цене или более сложных вариантов на основе атрибутов, плагин обеспечивает высокую степень контроля и настройки. Эта гибкость гарантирует, что каждый онлайн-магазин может создать уникальный и нацеленный пользовательский опыт для своих покупателей.
Кроме того, эффективность плагина WooCommerce Product Filters в обработке и отображении отфильтрованных результатов способствует непрерывному путешествию по магазину. Динамическое обновление списка продуктов в реальном времени при применении фильтров позволяет клиентам мгновенно просматривать уточненные результаты поиска. Эта быстрая и отзывчивая функциональность улучшает вовлеченность пользователей и упрощает процесс поиска продуктов, способствуя более эффективному опыту покупок.
В заключение, плагин является ценным активом для сайтов, работающих на платформе WooCommerce, и стремящихся оптимизировать функциональность поиска продуктов. Реализуя передовые возможности фильтрации, он не только улучшает пользовательский опыт, но также помогает владельцам сайтов повысить конверсию и увеличить удовлетворенность клиентов. Его интуитивный интерфейс, настраиваемые функции и динамические варианты фильтрации делают его универсальным инструментом для улучшения общей производительности и удобства использования интернет-магазинов.
Спецификации:
| Дата выхода: | 11-10-2020 | |
| Дата обновления: | 10-12-2025 | |
| Тип расширения: | Платный | |
| Лицензия: | GPL | |
| Тематика: | Поиск и индексация для WooCommerce | |
| Совместимость: | W5.x W6.x | |
| Включает в себя: | Плагин | |
| Языковые пакеты: |
|
|
| Разработчик: | WooCommerce Plugins | |
| Рейтинг: | ||
Скачивание по подписке!
Вам необходимо авторизоваться на сайте и приобрести клубную подписку!
Поделись с друзьями!
Руководство по настройке WooCommerce Product Filters для каталога товаров
WooCommerce Product Filters нужен не просто для красивого блока с чекбоксами. В рабочем магазине фильтр становится частью навигации: покупатель выбирает размер, цвет, категорию, диапазон цены или статус наличия, а каталог должен быстро показать только подходящие товары. В этом руководстве разберём, как подготовить каталог, создать проект фильтров, вывести его на странице магазина, проверить результат и понять, почему отдельные элементы иногда не появляются.
Материал рассчитан на владельца магазина, администратора WordPress или разработчика, который уже имеет установленный WooCommerce и хочет аккуратно добавить фильтрацию без хаотичных экспериментов с темой. Здесь не будет инструкций по покупке или активации подписки. Фокус - настройка уже имеющегося расширения, практический сценарий, диагностика и выбор подходящего решения.
Отдельное внимание уделено двум особенностям продукта: редактору проектов фильтров в WooCommerce > Filters и связке с архивом товаров, виджетами и shortcodes. Эти места чаще всего определяют, будет ли фильтр полезным или превратится в блок, который занимает место, но не помогает покупателю.
Какую задачу решает фильтрация в WooCommerce
Фильтры нужны там, где обычная категория перестаёт быть достаточной. Категория отвечает на вопрос «что это за группа товаров», а фильтр отвечает на вопрос «какой именно товар подходит сейчас». Для магазина одежды это размер, цвет, сезон и диапазон цены. Для техники - бренд, объём памяти, диагональ, наличие и характеристики. Для каталога запчастей - совместимость, материал, тип детали и статус на складе.
WooCommerce Product Filters строит эту навигацию через отдельные проекты фильтров. В проект добавляются элементы: список флажков, радиокнопки, выпадающий список, цветовой список, блочный список, текстовый список, ползунок цены и кнопка. Затем проект связывается с архивом товаров, выводится через виджет или используется вместе с shortcode. Такой подход удобен, когда один магазин требует разные наборы фильтров для разных товарных групп.
Главная практическая мысль: плагин не исправляет плохо подготовленный каталог. Если у товаров нет нормальных глобальных атрибутов, если категории смешивают разные принципы, если цена у всех товаров в категории одинаковая, отдельные фильтры могут быть бесполезны или вовсе не показаться. Поэтому настройку лучше начинать не с дизайна фильтра, а с данных товара.
Есть и граница применимости. Если магазин небольшой и в каждой категории по несколько товаров, фильтр может только усложнить страницу. Если же каталог растёт, появляются вариации, покупатели ищут товары по признакам, а менеджер регулярно добавляет новые позиции, фильтры дают понятную структуру и снижают нагрузку на меню.
Кому подходит плагин и когда лучше выбрать другой путь
Расширение уместно для классических WooCommerce-магазинов, где основная витрина построена на архиве товаров, категориях, виджетных областях или страницах с shortcode [products]. Оно особенно полезно, если нужно собрать управляемый набор фильтров, использовать разные источники элементов и сохранить привычную логику WooCommerce.
Плагин подойдёт, если у вас есть:
- Каталог с десятками или сотнями товаров, где покупателю нужны признаки для быстрого отбора.
- Глобальные атрибуты WooCommerce, например
Color,Size,Brandили свои характеристики. - Категории и теги, которые действительно помогают уточнять выбор, а не дублируют друг друга.
- Потребность в AJAX-обновлении товаров, сортировке и пагинации без полной перезагрузки страницы.
- Задача вывести фильтр в боковой колонке, над каталогом или на отдельной странице с shortcode.
В сторону другого решения стоит смотреть, если магазин полностью собран на новых WooCommerce Blocks и фильтр должен работать именно внутри блока Products или Product Collection. Документация WooCommerce Product Filters прямо указывает, что shortcode [wcpf_filters] не применяется к WooCommerce Blocks. Для блочных тем у WooCommerce есть собственный Product Filters block, который работает в контексте Product Collection. Это не делает расширение плохим, но меняет выбор инструмента: классический архив и shortcode-сценарий - одна логика, блочный шаблон магазина - другая.
Перед установкой решите, где именно должен работать фильтр: на стандартной странице магазина, в категории, в виджетной области, на странице с shortcode или в блочном шаблоне. От этого зависит не только место вывода, но и список возможных ограничений.
Что проверить перед установкой и первым включением
Самая частая ошибка при настройке фильтров - начинать с интерфейса, когда данные товаров ещё не готовы. Плагин берёт элементы из категорий, тегов, атрибутов и таксономий. Если эти источники заполнены неровно, покупатель увидит пустые или странные варианты.
Проверьте структуру категорий
Категории лучше использовать для крупных разделов каталога: одежда, обувь, аксессуары, смартфоны, ноутбуки, расходники. Если категории начинают изображать свойства товара вроде «красный», «XL», «пластик», «до 1000», их труднее поддерживать и фильтровать. Такие признаки обычно должны быть атрибутами.
Перед включением фильтра откройте Products > Categories и проверьте, нет ли дублирующих веток. Если у вас есть категории Shoes, Men Shoes и Mens shoes, фильтр категорий будет выглядеть неаккуратно. Исправьте дерево заранее, иначе потом придётся одновременно чинить навигацию и фильтры.
Подготовьте глобальные атрибуты
Для фильтрации по размеру, цвету, материалу и бренду лучше использовать глобальные атрибуты из Products > Attributes, а не произвольные свойства внутри карточки товара. Глобальный атрибут даёт единый словарь значений. Благодаря этому Blue, blue и Синий не расползаются на три разных варианта без необходимости.
Проверьте несколько товаров из каждой ключевой категории. Если фильтр по размеру нужен в обуви, у товаров обуви должен быть назначен атрибут размера. Если цветовой фильтр нужен только для одежды, не нужно ожидать, что он появится в категории товаров без цвета. WooCommerce Product Filters умеет показывать релевантные фильтры, поэтому отсутствие элемента иногда говорит не об ошибке, а о неподходящих данных.
Оцените тему, кеш и способ вывода каталога
Фильтрация обновляет список товаров, пагинацию, сортировку и количество результатов. Документация плагина отдельно упоминает селекторы контейнеров товаров, пагинации, сортировки, счётчика результатов и заголовка страницы. Это значит, что тема должна иметь предсказуемую разметку, а кеширующие плагины не должны сохранять динамический результат так, будто это статичная страница.
Если магазин использует нестандартный шаблон категории, бесконечную прокрутку, конструктор страниц или агрессивный кеш, сразу планируйте тест на копии сайта. Не включайте все спорные настройки одновременно. Сначала добейтесь обычного фильтра по категории или атрибуту, затем добавляйте AJAX-пагинацию, сортировку и дополнительные селекторы.
Первый проект фильтров: от редактора до страницы магазина
После установки основной рабочий экран находится в WooCommerce > Filters. В редакторе есть две смысловые зоны: слева список элементов проекта, справа настройки текущего элемента или проекта целиком. Это похоже на сборку формы: вы добавляете поля, задаёте источник данных, определяете поведение и сохраняете проект.
Создание основы проекта
Начните с простого проекта для стандартной страницы магазина. Не пытайтесь сразу собрать десять фильтров. Для первого запуска достаточно трёх элементов: категория, один важный атрибут и цена. Такой набор быстро показывает, правильно ли плагин видит товары и обновляет каталог.
Минимальный набор для первого теста
- Откройте
WooCommerce > Filters. - Создайте новый проект и задайте понятное внутреннее название, например
Shop main filters. - Нажмите
Add Elementи выберите элемент списка для категории. - В источнике элементов выберите
Category, а в отображении оставьте только нужную часть дерева категорий. - Добавьте второй элемент для атрибута, например
ColorилиSize, и выберите источникAttribute. - Добавьте
Price Slider, если в выбранной группе товаров есть реальный диапазон цен. - Сохраните проект кнопкой
Saveна панели элементов.
На этом этапе не занимайтесь декоративной настройкой. Ваша цель - получить рабочую связку «элемент фильтра - товары - результат». Если базовый проект работает, его легко расширить. Если не работает, короткий проект проще диагностировать.
Связка с архивом товаров
Чтобы проект появился на странице магазина, перейдите в WooCommerce > Settings > Products и откройте вкладку Filters. В поле Filters for product archive выберите созданный проект и сохраните изменения. Это ключевой шаг: без него фильтр может быть создан в редакторе, но не появиться на архиве товаров.
Контроль после сохранения
После сохранения откройте страницу магазина в режиме обычного посетителя. Выберите одну категорию или атрибут и проверьте, меняется ли набор товаров. Затем сбросьте фильтр и убедитесь, что каталог возвращается к исходному состоянию. Если у вас включена AJAX-пагинация или AJAX-сортировка, отдельно проверьте переход на следующую страницу и изменение сортировки.
Элементы фильтра: что выбирать для категорий, атрибутов, цены и таксономий
В WooCommerce Product Filters важно различать два уровня: тип элемента и источник данных. Тип определяет, как покупатель взаимодействует с фильтром: флажок, радиокнопка, выпадающий список, цветовой список, ползунок цены. Источник определяет, откуда берутся значения: категории, атрибуты, теги или таксономии.
Списки с флажками и радиокнопками
Список с флажками полезен, когда покупатель может выбрать несколько значений. Например, цвет «чёрный» и «серый», материал «хлопок» и «шерсть», несколько брендов. Здесь нужно внимательно выбрать логический режим. В настройках элемента есть Query type: AND означает, что товар должен удовлетворять всем выбранным условиям, а OR - хотя бы одному. Для цвета чаще подходит OR, потому что покупатель хочет увидеть товары одного из нескольких цветов. Для строгих технических параметров иногда нужен AND, но его стоит тестировать на реальном наборе товаров.
Радиокнопки лучше использовать, когда вариантов много, но выбирать нужно один. Например, состояние наличия, один диапазон или одна коллекция. Они уменьшают риск пустого результата, потому что посетитель не может случайно собрать слишком узкую комбинацию.
Выпадающий список и текстовый список
Выпадающий список экономит место, но хуже показывает ассортимент. Он уместен для длинных справочников, например для брендов или размеров, где список в боковой колонке стал бы слишком высоким. Текстовый список работает лучше, когда значений немного и они должны быть видны сразу.
Если фильтр важен для принятия решения, не прячьте его без необходимости. Цвет, размер и цена часто должны быть видны без лишнего клика. Дополнительные признаки можно увести в выпадающий формат или свернуть через настройку отображения.
Цветовой и блочный список
Color List помогает, когда атрибут действительно является цветом или визуальным образцом. В документации есть отдельные настройки цвета, изображения, рамки и маркера. Не используйте цветовой список для абстрактных значений, где цвет не несёт смысла. Покупатель должен понимать, что кликает по образцу товара, а не по декоративной кнопке.
Box List удобен для размеров, числовых диапазонов и коротких меток. Он часто воспринимается быстрее обычного списка, но требует аккуратного дизайна. Если значения длинные, например названия моделей или материалов, блочные кнопки будут ломать сетку.
Ползунок цены
Price Slider нужен только там, где у товаров есть диапазон цен. Если все товары в категории стоят одинаково, документация прямо объясняет, что такой фильтр может не появиться или не работать как ожидается: ползунку нечего выбирать. Поэтому при проверке ползунка всегда открывайте категорию с разными ценами.
Для URL цены можно выбрать формат параметра. Один вариант передаёт минимум и максимум через одно значение, другой использует отдельные параметры для минимальной и максимальной цены. Выбирайте тот формат, который проще поддерживать в вашей аналитике и кешировании. Если вы не анализируете URL фильтров отдельно, оставьте более понятный для команды вариант и не усложняйте настройку.
Настройки после установки, которые влияют на результат
Общие настройки расширения находятся в WooCommerce > Settings > Products > Filters. Это не декоративный раздел. Здесь задаётся, какой проект обслуживает архив, как вести себя с отсутствующими товарами, что делать с прокруткой, миниатюрами, счётчиками и обновлением компонентов темы.
Фильтр для архива товаров
Filters for product archive выбирает проект, который будет использоваться на странице магазина. Если фильтр не виден на Shop page, это первое место для проверки. Часто проект создан, элементы настроены, но архив не связан с проектом.
Для типового магазина держите один основной проект для архива и отдельные проекты для специальных страниц. Так проще понять, какой набор фильтров отвечает за какой результат. Если вы меняете проект для архива, после сохранения откройте магазин в приватном окне и проверьте, что посетитель видит новый набор.
Товары не в наличии
Настройка Out of stock products определяет, как фильтры относятся к товарам без наличия. Доступны режимы без действия, постоянного скрытия и скрытия только при активных фильтрах. Для большинства магазинов безопаснее начать с режима без действия, затем проверить реальные категории и только после этого скрывать товары из фильтрованных результатов.
Если магазин часто принимает предзаказы или показывает товары «скоро в наличии», агрессивное скрытие может ухудшить навигацию. Если же покупатель должен видеть только доступные позиции, скрытие при активных фильтрах уменьшит количество разочаровывающих кликов. Проверяйте это на сценарии покупателя, а не только в админ-панели.
Прокрутка, миниатюры и счётчики
Scroll top прокручивает страницу к началу списка товаров после обновления фильтра. Это полезно на длинных страницах, где блок фильтра находится выше каталога. Но если тема уже делает свою прокрутку или использует липкую боковую колонку, включайте параметр осторожно и проверяйте поведение на мобильном экране.
Adaptive thumbnails помогает подобрать размер миниатюры под место вывода. Эта настройка особенно полезна, если после фильтрации товары меняют сетку или тема использует разные размеры изображений в каталоге. Large product counts и Faster product counts относятся к счётчикам рядом со значениями фильтра. На крупных каталогах счётчики могут быть полезны, но их точность и скорость нужно проверять отдельно.
Селекторы темы и сценарий после обновления
Search selectors помогает обновлять компоненты темы вроде сортировки, пагинации и счётчика результатов. Если после выбора фильтра товары меняются, но сортировка, количество результатов или пагинация остаются старыми, проверьте этот параметр и селекторы проекта.
Script after update позволяет выполнить JavaScript после обновления списка товаров. Документация приводит пример location.reload();, но применять его стоит только как осторожный обходной путь, когда тема плохо дружит с AJAX-обновлением. Полная перезагрузка сохраняет выбранные фильтры, но убирает часть преимущества AJAX. Сначала попробуйте настроить селекторы, кеш и конфликтующие скрипты, а перезагрузку оставьте как последний вариант.
Безопасная стратегия настройки: включили один параметр, сохранили, проверили страницу магазина, сделали скрин или заметку, только потом двигаетесь дальше. Так легче понять, какая настройка изменила поведение.
Правила показа и логика релевантных фильтров
Одна из сильных сторон WooCommerce Product Filters - элементы можно показывать не везде. В настройках элемента есть Display rules, где задаются условия по категории, атрибуту, таксономии, тегу или странице. Это помогает не показывать покупателю фильтр «Размер обуви» в разделе аксессуаров или фильтр «Материал корпуса» в разделе одежды.
Правила показа особенно важны для смешанных каталогов. Если в магазине есть одежда, косметика и электроника, один универсальный фильтр будет выглядеть перегруженно. Правильнее собрать проект, где часть элементов показывается только в релевантных категориях. Пользователь видит меньше вариантов, но каждый вариант имеет смысл.
Как не сломать фильтрацию условиями
Начинайте с простого правила. Например, показывать элемент Size только для категории Clothing. После проверки добавляйте второе правило. Если сразу собрать сложную комбинацию AND и OR, потом трудно понять, почему элемент исчез.
Если фильтр не отображается в категории, проверьте три вещи:
- Есть ли в товарах этой категории данные, которые соответствуют источнику элемента.
- Не исключает ли элемент сама настройка
Display rules. - Не скрывает ли плагин элемент как нерелевантный, потому что все товары имеют одинаковое значение или нет доступных вариантов.
Для больших магазинов это не мелочь, а часть проектирования каталога. Правила показа помогают избежать пустых фильтров, но требуют дисциплины в товарных данных.
Вывод фильтров через виджеты и shortcodes
Помимо архива товаров, плагин поддерживает виджеты и shortcodes. Виджет Product Filters выводит элементы из выбранного проекта. Виджет Notes for Product Filters показывает активные выбранные параметры и позволяет быстро удалить отдельный фильтр через x. Это полезно, когда покупатель применил несколько условий и должен видеть, почему каталог сузился.
Когда использовать виджет
Виджет хорош для классической боковой колонки магазина или области над списком товаров. Он понятен редактору сайта и не требует вставки кода в страницу. Но виджет зависит от того, есть ли в теме нужная область вывода и не конфликтует ли она с текущим шаблоном магазина.
Если тема использует блоковый редактор виджетов, проверяйте вывод в реальном шаблоне. Иногда виджет есть в админ-панели, но на конкретной странице категория использует другой шаблон или скрытую область.
Shortcodes для кастомной страницы каталога
Главный shortcode фильтра выглядит так:
[wcpf_filters id="123"]
Для заметок активных фильтров используется:
[wcpf_filter_notes filter-id="123"]
Если вы выводите товары через встроенный WooCommerce shortcode [products], документация WooCommerce Product Filters разрешает добавить параметр filter-id. Для страницы с пагинацией пример выглядит так:
[wcpf_filters id="123"]
[wcpf_filter_notes filter-id="123"]
[products paginate="true" filter-id="123"]
Если на такой странице нужна сортировка, добавляется параметр use-sorting:
[products paginate="true" use-sorting="true" filter-id="123"]
Критично, чтобы идентификатор в id и filter-id совпадал. Если фильтр относится к одному проекту, а список товаров слушает другой идентификатор, пользователь увидит форму, но результат не будет соответствовать ожиданиям.
Ограничение WooCommerce Blocks
Shortcode [wcpf_filters] не должен рассматриваться как универсальный способ фильтровать любой блок товаров. В документации плагина указано, что он не поддерживается в WooCommerce Blocks и не применяет фильтрацию к блоку Products. Если страница магазина построена на блоке Product Collection, сравните задачу с родным блоком Product Filters в WooCommerce, который работает в блочном контексте.
Практический вывод простой: для shortcode-страницы используйте [products] и filter-id; для блочного магазина не смешивайте разные механики без проверки. Сначала выберите технологию вывода каталога, потом подбирайте фильтр.
Практический пример: фильтр для магазина одежды
Разберём сценарий, который можно адаптировать под реальный магазин. Цель - создать страницу каталога одежды, где покупатель фильтрует товары по категории, размеру, цвету и цене, видит активные параметры и может сбросить лишний выбор.
Цель и подготовка
Нужно получить страницу, где пользователь открывает раздел одежды, выбирает размер M, цвет Black, диапазон цены и сразу видит подходящие товары. Для подготовки проверьте:
- У товаров одежды назначены категории, например
Hoodies,T-shirts,Accessories. - Созданы глобальные атрибуты
SizeиColor. - У тестовых товаров есть разные цены, иначе
Price Sliderне даст полезной проверки. - На странице используется стандартный архив WooCommerce или shortcode
[products], а не неподдерживаемый для этого shortcode блок товаров.
Шаги настройки
Сборка проекта
- Создайте проект в
WooCommerce > Filtersи назовите егоClothing filters. - Добавьте элемент категории. В источнике выберите
Category, а в отображении оставьте нужную ветку каталога. - Добавьте элемент
Box Listдля размера. Источник -Attribute, атрибут -Size. Для размеров блочный формат обычно читается быстрее длинного списка. - Добавьте
Color Listдля цвета. Проверьте, что значения цвета соответствуют реальным товарам, а не случайным названиям. - Добавьте
Price Sliderи оставьте видимым только там, где цены отличаются. - Создайте кнопку сброса через элемент
Buttonс действиемReset, если пользователю нужно быстро очистить выбор. - Свяжите проект с архивом в
WooCommerce > Settings > Products > Filtersили вставьте shortcodes на отдельную страницу.
Проверка результата
Проверка глазами покупателя
Откройте каталог в приватном окне. Выберите размер, затем цвет. В URL должны появляться параметры фильтра, список товаров должен сузиться, а заметки активных фильтров должны показывать выбранные значения, если вы вывели соответствующий виджет или shortcode. Затем нажмите сброс и проверьте, что каталог вернулся к исходному виду.
Если товаров стало ноль, не спешите винить плагин. Проверьте, есть ли товар, который одновременно имеет выбранный размер, цвет и попадает в диапазон цены. Если таких товаров нет, фильтр честно показывает пустой результат. Для магазина это сигнал: либо комбинация слишком узкая, либо товарные данные заполнены непоследовательно.
Нюанс для страниц с акциями и подборками
Если вы делаете отдельную страницу распродажи через [products on_sale="true"], фильтрация должна быть привязана к тому же filter-id. Не смешивайте фильтр основного архива с отдельной подборкой без проверки. Пользователь ожидает фильтровать только товары внутри подборки, а не весь магазин.
Как проверить качество фильтра на реальном сайте
Рабочий фильтр - это не только блок, который реагирует на клики. Он должен сохранять понятность каталога, не ломать сортировку, не создавать слишком много пустых комбинаций и не мешать мобильному просмотру. Проверку лучше разделить на несколько уровней.
Функциональная проверка
Сначала проверьте базовые действия:
- Один выбранный фильтр меняет список товаров.
- Два выбранных фильтра дают ожидаемую комбинацию, а не случайный набор.
- Кнопка сброса возвращает исходный список.
- Пагинация после фильтрации открывает следующую страницу уже отфильтрованного результата.
- Сортировка не сбрасывает выбранные параметры.
- Активные заметки показывают применённые значения и позволяют удалить их по одному.
Проверка данных
Откройте несколько товаров, которые должны попадать в фильтр, и проверьте их атрибуты. Если фильтр по цвету не находит товар, иногда причина проста: цвет добавлен как локальный атрибут конкретного товара или написан другим значением. Для стабильной фильтрации используйте единый словарь терминов.
Проверьте крайние случаи: товары без цены, товары не в наличии, вариативные товары, товары с несколькими значениями одного атрибута. Именно они чаще всего показывают, насколько аккуратно настроен каталог.
Проверка интерфейса
На десктопе фильтр может выглядеть хорошо в боковой колонке, но на мобильном экране занимать половину первого просмотра. Если тема не даёт удобного мобильного контейнера, подумайте, какие элементы можно свернуть, какие сделать выпадающими, а какие оставить только на странице категории. Не перегружайте первый экран магазина фильтрами, если покупатель ещё не увидел сами товары.
После включения AJAX-поведения проверьте, не прыгает ли страница, не исчезает ли заголовок категории и не остаётся ли старый счётчик результатов. Если остаётся, вернитесь к настройкам компонентов и селекторов.
Безопасное улучшение внешнего вида через CSS Class
Документация плагина показывает поле CSS Class у элементов. Это безопасный способ дать конкретному фильтру свой класс и оформить его через тему, не меняя файлы плагина. Такой подход лучше правки шаблонов, если нужно только немного улучшить читаемость.
Например, добавьте в поле CSS Class у блока фильтра значение catalog-filter-panel, а затем внесите CSS в дочернюю тему или в штатное место для пользовательских стилей вашей темы:
.catalog-filter-panel {
padding: 16px;
border: 1px solid #e2e5ea;
border-radius: 8px;
background: #ffffff;
}
.catalog-filter-panel .wcpf-title {
margin-bottom: 10px;
font-weight: 600;
}
.catalog-filter-panel input[type="checkbox"],
.catalog-filter-panel input[type="radio"] {
margin-right: 8px;
}
Этот фрагмент не зависит от внутренней логики фильтра и не меняет запросы к товарам. Он только добавляет отступы, рамку и аккуратное расстояние у элементов выбора. Если после обновления темы селекторы изменились, удалите CSS или оставьте только общий класс. Откат простой: уберите класс из элемента фильтра или удалите CSS из дочерней темы.
Если нужно менять разметку самих элементов, у плагина есть механизм переопределения шаблонов через папку woocommerce-product-filter в теме. Используйте его только для осознанной доработки и сначала сделайте копию шаблона в дочерней теме. Для обычной стилизации чаще достаточно поля CSS Class.
Почему фильтры не работают или показываются не так, как ожидалось
Диагностику удобнее вести от простого к сложному. Не меняйте сразу тему, кеш, правила показа и shortcodes. Найдите симптом, проверьте наиболее вероятную причину и только потом переходите к следующему шагу.
Фильтр не виден на странице магазина
Что проверить первым
Симптом: проект создан, но на Shop page нет фильтра. Возможная причина - проект не выбран в Filters for product archive. Откройте WooCommerce > Settings > Products > Filters, выберите нужный проект и сохраните изменения.
Если проект выбран, проверьте тему и место вывода. В некоторых шаблонах боковая колонка не используется, поэтому виджет есть в админ-панели, но не появляется на странице. Для быстрой проверки можно вывести фильтр на тестовой странице через shortcode.
Фильтр пропадает в отдельных категориях
Проверка данных и правил
Симптом: на общей странице магазина фильтр есть, а в конкретной категории его нет. Проверьте Display rules у элемента и наличие подходящих товаров. Некоторые элементы не показываются, если они нерелевантны текущему набору товаров. Например, ползунок цены не имеет смысла там, где у всех товаров одинаковая цена.
Если данные и правила выглядят корректно, используйте инструмент Product Filter Cache в WooCommerce > Status > Tools. Документация плагина указывает этот путь как способ восстановить фильтры на категориях и архивных страницах.
Видны заголовок и кнопка, но нет вариантов фильтра
Симптом: область фильтра есть, но значения пустые. Обычно это значит, что элементы проекта не находят подходящих значений в текущем контексте. Проверьте источник элемента: Attribute, Category, Tag или Taxonomy. Затем откройте товары текущей категории и убедитесь, что у них назначены нужные термины.
Если проблема только с ценой, проверьте диапазон цен. Price Slider требует реальной разницы между минимальной и максимальной ценой. В категории с одинаковой ценой он может не дать видимого выбора.
Счётчики не совпадают с количеством товаров
Симптом: рядом со значением фильтра стоит одно число, а после клика видно другое количество результатов. Для крупных каталогов документация предлагает обратить внимание на Large product counts. Также проверьте, не скрываются ли товары не в наличии и не влияет ли кеш на страницу после AJAX-обновления.
Если магазин большой, счётчики лучше проверять на нескольких категориях: маленькой, средней и самой крупной. Так видно, является ли проблема общей или связана с одной перегруженной товарной группой.
Фильтр работает, но сортировка или пагинация сбиваются
Симптом: товары обновляются, но сортировка, пагинация или счётчик результатов ведут себя отдельно. Проверьте, включены ли компоненты для обновления в проекте, настроены ли Pagination ajax и Sorting ajax, а также корректны ли селекторы темы. Если тема нестандартная, плагин может не найти нужный контейнер автоматически.
Для проверки временно отключите агрессивные оптимизации JavaScript и кеш страницы архива. Если поведение исправилось, возвращайте оптимизации по одной и исключайте динамические страницы магазина из неподходящего кеширования.
Фильтры не применяются к блоку товаров
Симптом: shortcode фильтра вставлен на страницу, но блок Products или Product Collection не реагирует. Это ожидаемое ограничение для [wcpf_filters]. Используйте связку с [products] и filter-id или переходите на блочные фильтры WooCommerce для блочного шаблона.
Если после каждого изменения результат становится хуже, вернитесь к самому простому проекту: один атрибут, один список товаров, выключенные спорные AJAX-опции. Рабочая минимальная схема помогает отделить проблему данных от проблемы темы.
Вопросы по настройке и ограничениям WooCommerce Product Filters
Можно ли использовать плагин без глобальных атрибутов WooCommerce?
Можно использовать категории, теги и таксономии, но для свойств вроде размера, цвета, материала и бренда глобальные атрибуты обычно надёжнее. Они дают единый список значений и уменьшают риск дублей.
Почему фильтр по цене не отображается в категории?
Проверьте, есть ли в этой категории разные цены. Если все товары имеют один и тот же диапазон, ползунок цены может быть нерелевантен. Также проверьте правила показа элемента.
Что выбрать: автоматическое применение или кнопку фильтра?
Автоматическое применение удобно для коротких фильтров и быстрых каталогов. Кнопка лучше подходит для сложных наборов, где покупатель сначала выбирает несколько условий, а потом применяет их одним действием. Если выбираете кнопку, добавьте элемент Button с действием Filter.
Работает ли shortcode с WooCommerce Blocks?
Shortcode [wcpf_filters] не применяет фильтрацию к WooCommerce Blocks. Для страницы на блоках используйте родные блочные фильтры WooCommerce или перестройте страницу на shortcode [products], если вам нужна именно логика этого расширения.
Можно ли фильтровать по брендам?
В проекте можно выбрать источник Taxonomy, если бренд реализован отдельной таксономией, например через расширение для брендов. Не называйте это универсальной поддержкой любого брендинга: сначала проверьте, какая таксономия реально существует на вашем сайте.
Что делать, если после фильтрации не обновляется пагинация?
Проверьте настройки проекта: компоненты для обновления, Pagination ajax, селектор пагинации и совместимость темы. Если тема выводит пагинацию нестандартно, может понадобиться ручная настройка селекторов.
Нужно ли индексировать фильтры поисковыми системами?
Не открывайте все комбинации фильтров для индексации без SEO-плана. Параметры фильтра в URL полезны для пользователя и аналитики, но большое количество комбинаций может создать лишние страницы. Для поискового трафика лучше отдельно продумывать категории, посадочные страницы и правила индексации.
Когда WooCommerce Product Filters будет удачным выбором
Плагин хорошо подходит для магазина, где товары уже структурированы через категории, атрибуты, теги и таксономии, а витрина работает на классическом архиве WooCommerce, виджетах или shortcode-страницах. В этом случае WooCommerce Product Filters даёт понятный путь: создать проект, добавить элементы, связать его с архивом, вывести заметки активных фильтров и проверить результат на реальных товарах.
Если магазин построен на блочных шаблонах, у вас много мобильного трафика, нужны SEO-настройки фильтрованных страниц или есть спорные отзывы о совместимости в вашей связке темы и WooCommerce, не пропускайте тест на копии сайта. Проверьте один проект, одну категорию, один атрибут и только после этого расширяйте фильтры на весь каталог.
Когда базовый сценарий проверен и вы понимаете ограничения, можно получить версию для WordPress, установить его на тестовую копию магазина и пройти по чек-листу из этого руководства: данные товаров, проект фильтров, архив, shortcodes, результат, диагностика и откат спорных настроек.


