Möchten Sie ein WooCommerce-Warenkorbsymbol in Menüleisten hinzufügen?
Das Hinzufügen eines WooCommerce-Warenkorbsymbols zu Ihrem Menü hilft Käufern, ihren Warenkorb anzuzeigen und schneller zur Kasse zu gehen, insbesondere wenn es eine Live-Artikelanzahl enthält. Es ist eine der einfachsten Möglichkeiten, das Einkaufserlebnis zu verbessern und Warenkorbabbrüche zu reduzieren.
Wenn Sie einen Online-Shop betreiben, ist die Schaffung des besten Benutzererlebnisses entscheidend. Wenn Sie die Bedürfnisse der Käufer nicht erfüllen, werden sie Ihre Website verlassen und eine bessere, benutzerfreundlichere Alternative suchen.
Um den Einkauf in Ihrem Shop zu erleichtern, können Sie Ihrem WooCommerce-Menü ein Warenkorbsymbol mit Artikelanzahl hinzufügen. So können Käufer ihre Warenkorbinhalte sehen und jederzeit zur Kasse gehen.
Dieser Artikel zeigt Ihnen Schritt für Schritt, wie Sie ein WooCommerce-Warenkorbsymbol zu Menüs hinzufügen.
Sie haben wahrscheinlich schon Warenkorbsymbole wie dieses beim Einkaufen bei Amazon gesehen:
Das Symbol bleibt im Navigationsmenü, auch wenn Sie auf verschiedene Produktseiten klicken.
Warum ein WooCommerce-Warenkorbsymbol im Menü hinzufügen?
Der Hauptvorteil der Hinzufügung von Warenkorb-Symbolen zu Ihrem Navigationsmenü besteht darin, dass Käufer sehen können, wie viele Produkte sie dem Warenkorb hinzugefügt haben. Darüber hinaus erhalten sie eine Vorstellung davon, wie viel die Dinge kosten werden, bevor sie zur Kasse gehen.
Zusätzlich bieten Warenkorb-Menüsymbole den Benutzern eine schnelle und einfache Möglichkeit, zur Warenkorbseite zu gelangen. Dadurch wird der Checkout-Prozess reibungsloser, was die Wahrscheinlichkeit erhöht, dass Besucher ihre Warenkörbe nicht abbrechen.
So fügen Sie ein WooCommerce-Warenkorbsymbol zu Ihrem WordPress-Menü hinzu (mit Artikelanzahl)
WooCommerce enthält standardmäßig kein Warenkorbsymbol für Menüs. Stattdessen müssen Sie entweder ein WooCommerce-Plugin installieren oder diese Funktionalität von Grund auf neu programmieren.
Wenn das Schreiben von Code beängstigend klingt, machen Sie sich keine Sorgen. Hier sind 2 super einfache, codefreie Möglichkeiten, ein WooCommerce-Warenkorbsymbol zu Ihrem Menü hinzuzufügen.
Methode 1: WooCommerce-Warenkorbsymbol mit SeedProd zum Menü hinzufügen (ohne Code)
Die erste Methode beinhaltet die Verwendung eines leistungsstarken WordPress-Plugins zur Anpassung Ihres WooCommerce-Shops.
SeedProd ist der beste Website-Builder für WordPress mit über 1 Million Nutzern. Es ermöglicht Ihnen, benutzerdefinierte WordPress-Themes, WooCommerce-Websites und hochkonvertierende Landingpages ohne Code zu erstellen.
Mit über 200 vorgefertigten Vorlagen ist der Einstieg einfach. Sie können jedes Layout mit dem visuellen Drag-and-Drop-Builder und responsiven Blöcken und Abschnitten anpassen.
Besonders hervorzuheben sind die dedizierten WooCommerce-Blöcke. Sie ermöglichen es Ihnen, jeden Teil Ihrer WooCommerce-Website mit nur wenigen Klicks anzupassen.
Folgen Sie den nachstehenden Schritten, um ein WooCommerce-Warenkorbsymbol zu Menüs mit SeedProd hinzuzufügen.
Schritt 1. SeedProd Website Builder installieren
Laden Sie zuerst eine Kopie des SeedProd Website Builder Plugins herunter.
Hinweis: Es gibt eine kostenlose Version von SeedProd, die Sie verwenden können. Wir werden jedoch den SeedProd Elite Plan für die WooCommerce-Funktionen verwenden, die wir benötigen.
Nachdem Sie SeedProd heruntergeladen haben, müssen Sie das Plugin auf Ihrer WordPress-Website installieren und aktivieren. Sie können dieser Anleitung folgen, um ein WordPress-Plugin zu installieren, falls Sie Hilfe benötigen.
Gehen Sie als Nächstes zu SeedProd » Einstellungen im WordPress-Adminmenü. Dort können Sie Ihren SeedProd-Lizenzschlüssel eingeben und die Pro-Plugin-Funktionen freischalten.
Sie finden Ihren Lizenzschlüssel, indem Sie die SeedProd-Website besuchen und sich in Ihr Konto einloggen. Kopieren Sie von dort Ihren Lizenzschlüssel aus dem Abschnitt „Downloads“.
Fügen Sie nun Ihren Schlüssel in das Textfeld ein und klicken Sie auf die Schaltfläche Schlüssel überprüfen.
Schritt 2. Neues WooCommerce-Theme erstellen
Der nächste Schritt ist der Besuch der Seite SeedProd » Theme Builder . Hier können Sie ein neues benutzerdefiniertes Theme für Ihre WooCommerce-Website erstellen.
Wir empfehlen diese Option, da sie Ihr bestehendes WordPress-Theme durch ein schnelles und leichtgewichtiges Theme ersetzt, das Sie einfach per Drag & Drop anpassen können. Das bedeutet auch, dass Sie kein separates Child-Theme erstellen oder zusätzliche WordPress-Plugins installieren müssen.
Es gibt 2 Möglichkeiten, ein Theme mit dem Theme Builder von SeedProd zu erstellen:
- Vorgefertigtes Theme: Importieren Sie ein fertiges WooCommerce-Theme, das automatisch alle benötigten Seiten für Ihren Online-Shop erstellt.
- Einzelne Theme-Teile: Erstellen Sie die verschiedenen Teile Ihres WooCommerce-Shops einzeln.
Wir verwenden für diese Anleitung die Methode mit dem vorgefertigten Theme, da diese alles automatisch für Sie erledigt. Klicken Sie auf die Schaltfläche Themes, um eine Liste mit vorgefertigten WordPress- und WooCommerce-Themes anzuzeigen.
Jedes Theme ist zu 100 % mobilfreundlich und lässt sich mit dem Drag & Drop-Seitenersteller von SeedProd einfach bearbeiten.
Bewegen Sie die Maus über ein beliebiges Theme und klicken Sie auf das Häkchen-Symbol, um es in den Theme Builder zu importieren.
Wir verwenden für dieses Tutorial das Theme „Sportswear Store“.
Nach dem Import Ihres Themes sehen Sie alle Vorlagen, aus denen das Design Ihrer WooCommerce-Website besteht. Sie können jede Vorlage einzeln anpassen, um sie mit dem Seitenersteller von SeedProd an die Bedürfnisse Ihrer Website anzupassen.
Als Nächstes zeigen wir Ihnen, wie Sie die Vorlage „Header nav“ anpassen.
Schritt 3. Passen Sie Ihr WooCommerce-Navigationsmenü an
Viele der vorgefertigten Themes von SeedProd enthalten automatisch ein WooCommerce-Warenkorbsymbol in der Navigationsleiste. Öffnen wir die Header-Navigation-Vorlage, um zu sehen, wie sie funktioniert.
Finden Sie die Vorlage „Header nav“ in Ihrer Vorlagenliste und klicken Sie auf den Link Design bearbeiten, um sie im visuellen Seitenersteller zu öffnen.
Auf der rechten Seite sehen Sie Ihr Header-Layout, wenn Sie die Seite öffnen. Links befinden sich Blöcke und Abschnitte, die Sie Ihrem Design hinzufügen können.
Um einen Block zu Ihrer Seite hinzuzufügen, ziehen Sie ihn von links und legen Sie ihn in Ihrem Design ab.
Wie Sie sehen, befinden sich bereits 3 Blöcke im Header:
- Bild für das Website-Logo
- WordPress-Navigationsmenü
- Menü-Warenkorb-Block
Der Menü-Warenkorb-Block zeigt ein Warenkorb-Symbol, die Anzahl der Artikel im Warenkorb und den Zwischensummenbetrag an. Sie können das Aussehen und die Funktionalität im Einstellungsbereich des Menü-Warenkorbs auf der linken Seite ändern.
Sie können beispielsweise den Warenkorb ausblenden, wenn er leer ist, die Zwischensumme anzeigen oder ausblenden und die Ausrichtung des Warenkorbs ändern.
Weitere Einstellungen finden Sie, indem Sie auf die Registerkarte Erweitert klicken. Sie können beispielsweise die Farbe des Warenkorbs und des Warenkorb-Badges ändern, den Abstand anpassen und sogar das Badge auf Mobil- oder Desktop-Geräten ausblenden.
Wenn Sie mit dem Aussehen Ihres Menü-Warenkorb-Symbols zufrieden sind, klicken Sie auf die grüne Schaltfläche Speichern.
Schritt 4. Passen Sie Ihr WooCommerce-Theme an
Nun können Sie die anderen Vorlagen anpassen, aus denen Ihr WooCommerce-Theme besteht. Der Vorgang ähnelt dem vorherigen Schritt. Wenn Sie jedoch Hilfe benötigen, finden Sie hier einige Schritt-für-Schritt-Anleitungen:
- So passen Sie Ihre WooCommerce-Shop-Seite an
- So passen Sie WooCommerce-Produktkategorie-Seiten an
- So zeigen Sie empfohlene Produkte in WooCommerce an
Schritt 5. Aktivieren Sie das SeedProd WooCommerce Theme
Nachdem Sie Ihr WooCommerce-Theme mit SeedProd angepasst haben, können Sie es auf Ihrer Website live schalten.
Gehen Sie dazu zu SeedProd » Theme Builder. Schalten Sie dann in der oberen rechten Ecke den Schalter „SeedProd Theme aktivieren“ auf die Position Ja.
Jetzt können Sie Ihr Menü-Warenkorb-Symbol in der Vorschau anzeigen, um zu sehen, wie es aussieht.
Wenn Käufer auf das Menü-Warenkorb-Symbol klicken, gelangen sie zur Warenkorb-Seite. Sie können auch Ihren WooCommerce-Warenkorb mit SeedProd anpassen.
Hier ist ein Beispiel für Amazons Menü-Warenkorb, das wir ebenfalls mit SeedProd erstellt haben:
Methode 2: WooCommerce Menü-Warenkorb-Symbol mit einem kostenlosen Plugin hinzufügen
Als Nächstes folgt eine Lösung, die Sie verwenden können, wenn Sie Ihr bestehendes WordPress-Theme nicht ändern möchten. Stattdessen können Sie ein kostenloses WooCommerce-Plugin verwenden, um Ihren WP-Navigationsmenü-Elementen ein Symbol hinzuzufügen.
Das Plugin, das wir verwenden werden, heißt WooCommerce Menu Cart. Es funktioniert mit WooCommerce, Easy Digital Downloads und vielen anderen WordPress E-Commerce-Plattformen und ist in wenigen Minuten eingerichtet.
Schritt 1. WooCommerce Menu Cart Plugin installieren
Gehen Sie zuerst zu Plugins » Neues Plugin hinzufügen in Ihrem WordPress-Dashboard und geben Sie „WooCommerce Menu Cart“ in das Suchfeld ein.
Klicken Sie dann auf die Schaltfläche Installieren und auf Aktivieren, um das Plugin live zu schalten.
Schritt 2. WooCommerce Warenkorb-Symbol konfigurieren
Nach der Installation des Plugins gehen Sie in Ihrem WordPress-Admin-Panel zu WooCommerce » Menu Cart Setup. Auf dieser Seite können Sie Ihre E-Commerce-Plattform auswählen, ein Menü auswählen, um Ihr Woo-Warenkorb-Symbol anzuzeigen, ein Warenkorb-Symbol auswählen und mehr.
Konfigurieren Sie die Einstellungen für Ihr Einkaufswagen-Symbol und klicken Sie dann auf die Schaltfläche Änderungen speichern .
Sie können Ihre Website jetzt besuchen und Ihr WooCommerce-Einkaufswagen-Symbol-Menü sehen.
FAQs zu WooCommerce-Warenkorbsymbolen in Menüs
Das Hinzufügen eines WooCommerce-Einkaufswagen-Symbols zu Ihrem Menü erleichtert Besuchern den Checkout, was für Sie zu mehr abgeschlossenen Verkäufen führt.
Ob Sie den Drag-and-Drop-Builder von SeedProd oder ein kostenloses Plugin verwenden, Sie benötigen keinen Code oder komplizierte Einstellungen, damit es funktioniert. Nur ein paar Klicks und Sie sind fertig.
Als Nächstes möchten Sie vielleicht diese Anleitungen lesen, um Ihren WooCommerce-Shop weiter anzupassen:
- So passen Sie den WooCommerce-Tab „Zusätzliche Informationen“ an
- So fügen Sie die Schaltfläche „Warenkorb anzeigen“ in WooCommerce hinzu
- So ändern Sie den Titel der Shop-Seite in WooCommerce
- So erstellen Sie eine beeindruckende Produktbildergalerie in WooCommerce
- So fügen Sie Produktseiten in WooCommerce Sternebewertungen hinzu
- So zeigen Sie verwandte Produkte in WooCommerce an
- So zeigen Sie Produktkategorien und -tags in WooCommerce an
- So erhalten und zeigen Sie Produktbeschreibungen in WooCommerce an
- So beheben Sie, dass WooCommerce „Warenkorb anzeigen“ nicht funktioniert
- So blenden Sie nicht vorrätige Produkte in WooCommerce aus
Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
