So erstellen Sie eine benutzerdefinierte WooCommerce-Warenkorbseite (ohne Code)

Die Standard-WooCommerce-Warenkorbseite funktioniert, ist aber einfach und passt oft nicht zu Ihrem Stil.

Während unserer Tests verschiedener Page Builder haben wir festgestellt, dass SeedProd es überraschend einfach macht, eine benutzerdefinierte Warenkorbseite zu erstellen, ohne eine einzige Codezeile anfassen zu müssen.

Wir haben die WooCommerce-Funktionen von SeedProd untersucht und festgestellt, dass die Anpassung der Warenkorbseite einfacher und leistungsfähiger ist, als wir erwartet hatten. Was früher einen Entwickler erforderte, kann jetzt mit nur wenigen Klicks über die Drag-and-Drop-Oberfläche erledigt werden.

In dieser Anleitung zeigen wir Ihnen genau, wie Sie eine benutzerdefinierte WooCommerce-Warenkorbseite ohne Programmierung erstellen.

Warum eine benutzerdefinierte WooCommerce-Warenkorbseite in WordPress erstellen?

WooCommerce wird mit einer integrierten Warenkorbseite geliefert. Installieren und aktivieren Sie einfach dieses Plugin, und Ihr Online-Shop beginnt automatisch mit der Standard-Warenkorbseite.

Wenn Ihre Besucher Artikel in ihren Warenkörben haben, sind sie dem Kauf sehr nahe. Recherchen zeigen jedoch, dass fast sieben von zehn Kunden ihren Warenkorb verlassen und nie wiederkommen.

Vor diesem Hintergrund sollte Ihre Warenkorbseite alles tun, um den Verkauf zu sichern.

Durch den Austausch des Standarddesigns durch eine benutzerdefinierte Warenkorbseite können Sie oft die Conversion-Raten in Ihrem Online-Shop verbessern.

Schon die einfache Anpassung der Seite mit Ihrem eigenen Branding und benutzerdefinierten Logo kann das Kundenerlebnis verbessern und Ihre Konversionsraten steigern.

In diesem Sinne werden wir Ihnen zeigen, wie Sie Ihre WooCommerce-Warenkorbseite ohne Code anpassen können. Hier ist eine kurze Übersicht über alle Dinge, die wir in den folgenden Abschnitten behandeln werden:

• How to Create a Custom WooCommerce Cart Page in WordPress (Step-by-Step)
  • Schritt 1: SeedProd Pro installieren und aktivieren
  • Schritt 2: Eine neue Landingpage erstellen
  • Schritt 3: Das Layout der Warenkorbseite gestalten
  • Schritt 4: WooCommerce Warenkorb-Blöcke hinzufügen
  • Schritt 5: Conversion-steigernde Elemente hinzufügen
  • Schritt 6: Ihre benutzerdefinierte Warenkorbseite veröffentlichen
• Video-Tutorial
• Bonus Tip: How to Further Improve WooCommerce Cart Page Conversions

Tauchen wir direkt ein!

So erstellen Sie eine benutzerdefinierte WooCommerce-Warenkorbseite in WordPress

Der einfachste Weg, benutzerdefinierte Seiten für Ihren WooCommerce-Shop zu erstellen, ist die Verwendung von SeedProd.

Es ist der beste WordPress Page Builder und kommt mit mehr als 300 professionell gestalteten Vorlagen. Dazu gehören E-Commerce-Vorlagen für die Erstellung von Verkaufsseiten und Seiten zum Sammeln von E-Mail-Anmeldungen.

Noch besser: SeedProd bietet vollständige WooCommerce-Unterstützung und enthält spezielle WooCommerce-Blöcke, mit denen Sie Ihre meistverkauften Produkte, beliebtesten Artikel, neuesten Verkäufe und mehr anzeigen können.

Mehrere unserer Partner-Marken haben ihre gesamten Websites mit dem Plugin erstellt und großartiges Feedback von ihren Benutzern zu den neuen Designs erhalten. Weitere Informationen finden Sie in unserem SeedProd-Testbericht.

Schritt 1: SeedProd Pro installieren und aktivieren

Nun müssen Sie als Erstes das Plugin installieren und aktivieren. Weitere Details finden Sie in unserem Schritt-für-Schritt-Leitfaden zum Thema Installieren eines WordPress-Plugins.

Nach der Aktivierung navigieren wir zu SeedProd » Einstellungen und geben Ihren Lizenzschlüssel ein.

