Horizontaler WooCommerce Produktfilter über den Produkten: Spalten und Zeilen

Ein Filter in der Seitenleiste nimmt ein Drittel der Shop-Breite ein und schiebt die Produkte auf Smartphones weit nach unten. Ein horizontaler Produktfilter über den Produkten in WooCommerce gibt dem Raster die volle Breite und zeigt alle Auswahlmöglichkeiten auf einen Blick: eine Leiste aus Dropdown-Listen oder Filterabschnitte in zwei bis vier Spalten. HUSKY hat keinen eigenen „Horizontal-Modus". Das Layout ergibt sich aus zwei Dingen: wie breit der Bereich ist, in dem der Filter ausgegeben wird, und aus dem CSS seiner Blöcke. Im Folgenden finden Sie die drei Wege, den Filter über den Produkten zu platzieren, die eingebauten Spaltenlayouts, das CSS für eine einzelne Zeile und Lösungen für die üblichen Layoutprobleme.

Die Platzierung des Filters bestimmt sein Layout

Jeder Filterabschnitt (Kategorien, Farbe, Größe, Preis) ist ein Block mit der Klasse woof_container. In einem Seitenleisten-Widget werden die Blöcke gestapelt, weil das Widget schmal ist. In einem breiten Bereich ausgegeben, können dieselben Blöcke nebeneinander stehen, und das Plugin bringt Klassen mit, die sie in Spalten anordnen. Es gibt drei Wege, den Filter über die Produkte zu bringen:

Der automatische Filter über den Produkten

1. Gehen Sie zu WooCommerce → Einstellungen → Products Filter → Optionen (Options) und setzen Sie Filter automatisch setzen (Set filter automatically) auf Ja (Yes), oder auf Ja, aber nur für den Desktop (Yes, but only for desktop), wenn Smartphones einen anderen Filter erhalten sollen. Speichern Sie.
2. Laden Sie die Seite neu und öffnen Sie den Tab Design. Zwei Optionen erscheinen dort erst, nachdem der erste Schritt gespeichert wurde: Automatischen Filter standardmäßig ausblenden (Hide auto filter by default) und Skins für den automatischen Filter (Skins for the auto filter).
3. Setzen Sie Automatischen Filter standardmäßig ausblenden (Hide auto filter by default) auf Nein (No). Bei Ja (Yes), dem Standard, sehen Besucher nur eine Schaltfläche zum Öffnen und Schließen, und der Filter öffnet sich als Panel über den Produkten. Auch das ist eine gültige Wahl; die Schaltfläche wird mit Automatischer Filter zum schließen / öffnen eines Bildes (Auto filter close/open image) und Automatischer Filter zum schließen / öffnen von Text (Auto filter close/open text) gestaltet. Für ein Panel, das stattdessen vom Bildschirmrand hereingleitet, lesen Sie den Off-Canvas-Produktfilter.
4. Wählen Sie einen Skin: Flat white, Flat grey oder Flat dark, mit 1, 2, 3 oder 4 Spalten. Standard (Default) ist ein schlichter Skin mit drei Blöcken pro Zeile.
5. Entfernen Sie das HUSKY-Widget aus der Shop-Seitenleiste, damit die Seite nicht zwei Filter zeigt, und stellen Sie den Shop im Theme auf ein Layout in voller Breite um. Die 4-Spalten-Skins sind deshalb mit „without sidebar" gekennzeichnet: Vier Blöcke mit mindestens 150px passen nicht neben eine Seitenleiste.

Im Hintergrund gibt das Plugin [woof sid="flat_grey woof_auto_3_columns" ...] an der WooCommerce-Action woocommerce_before_shop_loop mit Priorität 2 aus, vor den Hinweisen, der Ergebnisanzahl und der Sortier-Dropdown-Liste. Zwei Folgen der Verwendung dieser Action:

• Das Template des Themes oder Page Builders muss sie ausführen. Klassische Themes und das eigene Archiv-Template von WooCommerce tun das; viele Archiv-Templates von Buildern und eigene Produktraster nicht, und dann erscheint nichts. Verwenden Sie in diesem Fall den Shortcode.
• Wenn eine Filterkombination nichts findet, führt das Archiv-Template von WooCommerce woocommerce_no_products_found statt woocommerce_before_shop_loop aus. Nach dem Neuladen der Seite ist der automatische Filter zusammen mit den Produkten verschwunden, und der Besucher sieht nur die Meldung „keine Produkte" ohne Möglichkeit, die Auswahl zu ändern. Im AJAX-Modus bleibt das Formular auf der Seite. Das Shortcode-Snippet im nächsten Abschnitt behandelt diesen Fall.

Ein Shortcode-Filter in Spalten

