Möchten Sie ein WooCommerce-Warenkorb-Symbol in die Menüleisten einfügen?
Das Hinzufügen eines WooCommerce-Warenkorbsymbols in Ihrem Menü hilft Kunden, ihren Warenkorb zu sehen und schneller zur Kasse zu gehen, vor allem, wenn es eine Live-Zählung der Artikel enthält. Es ist eine der einfachsten Möglichkeiten, das Einkaufserlebnis zu verbessern und die Zahl der abgebrochenen Bestellungen zu verringern.
Wenn Sie einen Online-Shop betreiben, ist ein optimales Benutzererlebnis entscheidend. Wenn Sie die Bedürfnisse der Kunden nicht erfüllen, werden sie Ihre Website verlassen und eine bessere, benutzerfreundlichere Alternative wählen.
Um das Einkaufen in Ihrem Shop zu erleichtern, können Sie Ihrem WooCommerce-Menü ein Warenkorb-Symbol mit einer Artikelzählung hinzufügen. Auf diese Weise können Kunden den Inhalt ihres Warenkorbs sehen und auschecken, wann immer sie wollen.
Dieser Artikel zeigt Ihnen Schritt für Schritt, wie Sie ein WooCommerce-Warenkorb-Symbol in Menüs einfügen.
- Was ist ein Menü-Warenkorb-Symbol?
- Warum WooCommerce Warenkorb-Symbol im Menü hinzufügen?
- Hinzufügen eines WooCommerce-Warenkorb-Symbols in Ihrem WordPress-Menü (mit Artikelanzahl)
- FAQs über WooCommerce-Warenkorb-Symbole in Menüs
Wahrscheinlich haben Sie solche Einkaufswagen-Symbole schon einmal beim Einkaufen bei Amazon gesehen:
Das Symbol bleibt im Navigationsmenü, auch wenn Sie auf verschiedene Produktseiten klicken.
Warum WooCommerce Warenkorb-Symbol im Menü hinzufügen?
Der Hauptvorteil des Hinzufügens von Symbolen für die Anzahl der Warenkörbe zu Ihrem Navigationsmenü besteht darin, dass es den Kunden hilft, zu sehen, wie viele Produkte sie in den Warenkorb legen. Außerdem erhalten sie eine Vorstellung davon, wie viel die Dinge kosten werden, bevor sie zur Kassenseite gehen.
Außerdem bieten die Warenkorb-Menüsymbole den Nutzern eine schnelle und einfache Möglichkeit, die Warenkorbseite zu erreichen. Das Ergebnis ist eine reibungslosere Kaufabwicklung, die die Wahrscheinlichkeit erhöht, dass die Besucher ihren Einkaufswagen nicht abbrechen.
Hinzufügen eines WooCommerce-Warenkorb-Symbols in Ihrem WordPress-Menü (mit Artikelanzahl)
WooCommerce enthält standardmäßig kein Einkaufswagen-Symbol für Menüs. Stattdessen müssen Sie entweder ein WooCommerce-Plugin installieren oder diese Funktion von Grund auf neu programmieren.
Wenn das Schreiben von Code beängstigend klingt, machen Sie sich keine Sorgen. Hier sind 2 supereinfache, codefreie Möglichkeiten, ein WooCommerce-Warenkorb-Symbol zu Ihrem Menü hinzuzufügen.
Methode 1: WooCommerce Warenkorb-Symbol zum Menü hinzufügen mit SeedProd (kein Code)
Bei der ersten Methode wird ein leistungsstarkes WordPress-Plugin verwendet, um Ihren WooCommerce-Shop anzupassen.
SeedProd ist der beste Website-Builder für WordPress mit über 1 Million Nutzern. Mit ihm können Sie benutzerdefinierte WordPress-Themes, WooCommerce-Websites und hochkonvertierende Landing Pages ohne Code erstellen.
Mit über 200+ vorgefertigten Vorlagen ist der Einstieg leicht. Sie können jedes Layout mit dem visuellen Drag-and-Drop-Builder und den responsiven Blöcken und Abschnitten anpassen.
Besonders hervorzuheben sind die speziellen WooCommerce-Blöcke. Mit ihnen können Sie jeden Teil Ihrer WooCommerce-Website mit nur wenigen Klicks anpassen.
Führen Sie die folgenden Schritte aus, um ein WooCommerce-Warenkorb-Symbol zu Menüs mit SeedProd hinzuzufügen.
Schritt 1. SeedProd Website Builder installieren
Laden Sie zunächst 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 diese Anleitung zur Installation eines WordPress-Plugins befolgen, wenn Sie Hilfe benötigen.
Als nächstes gehen Sie in Ihrem WordPress-Administrationsmenü auf SeedProd " Einstellungen. Dort können Sie Ihren SeedProd-Lizenzschlüssel eingeben und die Funktionen des Pro-Plugins freischalten.
Sie finden Ihren Lizenzschlüssel, indem Sie auf die SeedProd-Website gehen und sich bei Ihrem Konto anmelden. Kopieren Sie dort Ihren Lizenzschlüssel aus dem Bereich "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. Erstellen Sie ein neues WooCommerce-Theme
Der nächste Schritt ist der Besuch der Seite SeedProd " Theme Builder . Hier können Sie ein neues benutzerdefiniertes Thema 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-and-Drop anpassen können. Es bedeutet auch, dass Sie kein separates Child-Theme erstellen oder zusätzliche WordPress-Plugins installieren müssen.
Es gibt 2 Möglichkeiten, ein Thema mit dem Theme Builder von SeedProd zu erstellen:
- Vorgefertigtes Theme: Importieren Sie ein vorgefertigtes WooCommerce-Theme, das automatisch alle Seiten erstellt, die Sie für Ihr Online-Geschäft benötigen.
- Individuelle Theme-Teile: Bauen Sie die verschiedenen Teile Ihres WooCommerce-Shops individuell auf.
In diesem Leitfaden verwenden wir die Methode der vorgefertigten Themes, weil sie alles automatisch für Sie erledigt. Klicken Sie auf die Schaltfläche Themes , um eine Liste der vorgefertigten WordPress- und WooCommerce-Themes anzuzeigen.
Jedes Theme ist 100 % mobilfreundlich und mit dem Drag-and-Drop-Seiten-Builder von SeedProd einfach zu bearbeiten.
Bewegen Sie den Mauszeiger über ein beliebiges Thema und klicken Sie auf das Häkchensymbol, um es in den Themenersteller zu importieren.
Für dieses Tutorial verwenden wir das Thema Sportswear Store.
Nachdem Sie Ihr Thema importiert haben, sehen Sie alle Vorlagen, die das Design Ihrer WooCommerce-Website ausmachen. Sie können jede Vorlage individuell anpassen, um sie mit dem Seitenersteller von SeedProd auf die Bedürfnisse Ihrer Website zuzuschneiden.
Als Nächstes werden wir Ihnen zeigen, wie Sie die Vorlage "Header nav" anpassen können.
Schritt 3. Passen Sie Ihr WooCommerce-Navigationsmenü an
Viele der vorgefertigten Themen von SeedProd werden automatisch mit einem WooCommerce-Warenkorb-Symbol in der Navigationsleiste geliefert. Öffnen wir die Kopfzeilen-Navigationsvorlage, um zu sehen, wie es funktioniert.
Suchen Sie die Vorlage "Header nav" in Ihrer Vorlagenliste und klicken Sie auf den Link Design bearbeiten, um sie im Visual Page Builder zu öffnen.
Wenn Sie die Seite öffnen, sehen Sie auf der rechten Seite Ihr Kopfzeilenlayout. Auf der linken Seite befinden sich Blöcke und Abschnitte, die Sie zu Ihrem Entwurf hinzufügen können.
Um einen Block zu Ihrer Seite hinzuzufügen, ziehen Sie ihn von der linken Seite auf Ihren Entwurf und legen ihn dort ab.
Wie Sie sehen können, befinden sich bereits 3 Blöcke in der Kopfzeile:
- Bild für das Logo der Website
- WordPress Navigationsmenü
- Menü-Wagen-Block
Der Menü-Warenkorb-Block zeigt ein Warenkorbsymbol, die Anzahl der im Warenkorb befindlichen Artikel und die Zwischensumme an. Sie können das Aussehen und die Funktionalität im Einstellungsfeld "Menü Warenkorb" auf der linken Seite ändern.
Sie können zum Beispiel den Warenkorb ausblenden, wenn er leer ist, die Zwischensumme ein- oder ausblenden und die Ausrichtung des Warenkorbs ändern.
Weitere Einstellungen finden Sie, wenn Sie auf die Registerkarte Erweitert klicken. Sie können zum Beispiel die Farbe des Einkaufswagens und des Einkaufswagenabzeichens ändern, die Abstände anpassen und das Abzeichen auf Mobil- oder Desktop-Geräten sogar ausblenden.
Wenn Sie mit dem Aussehen Ihres 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, die Ihr WooCommerce-Theme ausmachen, anpassen. Der Prozess ist ähnlich wie der vorherige Schritt, aber wenn Sie Hilfe benötigen, finden Sie hier eine Schritt-für-Schritt-Anleitung:
- So passen Sie Ihre WooCommerce Shop-Seite an
- Anpassen von WooCommerce-Produktkategorieseiten
- Wie man in WooCommerce vorgestellte Produkte anzeigt
Schritt 5. Aktivieren Sie SeedProd WooCommerce Theme
Nachdem Sie Ihr WooCommerce-Theme mit SeedProd angepasst haben, sind Sie bereit, es auf Ihrer Website einzurichten.
Gehen Sie dazu zu SeedProd " Theme Builder. Schalten Sie dann in der oberen rechten Ecke den Schalter "SeedProd-Theme aktivieren" auf Ja.
Jetzt können Sie eine Vorschau Ihres Menü-Warenkorbsymbols anzeigen, um zu sehen, wie es aussieht.
Wenn Kunden auf das Warenkorb-Symbol im Menü klicken, werden sie zur Warenkorb-Seite weitergeleitet. Sie können Ihren WooCommerce-Warenkorb auch mit SeedProd anpassen.
Hier ist ein Beispiel des Amazon-Menüwagens, den wir ebenfalls mit SeedProd erstellt haben:
Methode 2: WooCommerce-Menü Warenkorb-Symbol mit einem kostenlosen Plugin hinzufügen
Als Nächstes haben wir eine Lösung für Sie, wenn Sie Ihr bestehendes WordPress-Theme nicht ändern möchten. Stattdessen können Sie ein kostenloses WooCommerce-Plugin verwenden, um ein Symbol zu Ihren wp-Nav-Menüpunkten hinzuzufügen.
Das Plugin, das wir verwenden werden, heißt WooCommerce Menu Cart. Es funktioniert mit WooCommerce, Easy Digital Downloads und vielen anderen WordPress eCommerce-Plattformen und ist in wenigen Minuten eingerichtet.
Schritt 1. Installieren WooCommerce Menü Warenkorb Plugin
Gehen Sie zunächst in Ihrem WordPress-Dashboard auf Plugins " Neu hinzufügen und geben Sie "WooCommerce Menu Cart" in das Suchfeld ein.
Klicken Sie anschließend auf die Schaltfläche Installieren und auf Aktivieren, um das Plugin zu aktivieren.
Schritt 2. Konfigurieren Sie das WooCommerce-Warenkorb-Symbol
Nachdem Sie das Plugin installiert haben, gehen Sie in Ihrem WordPress-Administrationsbereich zu WooCommerce " Menu Cart Setup. Auf dieser Seite können Sie Ihre eCommerce-Plattform auswählen, ein Menü auswählen, das Ihr WooCommerce-Symbol anzeigt, ein Warenkorb-Symbol auswählen und vieles mehr.
Konfigurieren Sie die Einstellungen für das Einkaufswagensymbol und klicken Sie dann auf die Schaltfläche Änderungen speichern.
Sie können nun Ihre Website besuchen und Ihr WooCommerce-Warenkorb-Symbolmenü sehen.
FAQs über WooCommerce-Warenkorb-Symbole in Menüs
Das Hinzufügen eines WooCommerce-Warenkorbsymbols zu Ihrem Menü erleichtert den Besuchern das Auschecken, und das bedeutet mehr abgeschlossene Verkäufe für Sie.
Egal, ob Sie den Drag-and-Drop-Builder von SeedProd oder ein kostenloses Plugin verwenden, Sie brauchen keinen Code oder komplizierte Einstellungen, damit es funktioniert. Nur ein paar Klicks und Sie sind fertig.
Als nächstes sollten Sie sich diese Anleitungen ansehen, um Ihren WooCommerce-Shop weiter anzupassen:
- So passen Sie die Registerkarte "Zusätzliche Informationen" von WooCommerce an
- Wie man den View Cart Button in WooCommerce hinzufügt
- Wie man den Titel der Shop-Seite in WooCommerce ändert
- Wie man eine beeindruckende Produktbildgalerie in WooCommerce erstellt
- Wie man Stern-Bewertung zu WooCommerce Produkt-Seiten hinzufügen
- Wie man verwandte Produkte in WooCommerce anzeigt
- Anzeige von Produktkategorien und Tags in WooCommerce
- Wie man Produktbeschreibungen in WooCommerce erhält und anzeigt
- Wie WooCommerce View Cart nicht funktioniert zu beheben
- Wie man nicht vorrätige Produkte in WooCommerce ausblendet
Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte beteiligen Sie sich an der Konversation auf YouTube, X und Facebook, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