Sie finden diese Informationen unter Ihrem Konto auf der SeedProd-Website. Nachdem Sie die Lizenz eingegeben haben, klicken Sie auf die Schaltfläche „Schlüssel überprüfen“.

Schritt 2: Eine neue Landingpage erstellen

Sobald Sie dies getan haben, gehen Sie zu SeedProd » Landing Pages und klicken Sie auf die Schaltfläche 'Neue Landing Page hinzufügen'.

Danach müssen Sie eine Vorlage für die Warenkorbseite auswählen.

Die Vorlagen von SeedProd sind in verschiedene Kampagnentypen unterteilt, wie z. B. Coming Soon und 404-Seiten. Sie können auf die Registerkarten oben auf dem Bildschirm klicken, um Vorlagen nach Kampagnentyp zu filtern.

Wenn Sie eine Vorlage finden, die Sie verwenden möchten, fahren Sie mit der Maus darüber und klicken Sie auf das Symbol 'Häkchen'.

Für dieses Tutorial verwenden wir die „Leere Vorlage“, da wir so nur die gewünschten Abschnitte hinzufügen können.

Auf dem nächsten Bildschirm benennen Sie Ihre Warenkorbseite.

SeedProd erstellt automatisch eine URL basierend auf dem Titel der Seite, aber Sie können diese URL beliebig ändern.

Wenn Sie mit den eingegebenen Informationen zufrieden sind, klicken Sie auf die Schaltfläche „Speichern und Seite bearbeiten starten“.

Schritt 3: Das Layout der Warenkorbseite gestalten

Dies lädt den SeedProd Page Builder. Es ist ein einfacher Drag-and-Drop-Editor, der rechts eine Live-Vorschau Ihrer benutzerdefinierten Warenkorbseite und links einige Einstellungen anzeigt.

Zuerst fügen wir ein Bild am oberen Rand der Seite hinzu. Wir empfehlen die Verwendung eines Bildes, das dem regulären Header Ihres Shops ähnelt, da dies Ihre Marke beibehält und konsistent hält.

Wir möchten, dass das Header-Bild die volle Breite der Warenkorbseite ausfüllt. Klicken wir also auf das erste Layout im Feld „Wählen Sie Ihr Layout“.

Dies erstellt ein Vollbildlayout.

Wählen Sie nun den Block „Bild“ im linken Menü aus und ziehen Sie ihn auf das Layout.

Um Ihr Bild hochzuladen, klicken Sie, um den Block „Bild“ auszuwählen.

Im linken Menü klicken wir auf 'Eigenes Bild verwenden' und wählen entweder ein Bild aus der Mediathek aus oder laden eine neue Datei von Ihrem Computer hoch.

Die Einstellungen auf der linken Seite ermöglichen es Ihnen, das Bild weiter anzupassen. Sie können zum Beispiel Bild-Alt-Texte hinzufügen und die Größe des Bildes ändern.

Wenn Sie mit dem Aussehen des Headers zufrieden sind, können Sie im Bereich 'Hier einen neuen Block ziehen' auf das Symbol 'Spalten hinzufügen' klicken.

Sie können nun das Layout auswählen, das Sie für den Hauptbereich der Warenkorbseite verwenden möchten.

Klicken Sie auf das Layout für Inhalt und Seitenleiste.

Dies ermöglicht es Ihnen, einen Bereich für Ihren Warenkorb und einen Bereich zu erstellen, in dem Sie Kundenbewertungen anzeigen können, um die Konversionen zu steigern.

Schritt 4: WooCommerce Warenkorb-Blöcke hinzufügen

Im linken Menü möchten Sie zum Abschnitt „WooCommerce“ scrollen. Hier finden wir den Block „Warenkorb“ und ziehen ihn auf Ihr Layout.

Danach können Sie jeden Teil des Warenkorbs über das linke Menü anpassen.

Dies beinhaltet das Ändern von Schriftarten, Farben, Schaltflächen und mehr.

Wenn Sie mit dem Aussehen des Warenkorbbereichs zufrieden sind, ist es an der Zeit, einen Testimonial-Block hinzuzufügen.

Dies ist eine Form von Social Proof, die Käufern hilft, sich bei ihrer Entscheidung sicherer zu fühlen, indem sie zeigt, dass andere Leute positive Erfahrungen mit Ihren Produkten gemacht haben.

Suchen Sie einfach den Block 'Testimonials' und ziehen Sie ihn in Ihr Layout.

Sie können jetzt ändern, wie die Testimonials in Ihrem Online-Shop aussehen.

