WooCommerce Produktfilter auf eigener Seite oder Startseite einrichten

Sie setzen den WooCommerce Produktfilter auf eine eigene Seite, eine Landingpage oder die Startseite, und es passiert eines von drei Dingen: Das Formular erscheint, aber es werden keine Produkte angezeigt, jeder Klick springt in den Shop, oder die Seite lädt neu und nichts ändert sich. Das ist kein Fehler. Der Shortcode [woof] gibt nur das Suchformular aus, und das Plugin entscheidet anhand des restlichen Seiteninhalts, wo die Ergebnisse angezeigt werden. Im Folgenden sehen Sie, wie diese Entscheidung funktioniert, und die genauen Shortcode-Konfigurationen für die häufigsten Fälle: Filter und Produkte auf einer Seite, eine Seite, die auf eine Kategorie oder ein Attribut beschränkt ist, und ein Startseitenformular, das Besucher zu den Ergebnissen weiterleitet.

Wohin ein WooCommerce Produktfilter auf einer eigenen Seite die Besucher schickt

Wenn der Besucher auf Filtern (Filter) klickt (oder bei aktivem Autosubmit eine Option ändert), erstellt das Skript des Plugins einen Link wie ?swoof=1&pa_color=red und prüft auf der aktuellen Seite, ob es eine Produktliste gibt, die es aktualisieren kann: die Ausgabe von [woof_products], einen WooCommerce-Shortcode [products] oder eine beliebige .products-Liste innerhalb eines .woocommerce-Containers. Findet es eine, werden die Ergebnisse auf derselben Seite geöffnet. Findet es keine, gelangt der Besucher auf die Shop-Seite, also die Seite, die unter WooCommerce → Einstellungen → Produkte → Shop-Seite (WooCommerce → Settings → Products → Shop page) ausgewählt ist.

Zwei Folgen sollten Sie kennen, bevor Sie etwas aufbauen. Ist in WooCommerce keine Shop-Seite festgelegt, gibt es kein Ziel für den Besucher, und der Filter lädt die aktuelle Seite neu, auch eine einzelne Produktseite. Und wenn Ihre Startseite einen Produktblock enthält (hervorgehobene Produkte, ein Sale-Karussell mit WooCommerce-Markup), behandelt der Filter diesen Block als Ergebnisraster und lädt die Startseite neu, statt den Shop zu öffnen.

Filter und Produkte auf derselben Seite

Für eine Seite, die wie ein kleiner Shop funktioniert, platzieren Sie zwei Shortcodes. Sie können in verschiedenen Blöcken oder Spalten stehen, zum Beispiel das Formular in einer schmalen Spalte und die Produkte in der breiten:

[woof]
[woof_products per_page=12 columns=3 is_ajax=1]

• per_page: Setzen Sie es. Ohne dieses Attribut verwendet [woof_products] den Wert Produkte pro Seite (Products per page) auf dem Tab Erweitert → Optionen (Advanced → Options) des Plugins, und wenn dieser -1 ist (der Standard), die WordPress-Einstellung Blogseiten zeigen maximal (Blog pages show at most), die auf den meisten Websites 10 beträgt.
• columns: Produkte pro Zeile. Ob das Theme dies berücksichtigt, hängt vom CSS des Themes ab.
• is_ajax=1: Die Ergebnisse werden ohne Neuladen der Seite ersetzt, und die Adressleiste wird aktualisiert, sodass die gefilterte Seite geteilt werden kann. Mit is_ajax=0 lädt die Seite neu. Auf einer eigenen Seite schaltet dieses Attribut AJAX ein; die Option Versuchen Sie AJAX im Shop (Try to ajaxify the shop) wirkt sich nur auf den Shop und die Kategorie-Archive aus.

[woof_products] stellt Produkte mit der Produktkarte Ihres Themes dar (dem Template content-product.php) und führt die Standard-Loop-Hooks von WooCommerce aus, sodass Ergebnisanzahl, Sortierung und Seitennavigation so erscheinen wie auf der Shop-Seite.

Auch der WooCommerce-Shortcode [products] ist filterbar: Solange ein Filter aktiv ist, fügt HUSKY seine Bedingungen zur Abfrage dieses Shortcodes hinzu. [products limit="12" columns="4" paginate="true"] neben [woof] funktioniert mit Seitenneuladen; für AJAX verwenden Sie den Zwilling, den HUSKY registriert, [products_woof], mit denselben Attributen.

Die Seite auf eine Kategorie, ein Schlagwort oder ein Attribut beschränken

Eine Seite für eine Marke, einen Standort oder „nur generalüberholte Smartphones" braucht eine dauerhafte Bedingung, die Besucher nicht aufheben können. Das ist das Attribut taxonomies, und es gehört in beide Shortcodes:

[woof taxonomies="product_cat:87+product_tag:105" tax_exclude="product_cat,product_tag"]
[woof_products taxonomies="product_cat:87+product_tag:105" per_page=12 columns=3 is_ajax=1]

