Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

So erstellen Sie eine benutzerdefinierte WooCommerce-Warenkorb-Seite (ohne Programmierung)

Hinweis der Redaktion: Wir erhalten eine Provision für Partnerlinks auf WPBeginner. Die Provisionen haben keinen Einfluss auf die Meinung oder Bewertung unserer Redakteure. Erfahre mehr über Redaktioneller Prozess.

Möchten Sie eine benutzerdefinierte WooCommerce-Warenkorb-Seite erstellen?

Die Standard-Warenkorb-Seite von WooCommerce ist nicht für Konversionen optimiert. Durch die Anpassung der Warenkorbseite können Sie mehr Verkäufe erzielen und mehr Geld mit Ihrem Online-Shop verdienen.

In diesem Artikel zeigen wir Ihnen, wie Sie Ihre WooCommerce-Warenkorb-Seite anpassen können, ohne Code schreiben zu müssen.

How to create a custom WooCommerce cart page (no coding)

Warum eine benutzerdefinierte WooCommerce Cart Page in WordPress erstellen?

WooCommerce verfügt über eine integrierte Warenkorb-Seite.

Aktivieren Sie einfach dieses unverzichtbare WordPress-Plugin, und Ihr Online-Shop wird automatisch die Standard-Warenkorb-Seite verwenden.

The default WooCommerce cart page

Wenn Ihre Besucher Artikel in ihrem Einkaufswagen haben, sind sie kurz davor, einen Kauf zu tätigen. Untersuchungen zeigen jedoch, dass fast 7 von 10 Kunden ihren Einkaufswagen verlassen und nicht mehr zurückkommen.

In diesem Sinne sollte Ihre Warenkorb-Seite alles tun, um den Verkauf zu sichern.

Wenn Sie das Standarddesign durch eine benutzerdefinierte Einkaufswagenseite ersetzen, können Sie die Konversionsraten Ihres Online-Shops häufig verbessern.

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

Das heißt, lassen Sie uns einen Blick darauf werfen, wie Sie Ihre WooCommerce-Warenkorb-Seite ohne Code anpassen können.

Video-Anleitung

Subscribe to WPBeginner

Wenn Sie eine schriftliche Anleitung bevorzugen, lesen Sie einfach weiter.

Wie man eine benutzerdefinierte WooCommerce Warenkorb Seite in WordPress erstellen

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

SeedProd ist der beste Drag-and-Drop-Seitenersteller und wird mit mehr als 180 professionell gestalteten Vorlagen geliefert. Dazu gehören eCommerce-Vorlagen, die Sie zum Erstellen von Verkaufsseiten und Lead Squeeze Pages verwenden können.

Noch besser, SeedProd hat volle Unterstützung für WooCommerce und kommt sogar mit speziellen WooCommerce Blöcken, die es Ihnen ermöglichen, Ihre meistverkauften Produkte, die beliebtesten Artikel, die letzten Verkäufe und mehr zu zeigen.

Als Erstes müssen Sie das Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Hinweis: Es gibt eine kostenlose Version von SeedProd, aber für diesen Leitfaden werden wir die Pro-Version verwenden, weil sie die integrierten WooCommerce-Blöcke hat, die wir brauchen. Außerdem lässt sie sich mit allen E-Mail-Marketingdiensten integrieren, die Sie möglicherweise bereits nutzen, um mehr Verkäufe und Konversionen zu erzielen.

Nach der Aktivierung müssen Sie zu SeedProd “ Einstellungen gehen und Ihren Lizenzschlüssel eingeben.

Enter SeedProd license key

Sie finden diese Informationen unter Ihrem Konto auf der SeedProd-Website. Nachdem Sie die Lizenz eingegeben haben, klicken Sie auf die Schaltfläche „Verify Key“.

Wenn Sie das getan haben, gehen Sie zu SeedProd “ Landing Pages und klicken Sie auf die Schaltfläche „Add New Landing Page“.

SeedProd's page design templates

Danach müssen Sie eine Vorlage für die Einkaufswagen-Seite auswählen.

Die Vorlagen von SeedProd sind in verschiedene Kampagnentypen unterteilt, wie z. B. „Demnächst“ und “ 404-Seite“. Sie können auf die Registerkarten am oberen Rand des Bildschirms klicken, um die Vorlagen nach Kampagnentyp zu filtern.

Wenn Sie eine Vorlage gefunden haben, die Sie verwenden möchten, bewegen Sie den Mauszeiger über die Vorlage und klicken Sie auf das Symbol „Häkchen“.

Wir werden die ‚Leere Vorlage‘ verwenden, da wir damit nur die gewünschten Abschnitte hinzufügen können.

Select SeedProd template

Geben Sie als Nächstes einen Namen für die Einkaufswagenseite ein. SeedProd erstellt automatisch eine URL, die auf dem Titel der Seite basiert, aber Sie können diese URL nach Belieben ändern.

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