Im linken Menü sehen Sie beispielsweise Einstellungen, um die Farbe der Kommentarblase zu ändern, die Ausrichtung anzupassen und weitere Kundenrezensionen hinzuzufügen.

Eine weitere großartige Idee ist es, eine Sternebewertung unter Ihrem Testimonial anzuzeigen.

Um dies zu tun, finden Sie einfach den Block „Sternebewertung“ und ziehen Sie ihn unter den Testimonial-Block.

Schritt 5: Conversion-steigernde Elemente hinzufügen

Knappheit kann Ihre Kunden dazu ermutigen, jetzt einen Kauf zu tätigen, anstatt zu warten und das Risiko einzugehen, etwas zu verpassen. In diesem Sinne möchten Sie vielleicht einen Countdown-Timer hinzufügen, der die Minuten bis zum Ablauf des Warenkorbs des Besuchers herunterzählt.

Um dieses Gefühl der Dringlichkeit zu erzeugen, suchen Sie den Block „Countdown“ und ziehen Sie ihn an den Anfang Ihres Warenkorbs.

Wir möchten jedem Besucher einen frischen Timer anzeigen. Öffnen Sie dazu das Dropdown-Menü 'Countdown-Typ' und wählen Sie 'Besucher-Timer (Evergreen)'.

Dies stellt sicher, dass der Countdown für jede Person neu beginnt und ein echtes und persönliches Gefühl der Dringlichkeit erzeugt.

Standardmäßig beginnt der Timer bei 30 Minuten, aber Sie können dies ändern, indem Sie eine neue Zahl in den Abschnitt „Timer einstellen für“ eingeben.

Wir möchten Käufern mitteilen, dass ihr Warenkorb abläuft, wenn der Timer 0 erreicht. Fügen wir also einen 'Überschriften'-Block darüber ein.

Sie können dann den Text eingeben, den Sie den Käufern anzeigen möchten.

Sie können die Leute ermutigen, mehr Artikel in ihren Warenkorb zu legen, indem Sie einen Bereich für beliebte Produkte erstellen.

Um die größten Verkaufsschlager Ihres Shops zu bewerben, ziehen Sie einfach einen Block „Bestseller-Produkte“ per Drag & Drop in Ihr Layout.

Standardmäßig zeigt dieser Block Ihre beliebtesten Produkte an, aber Sie können die Einstellungen verwenden, um Produkte anzuzeigen, die im Angebot sind, Ihre neuesten Produkte und mehr.

Um dies zu tun, öffnen Sie einfach das Dropdown-Menü 'Typ' und wählen Sie eine neue Option.

Weitere Details finden Sie in unserem Leitfaden zum Thema Anzeigen beliebter Produkte in WooCommerce.

Schritt 6: Ihre benutzerdefinierte Warenkorbseite veröffentlichen

Wenn Sie mit dem Aussehen der Warenkorbseite zufrieden sind, ist es Zeit, sie zu veröffentlichen. Klicken Sie auf den Dropdown-Pfeil neben „Speichern“ und wählen Sie dann die Option „Veröffentlichen“.

Als Nächstes müssen Sie die Warenkorb-URL in den WooCommerce-Einstellungen ändern.

Gehen Sie einfach zu WooCommerce » Einstellungen und wechseln Sie dann zur Registerkarte „Erweitert“.

In diesem Tab möchten Sie das Dropdown-Menü „Warenkorbseite“ öffnen und mit der Eingabe der URL für Ihre benutzerdefinierte Seite beginnen.

Wenn die richtige Seite angezeigt wird, klicken Sie einfach darauf, um sie auszuwählen.

Video-Tutorial

Wenn Sie eher ein visueller Lerner sind, sollten Sie sich unser Video-Tutorial ansehen, wie Sie eine benutzerdefinierte WooCommerce-Warenkorbseite erstellen:

WPBeginner abonnieren

Bonustipp: So verbessern Sie die Konversionsraten auf der WooCommerce-Warenkorbseite weiter

Sobald Sie eine benutzerdefinierte WooCommerce-Warenkorbseite erstellt haben, gibt es viele Möglichkeiten, Warenkorbabbrüche zu reduzieren und mehr Verkäufe zu erzielen. Dies hilft Ihnen, mehr Geld mit Ihrem vorhandenen Traffic zu verdienen.

Hier sind ein paar einfache Möglichkeiten, dies zu tun.

1. Verfolgen Sie Ihre Konversionen

