So fügen Sie die Schaltfläche „Warenkorb anzeigen“ in WooCommerce auf einfache Weise hinzu 

Möchten Sie wissen, wie Sie die Schaltfläche „Warenkorb anzeigen“ in WooCommerce hinzufügen?

Eine Schaltfläche „Warenkorb anzeigen“ ermöglicht es potenziellen Kunden, alle Artikel in ihrem Warenkorb einzusehen und schnell zu Ihrer Checkout-Seite zu gelangen. Dies kann wiederum die Konversionsraten erhöhen, indem unnötige Schritte im Checkout-Prozess eliminiert werden.

In diesem Leitfaden zeige ich Ihnen Schritt für Schritt, wie Sie die Schaltfläche „Warenkorb anzeigen“ in WooCommerce hinzufügen. Ich werde SeedProd verwenden, einen visuellen Website-Builder für WordPress, mit dem Sie Ihren WooCommerce-Shop anpassen können, ohne Code anfassen zu müssen.

Schaltflächen „Warenkorb anzeigen“ sind auch wirksam bei der Reduzierung von Warenkorbabbrüchen. Laut einer Studie des Baymard Institute werden 69,57 % der Online-Warenkörbe abgebrochen.

Einer der häufigsten Gründe für Warenkorbabbrüche ist, dass Kunden vergessen, was sich in ihrem Warenkorb befindet. Eine Schaltfläche „Warenkorb anzeigen“ kann helfen, Warenkorbabbrüche zu reduzieren, indem sie es Kunden erleichtert, den Überblick über ihre Artikel zu behalten.

Letztendlich ist das Hinzufügen einer Schaltfläche „Warenkorb anzeigen“ zu Ihrem Online-Shop eine einfache Möglichkeit, das Kundenerlebnis zu verbessern und den Umsatz zu steigern.

Der Standardweg von WooCommerce

WooCommerce enthält bereits einen einfachen Link „Warenkorb anzeigen“. Wenn ein Käufer einen Artikel in seinen Warenkorb legt, zeigt WooCommerce eine Benachrichtigung „In den Warenkorb legen“ mit einem Link „Warenkorb anzeigen“ an. Viele Shop-Betreiber haben dies bereits und wissen es nicht.

Die Standardbenachrichtigung erscheint automatisch, sodass Sie möglicherweise bereits einen Link „Warenkorb anzeigen“ haben, ohne etwas tun zu müssen. Allerdings ist er klein und verschwindet nach wenigen Sekunden. Käufer, die nicht genau aufpassen, können ihn leicht übersehen.

Wenn Sie eine dauerhafte Schaltfläche „Warenkorb anzeigen“ wünschen, die auf Ihren Produktseiten, der Shop-Seite und im Menü sichtbar bleibt, benötigen Sie eine flexiblere Einrichtung. Das behandeln die folgenden Schritte.

So fügen Sie eine Schaltfläche „Warenkorb anzeigen“ in WooCommerce mit SeedProd hinzu

SeedProd hilft Ihnen nicht nur, schnell und einfach einen Online-Shop einzurichten, sondern ermöglicht es Ihnen auch, einen Warenkorb-Button praktisch überall hinzuzufügen. Befolgen Sie die einfachen Schritte unten, um zu erfahren, wie das geht.

Schritt 1. SeedProd installieren und aktivieren

Zuerst müssen Sie SeedProd Elite auf Ihrer WordPress-Website installieren und aktivieren.

Der Elite-Plan gibt Ihnen Zugriff auf die WooCommerce-Anpassungsfunktionen von SeedProd, den Theme Builder, Easy Digital Downloads-Unterstützung und Domain Mapping.

Wenn Sie Hilfe bei der Einrichtung benötigen, lesen Sie bitte unsere Dokumentation zum Thema Installation von SeedProd.

Schritt 2. Wählen Sie ein WooCommerce Site Kit

Nach der Aktivierung des Plugins navigieren Sie in Ihrem WordPress-Dashboard zu SeedProd » Theme Builder .

Sie müssen ein benutzerdefiniertes WooCommerce-Theme erstellen, um einen Warenkorb-Button und einen benutzerdefinierten WooCommerce-„In den Warenkorb“-Button hinzuzufügen. Aber keine Sorge; es ist unkompliziert und dauert nur wenige Minuten.

Klicken Sie auf der Seite Theme Builder auf die Schaltfläche Theme Template Kits.

Auf dem nächsten Bildschirm sehen Sie die vorgefertigten Website-Kits von SeedProd. Klicken Sie auf den Tab WooCommerce, um alle Kits anzuzeigen, die für E-Commerce-Shops entwickelt wurden.

