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.

Studien zeigen, dass 70–85 % der Käufer ihren Warenkorb abbrechen, bevor sie bezahlen. Ich führe Sie durch den Aufbau einer Seite, die sie in etwa 15 Minuten ohne Code weiterbringt.

Wir tun dies mit SeedProd, einem Drag-and-Drop-Builder, der nahtlos mit WooCommerce zusammenarbeitet, damit Sie noch heute eine verkaufsfördernde Checkout-Seite starten können.

Schnelle Schritte zum Erstellen einer benutzerdefinierten WordPress-Checkout-Seite:

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-Page-Builder für WordPress, der von über 1 Million Websites genutzt wird.

Mit SeedProd können Sie ganz einfach jede WordPress-Landingpage erstellen, ohne eine einzige Zeile Code zu schreiben. Und aufgrund seiner leistungsstarken WooCommerce-Integration können Sie benutzerdefinierte Checkout-Seiten und andere WooCommerce-Seiten erstellen und mit Ihrem WooCommerce-Shop verknüpfen.

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.

Hinweis: Es gibt eine kostenlose Version von SeedProd. Wir verwenden jedoch SeedProd Pro für die erweiterten WooCommerce-Blöcke.

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

Das Tolle daran ist, dass es Ihrer Website zusätzliche Funktionalität verleiht, ohne mehrere WordPress-Plugins installieren zu müssen.

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 oben auf die Platzhalter der Registerkarten klicken:

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

Der beste Ansatz ist, nach einer Vorlage zu suchen, die dem gewünschten Design am nächsten kommt. Und wenn es keine perfekte Übereinstimmung ist, können Sie es im nächsten Schritt einfach 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.

Sie können dann auf die Schaltfläche Speichern und mit der Bearbeitung der Seite beginnen klicken.

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 dem folgenden Beispiel ähnlich. Hier können Sie Ihre WordPress-Checkout-Seite erstellen und für Conversions optimieren.

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. Dies verringert die Anzahl der Personen, die die Seite verlassen, und ermutigt die Benutzer, den Checkout-Prozess abzuschließen.

Um das Navigationsmenü zu löschen, bewegen Sie einfach 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

Nachdem das Branding Ihrer Website eingerichtet ist, fahren wir mit dem Hinzufügen von Checkout-Funktionalität mit Formularfeldern zu Ihrer Seite fort. Ziehen Sie zuerst einen neuen Block Spalte auf Ihre Seite.

Wählen Sie dann Ihr bevorzugtes Layout.

Scrollen Sie als Nächstes im linken Bedienfeld nach unten zum Bereich WooCommerce, der die besten WooCommerce-Blöcke bietet. Wählen Sie dort den Block Checkout aus und ziehen Sie ihn auf Ihre Seite.

Klicken Sie auf eine beliebige Stelle im Checkout-Block, um die Einstellungen anzupassen, einschließlich:

• 1- oder 2-spaltiges Checkout-Layout
• Schriftarten und Farben der Checkout-Überschrift
• Styling benutzerdefinierter Felder
• Schaltflächenstile
• Farben für Warnhinweise
• Ränder, Hintergründe und Styling des Warenkorbs
• Anpassungen des Zahlungsbereichs

Denken Sie daran, auf „Speichern“ zu klicken, um Ihre Einstellungen für den Checkout-Feld-Editor zu speichern.

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.

Es ist zu diesem Zeitpunkt eine gute Idee, den Überschriftenblock herüberzuziehen und ihn in etwas wie „Beliebte Produkte“ zu ändern. So wissen die Leute genau, was sie sich ansehen.

Bewertungen & Testimonials

Wenn es um sozialen Beweis, Bewertungen und Testimonials geht, erhöhen diese alle die Wahrscheinlichkeit, dass Käufer Ihre WooCommerce-Produkte kaufen. Der Grund dafür ist, dass es den Menschen versichert, dass andere Menschen Ihren Produkten vertrauen und dass sie die richtige Entscheidung treffen.

Warum also nicht einige Bewertungen, Testimonials und Sternebewertungen auf Ihrer Checkout-Seite einfügen?

Dies können Sie ganz einfach mit SeedProd tun. Gehen Sie einfach zu den Erweiterten Blöcken und ziehen Sie den Block Testimonials auf Ihre Checkout-Seite.

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

Zusätzlich können Sie weiteren sozialen Beweis hinzufügen, indem Sie den Block „Sternebewertung“ unter dem Testimonial verwenden.

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

Wenn Sie mit Ihrer Seite zufrieden sind, sehen wir uns an, wie sie auf Mobilgeräten aussieht. Schließlich kaufen viele Menschen heutzutage von ihren Mobilgeräten aus. Daher ist es entscheidend für die Umsatzsteigerung, dass alles für mobile Nutzer optimiert ist.

Glücklicherweise verfügt SeedProd über eine Funktion, mit der Sie Ihre WordPress-Kaufabwicklung einfach auf Mobilgeräten in der Vorschau anzeigen können. Klicken Sie einfach auf das mobile Symbol in der unteren Navigationsleiste.

Dann können Sie sehen, wie Ihre Seite von jedem mobilen Benutzer eingerichtet wird. Von dort aus können Sie Anpassungen vornehmen, um die Benutzererfahrung zu verbessern.

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 standardmäßigen WooCommerce-Checkout-Seite haben Sie jetzt eine hochkonvertierende WordPress-Checkout-Seite, die auf Ihre Zielgruppe zugeschnitten ist.

Schritt 5: Weisen Sie Ihre Checkout-Seite WooCommerce zu

Der letzte Schritt in dieser Anleitung ist die Zuweisung Ihrer neuen WordPress-Checkout-Seite zu WooCommerce. Dies beinhaltet die Änderung der Standardeinstellungen von WooCommerce und das Hinzufügen der URL für Ihre neue Seite.

Durch die Änderung der URL gelangen Ihre Kunden automatisch zu Ihrer neuen WordPress-Checkout-Seite anstelle der Standardoption.

Um diese Einstellung zu konfigurieren, gehen Sie zu WooCommerce » Einstellungen und klicken Sie auf die Registerkarte Erweitert. Suchen Sie dann unter der Überschrift Checkout-Seite 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, gelangt er zu Ihrem neuen, hochkonvertierenden Checkout-Bildschirm, den Sie gerade erstellt haben.

Testen Sie die Kaufabwicklung vor der Veröffentlichung mithilfe des 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 zum Erstellen einer Checkout-Seite in WordPress

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

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

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

Ja. WooCommerce unterstützt mehrere Zahlungsgateways, darunter Stripe, PayPal, Apple Pay und Ratenzahlungsoptionen. Aktivieren Sie diese unter WooCommerce → Einstellungen → Zahlungen, und SeedProd zeigt sie automatisch auf Ihrer benutzerdefinierten Checkout-Seite an.

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. Sowohl Stripe als auch PayPal bieten 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, schnell und auf Ihren Shop zugeschnitten, damit mehr Käufer ihre Bestellungen abschließen.

Mit SeedProd und seiner WooCommerce-Integration können Sie eine Checkout-Seite gestalten, die zu Ihrer Marke passt, Ablenkungen beseitigt und Funktionen hinzufügt, die Vertrauen aufbauen und den Umsatz steigern, ohne Code schreiben zu müssen.

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
• So beschleunigen Sie Ihren WooCommerce-Shop (in 7 einfachen Schritten)
• 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.