Creating a custom cart page using SeedProd

Dadurch wird der SeedProd-Seitenersteller geladen. Es handelt sich um einen einfachen Drag-and-Drop-Editor, der rechts eine Live-Vorschau Ihrer benutzerdefinierten Warenkorb-Seite und links einige Einstellungen anzeigt.

Zunächst fügen wir oben auf der Seite ein Bild ein. Es ist eine gute Idee, ein Bild zu verwenden, das wie die reguläre Kopfzeile Ihres Shops aussieht, da dies Ihr Branding an Ort und Stelle und konsistent hält.

Wir möchten, dass die Kopfzeile die gesamte Breite der Einkaufswagenseite einnimmt. Klicken Sie daher im Feld „Wählen Sie Ihr Layout“ auf das erste Layout.

Choosing a layout for a custom page

Dadurch wird ein Layout über die gesamte Breite erstellt.

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

Add image block header

Um Ihr Bild hochzuladen, klicken Sie auf den Bildblock.

Klicken Sie im linken Menü auf „Eigenes Bild verwenden“ und wählen Sie entweder ein Bild aus der Mediathek oder laden Sie eine neue Datei von Ihrem Computer hoch.

Adding your logo to a custom cart page in WooCommerce

Sie können das Bild mithilfe der Einstellungen auf der linken Seite weiter anpassen. Sie können zum Beispiel einen Alt-Text hinzufügen und die Größe des Bildes ändern.

Wenn Sie mit dem Aussehen der Kopfzeile zufrieden sind, klicken Sie auf das Symbol „Spalten hinzufügen“ im Bereich „Einen neuen Block hierher ziehen“.

Adding new blocks to a WooCommerce cart page

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

Klicken Sie nun auf den Inhalt und das Seitenleistenlayout.

Select SeedProd layout

So können Sie einen Bereich für Ihren Einkaufswagen und einen Bereich, in dem Sie Erfahrungsberichte von Kunden anzeigen können, erstellen, um mehr Konversionen zu erzielen.

Blättern Sie im linken Menü zum Abschnitt „WooCommerce“. Suchen Sie hier den Block „Warenkorb“ und ziehen Sie ihn auf Ihr Layout.

Add WooCommerce cart block

Sie können jeden Teil des Warenkorbs über das Menü auf der linken Seite anpassen.

Dazu gehört das Ändern von Schriftarten, Farben, Schaltflächen und mehr.

Customize WooCommerce cart block

Wenn Sie mit dem Aussehen des Warenkorbs zufrieden sind, ist es an der Zeit, einen Block mit Testimonials hinzuzufügen. Dies ist eine Art sozialer Beweis, der die Besucher ermutigt, ihren Kauf abzuschließen.

Suchen Sie einfach den Block „Testimonials“ und ziehen Sie ihn auf Ihr Layout.

Add testimonials block

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

Im Menü auf der linken Seite finden Sie beispielsweise Einstellungen zum Ändern der Farbe der Kommentarblase, zum Ändern der Ausrichtung und zum Hinzufügen weiterer Kundenreferenzen.

Customize testimonials block

Eine weitere gute Idee ist es, eine Sterne-Bewertung unter Ihrem Erfahrungsbericht anzuzeigen.

Suchen Sie dazu einfach den Block „Sterne-Bewertung“ und ziehen Sie ihn unter den Block „Zeugnis“.

Add star rating block

Knappheit kann Ihre Kunden ermutigen, jetzt einen Kauf zu tätigen, anstatt zu warten und zu riskieren, etwas zu verpassen. Aus diesem Grund sollten Sie einen Countdown-Timer einbauen, der die Minuten bis zum Ablauf des Warenkorbs herunterzählt.

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

Wir wollen jedem Besucher einen neuen Timer zeigen, also öffnen Sie die Dropdown-Liste „Countdown-Typ“ und wählen Sie „Besucher-Timer (Evergreen)“.

Countdown timer evergreen block

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 die Kunden darauf hinweisen, dass ihr Einkaufswagen abläuft, wenn der Timer 0 erreicht, also fügen wir einen „Headline“-Block über dem Timer ein.

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

Countdown timer header

Sie können die Kunden dazu ermutigen, mehr Artikel in ihren Einkaufswagen zu legen, indem Sie eine Rubrik für beliebte Produkte einrichten.

Um die meistverkauften Produkte in Ihrem Shop zu bewerben, ziehen Sie einfach einen Block „Meistverkaufte Produkte“ in Ihr Layout.

Add SeedProd products block

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

Öffnen Sie dazu einfach das Dropdown-Menü „Typ“ und wählen Sie eine neue Option.

Showing popular products on your cart page

Weitere Einzelheiten finden Sie in unserem Leitfaden zur Anzeige beliebter Produkte in WooCommerce.

