Möchten Sie erfahren, wie Sie die WooCommerce-Warenkorbseite bearbeiten?
WooCommerce ist ein hervorragendes Tool zum Erstellen von E-Commerce-Websites. Es ist einfach einzurichten, super erweiterbar und hoch skalierbar. Sobald Sie es auf Ihrer WordPress-Website installieren, führt es Sie durch den Einrichtungsprozess und generiert sogar die wesentlichen E-Commerce-Seiten, ohne dass Sie diese von Grund auf neu erstellen müssen.
Trotz der vielen positiven Aspekte gibt es viel Raum für Verbesserungen. Beispielsweise ist das Abbrechen des Einkaufswagens ein häufiges Problem, mit dem die meisten E-Commerce-Unternehmen konfrontiert sind, da das Design der Warenkorbseite nicht auf Conversions ausgerichtet ist.
Glücklicherweise gibt es eine Reihe von Möglichkeiten, die Conversion-Rate zu steigern und Warenkorbabbrüche in einem WooCommerce-Shop zu reduzieren.
In diesem Artikel zeige ich Ihnen die genauen Schritte, die Sie unternehmen müssen, um das Design und die Funktionalität Ihrer WooCommerce-Warenkorbseite zu verbessern.
Lassen Sie uns in das Tutorial eintauchen.
So bearbeiten Sie die WooCommerce-Warenkorbseite
Es gibt verschiedene Möglichkeiten, die WooCommerce-Warenkorbseite zu bearbeiten und anzupassen.
Sie können die standardmäßigen WooCommerce-Blöcke, WordPress-Seitenersteller oder WooCommerce-Plugins von Drittanbietern verwenden oder manuell CSS-Code hinzufügen, um die Seite anzupassen.
Leider sind diese Methoden nicht immer effizient und können am Ende mehr Probleme verursachen als sie lösen.
Beispielsweise können benutzerdefinierte CSS-Codes Ihre Website beschädigen, Seitenersteller und andere Plugins können Ihre Website verlangsamen und mit den standardmäßigen WooCommerce-Blöcken können Sie nur eine begrenzte Menge erreichen.
Allerdings wurde ein gut gestaltetes E-Commerce-Plugin wie Botiga Pro entwickelt, um WooCommerce-Shops leistungsstarke Funktionen hinzuzufügen und gleichzeitig eine schnelle Ladegeschwindigkeit zu gewährleisten.
In diesem Tutorial zeige ich Ihnen, wie Sie mit Botiga Pro Anpassungen vornehmen, die nachweislich Warenkorbabbrüche reduzieren und den Umsatz steigern. Wir werden folgende Schritte durchführen:
- Verbesserung des Layouts der Warenkorbseite
- Präsentation eines Mini-Wagens außerhalb der Leinwand
- Kunden können die Produktmenge im Mini-Warenkorb erhöhen
- Anzeige eines schwebenden Mini-Warenkorbsymbols
- Auf der Warenkorbseite wird die Schaltfläche „Weiter einkaufen“ angezeigt
Beginnen wir mit der Installation von Botiga für Ihre WordPress-Site.
1. Installieren Sie das Botiga-Theme
Botiga ist ein kostenloses WooCommerce-Theme, während Botiga Pro ein Premium-Plugin ist. Um das Plugin nutzen zu können, müssen Sie das kostenlose Theme auf Ihrer Website installieren.
In diesem Abschnitt beschreibe ich die Installation des kostenlosen Themes und im nächsten zeige ich Ihnen, wie Sie das Premium-Plugin installieren und aktivieren.
Laden Sie zunächst das kostenlose Botiga-Theme von herunter WordPress-Theme-Repository oder unsere Website.
Gehen Sie dann zu Ihrem WordPress-Dashboard und navigieren Sie zu Aussehen → Themen → Themen hinzufügenund laden Sie das Theme hoch und aktivieren Sie es:
Alternativ können Sie auch zu gehen Aussehen → Themen → Themen hinzufügengeben Sie Botiga in die Suchleiste ein und installieren und aktivieren Sie das Theme:
2. Installieren Sie das Botiga Pro-Plugin
Botiga Pro ist ein leistungsstarkes E-Commerce-Plugin voller Funktionen, die Ihren WooCommerce-Shop zum Besseren verändern werden.
Nachdem Sie das Plugin gekauft haben, laden Sie es auf Ihren lokalen Computer herunter und gehen Sie zu Plugins → Neu hinzufügenund laden Sie das Plugin hoch und installieren Sie es:
Als nächstes müssen Sie den Lizenzschlüssel aktivieren, den Sie in Ihrem Themelocal-Konto finden.
Gehen Sie zu Ihrem Themelocal-Konto und kopieren Sie den Lizenzschlüssel.
Öffnen Sie dann Ihr WordPress-Dashboard und navigieren Sie zu Botiga → Einstellungen → Allgemein → Botiga Pro-Lizenz.
Geben Sie den Lizenzschlüssel ein und klicken Sie auf aktivieren Sie Taste:
Das ist es. Inzwischen sind sowohl das Theme als auch das Plugin auf Ihrer WordPress-Site aktiviert.
Bevor ich Ihnen jedoch zeige, wie Sie die WooCommerce-Warenkorbseite bearbeiten, werfen wir einen kurzen Blick auf die von Botiga und Botiga Pro angebotenen Starterseiten und warum Sie möglicherweise eine in Ihren WooCommerce-Shop importieren möchten.
3. Importieren Sie eine Starter-Site (optional)
Starter-Sites sind vorgefertigte Website-Designs, die in eine bestehende WordPress-Site importiert werden können.
Es ist erwähnenswert, dass die Installation einer Starter-Site keine Voraussetzung für Botiga ist (Sie können mit den integrierten Theme-Optionen auch ein Website-Design von Grund auf erstellen), ich empfehle jedoch, dass Sie eine importieren, da dies Ihren WooCommerce-Shop verbessert bedeutend.
Botiga-Startseiten sind mit klaren, professionellen Designs und vorgefertigten Seiten ausgestattet, die für Ihr Unternehmen unerlässlich sind. Mit Botiga Pro erhalten Sie Zugriff auf mehrere Einstiegsseiten, die auf verschiedene E-Commerce-Nischen abzielen, darunter Schönheit, Bekleidung, Möbel, Schmuck und andere.
Sie können eine Vorschau der Designs anzeigen, indem Sie auf gehen Botiga → Starter-Sites und klicken Sie auf Vorschau Klicken Sie auf die Schaltfläche, die auf der Miniaturansicht jeder Site angezeigt wird.
Wählen Sie die Starter-Site aus, die Ihnen am besten gefällt, und klicken Sie dann auf Importieren Taste:
Sobald Sie auf klicken Importieren Wenn Sie auf die Schaltfläche klicken, erscheint ein Popup, in dem Sie auswählen können, ob Sie die gesamte Website (einschließlich aller Bilder) oder nur das Layout mit Platzhaltern für die Inhaltselemente importieren möchten.
Standardmäßig importiert Botiga alle Widgets, Customizer-Einstellungen und Bilder der Startseite. Sie haben jedoch die Möglichkeit, diese zu deaktivieren, wenn Sie sie nicht importieren möchten.
Wenn Sie fertig sind, klicken Sie auf Nächste Klicken Sie auf die Schaltfläche und der Importvorgang beginnt:
Beachten Sie, dass Botiga einige Sekunden braucht, um die Starter-Site zu importieren.
4. Bearbeiten Sie die WooCommerce-Warenkorbseite
Sehen wir uns nun an, wie Sie die integrierten Warenkorbseitenfunktionen von Botiga nutzen können, um Warenkorbabbrüche zu reduzieren und Ihre Conversion-Rate zu steigern.
Das erste, was Sie tun müssen, ist zu gehen Aussehen → Anpassen → Warenkorb:
Sie werden feststellen, dass einige der Optionen in der Wagen Panel sind bereits aktiviert. Lassen Sie sie unverändert und aktivieren oder ändern Sie die folgenden Funktionen:
ich. Verbessern Sie das Layout der Warenkorbseite
Das Hauptziel einer Warenkorbseite besteht darin, Kunden zur nächsten Stufe des Verkaufstrichters zu führen, der Checkout-Seite.
Eine der besten Möglichkeiten, Besucher sanft dazu zu bewegen, zur Kasse zu gehen, besteht darin, die Schaltfläche „Zur Kasse gehen“ an prominenter Stelle auf der Warenkorbseite anzuzeigen.
Auf der standardmäßigen WooCommerce-Warenkorbseite wird jedoch die Schaltfläche „Bezahlen“ unter den Produkten angezeigt. Das bedeutet, dass Kunden nach unten scrollen müssen, um es zu sehen:
Mit Botiga können Sie die Position der Schaltfläche auf die rechte Seite der Seite ändern, was ihre Sichtbarkeit erheblich verbessert:
Alles was Sie tun müssen, ist zu gehen Aussehen → Anpassen → Warenkorb und unter dem Layout Wählen Sie in der Überschrift das zweite Layout aus:
Beachten Sie, dass dies eine Funktion des kostenlosen Botiga-Themes ist und daher auch ohne Botiga Pro verfügbar ist.
ii. Präsentieren Sie einen Off-Canvas-Seiten-Miniwagen
Ein Mini-Warenkorb ist ein Popup-Fenster, das auf dem Bildschirm erscheint, wenn ein Kunde im Menü auf das Warenkorb-Symbol klickt:
Durch das Hinzufügen eines Mini-Warenkorbs zu Ihrem WooCommerce-Shop werden Kunden dazu ermutigt, direkt zur Checkout-Seite zu gehen.
Im Wagen Gehen Sie im Customizer-Bereich zu Mini-Wagen-Stil und wählen Sie das zweite Layout aus, wie im Bild unten gezeigt.
Stellen Sie dann sicher, dass die „Offen bei Ajax In den Warenkorb legen“ Die Schaltfläche ist aktiviert. Dadurch können Besucher Produkte zum Mini-Warenkorb hinzufügen, ohne die gesamte Seite neu laden zu müssen und das Einkaufserlebnis zu beeinträchtigen:
Klicken Sie dann auf Veröffentlichen Klicken Sie auf die Schaltfläche und überprüfen Sie das Design des Mini-Warenkorbs Ihrer Website:
Wichtig: Für die Ajax In den Warenkorb legen Um mit dem Mini-Warenkorb arbeiten zu können, benötigen Sie die Standardversion von WooCommerce Ajax In den Warenkorb legen Option aktiviert.
Gehen Sie dazu zu WooCommerce → Einstellungen → Produkte → Verhalten in den Warenkorb legenÜberprüf den „AJAX-Schaltflächen zum Hinzufügen zum Warenkorb in Archiven aktivieren“ Option und speichern Sie Ihre Änderungen:
iii. Ermöglichen Sie Kunden, die Produktmenge im Mini-Warenkorb zu erhöhen
Wenn Sie Ihren Kunden die Möglichkeit geben, die Produktmenge im Mini-Warenkorb zu erhöhen, steigern Sie den Umsatz Ihres Shops.
Alles was Sie tun müssen, ist das einzuschalten Mini-Warenkorbmenge Option in der Wagen Panel im Customizer:
So sah der Mini-Wagen auf unserer Demoseite aus, bevor er aktiviert wurde Mini-Warenkorbmenge Möglichkeit:
Nach Aktivierung der Option sieht der Mini-Warenkorb folgendermaßen aus:
iv. Zeigen Sie ein schwebendes Mini-Warenkorb-Symbol an
Wie der Name schon sagt, handelt es sich bei einem schwebenden Mini-Warenkorb um ein Warenkorb-Symbol, das auf dem Bildschirm schwebt und Kunden dazu ermutigt, zur Warenkorb-Seite zu gehen:
Um Ihrem WooCommerce-Shop ein schwebendes Mini-Warenkorb-Symbol hinzuzufügen, öffnen Sie das Warenkorb-Panel und stellen Sie sicher, dass unter „Mini-Warenkorb-Stil“ der zweite Stil ausgewählt ist.
Schalten Sie dann das ein Schwimmendes Mini-Wagen-Symbol Option und fahren Sie mit der Konfiguration des Symbols fort, indem Sie auf die Schaltfläche „Floating Mini Cart Settings“ klicken:
Im Customizer werden neue Optionen angezeigt, in denen Sie ein Mini-Warenkorbsymbol auswählen, seine Anzeigeregeln festlegen und und ändern Sie seinen Stil (z. B. Farbe, Hintergrundfarbe, Randradius, Schatten usw.), Größe, Position und Abstand von der Ecke der Seite:
v. Zeigen Sie auf der Warenkorbseite die Schaltfläche „Weiter einkaufen“ an
Wie ich bereits erwähnt habe, besteht das Hauptziel der Warenkorbseite darin, Kunden zur Checkout-Seite zu leiten.
Das Hinzufügen einer Schaltfläche „Weiter einkaufen“ zur Warenkorbseite mag wie ein widersprüchlicher Rat erscheinen – es ist jedoch bekannt, dass dies die Conversion-Raten deutlich erhöht manche WooCommerce-Shops.
Daher empfehle ich Ihnen dringend, mit der Schaltfläche „Einkauf fortsetzen“ zu experimentieren. Aktivieren Sie es in Ihrem Shop und sehen Sie, ob es Ihre Conversion-Rate verbessert.
Um eine Schaltfläche „Einkauf fortsetzen“ zu Ihrer Warenkorbseite hinzuzufügen, gehen Sie zu Wagen Schalten Sie im Customizer-Bereich die Schaltfläche ein Schaltfläche „Einkauf fortsetzen“ anzeigen Option, und fahren Sie mit der Änderung des Texts der Schaltfläche fort, wenn Sie das Bedürfnis verspüren:
Abschluss
Das Anpassen der Warenkorbseite Ihres WooCommerce-Shops ist eine großartige Möglichkeit, Warenkorbabbrüche zu reduzieren und Ihre Conversion-Rate zu verbessern.
Obwohl es zahlreiche Möglichkeiten gibt, die WooCommerce-Warenkorbseite anzupassen, wird nicht jede Technik einen Unterschied in Ihrem Umsatz machen.
In diesem Artikel habe ich fünf Anpassungen der Warenkorbseite behandelt, die nachweislich die Konversionsraten steigern:
- Verwenden Sie ein horizontales Layout für die Warenkorbseite, um die Checkout-Schaltfläche leichter zu finden.
- Zeigen Sie einen seitlichen Mini-Warenkorb außerhalb der Leinwand an, der eine Schaltfläche „Zur Kasse gehen“ enthält.
- Ermöglichen Sie Kunden, die Produktmenge im Mini-Warenkorb zu erhöhen.
- Zeigen Sie ein schwebendes Mini-Warenkorbsymbol an, um Kunden zum Wechseln zur Warenkorb- oder Checkout-Seite zu ermutigen.
- Experimentieren Sie mit der Schaltfläche „Einkauf fortsetzen“, um zu sehen, ob sie für Ihr Geschäft funktioniert.
Mit Botiga Pro können Sie alle diese Techniken einfach implementieren – ohne Code schreiben zu müssen.
Es wird einige Wochen dauern, bis sich die Anzahl der Warenkorbabbrüche verringert und Ihre Conversion-Rate steigt.
Wenn Sie in der Zwischenzeit Fragen zum Bearbeiten der WooCommerce-Warenkorbseite haben, teilen Sie uns dies bitte im Kommentarbereich unten mit.