Poziomy filtr produktów nad produktami w WooCommerce: kolumny i wiersze

Filtr na pasku bocznym zajmuje jedną trzecią szerokości sklepu, a na telefonach spycha produkty daleko w dół strony. Poziomy filtr produktów nad produktami w WooCommerce daje siatce pełną szerokość i pokazuje wszystkie opcje naraz: jako pasek list rozwijanych albo sekcje filtra w dwóch do czterech kolumn. HUSKY nie ma osobnego „trybu poziomego”. Układ wynika z dwóch rzeczy: jak szerokie jest miejsce, w którym filtr jest wyświetlany, oraz z CSS jego bloków. Poniżej opisujemy trzy sposoby umieszczenia filtra nad produktami, wbudowane układy kolumnowe, CSS dla pojedynczego wiersza i rozwiązania typowych problemów z układem.

O układzie decyduje miejsce, w którym stoi filtr

Każda sekcja filtra (kategorie, kolor, rozmiar, cena) jest blokiem z klasą woof_container. W widżecie na pasku bocznym bloki układają się jeden pod drugim, bo widżet jest wąski. Wyświetlone w szerokim obszarze te same bloki mogą stać obok siebie, a wtyczka dostarcza klasy, które układają je w kolumny. Są trzy sposoby, by umieścić filtr nad produktami:

Automatyczny filtr nad produktami

1. Przejdź do WooCommerce → Ustawienia → Filtr produktów (Products Filter) → Opcje (Options) i ustaw Ustaw filtr automatycznie (Set filter automatically) na Tak (Yes) albo na Tak, ale tylko dla PC (Yes, but only for desktop), jeśli telefony mają dostać inny filtr. Zapisz.
2. Odśwież stronę i otwórz zakładkę Wygląd (Design). Dwie opcje pojawiają się tam dopiero po zapisaniu pierwszego kroku: Ukryj auto filtr domyślnie (Hide auto filter by default) i Skórki dla auto filtra (Skins for the auto filter).
3. Ustaw Ukryj auto filtr domyślnie (Hide auto filter by default) na Nie (No). Przy Tak (Yes), czyli wartości domyślnej, odwiedzający widzą tylko przycisk otwierania/zamykania, a filtr otwiera się jako panel nad produktami. To również prawidłowy wybór; przycisk stylizuje się za pomocą Obrazek zamknięcia/otwarcia automatycznego filtra (Auto filter close/open image) i Tekst zamknięcia/otwarcia automatycznego filtra (Auto filter close/open text). Dla panelu, który zamiast tego wysuwa się z krawędzi ekranu, zobacz filtr produktów off-canvas.
4. Wybierz skórkę: Flat white, Flat grey lub Flat dark, z 1, 2, 3 lub 4 kolumnami. Domyślne (Default) to prosta skórka z trzema blokami w wierszu.
5. Usuń widżet HUSKY z paska bocznego sklepu, żeby strona nie pokazywała dwóch filtrów, i przełącz sklep w motywie na układ pełnej szerokości. Skórki 4-kolumnowe są dlatego oznaczone „bez paska bocznego”: cztery bloki o szerokości co najmniej 150px nie mieszczą się obok paska bocznego.

W tle wtyczka wyświetla [woof sid="flat_grey woof_auto_3_columns" ...] na akcji WooCommerce woocommerce_before_shop_loop z priorytetem 2, przed komunikatami, liczbą wyników i listą rozwijaną sortowania. Użycie tej akcji ma dwa następstwa:

• Szablon motywu lub kreatora stron musi ją uruchamiać. Klasyczne motywy i własny szablon archiwum WooCommerce to robią; wiele szablonów archiwów z kreatorów i własnych siatek produktów nie, i wtedy nic się nie pojawia. W takim przypadku użyj shortcode'a.
• Gdy kombinacja filtrów niczego nie znajdzie, szablon archiwum WooCommerce uruchamia woocommerce_no_products_found zamiast woocommerce_before_shop_loop. Po przeładowaniu strony automatyczny filtr znika razem z produktami, a odwiedzający widzi tylko komunikat „nie znaleziono produktów” i nie może zmienić wyboru. W trybie AJAX formularz pozostaje na stronie. Fragment kodu z shortcode'em w następnej sekcji obsługuje ten przypadek.

Filtr z shortcode'em w kolumnach