Wenn Sie mit dem Aussehen der Einkaufswagenseite zufrieden sind, können Sie sie veröffentlichen, indem Sie auf den Dropdown-Pfeil neben „Speichern“ klicken und dann die Option „Veröffentlichen“ wählen.

Publish cart live

Danach müssen Sie die URL des Warenkorbs in den WooCommerce-Einstellungen ändern.

Gehen Sie einfach auf WooCommerce “ Einstellungen und klicken Sie dann auf die Registerkarte „Erweitert“.

Changing the WooCommerce URLs

Öffnen Sie dann das Dropdown-Menü „Einkaufswagen-Seite“ und geben Sie die URL für Ihre benutzerdefinierte Seite ein.

Wenn die richtige Seite angezeigt wird, wählen Sie sie aus.

Changing the WooCommerce cart URL

Bonus: Wie weiter zu verbessern WooCommerce Warenkorb Seite Konversionen

Sobald Sie eine benutzerdefinierte WooCommerce-Warenkorb-Seite erstellt haben, gibt es viele Möglichkeiten, den Abbruch des Warenkorbs zu reduzieren und mehr Verkäufe zu erzielen. So können Sie mehr Geld mit Ihrem bestehenden Traffic verdienen.

Hier sind einige 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 kaufen 60 bis 80 % der Personen, die Artikel in ihren Warenkorb legen, nicht. (Quelle: Statistiken über Warenkorbabbrüche)

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

Der einfachste Weg, WooCommerce-Konversionen zu verfolgen, ist die Verwendung von Google Analytics. Für die Einrichtung von Analysen und die manuelle Erstellung von Google Analytics-Zielen müssen Sie jedoch eine Menge benutzerdefinierten Code schreiben.

In diesem Sinne empfehlen wir die Verwendung von MonsterInsights. Es ist das beste Google Analytics-Plugin für WooCommerce und wird mit einem eCommerce-Addon geliefert, das Conversion-Tracking mit nur wenigen Klicks ermöglicht.

MonsterInsights

Um Ihre WooCommerce-Warenkorb-Konversionen zu verfolgen, lesen Sie unsere Schritt-für-Schritt-Anleitung zur Einrichtung von WooCommerce Conversion Tracking.

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

Mit einem zeitgesteuerten Popup können Sie auch die Zahl der abgebrochenen Einkäufe verringern.

OptinMonster ist das beste WordPress-Popup-Plugin und verfügt über eine einzigartige Exit-Intent®-Technologie, mit der Popups genau dann angezeigt werden können, wenn ein Kunde die Einkaufswagenseite verlassen möchte.

Sie können OptinMonster sogar nutzen, um Ihren Kunden einen speziellen Rabattcode anzubieten, wenn sie den Kauf jetzt abschließen.

OptinMonster popup WooCommerce

OptinMonster verfügt über eine Reihe von leistungsstarken Targeting- und Personalisierungsfunktionen.

Wenn Sie dem Kunden zum Beispiel bereits einen Gutschein angeboten haben, können Sie ihm stattdessen ein Informations-Popup zeigen. So können Sie ihn zum Beispiel ermutigen, sich zu melden und Fragen zu Ihren Produkten zu stellen.

WPForms exit intent popup

Mit OptinMonster können Sie verschiedene Kampagnen erstellen, darunter Popups, bildschirmfüllende Begrüßungsmatten, schwebende Leisten, Scrollboxen und Slide-ins.

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

OptinMonster cart reminder

Weitere Einzelheiten finden Sie in unserem Leitfaden zur Erstellung eines WooCommerce-Popups zur Steigerung der Verkaufszahlen.

3. Umsatzsteigerung mit Benachrichtigungen über soziale Aktivitäten in WooCommerce

Benachrichtigungen über soziale Aktivitäten zeigen alle Produkte, die Käufer kaufen, in Echtzeit an. Dies kann den Käufern versichern, dass Sie eine beliebte, vertrauenswürdige Website sind, und nutzt auch FOMO, um sie zum Kauf zu bewegen.

Die einfachste Möglichkeit, Ihrer Einkaufswagenseite Social-Proof-Benachrichtigungen hinzuzufügen, ist TrustPulse.

TrustPulse WooCommerce notification

Es ist das beste Social-Proof-Plugin für WordPress und WooCommerce auf dem Markt und steigert nachweislich die Conversions um 15%.

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

TrustPulse alert notification

Weitere Einzelheiten finden Sie in unserem Leitfaden zur Verwendung von FOMO auf Ihrer WordPress-Website.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, eine benutzerdefinierte WooCommerce-Warenkorb-Seite zu erstellen, ohne Code zu schreiben. Vielleicht interessiert Sie auch unsere Schritt-für-Schritt-Anleitung, wie Sie Ihren Blog-Traffic erhöhen können, und unsere Expertenauswahl der besten WooCommerce-Plugins für Ihren Shop.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

Ein KommentarEine Antwort hinterlassen

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.