Das Attribut sid des Shortcodes [woof] wird zu CSS-Klassen am Filterformular. sid="flat_grey woof_auto_4_columns" gibt woof_sid_flat_grey aus, das die grauen Farben liefert, und woof_auto_4_columns, das die Blöcke in vier Spalten anordnet. Die Spaltenklassen im Stylesheet des Plugins:

Jeder Block ist ein Inline-Block mit einer Mindestbreite von 150px, sodass die Blöcke auf schmalen Bildschirmen von selbst in weniger Spalten umbrechen. Das erste Wort muss kein Skin sein: [woof sid="topbar woof_auto_3_columns"] behält das neutrale Aussehen des Plugins und liefert Ihnen die Klasse woof_sid_topbar für Ihr eigenes CSS.

Spalten brauchen Platz. Ein Widget-Bereich ist nur so breit wie die Seitenleiste, setzen Sie den Shortcode daher an eine Stelle in voller Breite: ein Shortcode-Widget in einem Elementor- oder Divi-Abschnitt in voller Breite, eine Seite oberhalb von [products] oder [woof_products] (siehe der Filter auf einer eigenen Seite) oder das Shop-Template. Um ihn ohne Filter automatisch setzen (Set filter automatically) über den Produkten auf den Shop- und Produktarchivseiten auszugeben, hängen Sie ihn an dieselbe Action, die das Plugin verwendet:

/*
 * 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() deckt Kategorie-, Schlagwort- und Attributarchive ab. Priorität 1 ist wichtig: Bei eingeschaltetem Versuchen Sie AJAX im Shop (Try to ajaxify the shop) öffnet das Plugin den Bereich, den AJAX ersetzt, bei Priorität 2 derselben Action, und ein Filter, der danach ausgegeben wird, würde darin liegen und nach der ersten Filterung verschwinden. Eine Einschränkung: Der mobile Modus, der den Filter auf Smartphones durch eine Schaltfläche Filter öffnen (Open filter) ersetzt, kann in Version 3.4.6 kein Formular finden, dessen sid aus zwei Wörtern besteht. Wenn Sie den mobilen Modus brauchen, geben Sie dem Formular eine sid aus einem Wort und bauen Sie das Layout mit dem CSS im nächsten Abschnitt; die Anleitung zum mobilen Filter erklärt die Einzelheiten.

Der Shortcode [woof_front_builder] ist die Alternative ohne Code. Er baut ein Filterformular direkt auf der Seite auf, und seine Layout-Optionen enthalten Standardbreite der Filterabschnitte (Default filter section width): 25% ergibt vier Abschnitte pro Zeile, 50% zwei. Jeder Abschnitt kann dies mit seiner eigenen Abschnittsbreite (Section width) überschreiben. Die FAQ zum Einfügen eines Filters über dem Produktraster zeigt, wie Sie ein solches Formular über den Shop-Produkten ausgeben.

Alle Filter in einer Zeile

Spalten eignen sich für Checkbox-Listen. Für eine schmale Leiste stellen Sie die Abschnitte im Tab Struktur (Structure) auf kompakte Ansichtstypen um: Dropdown-Liste (Drop-down), Multi Dropdown (Multi drop-down), Radiobutton/Checkbox in Dropdown-Liste (Radio/Checkbox in drop-down) (Checkboxen in einem Dropdown-Panel, siehe die Erweiterungsseite) oder Hierarchische Dropdown-Liste (Hierarchy drop-down) für Kategorien. Eine Dropdown-Liste zeigt den Namen des Filters als erste Option, sodass Sie die Blocktitel mit Titel-Label anzeigen (Show title label) in den zusätzlichen Optionen jedes Abschnitts (dem Zahnrad-Symbol) ausschalten und eine Zeile Höhe sparen können. Lassen Sie die Blöcke dann von Flexbox anordnen. Für ein Formular, das mit [woof sid="topbar"] platziert wurde:

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

Fünf oder sechs Dropdown-Listen passen in eine Zeile eines 1200px breiten Inhaltsbereichs; weitere brechen in eine zweite Zeile um, statt gestaucht zu werden. Die Schaltfläche Filtern (Filter) gibt es nur, wenn Automatische Übermittlung (Autosubmit) ausgeschaltet ist, und Zurücksetzen (Reset) erst, wenn etwas ausgewählt ist, sodass der Schaltflächenblock oft leer ist und dann keinen Platz in der Zeile beansprucht. Unterhalb von 768px nimmt jeder Block die volle Breite ein. Um dieselben Regeln auf den automatischen Filter anzuwenden, ersetzen Sie .woof_sid_topbar durch die Klasse seines Skins, zum Beispiel .woof_sid_flat_grey, oder .woof_sid_auto_shortcode für den Skin Standard (Default).

Begriffe eines Filters in Zeilen oder Spalten

Eine lange Spalte mit Größen oder Marken ist die andere Hälfte des Problems. Öffnen Sie bei Checkboxen und Radiobuttons die zusätzlichen Optionen des Abschnitts unter Struktur (Structure) und setzen Sie Elemente in einer Reihe anzeigen (Display items in a row) auf Ja (Yes): Die Elemente fließen nebeneinander und brechen um. Das gilt für Begriffe ohne Unterkategorien; ein übergeordneter Begriff mit Kindern bleibt in einer eigenen Zeile, damit sich seine Unterkategorien darunter öffnen können.

Für eine feste Anzahl von Spalten verwenden Sie ein CSS-Grid auf der Liste eines Abschnitts:

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

Jeder Abschnitt trägt die Klasse woof_container_ plus seinen Taxonomie-Slug: woof_container_product_cat, woof_container_pa_color, woof_container_pa_size. Listen von Unterkategorien haben eine eigene Klasse, sodass das Grid nur für die erste Ebene gilt. Um eine lange Liste stattdessen kurz zu halten, setzen Sie Maximale Höhe des Blocks (Max height of the block) in denselben zusätzlichen Optionen; die Liste erhält dann eine eigene Bildlaufleiste. Weitere Selektoren finden Sie in der Anleitung zum Gestalten des Filters mit CSS.

Ein fehlerhaftes horizontales Layout beheben

• Zuerst die Klassennamen herausfinden. Setzen Sie Erweitert (Advanced) → Optionen (Options) → Hilfsblock-Button anzeigen (Show blocks helper button) auf Ja (Yes). Administratoren sehen dann über jedem Filter mit einer sid einen Link Hilfsblöcke anzeigen (show blocks helper); ein Klick beschriftet jeden Abschnitt mit seiner Klasse, etwa woof_container_pa_color, und gibt die Klasse des Formulars aus. Schalten Sie ihn danach wieder aus, wie die FAQ zum Hilfs-Button beschreibt.
• Die Blöcke stapeln sich weiterhin. Der Container ist zu schmal (ein Widget-Bereich oder eine schmale Builder-Spalte), oder älteres eigenes CSS setzt Breiten oder Floats auf .woof_container. Entfernen Sie frühere Versuche, bevor Sie neue Regeln hinzufügen: Float-basierte und Flex-basierte Regeln, die gemischt werden, ergeben unvorhersehbare Ergebnisse.
• Titel von weißen Kästen verdeckt, Listen abgeschnitten. Der Auto-Skin Standard (Default) begrenzt jeden Block auf 250px Höhe mit eigener Bildlaufleiste, und Themes fügen Blöcken im Inhaltsbereich oft Floats, Hintergründe oder feste Höhen hinzu. Setzen Sie diese für Ihr Formular zurück, zum Beispiel .woof_sid_auto_shortcode .woof_container { float: none; max-height: none; overflow: visible; }, oder wechseln Sie zu einem Flat-Skin.
• Ein Dropdown-Panel öffnet sich hinter den Produkten. Geben Sie dem Formular eine eigene Stapelebene: .woof_sid_topbar { position: relative; z-index: 20; }.
• Builder-Layouts. Platzieren Sie den Shortcode in Elementor oder Divi in einem Shortcode-Widget oder -Modul innerhalb eines Abschnitts in voller Breite über den Produkten. Das Raster selbst muss eines sein, das der Filter steuern kann; siehe Elementor-Loop-Raster filtern.
• Nach der CSS-Änderung ändert sich nichts. Leeren Sie den Seiten-Cache und jedes zusammengefasste oder optimierte CSS und testen Sie dann abgemeldet.

Das CSS der Demo-Website enthält weitere fertige Beispiele für Filter-Layouts.

Checkliste

• Ein Filterformular pro Seite: das Seitenleisten-Widget entfernt, oder Filter automatisch setzen (Set filter automatically) ausgeschaltet, wenn der Shortcode verwendet wird.
• Automatischen Filter standardmäßig ausblenden (Hide auto filter by default) auf Nein (No), wenn die Leiste immer sichtbar sein soll.
• Der Filter steht in einem Container in voller Breite; für vier Spalten hat der Shop keine Seitenleiste.
• Spalten aus einer Klasse woof_auto_N_columns in sid, oder eine sid aus einem Wort plus CSS, wenn der mobile Modus gebraucht wird.
• Dropdown-Ansichtstypen für eine einzeilige Leiste; Elemente in einer Reihe anzeigen (Display items in a row) oder ein Grid für lange Checkbox-Listen.
• Caches geleert; die Seite abgemeldet auf einem Desktop und auf einem Smartphone geprüft.

Wenn das Layout weiterhin fehlerhaft ist, eröffnen Sie im HUSKY-Support-Forum ein Thema mit dem Link zur Seite und dem von Ihnen hinzugefügten CSS, und wir sehen es uns an.