Eine Produktsuche für WooCommerce erstellen

Für Onlineshops ist die Conversion-Rate einer der wichtigsten Indikatoren, ob der Onlineshop gut läuft oder nicht. Natürlich muss man zunächst einmal viele Besucher auf die Seite
bekommen. Dafür investieren Onlineshops sehr viel Energie und Geld in Suchmaschinenoptimierung.

Doch, sobald die Besucher auf der Webseite ankommen, sollten sie Kunden werden. Dazu sollte man eine übersichtliche Webseite bereitstellen, der Checkout sollte simpel gestaltet sein und man
sollte Newsletter und andere Kundenbindungsmöglichkeiten anbieten.

Ein weiterer wichtiger Punkt ist allerdings auch: Das Produkt, welches der Besucher sucht muss möglichst einfach zu finden sein.

Wenn man WordPress und WooCommerce für den eigenen Onlineshop verwendet, hat man meistens nichts weiter als einem einfachen Suchschlitz. Die Suchen darüber sind häufig nicht exakt genug für
die Wünsche des Kunden. Daraus resultieren nicht selten hohe Absprungraten auf den Suchergebnisseiten.

Das Plugin”Filter Custom Fields & Taxonomies” alias “Profisearchform” unterstützt Onlineshops und generell alle WordPress-Seiten genau an diesem Punkt. Mit Hilfe dieses Plugins kann man schnell und einfach Suchfilter erstellen, mit denen der Besucher schnell und einfach die Produkte oder Blogposts findet, die er sucht.

In diesem Tutorial lernst Du, wie man mit Hilfe dieses Plugins eine Produktsuche für WordPress WooCommerce erstellen kann. Dieses Tutorial basiert auf der Premiumversion des Plugins, es
gibt allerdings auch eine kostenlose Version im WordPress Repository, diese enthält allerdings nicht alle hier verwendeten Funktionen.

Voraussetzungen:

Um diesem Tutorial folgen zu können musst Du WooCommerce installiert haben. WooCommerce
ist ein kostenloses Shop-Plugin für WordPress. Außerdem musst Du das Suchplugin für WordPress installiert
haben.

Grundlegende Begrifflichkeiten

Taxonomien

Von WordPress kennst Du wahrscheinlich schon Schlagworte und Kategorien. Dies sind Taxonomien. Mit Hilfe von Taxonomien können Blogposts gruppiert werden. WooCommerce bringt ebenfalls eigene Taxonomien mit, zum Beispiel “Produkt Kategorie” und “Color”. Unsere Detailsuche wird auf diesen Taxonomien beruhen.

Benutzerdefinierte Felder

Neben Taxonomien kann man Blogposts auch mit Metadaten versehen. Dies sind sogenannte “Benutzerdefinierte Felder”. Bei WooCommerce ist beispielsweise der Preis ein benutzerdefiniertes Feld. Mit Hilfe dieses Feldes werden wir unsere Suche später um einen Preisslider erweitern.

Erstellen eines Produktfilters

Doch, schauen wir uns erst einmal das Resultat an, welches wir erreichen möchten:

suchfilter-in-aktion

In diesem Screenshot sehen wir die Produktsuche, welche wir mit Hilfe dieses Tutorials erstellen möchten. Es gibt ein Suchfeld, eine Kategorienauswahl und
ein Preisslider. Für dieses Bild wurde nach “Woo” in der Kategorie “Clothing” gesucht.

Mit Hilfe des Preissliders wurde festgelegt, dass nur Produkte angezeigt werden, welche zwischen 0 und maximal 54 € kosten sollen. Weiterhin können wir sehen, dass die
gesuchten Begrifflichkeiten in den Suchergebnissen gelb hervorgehoben werden, so dass der Benutzer sich einen besseren Überblick verschaffen kann.

Eine solche Suche werden wir nun Schritt für Schritt erstellen.

Wir erstellen einen neuen Filter

Nachdem Du das Suchplugin aktiviert hast, siehst Du im WordPress Dashboard einen neuen Menüpunkt: “Search Filter”. Hier kannst Du Deine Suchfilter verwalten. Wir klicken hier
auf “Neuer Filter” und kommen zunächst zu den Allgemeinen Einstellungen:

