Off-canvas фильтр товаров WooCommerce: выезжающая панель Slideout

4 November 2026

Off-canvas фильтр товаров WooCommerce не загромождает страницу магазина: фильтр ждёт в панели у края экрана и выезжает, когда посетитель нажимает вкладку или кнопку Фильтр (Filter). В HUSKY это встроено как расширение Slideout, так что выдвижная панель темы или плагин всплывающих окон не нужны. В этом руководстве объясняется, как работает панель, как ограничить её страницами магазина и категорий, как открывать её своей кнопкой и закрывать после фильтрации, а также как исправить панель, которая не прокручивается, прячется за шапкой или вообще не появляется.

Выезжающая панель, мобильный режим или выдвижная панель темы

HUSKY предлагает три способа держать фильтр скрытым, пока он не понадобится. Выберите один на страницу; их сочетание даёт два фильтра или кнопку, которая ничего не может открыть.

Slideout (Продвинутые (Advanced) → Slideout или шорткод [woof_slideout]): панель, закреплённая у левого, правого, верхнего или нижнего края окна, с вкладкой, которая её открывает. Работает на компьютерах и телефонах. Именно о ней это руководство.
Мобильный режим: только на телефонах фильтр заменяется кнопкой Открыть фильтр (Open filter), которая открывает его полноэкранной панелью. См. руководство по мобильному фильтру.
Автоматический фильтр с Скрывать автоматический фильтр по умолчанию (Hide auto filter by default) = Да: кнопка над товарами, которая раскрывает фильтр поверх сетки. См. горизонтальный фильтр над товарами.

Выдвижная панель или off-canvas сайдбар темы либо конструктора страниц тоже подходит, если она лишь показывает и скрывает HTML фильтра, который уже есть на странице при загрузке. Если панель вставляет своё содержимое позже, форма так и не инициализируется, и клики ничего не делают; как распознать такой случай, показывает руководство по Elementor. Таким панелям также нужен собственный код для закрытия после AJAX-фильтрации, он описан в статье разные фильтры для мобильных и десктопа.

Включение выезжающей панели

Slideout — встроенное расширение, и оно всегда активно. Его настройки находятся в WooCommerce → Настройки → Фильтр товаров → Продвинутые (Advanced) → Slideout:

Глобальная видимость (Global visibility): Показывать (Show) автоматически добавляет панель на страницы WooCommerce.
Кнопка как (Button as): как изображение (as Image) использует Изображение Slideout (Slideout image) размера, заданного опцией Размер изображения кнопки (Button image size); как текст (as Text) показывает на вкладке Текст Slideout (Slideout text).
Позиция (Position): край, от которого выезжает панель. Смещение (Offset) — её расстояние от верха окна (левая и правая позиции) или от левого края (верхняя и нижняя).
Действие (Action): Клик (Click) или Наведение (Hover). На телефонах наведения нет, поэтому для панели, предназначенной для них, используйте Клик (Click).
Размер контейнера (Container size): ширина и высота панели. При включённой Глобальной видимости (Global visibility) и незаданной ширине панель имеет ширину 350px.
Состояние после инициализации (State after init): Нет (No) оставляет панель закрытой при загрузке страницы.
Мобильное поведение (Mobile behavior): Показывать на всех устройствах (Show on all devices), Показывать только на мобильных (Show only on mobile) или Показывать только на десктопе (Show only on desktop).

При включённой Глобальной видимости (Global visibility) плагин выводит в подвале страницы [woof_slideout ...][woof][/woof_slideout]: обычную форму фильтра внутри панели с position: fixed, припаркованной за пределами окна. Клик по вкладке выдвигает её, клик в любом месте вне панели задвигает обратно; кнопки закрытия внутри нет. Поскольку форма с самого начала является частью страницы, все типы фильтров работают так же, как в сайдбаре, включая режим AJAX.

Две особенности в версии 3.4.6. Во-первых, «страницы магазина» в этой опции — это каждая страница, где is_woocommerce() WooCommerce возвращает true, и это включает страницы одного товара. Во-вторых, глобальная панель записывает текст вкладки в шорткод без кавычек, поэтому текст из нескольких слов обрезается на первом пробеле: «Show filters» превращается в «Show». Используйте там текст из одного слова или шорткод ниже, где его можно взять в кавычки. Мобильное поведение (Mobile behavior) определяется на сервере по идентификации браузера, поэтому кэш страниц должен хранить отдельные копии для телефонов и компьютеров, как объясняется в мобильном руководстве.

