Anleitung: Ajax Suche für WooCommerce umsetzen

suchfunktion

Du willst deinen Kunden passende Produkte anzeigen, direkt beim Eintippen im Suchfeld? Mit einer auf Ajax basierten Live-Suche ist das möglich. Wir stellen dir passende Plugins vor.

Das Prinzip der Direktsuche lässt sich gut am Beispiel des kostenfreien Plugins Ajax Search for WooCommerce von Damian Góra demonstrieren. Deine Besucher tippen die ersten Buchstaben eines gesuchten Produkts in das Suchfeld, und schon erhalten sie die ersten Treffer:

ajax woocommerce

Gegenüber der Standard-Suche – die mit einem kompletten vordefinierten Begriff abgeschlossen werden muss, der vielleicht keine Ergebnisse erzielt – steigt damit die Wahrscheinlichkeit, dass sie passende Waren finden. Das erhöht deine Umsätze. Eine Live-Demo von Ajax Search for WooCommerce findest du hier.

Die Erweiterung kannst du per Widget oder per Shortcode in deinen Shop einfügen. Sie funktioniert direkt nach der Aktivierung des Plugins. Folgende Einstellungen stehen optional zur Verfügung:

  • Wähle aus, wie viele Suchergebnisse maximal angezeigt werden
  • Definiere, welche Anzahl an Buchstaben eingetippt werden muss, damit die Suche anspringt
  • Passe die Texte sowie das Erscheinungsbild der Suchbox an
  • Zeige Produktbilder, Preisinformationen etc. in den Suchergebnissen

Mit der letztgenannten Option solltest du vorsichtig sein, da dies die Ladezeiten deutlich erhöhen kann, dazu gleich mehr:

ajax bilder

Beachte bei der Preisdarstellung die rechtlichen Grundlagen in Deutschland und Österreich.

Live-Suche fortlaufend gut testen

Du solltest jede Ajax-Suche gut auf einem separaten Testsystem überprüfen, bevor du sie in deinem Onlineshop freischaltest. Siehe diese Schritt-für-Schritt-Anleitung. Denn eine Live-Suche kann schnell zu Inkompatibilitäten mit deinen anderen Plugins oder mit deinem WooCommerce Theme führen.

So praktisch die erweiterte Suche für deine Kunden ist, sie hat auch Nachteile. Ajax-Komponenten können schnell zu langen Ladezeiten führen. Deswegen solltest du die Geschwindigkeit der Suche immer wieder auf den Prüfstand setzen. Vor allem dann, wenn dein Hosting nicht allzu performant ist, oder wenn du über eine große Produktpalette verfügst. Ajax Search for WooCommerce hat sehr gute Bewertungen bei wordpress.org. Alternativ kannst du auch die folgenden beiden Plugins verwenden, sie sind ebenfalls kostenlos:

Wir freuen uns über deinen Kommentar, falls du weitere Plugins und Werkzeuge für die Suchfunktion von WooCommerce kennst.

Du hast Fragen zu den einzelnen Punkten? Stelle diese gerne in den Kommentaren. Du willst über zukünftige Anleitungen zu WooCommerce informiert werden? Dann folge uns auf Twitter, Facebook oder über unseren Newsletter.

Newsletter abonnieren

Michael Firnkes

Redakteur bei MarketPress. Blogger aus Leidenschaft, Corporate Blog & Content Marketing Trainer, Buchautor (u.a. "Blog Boosting"). Mit-Organisator des WP Camp Berlin.

Das könnte dich auch interessieren

WooCommerce: Kostenlose Plugins für den Versand

Kunden haben unterschiedliche Anforderungen bzgl. der Versandeinstellungen in WooCommerce. Die WooCommerce Versandoptionen sind allerdings begrenzt und k ...

Mehr erfahren

WooCommerce: Die besten Plugins zur Bildkomprimierung

Die Komprimierung der allgemeinen Bilder und der Produktbilder ist für einen WooCommerce-Shop unerlässlich, denn der Shop sollte schnell sein. Bei einer ...

Mehr erfahren

Neue Funktionen ab WooCommerce 4

WooCommerce 4 steht kurz vor der Veröffentlichung und stellt mit der Integration des Plugins WooCommerce Admin ein neues Dashboard und mit Analytics neue ...

Mehr erfahren

Kommentare

3 Kommentare

  1. In der mobilen Version lasse ich nur das Icon anzeigen. Kann ich bei diesem die Farbe ändern? Es ist standardmäßig in schwarz. Ich würde gerne einen Farbcode einsetzen.

    Außerdem ist das Suchfeld zu groß, wenn man auf dem Smartphone aufs Icon drückt. Wo finde ich die Einstellung um diese Größe zu begrenzen?

    1. @ Seb: Die Einstellungen finden sich links im Menüpunkt “WooCommerce” im Untermenü “AJAX search bar”. Leider habe ich dort keine Option gefunden die Farbe des Icons anzupassen. Die Anleitung für das Plugin findest du hier. Zusätzlich gibt es Unterstützung über das Support-Forum. Dort könntest du auch wegen dem Suchfeld nachfragen. Viele Grüße Harald

  2. Hallo Harald,

    vielen Dank für die Antwort. Ich habe mir mal die Backend-Demo von der Pro-Version angeschaut. Da geht doch schon so einiges mit. Dort lassen sich auch die Farben des Search-Icons verändern.

    VG
    Seb

Schreibe eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du kannst folgende HTML Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>