allgemeine-einstellungen

Dort geben wir als erstes eine ID für den Suchfilter an, sowie einen Namen. In der Sektion “Post Type” wählen wir “Produkte”. Damit bestimmen wir, welche Posts durchsucht werden sollen. Für unsere Produktsuche ist das naheliegenderweise “Produkte”, wir könnten natürlich auch unsere Blogbeiträge durchsuchen usw. Je nachdem, was für eine Art von Suche wir realisieren möchten. In der Sektion “Markieren” legen wir mit “Yes” fest, dass wir gefundene Suchphrasen hervorheben möchten. Die Sektion “Show Head” ermöglicht uns, festzulegen, ob wir einen Suchkopf anzeigen möchten.

In diesem würde dann beispielsweise stehen “8 von 23 möglichen Treffern”. In unseren Beispiel habe ich allerdings darauf verzichtet. Außerdem können wir festlegen, wie viele Produkte pro Suchergebnisseite wir anzeigen möchten. Der Wert ‘auto’ bedeutet, dass dies automatisch aus den WordPress-Einstellungen übernommen wird. Wenn wir aber später festlegen, in wie vielen Reihen die Suchergebnisse angezeigt werden sollen (in unserem Beispiel drei), dann wollen wir natürlich, dass möglichst alle Reihen voll sind. Wenn die WP Standardeinstellungen besagt, es sollen zehn Produkte pro Seite angezeigt werden, hätte man in der letzten Reihe immer nur noch ein Produkt, obwohl es eventuell noch weitere gäbe.

In unserem Beispiel habe ich deshalb sechs gewählt. Es werden also immer maximal sechs Produkte angezeigt und wenn es mehr Treffer gibt, kann der Nutzer durch die Suchergebnisse über eine Navigation am Ende der Suchergebnisse browsen.

Taxonomien & Postmetas

Nachdem wir auf “Nächster Schritt” geklickt haben, kommen wir in den Bereich “Taxonomien & Postmetas”. Hier wählen wir aus, welche Taxonomien und benutzerdefinierten Felder wir für unsere Suche verwenden möchten.

taxonomien-auswaehlen

Auf der linken Seite sieht man alle Taxonomien und benutzerdefinierten Felder, welche verfügbar sind. Via Drag&Drop können wir die gewünschten Elemente nun in die rechte Fläche ziehen. Für unsere Suche benötigen wir die Taxonomie “Produktkategorien” und das benutzerdefinierte Feld “_price”.

sortierung

Im unteren Bereich dieser Seite können wir festlegen, wie wir die Ergebnisse sortieren möchten. Man kann später auch eine “Order-by”-Selectbox verwenden, um diese Entscheidung dem Benutzer zu überlassen. In unserem Beispiel werden wir die Suchergebnisse so sortieren, dass unsere Bestseller als erstes angezeigt werden. Dazu wählen wir “Total_sales absteigend” aus.

Layout

layout

Im nächsten Schritt können wir das Layout festlegen. Oben hatte ich schon erwähnt, dass man auswählen kann, in wie vielen Spalten die Ergebnisse angezeigt werden sollen. Dies erfolgt hier. Man kann pro Zeile ein, zwei, drei oder vier Ergebnisse anzeigen lassen. Wir wählen drei Ergebnisse pro Zeile. Rechts davon kann man festlegen, wie der Hintergrund und Rahmen eines einzelnen Suchergebnisses aussehen soll und in welcher Farbe Suchphrasen markiert werden sollen.

Darunter findet sich ein recht mächtiges Instrument, der Template Editor.

template-editor

Mit Hilfe des Template Editors kann man das HTML jedes einzelnen Suchergebnisses festlegen. Das Plugin kommt mit einem Standardtemplate, welches man hier nun anpassen kann. Dazu gibt es Standard-Tags. Tags sind Platzhalter, welche dann von dem einzelnen Ergebnis überschrieben werden. So wird #the_title# beispielsweise vom Titel des jeweiligen Produkts überschrieben. Auch die vorher ausgewählten benutzerdefinierten Felder und Taxonomien können per Platzhalter eingefügt werden. #meta__price# fügt beispielsweise das benutzerdefinierte Feld “_price”, also den Preis ein.