Показывать панель только там, где нужно

Чтобы управлять страницами, установите Глобальную видимость (Global visibility) в Скрывать (Hide) и разместите шорткод сами. Кнопка Сгенерировать шорткод (Generate shortcode) внизу вкладки Slideout составляет его по текущим опциям; после этого перезагрузите страницу, а не сохраняйте, если эти значения не должны стать глобальными, и берите в кавычки значения с пробелами. Типичный шорткод:

[woof_slideout location="left" image="null" text="Filters" width="320px" onloadslideout="false"]

image="null" превращает вкладку в текстовую. Без содержимого шорткод сам строит внутренний [woof] и передаёт ему все атрибуты, не относящиеся к настройкам slideout: tax_only, by_only, sid, btn_position, redirect и остальные атрибуты [woof]. Если между [woof_slideout] и [/woof_slideout] есть содержимое, показывается оно, так что возможны заголовок и собственная форма: [woof_slideout text="Filters" image="null"]<h3>Filter products</h3>[woof btn_position="t"][/woof_slideout]. В этом варианте атрибуты [woof] указываются у внутреннего шорткода.

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

/*
 * HUSKY: slide-out filter on the shop and product archive pages,
 * not on single products. Set Advanced → Slideout → Global visibility = Hide.
 * Child theme functions.php or a code snippets plugin.
 */
add_action('wp_footer', function () {
    if (!is_shop() && !is_product_taxonomy()) {
        return;
    }
    echo do_shortcode('[woof_slideout location="left" image="null" text="Filters" width="320px" onloadslideout="false"]');
}, 5);

Держите приоритет ниже 10. Расширение записывает стили ширины и высоты панели в собственном колбэке подвала с приоритетом 10, используя последнюю панель, выведенную до его запуска; панель, выведенная позже, размера не получает. Для разного фильтра по категориям проверяйте is_product_category('shoes') и давайте каждой панели собственный tax_only="pa_size,pa_color". Чтобы предложить панель также на страницах блога или главной, добавьте redirect="https://example.com/shop/", и результаты откроются на странице магазина.

Используйте одну панель на страницу. Скрипт slideout подготавливает только первую найденную панель; вторая, например глобальная панель плюс панель из шорткода, сохраняет стартовый стиль, который паркует её за окном, из-за чего её вкладка отсутствует или смещена.

Открытие своей кнопкой и закрытие после фильтрации

Панель реагирует на три события: open, close и toggle. Для своей кнопки важна одна деталь: панель закрывается по любому клику вне её, а кнопка в шапке находится вне. Если событие клика идёт дальше к документу, панель открывается и тут же закрывается. Обработчик ниже останавливает это, а также закрывает панель после каждой AJAX-фильтрации с помощью события плагина woof_ajax_done:

/*
 * HUSKY slide-out panel: custom open/close buttons, close after AJAX filtering.
 * Child theme functions.php or a code snippets plugin.
 * Buttons: <a href="#" class="open-husky-filter">Filter</a>
 *          <a href="#" class="close-husky-filter">Close</a> (inside the panel)
 */
add_action('wp_footer', function () {
    ?>
    <script>
    jQuery(function ($) {
        $(document.body).on('click', '.open-husky-filter', function (e) {
            e.preventDefault();   // a link with href="#" would jump to the top
            e.stopPropagation();  // otherwise the outside-click rule closes it at once
            $('.woof-slide-out-div').trigger('toggle');
        });
        $(document.body).on('click', '.close-husky-filter', function (e) {
            e.preventDefault();
            $('.woof-slide-out-div').trigger('close');
        });
        $(document).on('woof_ajax_done', function () {
            $('.woof-slide-out-div').trigger('close');
        });
    });
    </script>
    <?php
}, 100);

Чтобы использовать только свою кнопку, скройте вкладку с помощью .woof-slide-out-div .woof-handle { display: none; }. Ссылку закрытия поместите в панель через содержимое шорткода, перед [woof].