Die Syntax lautet taxonomy:ID. Mehrere IDs einer Taxonomie werden mit Kommas getrennt; verschiedene Taxonomien werden mit + verbunden und müssen alle zutreffen. Mit der standardmäßigen ODER-Logik bedeutet product_cat:87,92+pa_brand:14 „in Kategorie 87 oder 92 und Marke 14", wobei Produkte in Unterkategorien von 87 und 92 eingeschlossen sind. Wenn Sie eine Taxonomie in den Plugin-Einstellungen auf UND-Logik umgestellt haben, gilt diese Logik auch hier für ihre IDs.

Begriffs-IDs, nicht Slugs oder Namen

Das Plugin wandelt jeden Wert in einen Begriff mit der angegebenen ID um. Ein Slug wie cadeau oder ein Name wie Yes ist keine ID, trifft auf nichts zu, und dieser Teil der Bedingung wird ohne Fehlermeldung verworfen, sodass die Seite alle Produkte anzeigt. Um eine ID zu finden, öffnen Sie Produkte → Kategorien (Products → Categories) (oder Schlagwörter (Tags) oder Produkte → Attribute → Begriffe konfigurieren (Products → Attributes → Configure terms)), fahren Sie mit der Maus über den Link Bearbeiten (Edit) des Begriffs und lesen Sie die Zahl nach tag_ID= im Link ab.

Der Taxonomiename muss exakt stimmen: product_cat, product_tag, pa_ plus der Attribut-Slug bei globalen Attributen (pa_color, nicht color) oder der Slug einer benutzerdefinierten Taxonomie, etwa einer Marken-Taxonomie. Benutzerdefinierte Attribute, die direkt bei einem einzelnen Produkt eingegeben wurden, sind keine Taxonomien und können hier nicht verwendet werden.

Was jeder Shortcode mit dem Wert macht

• In [woof_products] beschränkt er die Produkte. Das ist der Teil, der die eigentliche Arbeit leistet.
• In [woof] beschränkt er, was das Formular zählt: Bei aktivierten Optionen Anzahl anzeigen (Show count) und Dynamische Nachzählung (Dynamic recount) beziehen sich die Zahlen neben den Optionen und der Preisbereich auf dieselbe eingeschränkte Menge, und bei Leere Begriffe ausblenden (Hide empty terms) verschwinden Optionen, die auf dieser Seite keine Produkte haben. Im AJAX-Modus wird das Formular nach jedem Filtern mit dem Wert aus [woof_products] neu gezeichnet; halten Sie die beiden daher identisch, sonst ändern sich die Zahlen nach dem ersten Klick.

Die Bedingung steht nicht in der URL, sondern ist Teil der Seite. Zurücksetzen oder das Abwählen aller Optionen führt zur Seite zurück, und die Bedingung gilt weiterhin. Blenden Sie die vorgefilterten Blöcke mit tax_exclude aus (Taxonomienamen, durch Kommas getrennt), oder bauen Sie ein kurzes Formular mit tax_only und by_only, zum Beispiel [woof tax_only="pa_brand,pa_size" by_only="by_price"]; by_only="none" blendet Preis, Textsuche und andere Filter aus, die keine Taxonomien sind. Weitere Kombinationen finden Sie unter verschiedene Filter auf verschiedenen Seiten anzeigen, die vollständige Attributliste auf der Seite zum Shortcode [woof]. Wenn Sie statt nach einer Taxonomie nach einem Meta-Feld vorfiltern möchten, lesen Sie Manipulation der Suchdaten.

Ein Startseitenfilter, der zum Shop weiterleitet

Die robuste Startseiten-Lösung ist ein Suchformular, das Besucher auf eine Ergebnisseite schickt:

[woof redirect="https://example.com/shop/" autosubmit=1 ajax_redraw=1 tax_only="product_cat,pa_size" by_only="none"]

• redirect: die Ergebnisseite. Das kann der Shop sein, ein Kategorie-Archiv wie https://example.com/product-category/tires/ (die Ergebnisse bleiben dann innerhalb dieser Kategorie, weil die Kategorie in der Adresse steht) oder eine eigene Seite mit [woof] und [woof_products]. Verwenden Sie eine saubere URL ohne ?; das Plugin hängt ?swoof=1&... daran an.
• autosubmit=1 allein schickt den Besucher bei der ersten Änderung weg, was zu einer einzelnen Dropdown-Liste passt. Fügen Sie bei einem Formular mit mehreren Feldern ajax_redraw=1 hinzu: Jede Auswahl aktualisiert dann nur das Formular (Zahlen, abhängige Optionen), und die Schaltfläche Filtern (Filter) öffnet die Ergebnisseite. Bei autosubmit=0 passiert nichts, bis der Besucher auf Filtern (Filter) klickt.

Regeln, die die meisten Meldungen „Weiterleitung funktioniert nicht" verursachen:

• Die Weiterleitung wird im AJAX-Modus ignoriert. Wenn dieselbe Seite auch [woof_products is_ajax=1] oder [products_woof] enthält, filtert das Formular stattdessen dieses Raster.
• Eine Seite, ein Filter. Wenn mehrere Formulare auf einer Seite stehen, übernimmt das Skript redirect, autosubmit und ajax_redraw vom ersten Formular, das es findet. Ein zweites Formular in einer Seitenleiste oder ein automatischer Filter über den Produkten kann das von Ihnen konfigurierte Formular unbemerkt überschreiben. Das HUSKY-Widget hat für denselben Zweck ein eigenes Feld Weiterleiten an (Redirect to).
• Eine taxonomies-Bedingung im Startseitenformular wird bei der Weiterleitung nicht mitgenommen; nur das, was der Besucher ausgewählt hat, gelangt in die URL. Wenn sich das Formular auf eine Kategorie bezieht, leiten Sie auf das Archiv dieser Kategorie weiter.

Warum nicht auf der statischen Startseite selbst filtern

Das Filtern an Ort und Stelle funktioniert auf gewöhnlichen Seiten. Die statische Startseite ist die Ausnahme: Parameter wie product_cat oder product_tag sind zugleich WordPress-Abfragevariablen, und wenn sie an der Stammadresse der Website erscheinen, behandelt WordPress die Anfrage nicht mehr als Ihre Startseite. Je nach Theme sehen Besucher dann ein Kategorie-Archiv, eine leere Seite oder den vom SEO-Plugin hinzugefügten Titel Seite nicht gefunden (Page not found). Setzen Sie den Filter und [woof_products] auf eine normale Seite (zum Beispiel /products/) und lassen Sie das Startseitenformular dorthin weiterleiten.

Produkte erst anzeigen, nachdem der Besucher gefiltert hat

Für eine Landingpage, die zunächst nur das Formular zeigen soll, fügen Sie display_on_search=1 zu [woof_products] hinzu. Bis ein Filter angewendet wird, bleibt der Produktbereich leer; nach der ersten Suche zeigt die Seite die Ergebnisse. Die Dokumentation beschreibt dieses Attribut für den Neuladen-Modus, verwenden Sie es daher mit is_ajax=0. Einzelheiten finden Sie auf der Seite zum Shortcode [woof_products].

Einzelne Produktseiten, Menüs und Produktraster von Page Buildern

• Einzelne Produktseiten. Ein Filter in der Seitenleiste der Produktseite öffnet immer den Shop (oder seine redirect-URL); verwandte Produkte und Upsells werden nicht als Ergebnisse behandelt.
• Menüs und Mega-Menüs. Verlinken Sie Kategoriepunkte auf die echten Kategorie-Archive (/product-category/.../), nicht auf Seiten, die einen Shortcode enthalten. Archive sind ohne jede Einrichtung filterbar und behalten beim Filtern die Kategorie.
• Produktraster von Buildern. Ein Raster von Elementor, Divi oder einem anderen Builder, das eine eigene Produktabfrage ausführt, reagiert nicht auf den Filter, auch wenn das Formular auf der Seite bleibt. Ersetzen Sie es durch [woof_products] oder machen Sie seine Abfrage filterbar, wie in Filter-URL ändert sich, aber die Produkte nicht beschrieben.
• [woof_products] in Kategorie-Templates. Der Shortcode weiß nicht, auf welchem Kategorie-Archiv er steht; er ist für Seiten gedacht. In einem Kategorie-Template zeigt er alle Produkte, sofern Sie nicht taxonomies übergeben. Behalten Sie dort daher die standardmäßige Produktschleife des Archivs bei.

Wenn es trotzdem nicht funktioniert

• Die Anführungszeichen sind gerade. Aus einem Textverarbeitungsprogramm oder von manchen Webseiten kopierte Shortcodes enthalten typografische Anführungszeichen (’pa_age’), die WordPress als Attributanführungszeichen nicht akzeptiert. Tippen Sie sie in einem Shortcode-Block neu ein.
• Jeder Wert in taxonomies ist eine numerische Begriffs-ID, der Taxonomiename stimmt exakt, um + und : stehen keine Leerzeichen, und beide Shortcodes tragen denselben Wert.
• [woof_products] hat per_page, damit die Seite nicht bei 10 Produkten endet.
• In den WooCommerce-Einstellungen ist eine Shop-Seite ausgewählt.
• Auf der Seite befindet sich nur ein Filterformular, oder das erste trägt die gewünschte redirect.
• Das Produktraster auf der Seite ist [woof_products], [products] oder [products_woof], kein Builder-Widget mit eigener Abfrage.

Wenn alles stimmt und die Seite sich dennoch falsch verhält, posten Sie den Link zur Seite und beide Shortcodes genau so, wie sie im Editor stehen, im HUSKY-Support-Forum.