Sie haben Ihren WooCommerce-Shop eingerichtet, aber die Kunden können ihren Warenkorb nicht im Menü sehen. Sie fügen ein Produkt hinzu und müssen dann den Warenkorb-Link suchen, bevor sie zur Kasse gehen können.
Ein WooCommerce-Warenkorbsymbol behebt das. Es zeigt eine Live-Artikelanzahl an, die sich aktualisiert, wenn Kunden Produkte hinzufügen, direkt in Ihrer Website-Kopfzeile, sodass der Weg zur Kasse immer nur einen Klick entfernt ist.
In diesem Leitfaden zeige ich Ihnen zwei Möglichkeiten ohne Code, ein WooCommerce-Warenkorbsymbol zu Ihrem Menü hinzuzufügen, wie Sie das Aussehen anpassen und wie Sie ein Symbol beheben, das nicht angezeigt wird.
Was ein Menü-Warenkorbsymbol ist (und warum es hilft)
Ein Menü-Warenkorbsymbol ist ein kleiner Einkaufswagen, der sich in Ihrem primären WooCommerce-Navigationsmenü befindet und die Anzahl der Artikel im Warenkorb eines Kunden anzeigt. Die Anzahl aktualisiert sich, wenn sie Produkte hinzufügen oder entfernen, und das Symbol bleibt im Menü, während sie verschiedene Produktseiten durchsuchen.
Sie haben wahrscheinlich schon Warenkorbsymbole wie dieses beim Einkaufen bei Amazon gesehen:
Das Hinzufügen eines solchen Symbols zu Ihrem Shop bewirkt zwei Dinge:
- Zeigt Kunden, was sich in ihrem Warenkorb befindet: Die Artikelanzahl und der Zwischensumme geben eine laufende Summe an, bevor sie die Kasse erreichen.
- Beschleunigt den Checkout: Ein Ein-Klick-Weg zum Warenkorb hält den Prozess reibungslos, sodass Besucher weniger wahrscheinlich ihre Warenkörbe abbrechen.
So fügen Sie ein WooCommerce-Warenkorbsymbol zu Ihrem WordPress-Menü hinzu (mit Artikelanzahl)
WooCommerce enthält standardmäßig kein Einkaufswagen-Symbol für Menüs. Sie installieren entweder ein WooCommerce-Plugin oder fügen den Code selbst hinzu.
Hier sind zwei codefreie Möglichkeiten, dies zu tun. Die erste verwendet SeedProd, um das Symbol in Ihre Theme-Kopfzeile einzubauen. Die zweite verwendet ein kostenloses Plugin, wenn Sie Ihr aktuelles Theme nicht ändern möchten.
Methode 1: Fügen Sie ein WooCommerce-Warenkorbsymbol mit SeedProd hinzu (ohne Code)
SeedProd ist ein Drag-and-Drop- Website-Builder für WordPress, mit dem Sie einen benutzerdefinierten WooCommerce-Shop erstellen können, ohne Code anzufassen. Seine speziellen WooCommerce-Blöcke enthalten einen Menü-Warenkorb-Block, um ein Warenkorbsymbol zu Ihrer Kopfzeile hinzuzufügen.
Ich verwende SeedProd, um meine eigene Website zu erstellen, und der Menü-Warenkorb-Block ist das Teil, das ich hier verwende, da er die Artikelanzahl, die Zwischensumme und das Styling an einem Ort handhabt. Mit über 300 Vorlagen zum Starten können Sie an einem Nachmittag eine Kopfzeile erstellen.
Befolgen Sie die nachstehenden Schritte, um mit SeedProd ein WooCommerce-Warenkorbsymbol zu Ihrem Menü hinzuzufügen.
Schritt 1. SeedProd installieren
Laden Sie zuerst eine Kopie des SeedProd Website Builder Plugins herunter.
Nach dem Herunterladen von SeedProd installieren und aktivieren Sie das Plugin auf Ihrer WordPress-Website. Sie können dieser Anleitung folgen, um ein WordPress-Plugin zu installieren, wenn Sie Hilfe benötigen.
Gehen Sie als Nächstes zu SeedProd » Einstellungen im WordPress-Adminmenü. Dort geben Sie Ihren SeedProd-Lizenzschlüssel ein, um die Pro-Funktionen freizuschalten.
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
Gehen Sie als Nächstes zur Seite SeedProd » Theme Builder. Hier erstellen Sie ein benutzerdefiniertes Theme für Ihre WooCommerce-Website.
Ich empfehle diese Option, da sie Ihr bestehendes WordPress-Theme durch ein schnelles, leichtgewichtiges Theme ersetzt, das Sie per Drag & Drop bearbeiten können. Außerdem erhalten Sie den Menü-Warenkorb-Block, den Sie für das Warenkorb-Symbol benötigen.
Es gibt zwei Möglichkeiten, ein Theme mit dem Theme Builder von SeedProd zu erstellen:
- Vorgefertigtes Theme: Importieren Sie ein fertiges WooCommerce-Theme, das alle Seiten erstellt, die Sie für Ihren Online-Shop benötigen.
- Individuelle Theme-Teile: Erstellen Sie jeden Teil Ihres WooCommerce-Shops einzeln.
Ich werde hier die Methode mit dem vorgefertigten Theme verwenden, da sie die Einrichtung für Sie übernimmt. Klicken Sie auf die Schaltfläche Themes, um die Liste der vorgefertigten WordPress-Theme-Kits anzuzeigen.
Jedes Theme ist mobilfreundlich und lässt sich einfach mit dem Drag-and-Drop-Page-Builder von SeedProd bearbeiten.
Fahren Sie mit der Maus über ein beliebiges Theme und klicken Sie auf das Häkchen-Symbol, um es zu importieren.
Ich werde für dieses Tutorial das Sportswear Store-Theme verwenden.
Nach dem Import sehen Sie alle Vorlagen, aus denen das Design Ihrer WooCommerce-Website besteht. Sie können jede einzelne bearbeiten, um sie an Ihren Shop anzupassen.
Als Nächstes zeige ich Ihnen, wie Sie die Vorlage „Header-Navigation“ anpassen, in der sich das Warenkorb-Symbol befindet.
Schritt 3. Passen Sie Ihr WooCommerce-Navigationsmenü an
Viele der vorgefertigten Themes von SeedProd enthalten bereits ein WooCommerce-Warenkorb-Symbol in der Navigationsleiste. Öffnen Sie die Vorlage für die Header-Navigation, um sie zu überprüfen und anzupassen.
Finden Sie die Vorlage „Header-Navigation“ in Ihrer Vorlagenliste und klicken Sie auf den Link Design bearbeiten, um sie im visuellen Builder zu öffnen.
Ihr Header-Layout wird rechts angezeigt. Links befinden sich die Blöcke und Abschnitte, die Sie hinzufügen können.
Um einen Block hinzuzufügen, ziehen Sie ihn von links und legen Sie ihn auf Ihr Design.
Der Header enthält bereits drei Blöcke:
- Bild für das Website-Logo
- WordPress-Navigationsmenü
- Menü-Warenkorb-Block
Der Menü-Warenkorb-Block zeigt das Warenkorb-Symbol, die Artikelanzahl und den Gesamtbetrag an. Klicken Sie darauf, um die Einstellungen des Menü-Warenkorbs zu öffnen, wo Sie steuern können, wie er aussieht und sich verhält.
Im Einstellungsfenster können Sie:
- Warenkorb leer ausblenden: Zeigen Sie das Symbol erst an, wenn ein Käufer einen Artikel hinzugefügt hat.
- Gesamtbetrag anzeigen oder ausblenden: Zeigen Sie den laufenden Gesamtbetrag neben der Anzahl oder nur die Anzahl an.
- Ausrichtung festlegen: Positionieren Sie den Warenkorb links, mittig oder rechts im Header.
- Farben, Abstände und mobile Anzeige anpassen: Öffnen Sie den Tab Erweitert, um die Farbe des Warenkorbs und des Banners, die Abstände und ob das Banner auf Mobilgeräten angezeigt wird, zu ändern.
Wenn Sie mit dem Aussehen des Warenkorb-Symbols zufrieden sind, klicken Sie auf die grüne Schaltfläche Speichern.
Schritt 4. Passen Sie Ihr WooCommerce-Theme an
Jetzt können Sie die anderen Vorlagen in Ihrem WooCommerce-Theme bearbeiten. Der Vorgang ist derselbe wie beim Header. Wenn Sie Hilfe benötigen, finden Sie hier einige 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 Ihr SeedProd WooCommerce Theme
Nachdem Sie Ihr Theme angepasst haben, können Sie es live schalten.
Gehen Sie zu SeedProd » Theme Builder. Schalten Sie in der oberen rechten Ecke den Schalter „SeedProd Theme aktivieren“ auf Ja.
Vorschau Ihres Menü-Warenkorb-Symbols, um zu sehen, wie es in Ihrem Live-Shop aussieht.
Wenn Käufer auf das Warenkorb-Symbol klicken, gelangen sie direkt zur Warenkorb-Seite. Sie können auch Ihren WooCommerce-Warenkorb anpassen mit SeedProd.
Hier ist ein Beispiel für ein Menü-Warenkorb-Symbol im Amazon-Stil, das wir ebenfalls mit SeedProd erstellt haben:
So passen Sie das Warenkorb-Symbol an
Ein Standard-Warenkorb-Symbol funktioniert, aber die meisten Shops möchten, dass es zu ihrem Branding passt. Hier sehen Sie, was Sie mit den erweiterten Einstellungen des SeedProd Menü-Warenkorb-Blocks ändern können und was zu tun ist, wenn Sie ein anderes Theme verwenden.
- Anzahl der Artikel anzeigen oder ausblenden: Die kleine Zahl auf dem Symbol kann jederzeit sichtbar bleiben oder nur erscheinen, wenn der Warenkorb Artikel enthält.
- Farbe und Größe ändern: Passen Sie das Symbol und die Anzeige an Ihre Markenfarben an und skalieren Sie sie im Tab „Erweitert“ nach oben oder unten.
- Symbol durch ein anderes ersetzen: Wenn Sie SeedProd nicht verwenden, können Sie mit den meisten Plugins für Warenkorb-Symbole ein anderes Symbol auswählen oder es in den Einstellungen durch Text wie „Warenkorb“ oder „Korb“ ersetzen.
Als ich dies in meinem eigenen Shop eingerichtet habe, hielt das Ausblenden der Anzeige, bis der Warenkorb Artikel enthielt, den Header übersichtlicher, ohne die Anzahl zu verlieren, wenn sie wichtig war.
Methode 2: Fügen Sie ein WooCommerce-Menü-Warenkorbsymbol mit einem kostenlosen Plugin hinzu
Wenn Sie Ihr aktuelles WordPress-Theme nicht ändern möchten, verwenden Sie stattdessen ein kostenloses Plugin. Es fügt Ihrem vorhandenen Menü ein Warenkorb-Symbol hinzu, ohne Ihre Theme-Dateien zu verändern.
Das Plugin, das ich verwenden werde, heißt WooCommerce Menu Cart. Es funktioniert mit WooCommerce, Easy Digital Downloads und vielen anderen WordPress E-Commerce-Plattformen.
Schritt 1. Installieren Sie das WooCommerce Menu Cart Plugin
Gehen Sie zuerst in Ihrem WordPress-Dashboard zu Plugins » Neues Plugin hinzufügen und geben Sie „WooCommerce Menu Cart“ in das Suchfeld ein.
Klicken Sie als Nächstes auf die Schaltfläche Installieren und dann auf Aktivieren, um das Plugin live zu schalten.
Schritt 2. Konfigurieren Sie das Warenkorb-Symbol
Nach der Installation des Plugins gehen Sie in Ihrem WordPress-Admin-Panel zu WooCommerce » Menu Cart Setup. Hier wählen Sie Ihre E-Commerce-Plattform und das Menü aus, in dem das Warenkorb-Symbol angezeigt werden soll.
Konfigurieren Sie Ihre Warenkorb-Symbol-Einstellungen und klicken Sie dann auf die Schaltfläche Änderungen speichern.
Besuchen Sie nun Ihre Website, um das WooCommerce-Warenkorb-Symbol in Ihrem Menü zu sehen.
Warum Ihr WooCommerce-Warenkorb-Symbol nicht angezeigt wird
Wenn Sie ein Warenkorb-Symbol hinzugefügt haben, es aber nicht in Ihrem Menü erscheint, liegt die Ursache normalerweise an einigen häufigen Problemen. Arbeiten Sie diese durch, bevor Sie etwas anderes ändern.
- Ihr Theme hat kein natives Warenkorb-Symbol: Die meisten Standard-WordPress-Themes fügen keines für WooCommerce hinzu, weshalb Sie SeedProd oder ein Plugin benötigen.
- Der Warenkorb ist so eingestellt, dass er leer ausgeblendet wird: Wenn Sie „Leer ausblenden“ aktiviert haben, erscheint das Symbol erst, nachdem Sie ein Produkt zum Warenkorb hinzugefügt haben. Fügen Sie einen Artikel hinzu und aktualisieren Sie die Seite, um dies zu überprüfen.
- Caching zeigt eine alte Version an: Ein Caching-Plugin oder der Cache Ihres Hosters kann die Seite von vor der Hinzufügung des Icons ausliefern. Leeren Sie Ihren Cache und laden Sie die Seite neu.
- Sie verwenden ein Block-Theme: Wenn Ihr Theme den WordPress-Seiteneditor verwendet, können Sie direkt im Header-Template einen nativen Warenkorb- oder Mini-Warenkorb-Block hinzufügen, ohne ein Plugin zu benötigen. Gehen Sie zu Design » Editor, öffnen Sie Ihr Header-Template und fügen Sie den Mini-Warenkorb-Block hinzu.
Wenn das Icon danach immer noch nicht angezeigt wird, lohnt es sich zu prüfen, ob der Warenkorb-Link selbst funktioniert, da eine defekte Warenkorb-Seite die Anzeige des Icons verhindern kann.
FAQs zu WooCommerce-Warenkorbsymbolen in Menüs
Wie füge ich ein Warenkorb-Icon zum WordPress-Menü hinzu?
Sie fügen ein Warenkorb-Icon mit einem Plugin oder einem Website-Builder hinzu, da WordPress und WooCommerce standardmäßig keines enthalten. Mit SeedProd ziehen Sie den Menü-Warenkorb-Block in Ihr Header-Template.
Mit einem kostenlosen Plugin wie WooCommerce Menu Cart installieren Sie es und wählen aus, an welches Menü das Icon angehängt wird. Beide Methoden sind codefrei.
Wie füge ich das Warenkorb-Icon im WooCommerce-Header hinzu?
Fügen Sie das Warenkorb-Icon zu Ihrem Header-Template hinzu, nicht zum Seiteninhalt. Bearbeiten Sie im Theme Builder von SeedProd das Template „Header-Nav“ und fügen Sie den Menü-Warenkorb-Block ein.
Wenn Sie ein Block-Theme verwenden, öffnen Sie den Seiteneditor, bearbeiten Sie Ihr Header-Template und fügen Sie den Mini-Warenkorb-Block an derselben Stelle hinzu.
Warum wird mein WooCommerce-Warenkorb-Symbol nicht im Menü angezeigt?
Der häufigste Grund ist, dass der Warenkorb so eingestellt ist, dass er leer verborgen wird, sodass er erst erscheint, nachdem ein Käufer einen Artikel hinzugefügt hat. Caching kann auch eine alte Version der Seite ausliefern, also leeren Sie Ihren Cache und laden Sie die Seite neu.
Wenn beides das Problem nicht behebt, unterstützt Ihr Theme möglicherweise kein natives Warenkorb-Icon, was bedeutet, dass Sie SeedProd oder ein Plugin benötigen, um eines hinzuzufügen.
Wie zeige ich die Artikelanzahl auf dem WooCommerce-Warenkorb-Icon an?
Die Artikelanzahl ist die kleine Markierung auf dem Warenkorb-Icon, und die meisten Tools zeigen sie standardmäßig an. In den Einstellungen des Menü-Warenkorbs von SeedProd aktualisiert sich die Anzahl automatisch, wenn Käufer Produkte hinzufügen.
Wenn Sie sie nicht sehen, öffnen Sie den Tab „Erweitert“ und stellen Sie sicher, dass die Markierung nicht ausgeblendet ist, auch nicht auf Mobilgeräten.
Fügen Sie noch heute Ihr WooCommerce-Warenkorb-Icon hinzu
Ein Warenkorb-Icon mit einer Live-Artikelanzahl gibt Käufern einen klaren Weg zur Kasse, was mehr abgeschlossene Verkäufe für Sie bedeutet. Sie können jetzt eines mit dem Drag-and-Drop-Builder von SeedProd erstellen, ganz ohne Code.
Beginnen Sie mit SeedProd und fügen Sie Ihr WooCommerce-Warenkorb-Icon in wenigen Minuten hinzu.
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 einen „Warenkorb anzeigen“-Button 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 Sternbewertungen zu WooCommerce-Produktseiten 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 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 Konversation auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
