Möchten Sie Ihre WooCommerce-Warenkorb-Seite anpassen?
Das Standard-Warenkorb-Layout von WooCommerce fühlt sich oft klobig an und ermutigt Kunden kaum, ihren Einkauf abzuschließen. Eine gut gestaltete Warenkorbseite kann die Benutzerfreundlichkeit verbessern, die Zahl der Kaufabbrüche verringern und Ihren Umsatz steigern.
In diesem Tutorial zeige ich Ihnen Schritt für Schritt, wie Sie Ihre WooCommerce-Warenkorb-Seite anpassen können, ohne eine einzige Zeile Code zu schreiben. Wir werden SeedProd verwenden, den Drag-and-Drop-Seitenersteller, auf den ich mich verlasse, um in wenigen Minuten hochkonvertierende WooCommerce-Seiten zu erstellen.
Schnelle Schritte zum Anpassen Ihrer Woocommerce-Warenkorb-Seite:
- Schritt 1. Installieren und Aktivieren von SeedProd
- Schritt 2. Erstellen Sie eine neue WooCommerce-Warenkorb-Seitenvorlage
- Schritt 3. Anpassen von Layout und Design der Warenkorb-Seite
- Schritt 4. Veröffentlichen und verlinken Sie Ihre neue Warenkorb-Seite
Warum eine benutzerdefinierte WooCommerce Warenkorb Seite bauen?
Wussten Sie, dass fast 70 % der Kunden ihren Einkaufswagen verlassen, bevor sie zur Kasse gehen? Der Abbruch eines Einkaufswagens kostet Online-Shops jedes Jahr Milliarden an entgangenem Umsatz.
Wenn Sie sich die Zeit nehmen, das Layout Ihrer WooCommerce-Warenkorbseite anzupassen, können Sie viele der Gründe beseitigen, aus denen Kunden den Shop verlassen. Ein besseres Design kann Vertrauen schaffen, wichtige Angebote hervorheben und Kunden zur Kasse führen, anstatt sie zurückzuschicken.
Wenn Sie Ihre WooCommerce-Warenkorbseite bearbeiten, um die Benutzerfreundlichkeit zu verbessern, machen Sie das Beste aus dem Verkehr, den Sie bereits haben. Selbst kleine Verbesserungen können die Abbruchraten drastisch senken und den Umsatz steigern, ohne dass Sie mehr für Werbung ausgeben müssen.
Hier sind ein paar Möglichkeiten, um Ihren WooCommerce-Warenkorb für Konversionen zu optimieren:
- Bieten Sie kostenlosen Versand an oder zeigen Sie, wie nah die Kunden daran sind, sich dafür zu qualifizieren.
- Automatische Rabatte anwenden oder Gutscheincode-Felder deutlich anzeigen
- Einfaches Lesen und Verstehen der Gesamtwerte des Warenkorbs
- Hinzufügen von Vertrauenssignalen wie Zeugnissen, Bewertungen oder Sicherheitsplaketten
- Verwenden Sie eine Schaltfläche zum Aktualisieren des Warenkorbs und stellen Sie sicher, dass sie auf dem Handy leicht zu finden ist.
Insgesamt hilft ein benutzerdefiniertes WooCommerce-Warenkorb-Seitendesign den Kunden, sich beim Bezahlen sicher zu fühlen, und führt letztendlich zu mehr Umsatz für Ihren Shop.
Wie passen Sie also die WooCommerce-Warenkorbseiten an? Lassen Sie uns einsteigen und es herausfinden.
So passen Sie die WooCommerce-Warenkorb-Seite an
Viele Leute verwenden Einkaufswagen-Plugins, um die Warenkorbseiten in WooCommerce zu optimieren. Aber wir denken, dass der einfachste Weg, Ihren Warenkorb anzupassen, mit einem Drag-and-Drop-Seitenerstellungsprogramm wie SeedProd ist.
SeedProd ist der beste WordPress Page Builder mit Unterstützung für WooCommerce-Websites. Sie können dieses Plugin verwenden, um eine benutzerdefinierte WooCommerce-Warenkorb-Seite zu erstellen, ohne Code zu schreiben.
SeedProd bietet mehr als 150 vollständig responsive Landing Page-Vorlagen, mit denen Sie schnell loslegen können. Und mit dem visuellen Editor können Sie Ihre Seite anpassen und die Änderungen in Echtzeit sehen.
Und dank der vielen Blöcke und Abschnitte können Sie Ihre Einkaufswagenseite genau so gestalten, wie Sie es wünschen, ohne einen Entwickler einstellen zu müssen.
Update: Sie können jetzt ein benutzerdefiniertes WooCommerce-Theme mit SeedProd erstellen, so dass Sie jede WooCommerce-Seite einfach ohne Code erstellen können.
Befolgen Sie daher die folgenden Schritte, um eine benutzerdefinierte WooCommerce-Warenkorb-Seite mit SeedProd zu erstellen.
Schritt 1. Installieren und Aktivieren von SeedProd
Der erste Schritt besteht darin, eine Kopie des SeedProd WordPress Landing Page Plugin herunterzuladen.
Installieren und aktivieren Sie dann das Plugin auf Ihrer WordPress-Website. Hilfe zu diesem Schritt finden Sie in dieser ausführlichen Anleitung zur Installation eines WordPress-Plugins.
Hinweis: Es gibt eine kostenlose Version von SeedProd, die Sie verwenden können. Aber für dieses Tutorial werden wir die Elite-Version für die integrierte WooCommerce-Unterstützung, die wir brauchen, verwenden.
Nachdem Sie SeedProd auf Ihrer WordPress-Seite aktiviert haben, gehen Sie zu SeedProd " Einstellungen und geben Sie Ihren Produktlizenzschlüssel ein.
Sie finden Ihren SeedProd-Lizenzschlüssel in Ihrem Konto-Dashboard auf der SeedProd-Website.
Schritt 2. Erstellen Sie eine neue WooCommerce-Warenkorb-Seitenvorlage
Nachdem Sie Ihren Lizenzschlüssel aktiviert haben, gehen Sie zu SeedProd " Seiten und klicken Sie auf die Schaltfläche "Neue Landing Page hinzufügen", um Ihre Warenkorb-Seite zu erstellen.
Von dort aus können Sie eine Vorlage für die Einkaufswagen-Seite auswählen, die Sie als Rahmen für Ihr Design verwenden.
SeedProd bietet Hunderte von mobilfreundlichen Vorlagen für verschiedene Branchen, von denen Sie viele als WooCommerce-Vorlagen verwenden können. Wenn Sie also eine Vorlage finden, die Ihnen gefällt, fahren Sie mit dem Mauszeiger darüber und klicken Sie auf das Symbol "Häkchen", um sie zu starten.
Für diese Anleitung verwenden wir die "Leere Vorlage". Mit dieser Vorlage können Sie bei Null anfangen und nur die gewünschten Abschnitte und Blöcke hinzufügen.
Nachdem Sie Ihre Vorlage ausgewählt haben, öffnet sich ein Pop-up-Fenster, in dem Sie einen Namen und eine URL für Ihre Seite eingeben können. Dann können Sie auf die Schaltfläche "Speichern und mit der Bearbeitung der Seite beginnen" klicken, um die Vorlage im visuellen Editor von SeedProd zu öffnen.
Schritt 3. Anpassen von Layout und Design der Warenkorb-Seite
Der Drag-and-Drop-Seitenersteller von SeedProd verfügt über ein ausgeprägtes 2-Spalten-Layout, das die Bedienung erleichtert:
- Auf der linken Seite befinden sich Blöcke und Abschnitte, mit denen Sie Ihr Design anpassen können
- Auf der rechten Seite sehen Sie eine Live-Vorschau Ihrer Seite
Das Hinzufügen von Inhalten zu Ihrer Einkaufswagenseite ist so einfach wie das Ziehen eines Blocks von der linken Seite in Ihre Vorschau auf der rechten Seite.
Sehen wir uns einige der wichtigsten Elemente an, die Sie auf Ihrer WooCommerce-Warenkorb-Seite einfügen können.
Hinzufügen eines Logos
Um Ihrer Einkaufswagenseite ein Logo hinzuzufügen, wählen Sie ein Abschnittslayout, das Ihre Seitenelemente aufnimmt, z. B. den Standardabschnitt.
Wählen Sie dann den Block "Bild" und ziehen Sie ihn in den neuen Abschnitt auf der rechten Seite.
Wenn Sie auf den Bildblock klicken, öffnet sich das Panel für die Inhaltseinstellungen, wo Sie ein Logo von Ihrem Computer oder aus der WordPress-Mediathek hochladen können.
Von dort aus können Sie einen Link zurück zu Ihrer Homepage hinzufügen, die Größe Ihres Logos ändern und die Ausrichtung anpassen.
Hinzufügen eines WooCommerce-Wagens
Fügen wir nun Ihren WooCommerce-Einkaufswagen in das Design ein. Fügen Sie dazu einen neuen Abschnitt zu Ihrem Entwurf hinzu und wählen Sie das Layout der Inhaltsseitenleiste.
Bei diesem Layout können Sie Ihren Einkaufswagen in der größeren Spalte unterbringen und haben in der kleineren Spalte Platz für Bewertungen, Zeugnisse und andere wichtige Informationen.
Um Ihren WooCommerce-Warenkorb zu der Seite hinzuzufügen, scrollen Sie nach unten zum Abschnitt WooCommerce-Blöcke und ziehen Sie den Block "Warenkorb" auf Ihren neuen Abschnitt.
Wenn Sie auf das Symbol für die Einkaufswageneinstellungen klicken, wird ein Panel mit Einstellungen zur Anpassung von Farbe, Schriftart und Größe angezeigt:
- Kopfzeilen
- Buttons
- Felder
- Alarmierung
- Wagen
Wir haben zum Beispiel die Farben der Schaltflächen geändert, um sie besser an das Branding und das Logo unseres Geschäfts anzupassen.
Hinzufügen von Bewertungen und Erfahrungsberichten
Erinnern Sie sich an die zweite Spalte? In diesem Leitfaden werden wir diese Spalte verwenden, um Kundenstimmen und Sternebewertungen zu präsentieren.
Solche sozialen Beweise können Kunden, die kurz vor dem Kauf stehen, ermutigen, den Kauf abzuschließen. Schließlich sind positive Bewertungen von echten Kunden viel überzeugender, als das Wort einer Marke zu glauben.
Um Ihrer WooCommerce-Warenkorb-Seite Testimonials hinzuzufügen, suchen Sie den Block Testimonials unter der Überschrift "Erweiterte Blöcke" und ziehen Sie ihn in Ihre schmale Spalte auf der rechten Seite.
Und wie bei allen Blöcken von SeedProd können Sie durch Anklicken die Einstellungen für die Anpassung Ihrer Zeugnisinhalte aufrufen. Sie können zum Beispiel ein benutzerdefiniertes Kopfbild und den Kundennamen hinzufügen, die Ausrichtung ändern und sogar mehrere Bewertungen in einem Zeugniskarussell hinzufügen.
Um Ihre Bewertungen noch überzeugender zu machen, können Sie den Block "Sternebewertung" unter das Karussell mit den Erfahrungsberichten ziehen.
Hinzufügen von Knappheit und Dringlichkeit
Eine der besten Methoden, um potenzielle Kunden zur WooCommerce-Kasse zu bringen, besteht darin, ein Gefühl der Dringlichkeit zu schaffen. Wenn Kunden also nicht sofort handeln, können sie ein spannendes Angebot verpassen.
Der einfachste Weg, Ihre WooCommerce-Warenkorb-Seite mit Knappheit zu versehen, ist ein Knappheits-Timer oder eine Countdown-Uhr. Und SeedProd hat diese Option eingebaut.
Wählen Sie einfach den Block "Countdown-Timer" aus dem Abschnitt "Erweiterte Blöcke" und ziehen Sie ihn an den Anfang Ihres Warenkorbs. Wählen Sie dann die Option "Besucher-Timer", damit der Timer für jeden Besucher aktualisiert wird.
Auf der Registerkarte Erweiterte Einstellungen können Sie dann die Farben an den Rest Ihres Warenkorbs anpassen.
Fügen wir nun eine Überschrift hinzu, die den Kunden mitteilt, dass sie eine bestimmte Zeit haben, bis ihr Warenkorb abläuft. Ziehen Sie dazu über den Block "Überschrift" und geben Sie Ihren Text ein.
Cross-Selling von WooCommerce-Produkten
Ihre WooCommerce-Warenkorbseite ist ein hervorragender Ort, um andere Produkte oder Dienstleistungen zu bewerben und zu empfehlen. Auf diese Weise können Sie Kunden vor dem Auschecken mit relevanten Produkten, die ihnen gefallen könnten, ansprechen.
Und die gute Nachricht ist, dass SeedProd mehrere verschiedene Produktraster anbietet, mit denen Sie Produkte auf jeder Seite präsentieren können. Sie finden diese, indem Sie zum Abschnitt "WooCommerce"-Blöcke gehen und eine Auswahl treffen:
- Neueste Produkte
- Verkauf Produkte
- Meistverkaufte Produkte
- Ausgewählte Produkte
- Am besten bewertete Produkte
So können Sie beispielsweise den Block "Sale Products" direkt unter Ihren WooCommerce-Warenkorb ziehen und ihn dort hinzufügen. Auf diese Weise haben die Kunden die Möglichkeit, die Produkte in ihren Warenkorb zu legen, bevor sie zur Kasse gehen.
Schritt 4. Veröffentlichen und verlinken Sie Ihre neue Warenkorb-Seite
Nachdem Sie Änderungen an Ihrer Einkaufswagenseite vorgenommen haben, ist es an der Zeit, sie zu veröffentlichen und in Ihrem WooCommerce-Shop zu aktivieren. Klicken Sie dazu auf den Dropdown-Pfeil neben der grünen Schaltfläche Speichern und wählen Sie Veröffentlichen.
Die letzte Aufgabe besteht dann darin, die URL Ihres Warenkorbs in den Einstellungen des WooCommerce-Plugins anzupassen. Navigieren Sie also zu WooCommerce " Einstellungen und klicken Sie auf die Registerkarte Erweitert.
Wählen Sie dann neben der Überschrift "Warenkorbseite" die neue Warenkorbseite aus, die Sie mit SeedProd erstellt haben. Vergessen Sie nicht, auf die Schaltfläche " Änderungen speichern" am unteren Rand des Bildschirms zu klicken.
Wenn Kunden jetzt auf Ihrer Website auf den Link "Warenkorb anzeigen" klicken, sehen sie Ihre neue benutzerdefinierte WooCommerce-Warenkorb-Seite.
FAQs zur Anpassung der WooCommerce-Warenkorb-Seite
Die Anpassung Ihrer WooCommerce-Warenkorbseite ist eine der schnellsten Möglichkeiten, die Zahl der abgebrochenen Einkäufe zu verringern und den Umsatz zu steigern. Durch Verbesserung des Layouts, Hinzufügen von Vertrauenssignalen und Beseitigung von Reibungsverlusten können Sie mehr Käufer in zahlende Kunden verwandeln.
Mit SeedProd können Sie das Design Ihrer WooCommerce-Warenkorbseite bearbeiten, ohne auch nur eine einzige Code-Zeile anzufassen. Der Drag-and-Drop-Builder macht es einfach, eine vollständig gebrandete Einkaufswagen-Seite zu erstellen, die für Konversionen optimiert ist.
Wenn Sie Ihre WooCommerce Warenkorb Konvertierungen zu verfolgen, finden Sie in unserem Beitrag über die Einrichtung von WooCommerce Conversion-Tracking und diese Anleitung , wie WooCommerce Ansicht Warenkorb nicht funktioniert zu beheben.
Vielen Dank für die Lektüre. Wenn Ihnen dieser Artikel gefallen hat, folgen Sie uns bitte auf YouTube, Twitter und Facebook, um weitere hilfreiche Inhalte zum Ausbau Ihres Unternehmens zu erhalten.
