Passen Sie die WooCommerce-Produktsuche auf Ihrer WordPress-Site an

Möchten Sie die WooCommerce-Produktsuche in Ihrem Online-Shop anpassen? WooCommerce bietet eine separate Shop-Seite für eine Auflistung von Produkten. Durch die Änderung der Produktsuche kann Ihr Kunde sein gewünschtes Produkt auf der Shopseite selbst filtern. In diesem Artikel untersuchen wir, wie Sie eine WooCommerce-Produktsuche auf der WordPress-Website anpassen können.

WordPress wird mit dem integrierten Suchformular geliefert. Wenn ein Benutzer ein Schlüsselwort in ein Suchfeld eingibt, wird er auf die Suchseite umgeleitet, auf der der Inhalt des Schlüsselworts angezeigt wird. In WordPress sieht die Suchseite normalerweise wie eine Beitragsliste aus.

Dieser Suchablauf ist ideal für CMS-Websites. Aber wenn es um WooCommerce geht, müssen wir diesen Flow ändern.

Bei WooCommerce sollte ein Benutzer, wenn er nach dem Produkt sucht, das gefilterte Ergebnis auf der Shop-Seite anzeigen. Es macht keinen Sinn, das Ergebnis im Format einer Beitragsliste anzuzeigen.

Lassen Sie es mich anhand der Screenshots erklären.

In meinem Fall verwende ich das Thema ‘twentyfifteen’. Ich habe das WooCommerce-Plugin installiert und auf meiner Shop-Seite sind nur wenige Produkte aufgeführt.

Wenn ich nun das Schlüsselwort "Entwicklung" in das Suchfeld eingebe, wird es auf eine Seite weitergeleitet, auf der ich das Produkt sehe, wie im Screenshot unten gezeigt.

Das ist etwas, was wir auf einer Website nicht wollen. Schließlich ist es ein Online-Shop, daher bevorzugen wir, dass die Produktsuche auf der Shop-Seite wie unten gefiltert werden sollte.

Sehen wir uns jedoch an, wie Sie die Produktsuche in WooCommerce anpassen können.

Passen Sie die Produktsuche von WooCommerce an

WooCommerce speichert alle Produkte mit dem post_type ‘product’. Um unser Ziel zu erreichen, müssen wir Parameter post_type=productin der Such-URL übergeben.

Grundsätzlich müssen wir die URL ändern, wenn wir auf die Suchschaltfläche klicken

YOUR_SITE_URL/?s=Entwicklung

Mit

YOUR_SITE_URL/?s=Entwicklung&post_type=Produkt

Dazu müssen wir eine searchform.phpDatei im Verzeichnis unseres aktiven Themes erstellen. Dies ist die Datei, aus der WordPress ein Suchformular anzeigt. Wenn diese Datei nicht in einem Themenordner gefunden wird, wird das Suchformular aus der Kerndatei von WordPress gerendert. Der Entwickler sollte diese Datei im Theme-Ordner erstellen, wenn sie nicht existiert.

Wenn Sie searchform.phpIhr Thema bereits kennen, müssen Sie dem Formular nur ein ausgeblendetes Feld hinzufügen, wie im folgenden Code gezeigt.

searchform.php

<form method="get" action="<?php echo home_url('/'); ?>">
    <input type="text" name="s" placeholder="What you are looking for?" value="<?php the_search_query(); ?>">
    <input type="hidden" name="post_type" value="product">
</form>

Hier sollten Sie diesem Formular etwas CSS hinzufügen und es mit Ihrem Website-Design abgleichen.

Beachten Sie, dass wir ein verstecktes Feld mit dem Namen ‘post_type’ und dem Wert als ‘product’ übergeben haben. Dies ist die eigentliche Logik zur Anpassung der Produktsuche in WooCommerce.

Versuchen Sie nun, einen beliebigen Produktnamen in das Suchfeld einzugeben, es leitet Sie auf die Shop-Seite weiter. Und auf der Shop-Seite sehen Sie das gefilterte Ergebnis zum Keyword.

Ich hoffe, Sie verstehen, wie Sie die WooCommerce-Produktsuche auf Ihrer WordPress-Website anpassen können. Ich würde gerne Ihre Gedanken und Vorschläge im Kommentarbereich unten hören.

Zum Thema passende Artikel

• Eine Kurzanleitung zur WooCommerce REST API
• So fügen Sie benutzerdefinierte Endpunkte zur WordPress-API hinzu
• So zeigen Sie verwandte Produkte mit der WooCommerce REST API an