Atrybut sid shortcode'a [woof] zamienia się w klasy CSS formularza filtra. sid="flat_grey woof_auto_4_columns" wyświetla woof_sid_flat_grey, która nadaje szare kolory, oraz woof_auto_4_columns, która układa bloki w czterech kolumnach. Klasy kolumn w arkuszu stylów wtyczki:

Każdy blok jest elementem inline-block o minimalnej szerokości 150px, więc na wąskich ekranach bloki same zawijają się do mniejszej liczby kolumn. Pierwsze słowo nie musi być skórką: [woof sid="topbar woof_auto_3_columns"] zachowuje neutralny wygląd wtyczki i daje klasę woof_sid_topbar dla Twojego CSS.

Kolumny potrzebują miejsca. Obszar widżetów jest tak szeroki jak pasek boczny, więc umieść shortcode w miejscu o pełnej szerokości: w widżecie Shortcode w sekcji Elementora lub Divi na pełną szerokość, na stronie nad [products] lub [woof_products] (zobacz filtr na własnej stronie) albo w szablonie sklepu. Aby wyświetlić go nad produktami na stronach sklepu i archiwów produktów bez Ustaw filtr automatycznie (Set filter automatically), podepnij go do tej samej akcji, której używa wtyczka:

/*
 * 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() obejmuje archiwa kategorii, tagów i atrybutów. Priorytet 1 ma znaczenie: przy włączonym Próbuj zajaxować sklep (Try to ajaxify the shop) wtyczka otwiera obszar zastępowany przez AJAX z priorytetem 2 tej samej akcji, a filtr wyświetlony po tym punkcie znalazłby się w jego wnętrzu i zniknął po pierwszym filtrowaniu. Jedno ograniczenie: tryb mobilny, który na telefonach zastępuje filtr przyciskiem Otwórz filtr (Open filter), w wersji 3.4.6 nie znajdzie formularza, którego sid ma dwa słowa. Jeśli potrzebujesz trybu mobilnego, nadaj formularzowi jednowyrazowy sid i zbuduj układ za pomocą CSS z następnej sekcji; szczegóły wyjaśnia poradnik o filtrze mobilnym.

Shortcode [woof_front_builder] to alternatywa bez kodu. Buduje formularz filtra bezpośrednio na stronie, a jego opcje Układ (Layout) obejmują Domyślna szerokość sekcji filtra (Default filter section width): 25% daje cztery sekcje w wierszu, 50% dwie. Każda sekcja może to nadpisać własną opcją Szerokość sekcji (Section width). FAQ o wstawianiu filtra nad siatką produktów pokazuje, jak wyświetlić taki formularz nad produktami sklepu.

Wszystkie filtry w jednym wierszu

Kolumny pasują do list pól wyboru. Dla wąskiego paska przełącz sekcje w zakładce Struktura (Structure) na kompaktowe typy widoku: Lista rozwijana (Drop-down), Lista rozwijana wielokrotnego wyboru (Multi drop-down), Przyciski opcji/pola wyboru w liście rozwijanej (Radio/Checkbox in drop-down) (pola wyboru w panelu listy rozwijanej, zobacz stronę rozszerzenia) albo Hierarchiczna lista rozwijana (Hierarchy drop-down) dla kategorii. Lista rozwijana pokazuje nazwę filtra jako pierwszą opcję, więc możesz wyłączyć tytuły bloków opcją Pokaż etykietę tytułu (Show title label) w opcjach dodatkowych każdej sekcji (ikona koła zębatego) i zaoszczędzić wysokość jednego wiersza. Następnie pozwól flexboxowi rozmieścić bloki. Dla formularza umieszczonego za pomocą [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%;
    }
}

Pięć lub sześć list rozwijanych mieści się w jednym wierszu obszaru treści o szerokości 1200px; kolejne zawijają się do drugiego wiersza zamiast się ściskać. Przycisk Filtr (Filter) istnieje tylko wtedy, gdy Autowysyłanie (Autosubmit) jest wyłączone, a Resetuj (Reset) dopiero po wybraniu czegokolwiek, więc blok z przyciskami bywa pusty i wtedy nie zajmuje miejsca w wierszu. Poniżej 768px każdy blok zajmuje pełną szerokość. Aby zastosować te same reguły do filtra automatycznego, zastąp .woof_sid_topbar klasą jego skórki, na przykład .woof_sid_flat_grey, albo .woof_sid_auto_shortcode dla skórki Domyślne (Default).

Terminy jednego filtra w wierszach lub kolumnach

Długa kolumna rozmiarów lub marek to druga połowa problemu. Dla pól wyboru i przycisków opcji otwórz opcje dodatkowe sekcji w zakładce Struktura (Structure) i ustaw Wyświetl elementy w rzędzie (Display items in a row) na Tak (Yes): elementy układają się obok siebie i zawijają. Dotyczy to terminów bez podkategorii; rodzic z potomkami pozostaje w osobnej linii, aby jego podkategorie mogły się otworzyć pod nim.

Dla stałej liczby kolumn użyj siatki CSS na liście jednej sekcji:

/* 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;
}

Każda sekcja ma klasę woof_container_ plus slug swojej taksonomii: woof_container_product_cat, woof_container_pa_color, woof_container_pa_size. Listy podkategorii mają własną klasę, więc siatka dotyczy tylko pierwszego poziomu. Aby zamiast tego skrócić długą listę, ustaw Maks. wysokość bloku (Max height of the block) w tych samych opcjach dodatkowych; lista dostaje wtedy własny pasek przewijania. Więcej selektorów znajdziesz w poradniku o stylizowaniu filtra za pomocą CSS.

Naprawa zepsutego układu poziomego

• Najpierw znajdź nazwy klas. Ustaw Zaawansowane (Advanced) → Opcje (Options) → Pokaż przycisk pomocnika bloków (Show blocks helper button) na Tak (Yes). Administratorzy zobaczą wtedy link pokaż pomocnika bloków (show blocks helper) nad każdym filtrem, który ma sid; kliknięcie oznacza każdą sekcję jej klasą, taką jak woof_container_pa_color, i wyświetla klasę formularza. Potem wyłącz tę opcję, jak opisuje FAQ o przycisku pomocnika.
• Bloki nadal układają się jeden pod drugim. Kontener jest zbyt wąski (obszar widżetów lub wąska kolumna kreatora) albo starszy własny CSS ustawia szerokości lub float na .woof_container. Usuń wcześniejsze próby, zanim dodasz nowe reguły: reguły oparte na float i na flex, użyte razem, dają nieprzewidywalne wyniki.
• Tytuły zasłonięte białymi polami, listy obcięte. Skórka automatyczna Domyślne (Default) ogranicza wysokość każdego bloku do 250px z własnym paskiem przewijania, a motywy często dodają float, tła lub stałe wysokości blokom w obszarze treści. Zresetuj je dla swojego formularza, na przykład .woof_sid_auto_shortcode .woof_container { float: none; max-height: none; overflow: visible; }, albo przełącz się na skórkę Flat.
• Panel listy rozwijanej otwiera się za produktami. Nadaj formularzowi własny poziom warstwy: .woof_sid_topbar { position: relative; z-index: 20; }.
• Układy z kreatorów. W Elementorze lub Divi umieść shortcode w widżecie lub module Shortcode wewnątrz sekcji na pełną szerokość nad produktami. Sama siatka musi być taka, którą filtr może kontrolować; zobacz filtrowanie siatek Loop Grid w Elementorze.
• Po edycji CSS nic się nie zmienia. Wyczyść pamięć podręczną stron oraz wszelki połączony lub zoptymalizowany CSS, a następnie przetestuj po wylogowaniu.

CSS używany w witrynie demo zawiera więcej gotowych przykładów układów filtra.

Lista kontrolna

• Jeden formularz filtra na stronie: widżet paska bocznego usunięty albo Ustaw filtr automatycznie (Set filter automatically) wyłączone, gdy używasz shortcode'a.
• Ukryj auto filtr domyślnie (Hide auto filter by default) ustawione na Nie (No), jeśli pasek ma być zawsze widoczny.
• Filtr znajduje się w kontenerze o pełnej szerokości; dla czterech kolumn sklep nie ma paska bocznego.
• Kolumny z klasy woof_auto_N_columns w sid albo jednowyrazowy sid plus CSS, gdy potrzebny jest tryb mobilny.
• Typy widoku w postaci list rozwijanych dla paska w jednym wierszu; Wyświetl elementy w rzędzie (Display items in a row) lub siatka dla długich list pól wyboru.
• Pamięci podręczne wyczyszczone; strona sprawdzona po wylogowaniu na komputerze i na telefonie.

Jeśli układ nadal się psuje, załóż temat na forum wsparcia HUSKY, podając link do strony i dodany CSS, a my to sprawdzimy.