Горизонтальний фільтр товарів над товарами в WooCommerce

Фільтр у сайдбарі займає третину ширини магазину, а на телефонах відсуває товари далеко вниз сторінки. Горизонтальний фільтр товарів над товарами в WooCommerce дає сітці всю ширину й показує всі варіанти вибору одразу: рядок із випадних списків або секції фільтра у два—чотири стовпці. У HUSKY немає окремого «горизонтального режиму». Розкладка залежить від двох речей: наскільки широке місце, де виводиться фільтр, і CSS його блоків. Нижче описано три способи розмістити фільтр над товарами, вбудовані розкладки в стовпці, CSS для одного рядка та виправлення типових проблем із розкладкою.

Розкладку фільтра визначає місце його розміщення

Кожна секція фільтра (категорії, колір, розмір, ціна) — це блок із класом woof_container. У віджеті сайдбару блоки складаються один під одним, бо віджет вузький. Виведені в широкій області, ті самі блоки можуть стояти поруч, а плагін постачає класи, які розкладають їх у стовпці. Є три способи отримати фільтр над товарами:

Автоматичний фільтр над товарами

1. Перейдіть у WooCommerce → Налаштування → Products Filter → Параметри (Options) і встановіть Встановлювати фільтр автоматично (Set filter automatically) у Так (Yes) або в Так, але лише для десктопа (Yes, but only for desktop), якщо телефони мають отримувати інший фільтр. Збережіть.
2. Перезавантажте сторінку й відкрийте вкладку Design. Дві опції з’являються там лише після збереження першого кроку: Типово ховати автоматичний фільтр (Hide auto filter by default) і Скіни для автоматичного фільтра (Skins for the auto filter).
3. Встановіть Типово ховати автоматичний фільтр (Hide auto filter by default) у Ні (No). За значення Так (Yes), яке діє за замовчуванням, відвідувачі бачать лише кнопку відкриття/закриття, а фільтр відкривається як панель поверх товарів. Це теж слушний вибір; кнопка оформлюється через Зображення закриття/відкриття автоматичного фільтра (Auto filter close/open image) і Текст закриття/відкриття автоматичного фільтра (Auto filter close/open text). Якщо потрібна панель, що висувається від краю екрана, дивіться off-canvas фільтр товарів.
4. Виберіть скін: Flat white, Flat grey або Flat dark, з 1, 2, 3 або 4 стовпцями. За замовчуванням (Default) — простий скін із трьома блоками в ряду.
5. Приберіть віджет HUSKY із сайдбару магазину, щоб на сторінці не було двох фільтрів, і переведіть магазин у темі на макет на всю ширину. Саме тому скіни з 4 стовпцями позначені «without sidebar»: чотири блоки завширшки щонайменше 150px не вміщаються поруч із сайдбаром.

Під капотом плагін виводить [woof sid="flat_grey woof_auto_3_columns" ...] на дії WooCommerce woocommerce_before_shop_loop із пріоритетом 2, перед сповіщеннями, кількістю результатів і списком сортування. З використання цієї дії випливають два наслідки:

• Шаблон теми чи конструктора сторінок має її запускати. Класичні теми та власний шаблон архіву WooCommerce це роблять; багато шаблонів архівів у конструкторах і власні сітки товарів — ні, і тоді нічого не з’являється. У такому разі використовуйте шорткод.
• Коли комбінація фільтрів нічого не знаходить, шаблон архіву WooCommerce виконує woocommerce_no_products_found замість woocommerce_before_shop_loop. Після перезавантаження сторінки автоматичний фільтр зникає разом із товарами, і відвідувач бачить лише повідомлення «товарів немає» без можливості змінити вибір. У режимі AJAX форма залишається на сторінці. Фрагмент із шорткодом у наступному розділі враховує цей випадок.

Фільтр у стовпцях через шорткод

Атрибут sid шорткоду [woof] стає CSS-класами форми фільтра. sid="flat_grey woof_auto_4_columns" виводить woof_sid_flat_grey, що дає сірі кольори, та woof_auto_4_columns, що розташовує блоки у чотири стовпці. Класи стовпців у таблиці стилів плагіна:

Кожен блок є inline-block із мінімальною шириною 150px, тож на вузьких екранах блоки самі переносяться в меншу кількість стовпців. Перше слово не обов’язково має бути скіном: [woof sid="topbar woof_auto_3_columns"] зберігає нейтральний вигляд плагіна й дає клас woof_sid_topbar для вашого власного CSS.

