So erstellen Sie eine benutzerdefinierte WordPress-Checkout-Seite (ohne Code) 

Wenn Sie jemals einen Verkauf verloren haben, weil Ihre Checkout-Seite langsam, verwirrend oder ohne die richtige Zahlungsoption war, wissen Sie, wie frustrierend das ist. Eine benutzerdefinierte Checkout-Seite in WordPress behebt dies und bietet Käufern eine reibungslose, vertrauenswürdige Möglichkeit zu bezahlen.

Etwa 70 % der Käufer brechen ihren Einkaufswagen ab, bevor sie bezahlen, laut dem laufenden Durchschnitt des Baymard Institute. Ein Checkout, den Sie kontrollieren, ist die Lösung, egal ob Sie eine neue Seite von Grund auf neu erstellen oder die vorhandene WooCommerce-Checkout-Seite anpassen.

Ich zeige Ihnen zuerst die kostenlosen WooCommerce-Einstellungen. Dann führe ich Sie durch die Erstellung einer vollständig benutzerdefinierten Checkout-Seite mit SeedProd, in etwa 15 Minuten, ohne Code anzufassen.

So passen Sie die WooCommerce-Checkout-Seite ohne Plugin an

WooCommerce enthält eine Handvoll kostenloser Checkout-Einstellungen, und es lohnt sich, diese zu überprüfen, bevor Sie etwas installieren.

Hier ist, was Sie sofort ändern können:

• Gast-Checkout: Kunden ohne Konto bezahlen lassen (WooCommerce » Einstellungen » Konten & Datenschutz)
• Gutscheinfeld: Gutscheincode-Feld beim Checkout anzeigen oder ausblenden (WooCommerce » Einstellungen » Allgemein)
• Checkout-Seite: Wählen Sie aus, welche Seite als Ihre Checkout-Seite dient (WooCommerce » Einstellungen » Erweitert » Seiten-Setup)
• Grundlegende Felder: Einige Adressfelder können ein- oder ausgeschaltet werden, aber das Hinzufügen oder Entfernen von Feldern erfordert ein Plugin

Diese Einstellungen ändern, wie Ihr Checkout funktioniert, nicht wie er aussieht. Das Layout, die Farben und das Branding stammen alle von der Vorlage Ihres Themes, und WooCommerce bietet Ihnen dafür keinen visuellen Editor.

Im Rest dieses Leitfadens zeige ich Ihnen, wie Sie den Standard-Checkout durch eine selbst gestaltete Seite ersetzen.

So erstellen Sie eine Checkout-Seite in WordPress (ohne Code)

Für dieses Tutorial verwenden wir SeedProd, um eine WordPress-Checkout-Seite zu erstellen. SeedProd ist der beste Drag-and-Drop- WordPress-Website-Builder, der von über 1 Million Websites genutzt wird.

Mit SeedProd können Sie jede WordPress-Landingpage erstellen, ohne eine einzige Zeile Code zu schreiben. Die WooCommerce-Integration deckt auch den Rest Ihres Shops ab, sodass Sie Ihre Warenkorbseite und Ihre Shopseite auf die gleiche Weise anpassen können.

Das bedeutet, dass Sie anstelle des Standard-One-Page-Checkouts von WooCommerce eine vollständig angepasste Seite erstellen können, die für Conversions optimiert ist. Und bevor Sie starten, können Sie eine WooCommerce „Coming Soon“-Seite erstellen, um Leads zu generieren.

Wenn Sie also eine Checkout-Seite in WordPress für Anfänger erstellen möchten, erfahren Sie hier, wie Sie dies mit SeedProd tun.

Video-Anleitung

Schritt 1: SeedProd installieren und aktivieren

Der erste Schritt ist die Installation und Aktivierung des SeedProd-Plugins.

Wenn Sie Hilfe bei diesem Schritt benötigen, folgen Sie dieser Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Nach der Aktivierung von SeedProd gehen Sie zu SeedProd » Einstellungen und geben Sie Ihren Lizenzschlüssel ein.

Diese Informationen finden Sie einfach im Bereich Downloads Ihres Kontos auf der SeedProd-Website.

Schritt 2: Neue Seite erstellen

