Фильтры WoodMart на мобильном: как собрать удобный off-canvas каталог без лишних плагинов

На компьютере фильтры магазина могут спокойно жить в боковой колонке. На смартфоне та же колонка легко съедает половину первого экрана и заставляет покупателя прокручивать десяток параметров ещё до товаров. В WoodMart это решается off-canvas-панелью: фильтры спрятаны за кнопкой и выезжают только тогда, когда нужны.

Сначала определите, какой магазин у вас собран

У WoodMart есть два сценария. Первый — стандартный Product Archive темы. Второй — собственный шаблон каталога через Dashboard → Layouts → Products archive. Настройка off-canvas для них отличается. Это главный момент, на котором часто теряют время: переключатель в Theme Settings включён, а кнопки всё равно нет, потому что архив уже заменён кастомным Layout.

Вариант 1. Стандартный каталог WoodMart

Если Products archive в Layouts не используется, настройка занимает несколько минут.

Важно: наличие виджетов в Appearance → Widgets ещё не означает, что sidebar будет показан. WoodMart отдельно управляет расположением sidebar для товарных архивов.

Вариант 2. Product Archive собран в Elementor

Для кастомного архива WoodMart использует структуру из двух внутренних контейнеров: один становится скрытой панелью, второй — контентом с товарами. Кнопка открытия размещается именно в контентной части.

Шаг 1. Назначьте роли контейнерам

Откройте настройки контейнера с фильтрами и найдите Column role for off-canvas layout. Выберите Off-canvas column. Для контейнера с товарами выберите Content column.

Шаг 2. Синхронизируйте устройства

Для обеих ролей должны быть выбраны совместимые устройства. Если sidebar назначен для mobile, а Content column — только для desktop, пара не соберётся корректно.

Шаг 3. Добавьте кнопку

В контейнер Products добавьте виджет Off-canvas button. Именно он открывает скрытую панель. Без него можно идеально настроить sidebar и всё равно оставить покупателя без способа его открыть.

Какие фильтры действительно нужны покупателю

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

• Цена — полезна там, где ассортимент заметно различается по стоимости.
• Размер / цвет / материал — используйте глобальные WooCommerce Attributes, а не произвольный текст в товарах.
• Наличие — полезно для каталогов с большим количеством временно отсутствующих позиций.
• Категория — оставляйте, если она помогает сузить большой ассортимент, а не повторяет текущий раздел.

Свежий Issue WooCommerce от 19 сентября 2026 года показывает ещё один технический нюанс: некорректное значение taxonomy filter сейчас может приводить к пустой выдаче. Поэтому при странном «товаров не найдено» полезно проверять не только WoodMart, но и сами query-параметры фильтра.

AJAX: включать или оставить обычную перезагрузку?

WoodMart умеет применять AJAX к фильтрам товарного архива. Для покупателя это приятнее: выбрал цвет — сетка обновилась без полного белого мигания страницы. Но AJAX увеличивает количество движущихся частей: скрипты, история URL, сторонние виджеты и оптимизаторы должны корректно переживать динамическое обновление.

В WooCommerce в 2026 году продолжается активная переработка Product Filters и Interactivity API. Поэтому после крупных обновлений WooCommerce проверяйте фильтры как отдельный бизнес-сценарий, а не ограничивайтесь тем, что главная страница «открылась без ошибки».

Если кнопка фильтра есть, но не открывается

Здесь нужен короткий conflict test. Делайте его на staging-копии, если магазин принимает реальные заказы.

1. Очистите page cache, object cache и CDN.
2. В WoodMart запустите регенерацию CSS, если проблема появилась после обновления темы.
3. Временно отключите Delay JS / Combine JS / Remove Unused CSS в плагине оптимизации.
4. Проверьте DevTools → Console: ошибки JavaScript выше по цепочке способны остановить инициализацию панели.
5. Проверьте, не заменён ли Product Archive шаблоном Elementor Pro Theme Builder.
6. Если используется WoodMart Layout Builder, ещё раз проверьте роли Off-canvas column / Content column.

Небольшой CSS для удобной кнопки

Этот код не «чинит» сломанную механику off-canvas. Он только делает уже рабочую кнопку заметнее и удобнее для касания.

.mp-mobile-filter-button {
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid #32fa00;
    border-radius: 10px;
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease;
}

.mp-mobile-filter-button:focus-visible {
    outline: 3px solid #32fa00;
    outline-offset: 3px;
}

.mp-mobile-filter-button:hover {
    box-shadow: 0 0 22px rgba(50, 250, 0, .18);
    transform: translateY(-1px);
}

Не забудьте про URL и SEO

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

После настройки проверяйте не только внешний вид: откройте несколько комбинаций, скопируйте URL, обновите страницу и убедитесь, что состояние каталога восстанавливается корректно. Это одновременно QA фильтров и защита от странных сценариев, когда пользователь отправляет ссылку на отфильтрованный каталог, а получатель видит другое.

Если после экспериментов магазин начинает отдавать серверные ошибки, используйте отдельный алгоритм — как диагностировать ошибку 500 в WordPress. А если проблема уходит глубже в PHP, поможет разбор Fatal Error и поиска источника сбоя.

Чек-лист перед публикацией

FAQ

Почему off-canvas включён в Theme Settings, но кнопки нет?

Сначала проверьте, не используется ли кастомный Products archive Layout. В нём off-canvas собирается внутри самого Layout: два контейнера с ролями плюс отдельный Off-canvas button.

Можно ли сделать фильтры WoodMart без отдельного AJAX-плагина?

Да. WoodMart имеет собственную работу с фильтрами товарного архива и AJAX shop. Сторонний плагин нужен только если его функциональность действительно выходит за рамки темы.

Почему после оптимизации перестала открываться панель?

Частый кандидат — задержка или объединение JavaScript. Временно отключите JS-оптимизацию и проверьте Console. Если панель ожила, возвращайте настройки оптимизации по одной.

Можно ли использовать Elementor Pro Theme Builder для архива?

Можно, но учитывайте, что он способен заменить штатную структуру WoodMart. Если нужна глубокая интеграция с WoodMart-фильтрами и off-canvas, обычно проще использовать Products archive в WoodMart Layout Builder.

Нужно ли индексировать все страницы фильтров?

Нет. Индексацию фильтров проектируют отдельно по семантике и спросу. Автоматическое превращение каждой комбинации параметров в SEO-страницу обычно создаёт много слабых URL.