Стовпцям потрібне місце. Область віджетів має ширину лише сайдбару, тож розмістіть шорткод у місці на всю ширину: віджет Shortcode у секції Elementor чи Divi на всю ширину, сторінка над [products] або [woof_products] (дивіться фільтр на довільній сторінці) або шаблон магазину. Щоб вивести його над товарами на сторінках магазину та архівів товарів без Встановлювати фільтр автоматично (Set filter automatically), прив’яжіть його до тієї самої дії, яку використовує плагін:

/*
 * HUSKY: filter in columns above the products on the shop and product archives.
 * Child theme functions.php or a code snippets plugin.
 * Keep "Set filter automatically" = No, otherwise the page shows two filters.
 */
function my_husky_top_filter() {
    if (is_shop() || is_product_taxonomy()) {
        echo do_shortcode('[woof sid="flat_grey woof_auto_4_columns"]');
    }
}
add_action('woocommerce_before_shop_loop', 'my_husky_top_filter', 1);

// WooCommerce skips woocommerce_before_shop_loop when nothing is found:
// keep the filter on the "no products" page too.
add_action('woocommerce_no_products_found', 'my_husky_top_filter', 5);

is_product_taxonomy() охоплює архіви категорій, міток і атрибутів. Пріоритет 1 важливий: коли ввімкнено Спробувати перевести магазин на AJAX (Try to ajaxify the shop), плагін відкриває область, яку замінює AJAX, на пріоритеті 2 тієї самої дії, і фільтр, виведений після цієї точки, опинився б усередині неї та зник би після першої фільтрації. Одне обмеження: мобільний режим, який на телефонах замінює фільтр кнопкою Відкрити фільтр (Open filter), у версії 3.4.6 не може знайти форму, у якої sid складається з двох слів. Якщо вам потрібен мобільний режим, задайте формі sid з одного слова й побудуйте розкладку за допомогою CSS із наступного розділу; подробиці пояснює посібник із мобільного фільтра.

Шорткод [woof_front_builder] — альтернатива без коду. Він будує форму фільтра прямо на сторінці, а серед її параметрів Макет (Layout) є Ширина секції фільтра за замовчуванням (Default filter section width): 25% дає чотири секції в ряду, 50% — дві. Кожна секція може перевизначити її власним параметром Ширина секції (Section width). FAQ про вставлення фільтра над сіткою товарів показує, як вивести таку форму над товарами магазину.

Усі фільтри в одному рядку

Стовпці підходять для списків чекбоксів. Для компактного рядка переведіть секції на вкладці Структура (Structure) на компактні типи відображення: Випадний список (Drop-down), Випадний список із множинним вибором (Multi drop-down), Радіокнопки/чекбокси у випадному списку (Radio/Checkbox in drop-down) (чекбокси всередині випадної панелі, дивіться сторінку розширення) або Ієрархічний випадний список (Hierarchy drop-down) для категорій. Випадний список показує назву фільтра як першу опцію, тож заголовки блоків можна вимкнути через Показувати мітку заголовка (Show title label) у додаткових опціях кожної секції (значок шестерні) і зекономити висоту рядка. Далі нехай блоки розкладе flexbox. Для форми, розміщеної через [woof sid="topbar"]:

/*
 * HUSKY: filter sections in one row above the products.
 * Advanced → Code → Custom CSS code, or the theme's Additional CSS.
 */