Nachdem Sie Ihren Lizenzschlüssel aktiviert haben, navigieren Sie in Ihrem WordPress-Dashboard zu SeedProd » Seiten. Auf dieser Seite sehen Sie eine Übersicht über die verschiedenen Seitenmodi von SeedProd und einen Bereich zum Hinzufügen neuer Landingpages.

Mit den Seitenmodi können Sie sofort:

• Eine "Coming Soon"-Seite erstellen und aktivieren
• Den Wartungsmodus aktivieren
• Erstellen Sie eine benutzerdefinierte 404-Seite
• Eine benutzerdefinierte WordPress-Anmeldeseite einrichten
• Eine eigenständige WordPress-Landingpage erstellen

Jeder Modus fügt Funktionalität hinzu, für die Ihre Website sonst ein separates WordPress-Plugin benötigen würde.

Für diese Anleitung möchten wir eine eigenständige WordPress-Checkout-Seite erstellen. Klicken Sie dazu auf die Schaltfläche Neue Landingpage hinzufügen.

Auf dem nächsten Bildschirm können Sie aus Hunderten von responsiven Landingpage-Vorlagen auswählen.

Sie können Designs filtern, indem Sie auf die Registerkarten oben klicken:

• Alle
• Wartungsmodus (Coming Soon)
• Wartungsmodus
• 404-Seite
• Verkäufe
• Webinar
• Lead Squeeze
• Anmelden

Der beste Ansatz ist, nach einer Vorlage zu suchen, die dem gewünschten Design sehr nahe kommt. Und wenn es nicht perfekt passt, können Sie es im nächsten Schritt ohne PHP, CSS oder Shortcodes anpassen.

Für dieses Tutorial verwenden wir die Leere Vorlage, um Ihnen zu zeigen, wie einfach es ist, Ihre WordPress-Checkout-Seite zu erstellen, ohne einen Entwickler beauftragen zu müssen.

Um die Vorlage auszuwählen, bewegen Sie die Maus über die Miniaturansicht und klicken Sie auf das orangefarbene Häkchensymbol.

Danach erscheint ein Popup, in dem Sie aufgefordert werden, einen Namen und eine URL für Ihre Seite einzugeben.

Klicken Sie dann auf die Schaltfläche Speichern und Seite bearbeiten starten.

Schritt 3: Inhalte zu Ihrer Checkout-Seite hinzufügen

Nachdem Sie Ihre Vorlage importiert haben, wird sie im visuellen Seitenersteller von SeedProd geöffnet und sieht ähnlich aus wie im folgenden Beispiel.

In meinen GTmetrix-Tests lud eine von SeedProd erstellte Seite in 556 ms, verglichen mit 1.882 ms für dieselbe Seite, die mit Elementor erstellt wurde. Eine schnellere Checkout-Seite bedeutet weniger Abbrüche vor der Zahlung.

Auf der rechten Seite sehen Sie eine Live-Vorschau Ihrer Seite. Und auf der linken Seite befindet sich ein Optionsfeld, in dem Sie verschiedene Blöcke und Abschnitte auswählen und Ihr Design anpassen können.

Checkout-Seiten-Header

Zuerst fügen wir Ihrer Checkout-Seite einen Header hinzu, damit Sie Ihr Branding über Ihre gesamte Website hinweg konsistent halten können.

Klicken Sie dazu im linken Bereich auf die Registerkarte Abschnitte und dann auf die Kategorie Header. Bewegen Sie dann die Maus über einen beliebigen Header-Abschnitt und klicken Sie auf das Plus-Symbol, um ihn zu Ihrer Seite hinzuzufügen.

Klicken Sie als Nächstes auf den Bildbereich Ihres neuen Header-Abschnitts. Hier können Sie ein Bild von Ihrem Computer oder Ihrer WordPress-Mediathek hochladen, das als Logo Ihrer Website verwendet werden soll.

Wir empfehlen außerdem, das Navigationsmenü von Ihrer Checkout-Seite zu entfernen. Weniger Ausstiegsrouten bedeuten mehr abgeschlossene Checkouts.

Um das Navigationsmenü zu löschen, bewegen Sie die Maus über den Navigationsblock und klicken Sie auf das Papierkorbsymbol.

Passend wollen wir nun die Schaltfläche für den Handlungsaufruf (CTA) anpassen. Anstatt Nutzer von der Seite wegzuleiten, können Sie diese Schaltfläche verwenden, um Nutzer an den Inhalt ihres Warenkorbs zu erinnern.

