Горизонтальный фильтр товаров WooCommerce над товарами: колонки и ряд

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

Расположение фильтра определяет его раскладку

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

Автоматический фильтр над товарами

1. Перейдите в WooCommerce → Настройки → Фильтр товаров → Опции (Options) и установите Устанавливать фильтр автоматически (Set filter automatically) в Да (Yes) или в Да, но только для десктопа (Yes, but only for desktop), если на телефонах должен быть другой фильтр. Сохраните.
2. Перезагрузите страницу и откройте вкладку Дизайн. Две опции появляются там только после сохранения первого шага: Скрывать автоматический фильтр по умолчанию (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 колонками помечены «без сайдбара» именно поэтому: четыре блока шириной не менее 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.

Колонкам нужно место. Область виджетов ровно такая же узкая, как сайдбар, поэтому помещайте шорткод в место на всю ширину: виджет «Шорткод» в секции 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 grid для списка одной секции:

/* 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. У списков подкатегорий свой класс, поэтому grid применяется только к первому уровню. Чтобы вместо этого сократить длинный список, задайте в тех же дополнительных опциях Максимальная высота блока (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 разместите шорткод в виджете или модуле «Шорткод» внутри секции на всю ширину над товарами. Сама сетка должна быть такой, которой фильтр может управлять; см. фильтрация сеток Elementor Loop Grid.
• После правки CSS ничего не меняется. Очистите кэш страниц и любой объединённый или оптимизированный CSS, затем проверьте без авторизации.

В CSS, используемом на демо-сайте, есть другие готовые примеры раскладок фильтра.

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

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

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