Kurzer Exkurs:
Die eigentliche Stärke spielt der Template Editor aus, wenn man ein wenig PHP versteht. Denn der Template Editor kann PHP exekutieren. Nehmen wir nur einmal an, man hätte einige Produkte, welche man featured. Dafür hat man das Feld “is-featured” angelegt. Nun könnte man diese Produkte hervorheben, um sie von anderen Produkten abzuheben. Dies könnte man so machen:

<?php
	$is_featured = get_post_meta( get_the_ID(), 'is-featured', true );
	$class = "normal";
	if( $is_featured == 1 ) $class="featured";
?>
<h3 class="<?php echo $class; ?>">#the_title#</h3>

In diesem Beispiel würde nun der Titel des Produkts entweder von h3.normal oder von h3.featured umschlossen. Die featured-Class können wir nun mit CSS anpassen. Für unsere Beispielanwendung benötigen wir diese Funktion allerdings nicht.

Formularelemente

Im Bereich “Formularelemente” kommt nun alles zusammen. Hier legen wir fest, welche Formularelemente wir verwenden möchten. Alle möglichen Elemente finden sich auf der rechten Seite. Mit Hilfe von Drag&Drop können wir diese nun in den Bereich “Ausgewählte Formular Elemente” ziehen. Wir verwenden insgesamt vier Elemente:

  • Die Volltextsuche
  • Eine Selectbox
  • Eine Spanne
  • Einen Suchbutton

Natürlich sind das nicht alle Möglichkeiten. Man kann Checkboxen, Radioboxen, weitere Inputfelder (für min./max.-Suchen), Google Maps, Kalender und vieles weitere verwenden.

Zunächst ziehen wir die Volltextsuche in den Bereich “Ausgewählte Formular Elemente”. Sobald wir das Element abgelegt haben, erscheint eine Dialogbox, in welcher wir das Element weiter konfigurieren können.

suche-dialog

Zunächst legen wir den Namen des Formularelements fest (“Suche”). Und anschließend legen wir fest, welche Bereiche des Produkts von der Suche erfasst werden sollen. In unserem Beispiel ist dies der Titel und der Produktausschnitt (das Exzerpt). Wir könnten hier sogar die benutzerdefinierten Felder durchsuchen lassen, welche wir zuvor im Bereich “Taxonomien & Postmeta” für unseren Suchfilter bereitgestellt haben.

In unserem Beispiel haben wir nur den Preis ausgewählt, da macht das wenig Sinn. Aber in anderen Anwendungen gibt es vielleicht tatsächlich interessanten
Text in diesen Feldern. So kann man diese Volltextsuche tatsächlich in eine umfassende Volltextsuche ausbauen.

Das nächste Element, welches wir wählen, ist die Selectbox.

selectbox-dialog

Hier hat man schon mehrere Möglichkeiten. Das wichtigste Prinzip zuerst: die Datenquelle. Beinahe bei jedem Element muss man eine Datenquelle festlegen. Damit bestimmt man, welche Taxonomie oder welches benutzerdefinierte Feld durchsucht wird. In unserem Fall ist das “product_cat”. Wie man sieht ist als Modus “Automatisch” ausgewählt.

Dies bedeutet, dass automatisch jeder Term (also jede Produktkategorie) welcher Produkte enthält als Option angezeigt wird. Man kann hier auch auf “Individuell” schalten und selbst festlegen, welche Kategorien angezeigt werden sollen.

In einem (englischsprachigen) Video wird hier näher auf diese Möglichkeiten eingegangen. Hat man eine hierarchisch gegliederte Taxonomie ausgewählt (Produktkategorien sind hierarchisch organisiert, dass heißt man hat beispielsweise die Kategorie “Musik” und die Unterkategorie “Singles”
oder “Alben”) kann man auch festlegen, dass Unterkategorien mit einem bestimmten Zeichen unter die Hauptkategorie eingerückt werden sollen. Dazu klickt man auf “Hierarchical order” und legt mit “Symbol to indent” das Zeichen zum Einrücken fest.