Durchsuchen Sie die Designs, bis Sie eines finden, das Ihnen gefällt. Fahren Sie dann mit der Maus darüber und klicken Sie auf das Häkchen-Symbol.

In wenigen Sekunden fügt SeedProd das Theme zu Ihrer Website hinzu. Wie im Beispiel unten sehen Sie alle Vorlagen, aus denen Ihr WordPress-Theme besteht, in einer Liste.

Sie können jede dieser Vorlagen anpassen, indem Sie auf den Link „Design bearbeiten“ klicken. Dadurch wird die Vorlage im visuellen Seitenersteller von SeedProd geöffnet, wo Sie das vorgefertigte Design an die Bedürfnisse Ihres Shops anpassen können.

Vollständige Schritt-für-Schritt-Anleitungen zur Anpassung finden Sie in unserem ultimativen Leitfaden zum Thema Einrichten eines Online-Shops in WordPress. Er erklärt, wie Sie den Drag-and-Drop-Seitenersteller verwenden, Vorlagenelemente anpassen und neue Designelemente zu jeder Seite hinzufügen.

Sobald Sie mit der Funktionsweise des Builders von SeedProd vertraut sind, können Sie mit dem nächsten Schritt fortfahren, der Ihnen zeigt, wie Sie einen Warenkorb-Button zu Ihren Produktseiten hinzufügen.

Schritt 3. Fügen Sie einen Warenkorb-Button auf der WooCommerce-Produktseite hinzu

Um Ihrer Produktseite einen Warenkorb-Button hinzuzufügen, müssen Sie die Vorlage für einzelne Produktseiten im Theme Builder Dashboard öffnen. Nachdem Sie sie gefunden haben, fahren Sie mit der Maus über die Vorlage und klicken Sie auf den Link Design bearbeiten.

Wenn sich diese Vorlage öffnet, sehen Sie eine Seite mit Details zu einzelnen Produkten in Ihrem Shop. Je nach gewähltem Theme werden Ihre Produktbeschreibung, Informationen zu variablen Produkten, Produktfotos, Preise und ein „In den Warenkorb“-Button angezeigt.

Um einen Warenkorb-Button hinzuzufügen, müssen Sie den Block Button aus der linken Seitenleiste ziehen.

Sie können dann auf diesen Block klicken, um seine Anpassungsoptionen zu öffnen. Hier können Sie den Button-Text ändern, die Ausrichtung anpassen und einen benutzerdefinierten Button-Link hinzufügen.

Ändern wir den Button-Text zu „Warenkorb anzeigen“ und setzen die Ausrichtung nach links.

Sie können auch den Tab „Icon“ erweitern und ein Warenkorb-Icon aus der Font Awesome Icon-Bibliothek auswählen.

Nun müssen Sie den Button mit Ihrer Warenkorbseite verknüpfen. Fügen Sie dazu die URL Ihrer Warenkorbseite in das Textfeld „Link“ ein.

Wenn Sie weitere Styling-Optionen zu Ihrem „Warenkorb anzeigen“-Button hinzufügen möchten, klicken Sie im Block-Einstellungsmenü auf den Tab Erweitert.

Sie können die Schriftart des Warenkorb-Buttons, die Button-Farbe, den Randradius, den Abstand und mehr in diesem Bereich ändern.

Passen Sie den Button weiter an, bis Sie mit dem Aussehen zufrieden sind.

Nun zeigen wir Ihnen einen Trick, um Zeit zu sparen, falls Sie denselben Button an anderen Stellen Ihrer Website hinzufügen möchten. Fahren Sie mit der Maus über den Button in Ihrer Vorschau und klicken Sie dann auf das Speichern-Icon.

Dadurch wird ein Fenster geöffnet, in dem Sie dem Button einen Namen geben und ihn in Ihren Gespeicherten Blöcken speichern können. Nach dem Speichern können Sie ihn wiederverwenden, ohne ihn von Grund auf neu erstellen zu müssen.

Bevor Sie diese Seite verlassen, klicken Sie auf die Schaltfläche Speichern in der oberen rechten Ecke, um Ihre Änderungen zu sichern.

Nun können Sie zum Theme Builder Dashboard zurückkehren und mit der Anpassung Ihres Online-Shops fortfahren.

Schritt 4. Fügen Sie einen Warenkorb-Button auf der WooCommerce-Shopseite hinzu

Ihre WooCommerce Shop-Seite ist ein weiterer Bereich, in dem Sie einen „Warenkorb anzeigen“-Button hinzufügen können. Dazu müssen Sie auf den Link Design bearbeiten auf Ihrer Shop-Seiten-Vorlage klicken.

