WooCommerce-Meldung: Keine Produkte gefunden.

Usability: Die Suchergebnisseite "no products found" von WooCommerce optimieren

Bereits ein kleiner Tippfehler im Eingabefeld der WordPress-Suche und auch bei der speziellen Produktsuche von WooCommerce führt in der Regel zu einer Meldung à la: "Leider nichts gefunden". Blöd ist das. Und ärgerlich wird's spätestens dann, wenn der Suchende, ein potentieller Kunde also, frustriert den Shop verlässt, um sein Glück über Google und Co. zu finden.

Ein abspringender Interessent ist ein verlorener Kunde. Alle Bemühungen, Kundschaft durch Suchmaschinenoptimierung, Content Marketing und/oder Online-Werbung zu aggregieren, verlaufen im Sande, wenn sich die in den eigenen Shop gelockten Suchenden unzufrieden abwenden, weil sie ihre Erwartungen nicht erfüllt sehen. Das kann an schlecht eingestellten Marketing-Kampagnen liegen. Die sogenannte Usability (intuitive Bedienbarkeit) und die User Experience (angenehme Nutzererfahrung) einer Website und speziell eines Online-Shops sind aber mindestens genauso wichtig für den Erfolg der Online-Unternehmung. Anders gesagt: Auch die effektivste Werbung nützt nichts, wenn die hierdurch generierten Shop-Besucher kurz vor der Zielgeraden durch einen schlecht konzipierten Shop ausgebremst werden. Unfreundlich ist das.

No products found

In diesem Sinn unhöflich bzw. bedienerunfreundlich ist es beispielsweise, einen innerhalb des Shops Suchenden mit der lapidaren Meldung "nichts gefunden" allein zu lassen. Genau das aber sieht WooCommerce vor, sobald die interne Produktsuche bemüht wird und keinen Treffer zurückliefert. In diesem Fall tritt die Datei no-products-found.php in Aktion. Sie befindet sich innerhalb des Template-Ordners von WooCommerce im Unterordner loop und ist sehr bescheiden gehalten.

<p class="woocommerce-info">
<?php _e( 'No products were found matching your selection.', 'woocommerce' ); ?>
</p>

Beim Aufruf erzeugt sie lediglich die HTML-Ausgabe des Hinweises: "No products were found matching your selection." In der deutschen Übersetzung: "Keine deiner Auswahl entsprechenden Produkte gefunden." Das war's - und das wird auf einen Besucher des Online-Shops ähnlich frustrierend wirken wie auf den Besucher eines Ladenlokals, wenn er mit der Antwort abgespeist wird: "Ne, ham wa nich."

Dass das nicht der Weisheit oder Höflichkeit letzter Schluss sein kann, haben sich auch die Entwickler von WooCommerce gedacht. Indem sie diesen Hinweis in das Template-System des Shop-Plugins gepackt haben, sagen sie uns: Mach selbst was draus! Und das ist ganz einfach.

Die no-products-found.php updatesicher kopieren

Zunächst: Alle Dateien innerhalb des Template-Ordners von WooCommerce lassen sich mit wenig Mühe updatesicher überschreiben - genau deshalb liegen sie in diesem Ordner und in seinen Unterordnern.

Basiswissen: Anlegen eines Child-Themes mit @import (einfach) oder per enqueue (komplexer).

Innerhalb des aktiven Child-Themes muss hierfür zunächst ein leerer Ordner namens woocommerce angelegt werden (nur Kleinbuchstaben verwenden!). Hier hinein werden dann die PHP-Dateien des Template-Ordners von WooCommerce kopiert, die verändert werden sollen (nur diese). Falls eine zu bearbeitende Datei aus einem Unterordner geholt wird, muss sie in einen gleichnamigen Unterordner des neuen WooCommerce-Verzeichnisses kopiert werden.

Für die Datei no-products-found.php heißt das:

  1. Ordner namens woocommerce innerhalb des eigenen Child-Themes erstellen
  2. Innerhalb dieses Ordners einen Ordner namens loop erstellen
  3. Die Original-Datei no-products-found.php aus wp-contentpluginswoocommercetemplatesloop kopieren
  4. Die Kopie in den Ordner wp-contentthemes → [Name des Child-Themes] → woocommerceloop einfügen
  5. Diese Kopie nun mit einem Texteditor (nicht mit einem Textverarbeitungsprogramm) öffnen und wie nachfolgend beschrieben erweitern
  6. Abschließend speichern (Dateinamen nicht ändern)

Die no-products-found.php optimieren

Das Einfügen einer Überschrift dient der besseren Orientierung, das Zitieren des gesuchten Begriffes (des Suchworts oder der Suchphrase) mag dazu beitragen, dem Suchenden ggf. einen Tippfehler vor Augen zu führen.

<h1>Sie suchten nach: "<?php echo get_search_query(); ?>"</h1>

Die dann folgende, von WooCommerce vorgegebene Meldung 'No products were found ...' kann ersetzt werden, sofern hier auf die Übersetzungsfunktion verzichtet werden kann.

<p class="woocommerce-info">
Zu Ihrer Suchanfrage konnte leider kein passendes Produkt gefunden werden.
</p>

Ein dann folgendes Suchfeld mag zu einem weiteren Versuch animieren - sinnvoll beispielsweise, falls der Suchende seinen Tippfehler erkannt hat.

<p>
Versuchen Sie es doch mit ähnlichen Suchbegriffen noch einmal: .
</p>
<?php wc_get_template( 'product-searchform.php' ); ?>

Eventuell macht es Sinn, darunter zusätzlich das allgemeine Suchfeld von WordPress bereitzustellen, um nicht nur in den Shop-Produkt-Daten zu suchen, sondern zum Beispiel auch in den Beiträgen des Blogs.

<p>
Vielleicht hilft Ihnen auch die allgemeine Suche über die gesamte Website: .
</p>
<?php wc_get_template( 'product-searchform.php' ); ?>

Auch die Auflistung der Produkt-Kategorien kann hilfreich sein ...

<?php echo do_shortcode('[product_categories]'); ?>

... oder die Auflistung von Produkt-Schlagwörtern.

<p><?php wp_tag_cloud('smallest=14&largest=14&separator= | &taxonomy=product_tag'); ?></p>

Und wenn das alles nicht hilft, lockt vielleicht die Präsentation der Sonderangebote.

<?php echo do_shortcode('[sale_products]'); ?>

WooCommerce-Anzeige: Keine Produkte gefunden

Ehlert

Ralf Gerhard Ehlert studierte Germanistik, Musikwissenschaften und Phonetik. Als Wissenschaftler arbeitete er an der Uni Köln in einem kultur- und medienwissenschaftlichen Forschungskolleg. Zudem ist er ausgebildeter Webdesigner und Suchmaschinenoptimierer mit langjähriger Erfahrung in den Bereichen SEO, PR und Content Marketing. Seit 2014 arbeitet Ehlert als freier Online-Journalist und Auftrags-Texter (Ghostwriter) sowie Content- und Affiliate-Marketer.