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) = Так: кнопка над товарами, що опускає фільтр поверх сітки. Дивіться горизонтальний фільтр над товарами.

Висувна панель (drawer) чи off-canvas сайдбар із теми або конструктора сторінок теж підходить, якщо вона лише показує й ховає HTML фільтра, який уже є на сторінці під час завантаження. Якщо ж панель вставляє свій вміст пізніше, форма ніколи не ініціалізується, і кліки нічого не роблять; як розпізнати такий випадок, показує посібник з Elementor. Таким панелям також потрібен власний код закриття після AJAX-фільтрації, описаний у статті різні фільтри для мобільних і десктопа.

Увімкніть висувну панель

Slideout — вбудоване розширення, воно завжди активне. Його налаштування розташовані в WooCommerce → Налаштування → Products Filter → Додатково (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 з посиланням на сторінку та шорткодом чи налаштуваннями, які ви використовуєте, і ми все перевіримо.