Klicken Sie also auf die CTA-Schaltfläche, um die Einstellungen auf der linken Seite zu öffnen und den Standardtext zu ersetzen. In unserem Fall haben wir ihn in „Warenkorb anzeigen“ geändert.

Anschließend können Sie die URL Ihrer WooCommerce-Warenkorbseite im Feld „Link“ hinzufügen. Wenn Sie möchten, können Sie den Link als „nofollow“ markieren oder ihn in einem neuen Tab öffnen, indem Sie das Kontrollkästchen aktivieren.

WooCommerce Checkout-Block

Mit Ihrem Branding an Ort und Stelle ist es an der Zeit, das Checkout-Formular selbst hinzuzufügen. Ziehen Sie zuerst einen neuen Spalten-Block auf Ihre Seite.

Wählen Sie dann Ihr bevorzugtes Layout.

Scrollen Sie als Nächstes im linken Bereich nach unten zum Abschnitt WooCommerce. Wählen Sie dort den Checkout-Block aus und ziehen Sie ihn auf Ihre Seite.

Klicken Sie auf eine beliebige Stelle im Checkout-Block, um seine Einstellungen zu öffnen.

Die Registerkarte Stil gibt Ihnen präzise Kontrolle darüber, wie das Formular aussieht:

• Layout: ein 1- oder 2-spaltiges Checkout-Formular
• Kopfzeile: Schriftarten und Farben für die Checkout-Überschriften
• Felder: Hintergrund-, Text-, Rand- und Label-Styling sowie Zeilenabstand
• Schaltfläche: Stil (flach, 2D, Vintage, Ghost oder Link), Farbe und Radius des Rahmens
• Benachrichtigungen: Hervorhebungsfarben für Info-, Fehler- und Erfolgsmeldungen
• Warenkorb: Rahmen, Hintergründe, Schriftarten und Kopfzeilen-Styling
• Zahlungsbereich: Hintergrund, Textfarbe und Schriftfamilie

Für einen schnelleren Start klicken Sie stattdessen auf die Registerkarte Vorlagen. Sie enthält vorgefertigte Stile für Ihre Checkout-Felder, und mit einem Klick werden diese auf das gesamte Formular angewendet.

Denken Sie daran, auf „Speichern“ zu klicken, um Ihre Änderungen zu speichern.

Ändern, welche Felder beim Checkout angezeigt werden

Die Einstellungen des Checkout-Blocks steuern, wie Ihr Formular aussieht, nicht welche Felder es anzeigt. WooCommerce bestimmt die Felder, sodass Sie den Firmennamen nicht entfernen oder das Formular über das SeedProd-Panel neu anordnen können.

Um Checkout-Felder hinzuzufügen, zu entfernen oder neu anzuordnen, verwenden Sie ein spezielles Plugin zur Feldverwaltung wie Checkout Field Editor for WooCommerce. Die kostenlose Version deckt die Grundlagen ab.

Eine Sache, auf die Sie achten sollten: PHP-Snippets, die Checkout-Felder bearbeiten, funktionieren nur beim klassischen Shortcode-Checkout. Der neuere Block-Checkout von WooCommerce ignoriert diese Filter stillschweigend, weshalb ältere Code-Tutorials oft nicht mehr funktionieren.

WooCommerce Beliebte Produkte

Wenn Sie den Umsatz steigern möchten, können Sie als Nächstes beliebte Produkte zu Ihrer WordPress-Checkout-Seite hinzufügen. Dies kann Käufer dazu anregen, vor dem Bezahlen weitere Artikel in ihren Warenkorb zu legen.

Um beliebte Produkte hinzuzufügen, wählen Sie den Block Bestseller-Produkte aus dem WooCommerce-Bereich und ziehen Sie ihn auf Ihre Seite.

Von dort aus können Sie die Anzahl der Spalten bearbeiten, Paginierung hinzufügen und andere Einstellungen über die Dropdown-Menüs anpassen.

Fügen Sie oberhalb des Rasters einen Überschriften-Block hinzu und ändern Sie ihn in etwas wie „Beliebte Produkte“. So wissen Käufer genau, was sie sich ansehen.

Bewertungen & Testimonials