Warenkorbabbrüche sind ein großes Problem für alle Online-Shops. Tatsächlich zeigen Untersuchungen, dass fast 70 % der Leute, die Artikel in ihren Warenkorb legen, nicht kaufen. (Quelle: Warenkorbabbrüche Statistiken)

Conversion-Tracking hilft Ihnen zu verstehen, was auf Ihrer Warenkorbseite funktioniert und was nicht. Sie können dann SeedProd verwenden, um Ihre benutzerdefinierte Warenkorbseite zu optimieren, damit mehr Kunden ihre Einkäufe abschließen.

Der einfachste Weg, WooCommerce-Conversions zu verfolgen, ist mit MonsterInsights, dem besten Google Analytics Plugin für WordPress.

Es wird mit einem E-Commerce-Add-on geliefert, das die Conversion-Verfolgung mit nur wenigen Klicks ermöglicht, sodass Sie Ihre Daten sehen können, ohne Code schreiben oder Ihr Dashboard verlassen zu müssen.

Um Ihre WooCommerce-Warenkorb-Conversions zu verfolgen, lesen Sie unsere Schritt-für-Schritt-Anleitung zur Einrichtung der WooCommerce-Conversion-Verfolgung.

2. Reduzieren Sie Warenkorbabbrüche mit zeitgesteuerten Popups in WooCommerce

Sie können Warenkorbabbrüche auch mit einem zeitgesteuerten Popup reduzieren. Der einfachste und effektivste Weg, dies zu tun, ist mit OptinMonster, dem besten WordPress Popup Plugin für Lead-Generierung und Conversion-Optimierung.

Seine einzigartige Exit-Intent® Technologie zeigt Popups genau dann an, wenn ein Käufer die Warenkorbseite verlassen will. Sie können diese Software sogar verwenden, um Käufern einen speziellen Rabattcode anzubieten, wenn sie den Kauf jetzt abschließen.

OptinMonster verfügt über eine leistungsstarke Sammlung von Targeting- und Personalisierungsfunktionen.

Zum Beispiel, wenn Sie dem Käufer bereits einen Gutschein angeboten haben, können Sie ihm stattdessen ein informatives Popup anzeigen. Sie könnten ihn zum Beispiel ermutigen, sich zu melden und alle Fragen zu stellen, die er zu Ihren Produkten hat.

OptinMonster ermöglicht es Ihnen, verschiedene Kampagnen zu erstellen, darunter Popups, Vollbild-Willkommensmatten, schwebende Balken, Scrollboxen und Slide-ins.

Wenn ein Kunde beispielsweise einen Artikel in seinen Warenkorb legt und den Kauf nicht abschließt, können Sie ihm mit einem Slide-In einen Gutschein für genau dieses Produkt anbieten.

Weitere Details finden Sie in unserem Leitfaden zur Erstellung eines WooCommerce-Popups zur Umsatzsteigerung.

3. Verkäufe mit Social-Activity-Benachrichtigungen in WooCommerce steigern

Social-Activity-Benachrichtigungen zeigen alle Produkte an, die Käufer in Echtzeit kaufen. Dies kann Käufern versichern, dass Sie eine beliebte, vertrauenswürdige Website sind, und auch FOMO nutzen, um sie zum Kauf zu bewegen.

Der einfachste Weg, Social Proof-Benachrichtigungen zu Ihrer Warenkorbseite hinzuzufügen, ist mit TrustPulse. Es ist das beste Social Proof-Plugin für WordPress und WooCommerce und hat nachweislich die Konversionsraten um bis zu 15 % erhöht.

Unsere Partner-Marken nutzen es, um Live-Käufe in ihren Shops anzuzeigen, was ihre Konversionsraten verbessert hat. Weitere Details zu seinen Funktionen finden Sie in unserem TrustPulse-Testbericht.

Sie können das Plugin in nur wenigen Minuten zu Ihrer Website hinzufügen und jedes Mal eine Benachrichtigungsblase anzeigen lassen, wenn jemand ein Produkt kauft, eine kostenlose Testversion startet und mehr.

Weitere Details finden Sie in unserem Leitfaden zum Thema Verwendung von FOMO auf Ihrer WordPress-Website.

Wir hoffen, dieser Artikel hat Ihnen geholfen, eine benutzerdefinierte WooCommerce-Warenkorbseite zu erstellen, ohne Code schreiben zu müssen. Möglicherweise möchten Sie auch unseren Schritt-für-Schritt-Leitfaden zur Anpassung der WooCommerce-Anmeldeseite und unsere Expertenauswahl der besten WooCommerce-Plugins für Ihren Shop ansehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.