Sobald Sie sich im Page Builder für diese Seite befinden, scrollen Sie nach unten zum Abschnitt Gespeicherte Blöcke und suchen Sie nach dem benutzerdefinierten „Warenkorb anzeigen“-Button, den Sie im vorherigen Schritt erstellt haben.

Ziehen Sie diesen Block nun dorthin, wo Sie ihn auf Ihrer Shop-Seite haben möchten. In diesem Beispiel haben wir ihn oben auf der Seite hinzugefügt, aber Sie können ihn überall platzieren, wo Sie möchten.

Wie zuvor können Sie die Blockeinstellungen öffnen, um ihn für die jeweilige Seite anzupassen. Sie können zum Beispiel die Hintergrundfarbe ändern oder den Button größer machen, damit er besser hervorsticht.

Denken Sie daran, vor dem Verlassen der Seite auf die Schaltfläche Speichern zu klicken.

Schritt 5. Fügen Sie einen Warenkorb-Button im WooCommerce-Menü hinzu

Ein weiterer sinnvoller Ort, um einen „Warenkorb anzeigen“-Button hinzuzufügen, ist Ihr WooCommerce Menü. Da Käufer das Menü zur Navigation in Ihrem Shop verwenden, erleichtert das Hinzufügen eines Buttons hier das Auffinden der Warenkorbseite.

Vom SeedProd Theme Builder Dashboard aus müssen Sie Ihre Header-Vorlage finden und auf den Link Design bearbeiten klicken, um sie anzupassen.

Anstatt den zuvor erstellten „Warenkorb anzeigen“-Button zu verwenden, können Sie einen der vorgefertigten Blöcke von SeedProd verwenden. 

Im Bedienfeld „WooCommerce Template Tags“ auf der linken Seite finden Sie einen Block namens Menü-Warenkorb.

Dieser Block zeigt ein Icon und den geschätzten Gesamtwert des Warenkorbs des Käufers an. Wenn er darauf klickt, gelangt er sofort zum Warenkorb, wo er zur Kasse gehen oder Änderungen vornehmen kann.

Nachdem Sie diesen Button in Ihren Header gezogen haben, können Sie ihn wie jeden anderen SeedProd-Block anpassen.

Sie können die Button-Ausrichtung ändern, ihn ausblenden, wenn sich nichts im Warenkorb befindet, und den Warenkorb-Zwischensummen anzeigen oder ausblenden.

Im erweiterten Tab können Sie weitere Styling-Optionen anpassen, einschließlich Badge-Farben, Animationen, Abstände und mehr.

Wenn es so aussieht, wie Sie es möchten, klicken Sie auf die Schaltfläche Speichern und verlassen Sie den Page Builder.

Schritt 6. Veröffentlichen Sie Ihre WooCommerce Website-Änderungen

Der letzte Schritt in dieser Anleitung ist, Ihr benutzerdefiniertes WooCommerce-Theme live zu schalten. Suchen Sie im Theme Builder Dashboard die Überschrift „SeedProd Theme aktivieren“ und klicken Sie auf den Schalter, um ihn auf Ja zu stellen.

Das war's! Ihr benutzerdefinierter Shop ist live und Käufer können den Warenkorb-Button in Ihrem Menü, auf der Shop-Seite und auf der Produktseite sehen.

Hier sind einige Beispiele für die Änderungen, die wir heute vorgenommen haben. Klicken Sie auf ein beliebiges Bild, um es in einem neuen Fenster zu öffnen und es genauer anzusehen.

Wenn Ihr Warenkorb-Button nach Befolgen dieser Schritte nicht angezeigt wird, lesen Sie So beheben Sie, dass der WooCommerce Warenkorb nicht funktioniert, um häufige Ursachen und Lösungen zu finden.

FAQs zum Hinzufügen eines Warenkorb-Buttons in WooCommerce

• So ändern Sie den Titel der Shop-Seite in WooCommerce
• So passen Sie den WooCommerce-Tab „Zusätzliche Informationen“ an 
• So fügen Sie Produktseiten in WooCommerce Sternebewertungen hinzu
• So beheben Sie, dass WooCommerce „Warenkorb anzeigen“ nicht funktioniert
• So erstellen Sie eine Ein-Produkt-Website in WooCommerce
• So zeigen Sie verwandte Produkte in WooCommerce an
• So erstellen Sie eine benutzerdefinierte WooCommerce-Dankesseite
• So zeigen Sie Produktkategorien und -tags in WooCommerce an
• So zeigen Sie empfohlene Produkte 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 Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.