Eine weitere Möglichkeit soll hier kurz angerissen werden. Am Ende des Konfigurationsdialogs sieht man die Zeile “Zeige Feld an, wenn …”. Damit hat man die Möglichkeit ein bestimmtes Formularfeld nur anzuzeigen, wenn in einem anderen Feld ein bestimmter Wert ausgewählt wurde. Bleiben wir bei unserem Shopbeispiel:

Wir haben zum Beispiel eine Kategorie “Klamotten” und es gibt “rote”, “schwarze” und “weiße” Klamotten. Wenn jemand nun Klamotten auswählt, könnte man nun eine neue Auswahl anzeigen, in welcher der Besucher auswählen kann, dass er nur “schwarze” Klamotten suchen möchte. Wenn der Nutzer hingegen Musik-CDs sucht, würde diese Farbauswahl wenig Sinn machen und könnte deswegen wieder ausgeblendet werden.

Als nächstes möchten wir einen Preisslider darstellen. Dazu wählen wir das Element “Spanne” und ziehen es von links nach rechts.

preis-range

Mit Hilfe eines Preissliders kann der Nutzer nun sagen, zeige mir nur Produkte an, welche zwischen X und Y Euro kosten. Dazu wird ein Slider dargestellt und der Kunde kann die beiden Werte auf dem Slider verschieben. Im Konfigurationsdialog legen wir nun den Start- und Endpunkt fest, also den minimalen und maximalen Preis, der ausgewählt werden kann. Bei “Step” kann man festlegen, wie groß die einzelnen Sprünge sein sollen, welche der Nutzer machen kann.

Der Standardwert ist hier 1, aber man könnte auch sagen, dass der Nutzer nur in 10-Euro-Sprüngen navigieren kann, indem man den Wert auf 10 erhöht. Außerdem kann man die Einheit festlegen, in unserem Fall ist dies “€”, aber könnten natürlich auch “$” sein. Mit der Checkbox “Zeige Einheit am Anfang” würde das ganze dann so angezeigt:

€ 0 – € 100

In Deutschland verwenden wir die Währungseinheit allerdings meist hinter dem Preis, weshalb wir die Checkbox nicht auswählen. Und natürlich auch hier müssen wir eine Datenquelle auswählen. Der Preis der Produkte wird in dem benutzerdefinierten Feld “_price” hinterlegt, welches wir auswählen.

Im letzten Schritt nun wählen wir noch einen “Suchen”-Button. Wenn wir diesen nicht auswählen, wird die Ajaxsuche mit jeder Änderung durchgeführt, welche der Nutzer macht. Das heißt, sobald der Nutzer sagen wir eine Produktkategorie auswählt, würde eine Suche durchgeführt. Hier gibt es unterschiedliche Ansichten. Manche mögen diese sofortige Suche, andere finden, dass dies zu viel Unruhe auf der Seite erzeugt. Mit dem “Suchen”-Button wird die Suche erst ausgeführt, sobald der Nutzer auf den Button klickt.

Die Suchseite erstellen

Dies war der letzte Schritt in der Erstellung des Suchfilters. Nachdem wir auf “Nächster Schritt” klicken generiert das Plugin einen Shortcode, welchen wir auf einer neuen Seite einsetzen können. Wir erstellen also eine neue Seite, nennen diese Suche und fügen dort den Shortcode ein. Mit Hilfe dieses Shortcodes wird nun das Suchformular dargestellt und der Besucher kann die Suche ausführen.

suchfilter-in-aktion

Fazit

Und schon haben wir eine Detailsuche für unseren WooCommerce Onlineshop. Natürlich kann man die Suche auch als Widget anzeigen lassen und hat viele weitere Optionen. Weitere ausführliche Informationen (in Englisch) findet man auf der Seite von Profisearchform.

Mit Hilfe eines ausgeklügelten Suchfilters, welcher perfekt an den Content des eigenen Onlineshops angepasst ist, kann man die Conversion-Rate bei Suchen deutlich erhöhen. Mit Hilfe dieses Plugins kann man dies schnell und einfach realisieren.