Bewertungen und Testimonials versichern Käufern, dass andere Menschen Ihren Produkten vertrauen. Diese Zusicherung ist beim Checkout am wichtigsten, genau dann, wenn Käufer kalte Füße bekommen.

Sie können sie mit SeedProd hinzufügen. Gehen Sie zu den Erweiterten Blöcken und ziehen Sie den Testimonials-Block auf Ihre Checkout-Seite.

In den Einstellungen können Sie den Block anpassen. Sie können zum Beispiel ein Testimonial-Foto oder eine Berufsbezeichnung hinzufügen und ihn sogar in einen scrollenden Karussell mit mehreren Testimonials verwandeln.

Sie können auch einen Star Rating-Block unter das Testimonial setzen, um zusätzliche soziale Bewährtheit zu erzielen.

Vertrauensabzeichen funktionieren auf die gleiche Weise. Ein Schloss-Symbol oder eine Geld-zurück-Garantie in der Nähe des Zahlungsbuttons ist eine kleine Ergänzung, die Zweifel im letzten Moment beruhigen kann.

Schritt 4: Veröffentlichen Sie Ihre WordPress-Checkout-Seite

Wenn Sie mit Ihrer Seite zufrieden sind, überprüfen Sie, wie sie auf Mobilgeräten aussieht. Die meisten Käufer stöbern auf ihren Handys, daher kostet eine Kasse, die auf kleinen Bildschirmen fehlschlägt, Sie Verkäufe. Stellen Sie sicher, dass alles für Mobilgeräte optimiert ist, bevor Sie live gehen.

SeedProd verfügt über eine integrierte mobile Vorschau dafür. Klicken Sie auf das mobile Symbol in der unteren Navigationsleiste.

Sie sehen die Seite so, wie ein mobiler Käufer sie sehen würde, und Sie können alles beheben, was gedrängt aussieht, bevor es live geht.

Wenn Sie mit dem Aussehen zufrieden sind, klicken Sie auf den Dropdown-Pfeil neben der grünen Schaltfläche Speichern und dann auf Veröffentlichen, um Ihre Checkout-Seite live zu schalten.

Anstelle der Standard-WooCommerce-Kasse haben Sie jetzt eine Kasse, die tatsächlich Ihnen gehört.

Schritt 5: Weisen Sie Ihre Checkout-Seite WooCommerce zu

Der letzte Schritt besteht darin, WooCommerce mitzuteilen, dass Ihre neue Seite verwendet werden soll. Dies ist eine Einstellung im WooCommerce-Dashboard.

Gehen Sie zu WooCommerce » Einstellungen und klicken Sie auf die Registerkarte Erweitert. Suchen Sie dann neben der Überschrift Kassenseite nach der Seite, die Sie gerade erstellt haben.

Wenn Sie sie in der Dropdown-Liste finden, klicken Sie darauf, um sie als Ihre offizielle Checkout-Seite zuzuweisen. Stellen Sie sicher, dass Sie unten auf dem Bildschirm auf Änderungen speichern klicken, um Ihre Einstellungen zu übernehmen.

Wenn ein Besucher nun auf „Zur Kasse gehen“ klickt, landet er auf der Seite, die Sie gerade erstellt haben. Dies funktioniert, unabhängig davon, ob Ihr Shop zuvor den Block oder die klassische Kasse verwendet hat.

Testen Sie die Kasse, bevor Sie live gehen, mit dem integrierten Testmodus von WooCommerce. Aktivieren Sie unter WooCommerce » Einstellungen » Zahlungen ein Test-Gateway und geben Sie eine Testbestellung auf, um zu bestätigen, dass alles funktioniert.

Wenn Ihre Zahlungsmethoden nicht auf der Seite angezeigt werden, sollten Sie dort zuerst nachsehen. SeedProd zeigt alle Gateways an, die Sie dort aktiviert haben, einschließlich Stripe, PayPal und alle anderen, die Sie aktiviert haben.

FAQs zu WordPress-Checkout-Seiten

Benötige ich Programmierkenntnisse, um eine WooCommerce-Checkout-Seite anzupassen?

Nein. Mit dem Drag-and-Drop-Builder von SeedProd können Sie die WooCommerce-Kassenseite anpassen, ohne Code anfassen zu müssen. Ändern Sie das Layout, gestalten Sie das Formular und fügen Sie Vertrauenssignale mit visuellen Steuerelementen hinzu. Kein PHP oder CSS erforderlich.

