Der [woocommerce_product_filter] Shortcode rendert einen Live Produktsuchfilter, den Kunden verwenden können, um die Auswahl der auf einer Shop-Seite angezeigten Produkte zu verfeinern.
Verwenden Sie diesen Shortcode, um ein Eingabefeld anzuzeigen, das die angezeigten Produkte auf derselben Seite aktualisiert, während der Kunde tippt.
Dieser Shortcode muss im entsprechenden Kontext verwendet werden, z.B. dort, wo Produkte angezeigt werden, wie zum Beispiel auf einer Shop-Seite. Wie bei allen Live-Produktfiltern, die diese Erweiterung bietet, wird dieses Filterfeld verwendet, um die Auswahl der Produkte zu verfeinern und auf diejenigen zu reduzieren, die den Suchkriterien des Kunden entsprechen.
Verwenden Sie diesen Filter-Shortcode auf einer Shop-Seite oder in Verbindung mit dem [woocommerce_product_filter_products] Shortcode auf jeder Seite. Der [woocommerce_product_filter_products] Shortcode zeigt die Produkte an, als ob Sie auf der Shop-Seite wären, und in Kombination mit dem [woocommerce_product_filter] Shortcode werden sie dynamisch aktualisiert, während der Kunde etwas in das Suchfilterfeld eingibt.
Shortcode Attribute
Sie können die unten erklärten Attribute verwenden, um den Shortcode anzupassen. Zum Beispiel:
[woocommerce_product_filter placeholder="Was möchten Sie finden?"]
Suche
Diese Attribute bestimmen, wie passende Produkte gefunden werden. Sie sind standardmäßig alle aktiviert.
- title – Ob in den Produkttiteln gesucht werden soll, “ja” oder “nein”
- excerpt – Ob in den Kurzbeschreibungen der Produkte gesucht werden soll, “ja” oder “nein”
- content – Ob im Seiteninhalt der Produkte gesucht werden soll, “ja” oder “nein”
- categories – Ob in den zugehörigen Produktkategorien gesucht werden soll, “ja” oder “nein”
- attributes – Ob in den zugehörigen Produktattributen gesucht werden soll, “ja” oder “nein”
- tags – Ob in den zugehörigen Tags gesucht werden soll, “ja” oder “nein”
- sku – Ob in den Produkt-SKUs gesucht werden soll, “ja” oder “nein”
Benutzeroberfläche
Die folgenden Attribute betreffen die Benutzeroberfläche und die Darstellung des Filters.
- placeholder – Der Platzhaltertext, der angezeigt wird, wenn das Feld leer ist
- blinker_timeout – Begrenzt die Zeit in Millisekunden, die der Blinker angezeigt wird, “0” deaktiviert ihn
- delay – Die Zeit in Millisekunden, nach der die Suche gestartet wird, nachdem der Besucher aufgehört hat zu tippen
- characters – Die Mindestanzahl von Zeichen, die der Besucher in das Feld eingeben muss, um eine Suche zu starten
- submit_button – Ob ein Senden-Button angezeigt werden soll, standardmäßig deaktiviert, “ja” oder “nein”
- submit_button_label – Das Label des Senden-Buttons, z.B.
submit_button_label="Los geht's!" - show_clear – Ob das Aktionselement angezeigt werden soll, das das Feld leert, wenn darauf geklickt wird, “ja” oder “nein”
- wpml – Diese Option funktioniert mit WPML und bestimmt, ob die Suchergebnisse nach der aktuellen Sprache gefiltert werden, standardmäßig deaktiviert, “ja” oder “nein”, um zu deaktivieren
- update_address_bar – Wenn diese Option aktiviert ist, enthält die Browser-Adressleiste Informationen über die aktuellen Filtereinstellungen. Dadurch kann der Besucher die aktuelle Suche mit denselben Filtern als Lesezeichen speichern. Diese Option muss aktiviert sein, wenn Live-Filter in Kombination verwendet werden, “ja” oder “nein”
- update_document_title – Diese Option aktualisiert den Dokumententitel des Browsers basierend auf den aktiven Filtern, “ja” oder “nein”
- use_shop_url – Wenn diese Option aktiviert ist, verlinkt das Filterfeld zur Shop-Seite anstelle der aktuellen Seite. Wenn das Filterfeld auf der Shop-Seite selbst angezeigt wird, macht dies keinen Unterschied, “ja” oder “nein”
Überschrift
Diese Attribute betreffen die Überschrift, die für den Filter angezeigt wird.
- show_heading – Diese Option zeigt die Überschrift für das Suchfeld des Filters an, “ja” oder “nein”
- heading – Hier können Sie eine benutzerdefinierte Überschrift festlegen oder sie leer lassen, um die Standardeinstellung zu verwenden
- heading_class – Dies setzt die Klasse des Überschriften-Elements
- heading_element – Hier können Sie festlegen, welches HTML-Tag als Überschriften-Element verwendet wird, standardmäßig wird
"div"verwendet - heading_id – Dies setzt die ID des Überschriften-Elements
Erweiterte Attribute
Die erweiterten Attribute sollten normalerweise nicht angegeben werden, es sei denn, es besteht Bedarf, einen bestimmten Fall mit diesem Filter anzugehen.
- style – Setzt den Inline-CSS-Stil des umgebenden Containers
- breadcrumb_container – Identifiziert das Element über die CSS-Klasse; standardmäßig
".woocommerce-breadcrumb" - products_header_container – Identifiziert das Element über die CSS-Klasse; standardmäßig
".woocommerce-products-header" - products_container – Identifiziert das Element über die CSS-Klasse; standardmäßig
".products" - product_container – Bestimmt die CSS-Klasse der einzelnen Produktcontainer; standardmäßig
".product" - info_container – Identifiziert das Element über die CSS-Klasse; standardmäßig
".woocommerce-info" - ordering_container – Identifiziert das Element über die CSS-Klasse; standardmäßig
".woocommerce-ordering" - pagination_container – Identifiziert das Element über die CSS-Klasse; standardmäßig
".woocomerce-pagination" - result_count_container – Identifiziert das Element über die CSS-Klasse; standardmäßig
".woocommerce-result-count"