Закрытие после фильтрации подходит для кнопки Фильтр (Filter). При включённой Автоотправке (Autosubmit) каждый клик запускает фильтрацию, и панель закрывалась бы после каждого выбора; установите Автоотправку (Autosubmit) в Нет (No) на вкладке Опции (Options), чтобы посетители сделали все выборы, а панель закрылась один раз. Без AJAX страница перезагружается после фильтрации, и панель стартует закрытой, если Состояние после инициализации (State after init) равно Нет (No). Пока настройки плагина не сохранены в первый раз, шорткод без onloadslideout открывается при каждой загрузке страницы; в примерах задан onloadslideout="false", чтобы не зависеть от этого.

Вкладка, цвета, размер и прокрутка

Собственный скрипт панели задаёт несколько значений прямо в атрибутах, поэтому некоторым правилам нужен !important, а её таблица стилей загружается в подвале, после большинства остальных, поэтому некоторые селекторы начинаются с body:

/* HUSKY slide-out panel. Advanced → Code → Custom CSS code,
   or the theme's Additional CSS. */

/* Tab colours; an image tab gets its background inline */
.woof-slide-out-div .woof-handle {
    background-color: #f5c200 !important;
    color: #000;
}

/* Left or right position: move only the tab down, not the panel */
.woof-slide-out-div .woof-handle {
    top: 40px !important;
}

/* No transparency, above sticky headers and cookie bars */
body .woof-slide-out-div {
    opacity: 1 !important;
    z-index: 100000;
}

/* Scroll inside the panel when the filter is longer than the screen */
.woof-slide-out-div .woof-slide-content {
    max-height: calc(100vh - 140px); /* 100px offset + room at the bottom */
    overflow-y: auto;
}

/* Dim the page while the panel is open; a click on the dark area closes it */
.woof-slide-out-div.ui-slideouttab-open {
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
}

Зачем нужно правило прокрутки: при загрузке страницы скрипт уменьшает панель до размера экрана, если она слишком высокая или широкая, но только один раз. Секции, раскрывающиеся позже, список «показать больше» или повёрнутый телефон делают содержимое выше окна, и нижняя часть становится недоступной. max-height с overflow-y: auto сохраняет полосу прокрутки в любом состоянии. Вычитаемое значение задайте равным вашему Смещению (Offset) плюс небольшой запас.

По умолчанию панель непрозрачна на 95%, из-за чего на телефонах сквозь неё просвечивают товары. Её уровень наложения — 9999; закреплённая шапка, оверлей темы или баннер cookie с более высоким уровнем перекрывают её или перехватывают её клики, и это выглядит как фильтр, на который нельзя нажать. Если подъём панели не помогает, изучите элемент, лежащий сверху, и уменьшите его z-index.

Когда панель не работает

На телефонах нет вкладки. Шорткод находится в сайдбаре, который тема скрывает на маленьких экранах, Мобильное поведение (Mobile behavior) исключает телефоны или кэш страниц отдаёт десктопную копию.
Панель на страницах товаров или везде. Глобальная видимость (Global visibility) равна Показывать (Show); переключите её в Скрывать (Hide) и используйте сниппет для подвала.
Она открывается при каждой загрузке страницы. Установите Состояние после инициализации (State after init) в Нет (No) и добавьте onloadslideout="false" в ваши шорткоды.
Появляется или работает только одна из двух вкладок. На странице две панели; оставьте одну.
Вкладка появляется поздно или ничего не делает. Оптимизация JavaScript откладывает или объединяет скрипты плагина. Исключите /wp-content/plugins/woocommerce-products-filter/ из отложенной загрузки и объединения, как описано в руководстве по плагинам оптимизации, и очистите все кэши.
Фильтрация запускается из панели, но товары не меняются. Дело в сетке товаров, а не в панели; причины те же, что у фильтра в сайдбаре, см. URL меняется, а товары остаются прежними.

Контрольный список

Один способ скрытия фильтра на страницу: Slideout, мобильный режим, кнопка автоматического фильтра или выдвижная панель темы.
Одна панель на страницу; Глобальная видимость (Global visibility) в положении Скрывать (Hide), когда вы размещаете шорткод сами.
Шорткод вне сайдбаров, которые тема скрывает на телефонах, либо выводится из wp_footer с приоритетом ниже 10.
Текстовая вкладка с кавычками: image="null" text="Show filters"; onloadslideout="false".
Свои кнопки не пускают клик к документу; панель закрывается по woof_ajax_done.
Содержимое панели ограничено через max-height и прокручивается; z-index выше шапки.

Если панель всё равно работает неправильно, создайте тему на форуме поддержки HUSKY со ссылкой на страницу и используемым шорткодом или настройками, и мы это проверим.