Kann ich meiner benutzerdefinierten Checkout-Seite zusätzliche Zahlungsgateways hinzufügen?

Ja. WooCommerce unterstützt mehrere Zahlungs-Gateways, darunter Stripe, PayPal, Apple Pay und Ratenzahlungsoptionen. Aktivieren Sie sie unter WooCommerce » Einstellungen » Zahlungen, und SeedProd zeigt sie automatisch auf Ihrer benutzerdefinierten Kassenseite an.

Wie mache ich den WooCommerce-Checkout zu einer Seite?

Erstellen Sie eine Seite mit SeedProd, die sowohl den Warenkorb- als auch den Kassenblock enthält, und weisen Sie sie dann unter WooCommerce » Einstellungen » Erweitert als Ihre Kassenseite zu. Käufer sehen ihren Warenkorb, ihre Rechnungsdaten und die Bestellübersicht auf einer einzigen Seite ohne Neuladen.

Warum funktioniert mein Code zur Anpassung der WooCommerce-Checkout-Seite nicht?

Ihr Shop verwendet höchstwahrscheinlich die Blockkasse von WooCommerce, die PHP-Filter wie woocommerce_checkout_fields stillschweigend ignoriert. Entweder wechseln Sie zurück zur klassischen Shortcode-Kasse oder verwenden Sie einen visuellen Builder wie SeedProd, der die Kassenseite ersetzt, ohne auf PHP-Hooks angewiesen zu sein.

Funktioniert SeedProd mit dem WooCommerce-Block-Checkout?

Ja. SeedProd erstellt eine separate benutzerdefinierte Kassenseite, und die Zuweisung in den WooCommerce-Einstellungen ersetzt jeden aktiven Kassentyp, egal ob Block oder klassisch. Sie müssen die WooCommerce-Kassenmodi nicht zuerst wechseln.

Wie kann ich die Konversionsraten auf meiner Checkout-Seite verbessern?

Halten Sie das Formular einfach, bieten Sie mehrere Zahlungsoptionen an und fügen Sie Sicherheitsabzeichen und Kundenbewertungen hinzu. Das Entfernen von Navigationsmenüs verhindert, dass Käufer den Checkout-Vorgang abbrechen. Der visuelle Builder von SeedProd ermöglicht all diese Anpassungen ohne Code.

Wie teste ich meine WooCommerce-Kaufabwicklung, bevor ich live gehe?

Aktivieren Sie ein Test-Gateway in WooCommerce » Einstellungen » Zahlungen. Stripe und PayPal bieten beide Sandbox-Modi an. Geben Sie eine Testbestellung auf, um zu bestätigen, dass die Checkout-Seite korrekt geladen wird, Zahlungen verarbeitet und Bestellbestätigungs-E-Mails gesendet werden, bevor Sie live gehen.

Erstellen Sie Ihren individuellen Checkout in WordPress

Beim Erstellen einer benutzerdefinierten Checkout-Seite in WordPress geht es um mehr als nur das Design. Sie macht den Kaufprozess klar und schnell, sodass mehr Käufer ihre Bestellungen abschließen.

Mit SeedProd können Sie eine Checkout-Seite gestalten, die zu Ihrer Marke passt und Ablenkungen beseitigt, ohne Code schreiben zu müssen. Und sobald sie live ist, können Sie Ihre WooCommerce-Dankesseite anpassen, um Upsells zu tätigen oder Bewertungen nach dem Verkauf zu sammeln.

Richten Sie Ihre benutzerdefinierte Seite noch heute ein und verwandeln Sie mehr Besucher in zahlende Kunden.

Wenn Sie weitere WooCommerce-Tipps suchen, lesen Sie diese Beiträge:

• So aktivieren Sie den Wartungsmodus für WooCommerce-Shop-Seiten
• Wie man WordPress schnell macht
• So richten Sie die WooCommerce-Conversion-Nachverfolgung für Ihr Geschäft ein

Vergessen Sie nicht, uns auf Twitter, YouTube und Facebook zu folgen, um weitere hilfreiche Inhalte für das Wachstum Ihres Unternehmens zu erhalten.