.woof_sid_topbar .woof_redraw_zone {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.woof_sid_topbar .woof_container {
    flex: 1 1 180px;      /* share the row, never narrower than 180px */
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;    /* drop-down panels must not be cut off */
}
.woof_sid_topbar .woof_submit_search_form_container {
    flex: 0 0 auto;       /* Filter and Reset buttons at the end of the row */
    margin: 0;
}
.woof_sid_topbar .chosen-container,
.woof_sid_topbar .select2-container {
    width: 100% !important;
}
@media (max-width: 767px) {
    .woof_sid_topbar .woof_container,
    .woof_sid_topbar .woof_submit_search_form_container {
        flex-basis: 100%;
    }
}

П’ять-шість випадних списків вміщуються в одному рядку області вмісту шириною 1200px; решта переноситься на другий рядок, а не стискається. Кнопка Фільтр (Filter) існує лише за вимкненого Автовідправлення (Autosubmit), а Скинути (Reset) — лише після того, як щось вибрано, тому блок кнопок часто порожній і тоді не займає місця в рядку. Нижче 768px кожен блок займає всю ширину. Щоб застосувати ті самі правила до автоматичного фільтра, замініть .woof_sid_topbar на клас його скіна, наприклад .woof_sid_flat_grey, або на .woof_sid_auto_shortcode для скіна За замовчуванням (Default).

Терміни одного фільтра в рядки чи стовпці

Довгий стовпець розмірів чи брендів — друга половина проблеми. Для чекбоксів і радіокнопок відкрийте додаткові опції секції у вкладці Структура (Structure) і встановіть Виводити елементи в рядок (Display items in a row) у Так (Yes): елементи йдуть поруч і переносяться. Це стосується термінів без підкатегорій; батьківський термін із дочірніми залишається на окремому рядку, щоб його підкатегорії могли відкритися під ним.

Для фіксованої кількості стовпців використайте CSS-сітку на списку однієї секції:

/* Sizes in three equal columns. Replace pa_size with your taxonomy slug. */
.woof .woof_container_pa_size ul.woof_list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 12px;
}

Кожна секція має клас woof_container_ плюс слаг її таксономії: woof_container_product_cat, woof_container_pa_color, woof_container_pa_size. Списки підкатегорій мають власний клас, тож сітка застосовується лише до першого рівня. Щоб натомість скоротити довгий список, встановіть Максимальна висота блока (Max height of the block) у тих самих додаткових опціях; тоді список отримає власну смугу прокручування. Більше селекторів — у посібнику зі стилізації фільтра за допомогою CSS.

Виправлення зламаної горизонтальної розкладки

• Спершу з’ясуйте назви класів. Встановіть Додатково (Advanced) → Параметри (Options) → Показувати кнопку-помічник блоків (Show blocks helper button) у Так (Yes). Тоді адміністратори бачать посилання показати помічник блоків (show blocks helper) над кожним фільтром, що має sid; клік підписує кожну секцію її класом, наприклад woof_container_pa_color, і виводить клас форми. Потім вимкніть це, як описує FAQ про кнопку-помічник.
• Блоки досі складаються стосом. Контейнер надто вузький (область віджетів або вузька колонка конструктора) або старий власний CSS задає ширину чи float для .woof_container. Приберіть попередні спроби, перш ніж додавати нові правила: суміш правил на float і на flex дає непередбачуваний результат.
• Заголовки закриті білими рамками, списки обрізані. Скін За замовчуванням (Default) автофільтра обмежує висоту кожного блока 250px зі своєю смугою прокручування, а теми часто додають float, фони чи фіксовану висоту блокам усередині області вмісту. Скиньте їх для своєї форми, наприклад .woof_sid_auto_shortcode .woof_container { float: none; max-height: none; overflow: visible; }, або перейдіть на скін Flat.
• Випадна панель відкривається під товарами. Надайте формі власний рівень накладання: .woof_sid_topbar { position: relative; z-index: 20; }.
• Розкладки конструкторів. В Elementor чи Divi розмістіть шорткод у віджеті або модулі Shortcode всередині секції на всю ширину над товарами. Сама сітка має бути такою, якою фільтр може керувати; дивіться фільтрація сіток Elementor Loop.
• Після редагування CSS нічого не змінюється. Очистіть кеш сторінок і будь-який об’єднаний чи оптимізований CSS, потім перевірте без входу в обліковий запис.

У CSS, використаному на демо-сайті, є більше готових прикладів розкладок фільтра.

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

• Одна форма фільтра на сторінку: віджет сайдбару прибрано або Встановлювати фільтр автоматично (Set filter automatically) вимкнено, коли використовується шорткод.
• Типово ховати автоматичний фільтр (Hide auto filter by default) встановлено в Ні (No), якщо рядок має бути завжди видимим.
• Фільтр стоїть у контейнері на всю ширину; для чотирьох стовпців у магазині немає сайдбару.
• Стовпці з класу woof_auto_N_columns у sid або sid з одного слова плюс CSS, коли потрібен мобільний режим.
• Типи відображення «випадний список» для панелі в один рядок; Виводити елементи в рядок (Display items in a row) або сітка для довгих списків чекбоксів.
• Кеші очищено; сторінку перевірено без входу в обліковий запис на десктопі та на телефоні.

Якщо розкладка й далі ламається, створіть тему на форумі підтримки HUSKY з посиланням на сторінку й доданим вами CSS, і ми все перевіримо.