Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Cup
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

So passen Sie die WooCommerce-Checkout-Seite an (Der einfache Weg)

Die Checkout-Seite ist einer der wichtigsten Teile jedes WooCommerce-Shops. Es ist der Moment, in dem Kunden entweder ihren Kauf abschließen oder abbrechen, und selbst kleine Verbesserungen hier können große Auswirkungen auf Ihren Umsatz haben.

Viele Shop-Betreiber möchten den Prozess vereinfachen, benutzerdefinierte Felder hinzufügen oder das Layout anpassen, sind sich aber nicht sicher, wo sie anfangen sollen. Die gute Nachricht ist, dass WooCommerce Ihnen mehrere Möglichkeiten bietet, die Checkout-Seite an Ihr Unternehmen anzupassen.

Wir haben vielen Benutzern geholfen, ihren Checkout-Ablauf anzupassen, und gesehen, wie die richtigen Änderungen den Prozess für Käufer schneller, klarer und vertrauenswürdiger machen können.

In diesem Leitfaden führen wir Sie Schritt für Schritt durch die Methoden zur Anpassung Ihrer WooCommerce-Checkout-Seite. Diese Techniken sind einfach zu befolgen und darauf ausgelegt, Ihnen zu helfen, ein reibungsloseres Checkout-Erlebnis zu schaffen und gleichzeitig Ihren Shop zuverlässig zu halten.

So passen Sie die WooCommerce-Checkout-Seite an (der einfache Weg)

💡Schnelle Antwort: Wie passe ich meine WooCommerce-Checkout-Seite an?

Hier sind die zwei Hauptmethoden zur Anpassung der WooCommerce-Checkout-Seite:

  • Verwenden Sie FunnelKit Builder: Dieses kostenlose Plugin bietet professionell gestaltete Vorlagen, die Sie mit dem Standard-WordPress-Blockeditor anpassen können. Es ist der einfachste und schnellste Weg, eine benutzerdefinierte Checkout-Seite einzurichten.
  • Verwenden Sie SeedProd: Dieser leistungsstarke Drag-and-Drop-Page-Builder gibt Ihnen die vollständige Kontrolle, um eine einzigartige Checkout-Seite von Grund auf neu zu erstellen. Er ist ideal, wenn Sie ein vollständig benutzerdefiniertes Design erstellen oder Upsells und andere konversionsorientierte Elemente hinzufügen möchten.

Warum die WooCommerce-Checkout-Seite anpassen?

Der Hauptgrund für die Anpassung Ihrer WooCommerce-Checkout-Seite ist die Reduzierung von Warenkorbabbrüchen und die Steigerung des Umsatzes. Das Standard-Checkout-Design ist sehr einfach und nicht darauf optimiert, Käufer in Kunden zu verwandeln.

Durch die Erstellung einer benutzerdefinierten Seite können Sie leistungsstarke Funktionen hinzufügen, die der Standardseite fehlen.

Dazu gehören das Hinzufügen von Vertrauenssignalen wie Kundenbewertungen, die Optimierung des Layouts zur Beschleunigung des Prozesses und das Upselling von verwandten Produkten.

Ein schlecht optimierter Checkout ist ein Hauptgrund dafür, dass die durchschnittliche Warenkorbabbrecherquote fast 70 % beträgt. Das bedeutet, dass die meisten Kunden Ihren Shop im letzten Schritt verlassen, ohne Geld auszugeben.

Die Standard-WooCommerce-Checkout-Seite

Indem Sie dieses generische Design durch ein benutzerdefiniertes ersetzen, können Sie Vertrauen aufbauen und den Kaufprozess so einfach wie möglich gestalten.

Zum Beispiel können Sie Social Proof wie Testimonials und Sternebewertungen hinzufügen, um neue Kunden zu beruhigen.

Ein Beispiel für eine optimierte Checkout-Seite

Nun wollen wir uns ansehen, wie Sie Ihre WooCommerce-Checkout-Seite einfach anpassen und mehr Geld mit Ihrem Online-Shop verdienen können.

Verwenden Sie einfach die folgenden Schnelllinks, um direkt zu der Methode zu gelangen, die Sie verwenden möchten:

Methode 1. Passen Sie Ihre WooCommerce-Checkout-Seite mit dem FunnelKit Builder an

Der einfachste Weg, eine benutzerdefinierte WooCommerce-Checkout-Seite zu erstellen, ist die Verwendung von FunnelKit Builder. Dieses Plugin wird mit fertigen Checkout-Vorlagen und Formularen geliefert.

Eine benutzerdefinierte Checkout-Seite, erstellt mit FunnelKit Builder

Es verfügt auch über integrierte „Optimierungen“, die Ihnen helfen sollen, mehr Verkäufe zu erzielen. Wir haben das Plugin gründlich getestet und festgestellt, dass es sehr anfängerfreundlich ist.

Schritt 1: Installieren und Aktivieren des FunnelKit Builder Plugins

Das Erste, was Sie tun müssen, ist das Plugin FunnelKit Builder zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.

Hinweis: Es gibt auch eine FunnelKit Pro-Version, die erweiterte Optimierungen und Checkout-Vorlagen bietet. In dieser Anleitung verwenden wir die kostenlose Version von FunnelKit Builder, da sie alle Werkzeuge enthält, die Sie zum Erstellen eines benutzerdefinierten Checkout-Seitenlayouts benötigen.

Schritt 2: Wählen Sie eine professionell gestaltete Vorlage

Nach der Aktivierung navigieren Sie zu FunnelKit » Store Checkout. Klicken Sie auf diesem Bildschirm auf die Schaltfläche „Store Checkout erstellen“.

Das FunnelKit Builder WooCommerce Plugin

Sie können jetzt aus einer beliebigen der professionell gestalteten Checkout-Seitenvorlagen von FunnelKit wählen oder 'Von Grund auf neu beginnen' auswählen. Wir empfehlen die Verwendung einer Vorlage, um Ihnen zu helfen, schnell eine hochkonvertierende Checkout-Seite zu erstellen.

Um eine Vorlage genauer anzusehen, bewegen Sie einfach die Maus darüber und klicken Sie dann auf die Schaltfläche 'Vorschau', wenn sie erscheint.

Benutzerdefinierte WooCommerce-Checkout-Vorlagen von FunnelKit

In unseren Bildern verwenden wir die Hific-Vorlage, die einen Abschnitt enthält, in dem Sie beschreiben können, was Sie anbieten, und einen Abschnitt, in dem Sie Kundenrezensionen anzeigen können.

Wenn Sie eine Vorlage finden, die Sie verwenden möchten, klicken Sie auf „Diese Funnel importieren“.

Importieren eines Sales Funnels in Ihre WordPress-Website

An diesem Punkt fordert FunnelKit Sie möglicherweise auf, einige zusätzliche Plugins zu installieren, wie z. B. das SlingBlocks-Plugin für den Block-Editor.

Wenn Sie diese Meldung sehen, klicken Sie auf 'Aktivieren', um die benötigten Plugins zu erhalten.

So erstellen Sie eine benutzerdefinierte WooCommerce-Checkout-Seite mit kostenlosen WordPress-Plugins

Danach können Sie einen Namen für die Checkout-Seite des Shops eingeben. Dies dient nur Ihrer Information, sodass Sie alles verwenden können, was Ihnen hilft, die Seite im WordPress-Dashboard zu identifizieren.

Wenn das erledigt ist, klicken Sie auf die Schaltfläche „Hinzufügen“.

Benennung Ihres FunnelKit WordPress- und WooCommerce-Funnels

Auf dem nächsten Bildschirm sehen Sie alle Schritte, die in dieser Vorlage enthalten sind. Sie können zusätzliche Schritte freischalten, indem Sie auf FunnelKit Pro upgraden.

Da Sie die kostenlose Version von FunnelKit verwenden, enthält die Vorlage eine Checkout-Seite und eine benutzerdefinierte WooCommerce-Dankesseite.

Schritt 3: Benutzerdefiniertes Checkout-Design erstellen

Um die Checkout-Seite anzupassen, klicken Sie auf den Link „Bearbeiten“.

Anpassen des WooCommerce-Checkout-Bildschirms

Sie können nun auf „Vorlage bearbeiten“ klicken, um die Vorlage im WordPress-Blockeditor zu öffnen.

Hinweis: Wenn Sie ein Page Builder-Plugin verwenden, öffnet FunnelKit die Vorlage möglicherweise in einem anderen Editor. Wenn dies geschieht, müssen Sie auf 'Zum WordPress-Editor wechseln' anstatt auf 'Vorlage bearbeiten' klicken.

Anpassen der WooCommerce-Checkout-Seite in Ihrem Online-Shop

Sie können die Vorlage jetzt auf genau die gleiche Weise anpassen, wie Sie jede WordPress-Seite erstellen. Klicken Sie einfach auf einen beliebigen Block und verfeinern Sie ihn dann mit den Einstellungen im rechten Menü und der Mini-Symbolleiste.

Zum Beispiel möchten Sie normalerweise das Platzhalterlogo durch Ihr eigenes benutzerdefiniertes Logo ersetzen. Klicken Sie dazu auf den Bildblock, um ihn auszuwählen, und wählen Sie dann in der Mini-Symbolleiste „Ersetzen“.

Hinzufügen eines benutzerdefinierten Logos zur Checkout-Seite Ihres Online-Shops

Wählen Sie nun entweder "Mediathek öffnen" und wählen Sie ein Bild aus der WordPress-Mediathek aus, oder klicken Sie auf "Hochladen" und wählen Sie eine Datei von Ihrem Computer aus.

Nach der Auswahl eines Bildes können Sie alternativen Bildtext hinzufügen, die Breite ändern und sogar abgerundete Ecken mit den Einstellungen im rechten Menü hinzufügen.

Erstellen eines benutzerdefinierten Checkouts für einen Online-Shop

Sie möchten auch den Platzhaltertext durch Informationen über Ihren eigenen Online-Marktplatz und Kundenrezensionen ersetzen. Klicken Sie einfach auf einen beliebigen Textblock, um ihn bearbeitbar zu machen, genau wie Sie Text im Standard-WordPress-Blockeditor bearbeiten.

Sobald dies erledigt ist, können Sie den Text mit den Einstellungen im rechten Menü gestalten. Sie können beispielsweise Rahmen und Box-Schatten verwenden, um den Text hervorzuheben, die Schriftfamilie oder die Textfarbe in WordPress zu ändern.

Hinzufügen von Social Proof zur WooCommerce-Kasse

Wiederholen Sie einfach diese Schritte, um alle Standardblöcke in der FunnelKit Builder-Vorlage anzupassen. Sie können auch weitere Blöcke hinzufügen, indem Sie auf das Symbol '+' klicken, oder Blöcke löschen, die Sie nicht benötigen.

Die meisten dieser Blöcke sollten Ihnen bekannt vorkommen, aber FunnelKit bietet einige benutzerdefinierte Blöcke. Da Sie eine Checkout-Vorlage verwenden, enthält das Design bereits einen FunnelKit Checkout-Block. Klicken Sie also darauf, um ihn auszuwählen.

Im rechten Menü sehen Sie eine Liste aller verschiedenen Abschnitte im Checkout-Block, wie z. B. Formular-Header, Gutschein und Zahlungs-Gateways.

So passen Sie die Checkout-Seite im E-Commerce-Shop an

Klicken Sie einfach, um jeden Abschnitt zu erweitern und dann Ihre Änderungen vorzunehmen.

Normalerweise können Sie einen Abschnitt ändern, indem Sie den neuen Text eingeben, wenn der Abschnitt eine Überschrift, eine Unterüberschrift oder eine Schaltflächenbeschriftung hat.

So passen Sie die WooCommerce-Checkout-Seite an

Einige Abschnitte sind optional, sodass Sie sie mit einem Schalter aktivieren und deaktivieren können.

Sie möchten beispielsweise eine aufklappbare Bestellübersicht hinzufügen, damit der Käufer alle Artikel in seinem Warenkorb sehen kann.

Hinzufügen einer aufklappbaren Bestellübersicht zu einem E-Commerce-Shop

Sie können dem Checkout-Formular weitere Felder hinzufügen oder Felder entfernen, die Sie nicht benötigen. Wenn Sie beispielsweise WooCommerce verwenden, um digitale Downloads zu verkaufen, müssen Sie normalerweise keine Versandinformationen erfassen.

Schritt 4: Checkout-Formular anpassen

Wenn Sie mit dem Aussehen der Checkout-Seite zufrieden sind, ist es an der Zeit, sich die Formularfelder genauer anzusehen und alle notwendigen Änderungen vorzunehmen.

Um dies zu tun, klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern, und wählen Sie dann „Zurück zur Checkout-Seite“.

Speichern Ihres benutzerdefinierten WooCommerce-Seitenlayouts

Klicken Sie nun auf die Registerkarte „Felder“, um alle verschiedenen Abschnitte und Felder anzuzeigen, aus denen das Checkout-Formular besteht.

Sie können diese Felder per Drag & Drop neu anordnen.

Felder zu einem Checkout-Formular hinzufügen

Um weitere Felder hinzuzufügen, ziehen Sie sie einfach aus dem rechten Bereich und legen Sie sie auf Ihrem Formular ab.

Sie können diese Felder auch in Abschnitte organisieren, indem Sie auf die Schaltfläche „Abschnitt hinzufügen“ klicken.

Hinzufügen von Abschnitten zu einem Formular für einen Online-Shop

Geben Sie im erscheinenden Popup einfach einen Namen für den Abschnitt ein. Da Kunden dies sehen werden, ist es eine gute Idee, eine beschreibende, nützliche Überschrift hinzuzufügen.

Wenn das erledigt ist, klicken Sie auf „Hinzufügen“.

Anpassung der WooCommerce-Zahlungs- und Bestellformulare

Sie können jetzt Felder per Drag & Drop zum Abschnitt hinzufügen.

Möchten Sie ein Feld aus dem Checkout-Formular entfernen? Fahren Sie dann einfach mit der Maus über das Feld und klicken Sie auf das rote 'x'-Symbol, wenn es erscheint.

Felder aus einem WooCommerce-Zahlungs- und Bestellformular entfernen

Um eines der FunnelKit-Felder anzupassen, klicken Sie einfach auf dieses Feld.

Die angezeigten Einstellungen können je nach Feld variieren, aber Sie können normalerweise dessen Bezeichnung ändern, einen Platzhalterwert hinzufügen oder das Feld als obligatorisch festlegen, indem Sie das Kontrollkästchen 'Erforderlich' aktivieren.

Bearbeiten der Felder in einem Online-Bestellformular

Wenn Sie mit der Konfiguration der Checkout-Felder zufrieden sind, vergessen Sie nicht, auf 'Änderungen speichern' zu klicken, um Ihre Einstellungen zu sichern.

Schritt 5: Mehr Verkäufe mit FunnelKit-Optimierungen erzielen

Um mehr Verkäufe zu erzielen, ist es eine gute Idee, einige der Optimierungen von FunnelKit zu aktivieren, indem Sie auf die Registerkarte 'Optimizations' klicken.

Erstellen einer hochkonvertierenden WooCommerce-Checkout-Seite

Hier sehen Sie alle verschiedenen Optimierungen, die den Checkout-Prozess erleichtern können.

Das kostenlose FunnelKit-Plugin bietet Express-Checkout-Buttons für alle besten WooCommerce-Zahlungs-Gateways. Dies ermöglicht es Käufern, auf ihren bevorzugten Express-Checkout-Button zu klicken und mit einem bestehenden Konto zu bezahlen, ähnlich wie bei einem Jetzt-kaufen-Button.

Da der Kunde das Checkout-Formular nicht ausfüllen muss, kann dies die Abbruchrate im Warenkorb reduzieren und Ihnen helfen, mehr Verkäufe zu erzielen.

Um den Express-Checkout einzurichten, wählen Sie im linken Menü „Express-Checkout-Schaltflächen“. Klicken Sie dann auf die Schaltfläche „Aktivieren“ und verwenden Sie das Dropdown-Menü „Position wählen“, um zu ändern, wo die Schaltfläche auf der Checkout-Seite angezeigt wird.

Express-Checkout zu Ihrem Online-Shop hinzufügen

Beachten Sie einfach, dass Sie die Zahlungsanforderungs-Schaltflächen in Ihren Stripe-Gateway-Einstellungen in WooCommerce aktivieren müssen, um die Apple Pay-Schaltfläche verwenden zu können.

Als Nächstes möchten Sie vielleicht das erweiterte Telefonfeld aktivieren. Wenn ein Kunde seine Lieferadresse eingibt, kann FunnelKit neben dem Telefonfeld eine Länderflagge anzeigen.

Hinzufügen einer Telefonflagge zu einem Zahlungsformular

Dies lässt die Käufer wissen, dass sie die richtige Adresse eingegeben haben.

Um diese Funktion hinzuzufügen, wählen Sie im linken Menü „Enhanced Phone Field“ aus und klicken Sie dann auf die Schaltfläche „Ja“ neben „Enable“.

FunnelKit's Conversion-Optimierungseinstellungen

Auf diesem Bildschirm können Sie auch die Telefonnummer anhand des vom Käufer ausgewählten Landes validieren. Dies ist eine Möglichkeit zu überprüfen, ob der Kunde eine gültige Telefonnummer eingegeben hat.

Um diese Prüfung zu aktivieren, wählen Sie einfach die Schaltfläche „Ja“ neben „Telefonnummer validieren“ aus.

Schließlich können Sie wählen, ob die Telefonnummer mit oder ohne Ländercode gespeichert werden soll. Wenn Sie an ein internationales Publikum verkaufen, ist es in der Regel sinnvoll, „Mit Ländercode“ auszuwählen.

Wenn Sie mit der Einrichtung der Optimierungen zufrieden sind, klicken Sie auf „Änderungen speichern“.

Wie Sie sehen können, bietet FunnelKit viele weitere Optimierungen, die Ihnen helfen können, mehr Verkäufe zu erzielen. Dazu gehören das automatische Ausfüllen der Rechnungs- und Lieferadresse des Käufers, das automatische Anwenden von Gutscheinen und das Vortragen des Checkout-Formulars für wiederkehrende Kunden.

Um diese leistungsstarken WooCommerce-Optimierungen freizuschalten, müssen Sie auf FunnelKit Builder Pro upgraden.

Schritt 6: Benutzerdefinierte WooCommerce-Checkout-Seite veröffentlichen

Das kostenlose FunnelKit-Plugin bietet viele weitere Einstellungen und Funktionen, die Ihnen helfen können, eine hochkonvertierende Checkout-Seite zu erstellen. Dies ist jedoch alles, was Sie benötigen, um eine benutzerdefinierte WooCommerce-Checkout-Seite zu erstellen.

Wenn Sie mit der Einrichtung der Checkout-Seite zufrieden sind, ist es an der Zeit, sie live zu schalten, indem Sie auf die Schaltfläche „Entwurf“ klicken.

Veröffentlichung einer benutzerdefinierten WooCommerce-Checkout-Seite

Wenn Sie die Seite vor der Veröffentlichung in der Vorschau anzeigen möchten, klicken Sie auf 'Vorschau'. Dies öffnet die benutzerdefinierte Checkout-Seite in einem neuen Tab.

Um die Seite live zu schalten, ändern Sie einfach ihren Status von 'Entwurf' zu 'Veröffentlicht' und klicken Sie auf die Schaltfläche 'Aktualisieren'. Wenn Sie nun Ihre WordPress-Website besuchen, sehen Sie die benutzerdefinierte Checkout-Seite live.

FunnelKit ersetzt automatisch die standardmäßige WooCommerce-Checkout-Seite, sodass Sie keine Einstellungen ändern müssen.

Ein Beispiel für eine benutzerdefinierte Checkout-Seite

Methode 2. Passen Sie Ihre Checkout-Seite mit SeedProd an

Sie können auch eine benutzerdefinierte WooCommerce-Checkout-Seite mit SeedProd erstellen.

Es ist der beste Landingpage-Builder, der von über 1 Million Websites genutzt wird und über 180 professionell gestaltete Vorlagen enthält, darunter E-Commerce-Vorlagen, die Sie verwenden können, um Verkaufsseiten und Lead-Squeeze-Pages zu erstellen.

Noch besser, SeedProd unterstützt WooCommerce vollständig und enthält sogar spezielle WooCommerce-Blöcke, mit denen Sie schnell eine benutzerdefinierte Checkout-Seite erstellen können.

Mehrere unserer Partner-Marken haben ihre gesamten Websites damit gestaltet und waren begeistert, wie benutzerfreundlich es ist. Details finden Sie in unserem SeedProd-Test.

Da es Ihnen ermöglicht, alle Arten von Seiten zu erstellen, ist SeedProd eine großartige Wahl, wenn Sie andere Seiten anpassen oder sogar ein benutzerdefiniertes WordPress-Theme für Ihren Online-Shop erstellen möchten.

Schritt 1: Installieren und aktivieren Sie das SeedProd-Plugin

Das Erste, was Sie tun müssen, ist das Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung unter wie man ein WordPress-Plugin installiert.

Hinweis: Es gibt eine kostenlose Version von SeedProd, aber für diese Anleitung verwenden wir die Pro-Version, da sie die integrierten WooCommerce-Blöcke enthält, die wir benötigen. Sie integriert sich auch mit den E-Mail-Marketing-Diensten, die Sie möglicherweise bereits nutzen, um mehr Verkäufe und Konversionen zu erzielen.

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

Eingabe des SeedProd-Lizenzschlüssels

Diese Informationen finden Sie in Ihrem Konto auf der SeedProd-Website. Nach Eingabe der Lizenz klicken Sie auf die Schaltfläche „Schlüssel überprüfen“.

Schritt 2: Eine SeedProd-Vorlage auswählen

Gehen Sie danach zu SeedProd » Landing Pages und klicken Sie auf „Neue Landing Page hinzufügen“.

Erstellen einer benutzerdefinierten Checkout-Seite mit SeedProd

Als Nächstes müssen Sie eine Vorlage für Ihre benutzerdefinierte Checkout-Seite auswählen.

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

Die Wahl eines Designs, das zum Typ der Seite passt, die Sie erstellen möchten, hilft Ihnen, die Seite schneller zu erstellen. Jede Vorlage ist jedoch vollständig anpassbar, sodass Sie das Design jederzeit feinabstimmen können, um es besser an Ihren Online-Shop anzupassen.

Wählen Sie für diese Anleitung die Option „Leere Vorlage“, damit Sie mit einem sauberen Blatt beginnen können.

Um eine Vorlage auszuwählen, bewegen Sie die Maus darüber und klicken Sie dann auf das Symbol „Häkchen“.

Professionell gestaltete Vorlagen von SeedProd

Geben Sie als Nächstes einen Namen für Ihre benutzerdefinierte Checkout-Seite ein. SeedProd erstellt automatisch eine URL basierend auf dem Titel der Seite.

Sie können diese URL beliebig ändern. Wir empfehlen, sie einfach und beschreibend zu halten, z. B. 'checkout' oder 'complete-your-order'.

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

So erstellen Sie eine benutzerdefinierte WooCommerce-Checkout-Seite mit SeedProd

Dies bringt Sie zum Drag-and-Drop-Editor, wo Sie Ihre benutzerdefinierte WooCommerce-Checkout-Seite erstellen können.

Schritt 3: Gestalten Sie eine hochkonvertierende Checkout-Seite

Der SeedProd-Editor zeigt rechts eine Live-Vorschau Ihrer Checkout-Seite und links einige Blockeinstellungen an.

Der SeedProd Page Builder und Editor

Beginnen Sie einfach mit der Erstellung einer gebrandeten Kopfzeile.

Hier können Sie einen Abschnitt verwenden, der eine Sammlung von Blöcken ist, die oft zusammen verwendet werden. Klicken Sie einfach auf die Registerkarte 'Sections' und wählen Sie dann die Kategorie 'Header'.

Hinzufügen eines Header-Bereichs zu einem benutzerdefinierten WooCommerce-Checkout

Danach fahren Sie mit der Maus über den Abschnitt „Überschrift 1“ und klicken auf das Symbol „Plus“.

Dies fügt Ihrem Layout einen Header-Bereich hinzu.

So passen Sie die WooCommerce-Checkout-Seite mit SeedProd an

Zuerst möchten Sie den Platzhalter „Ihr Logo“ ersetzen, indem Sie auf diesen Block klicken, um ihn auszuwählen.

Klicken Sie dann auf das Symbol „Bild auswählen“ im linken Menü.

Hinzufügen eines Logos zur Checkout-Seite eines Online-Shops

Sie können nun ein Bild aus der Mediathek auswählen oder eine neue Datei von Ihrem Computer hochladen.

Der Abschnitt Header 1 enthält ein Navigationsmenü. Um Ihre Kunden auf den Abschluss ihres Kaufs zu konzentrieren, empfehlen wir, dies zu entfernen. Es reduziert Ablenkungen und hilft, den Käufer zum Checkout-Button zu leiten.

Um den Navigationsmenü-Block zu löschen, klicken Sie einfach, um diesen Block auszuwählen. Klicken Sie dann auf die Option „Block löschen“.

Löschen eines Navigationsblocks aus einem SeedProd-Seitenlayout

Sobald Sie das getan haben, klicken Sie auf den Call-to-Action-Button.

Es ist sinnvoll, den Käufern eine Möglichkeit zu geben, zur Warenkorbseite zurückzukehren und weitere Artikel hinzuzufügen oder die Menge zu ändern. Denken Sie daran, den Call-to-Action einzugeben, den Sie für diese Schaltfläche verwenden möchten, z. B. 'Warenkorb anzeigen' oder ähnlich.

Hinzufügen eines CTA-Buttons zur Checkout-Seite Ihres Online-Shops

Geben Sie als Nächstes die URL Ihrer WooCommerce-Warenkorbseite in das Feld 'Link' ein.

Nun können Käufer die Warenkorbseite aufrufen, indem sie auf diese Schaltfläche klicken.

Hinzufügen eines Links zur Handlungsaufforderung der Kasse
Upsell- und Cross-Sell-Inhalte hinzufügen

Danach ist es an der Zeit, ein Layout für den Rest Ihrer Checkout-Seite zu wählen.

Es ist eine gute Idee, empfohlene Produkte in einer Seitenleiste anzuzeigen, da dies die Käufer dazu anregt, weitere Artikel in ihren Warenkorb zu legen. Denken Sie daran und klicken Sie unter 'Wählen Sie Ihr Layout' auf das Layout für Inhalt und Seitenleiste.

Hinzufügen eines Checkout-Blocks zu einer E-Commerce-Vorlage

Sobald Sie dies getan haben, suchen Sie den Block „Checkout“ im linken Menü und ziehen Sie ihn in Ihr Layout.

Sie können das Aussehen Ihres Checkouts vollständig anpassen, indem Sie die Einstellungen im linken Menü verwenden, einschließlich der Änderung des Farbschemas, der Schriftart, der Linkfarbe, der Schaltflächen und mehr.

Anpassen des WooCommerce-Checkout-Blocks von SeedProd

Wenn Sie mit dem Aussehen des Checkout-Bereichs zufrieden sind, ist es an der Zeit, einen Bereich für beliebte Produkte oder empfohlene Produkte hinzuzufügen. Dies kann Ihnen mehr Verkäufe bringen, indem zusätzliche Produkte beworben werden, die Käufer möglicherweise kaufen möchten.

Um diesen Abschnitt zu erstellen, ziehen Sie einfach einen Block „Bestseller-Produkte“ auf Ihre Seite.

Zeigen Sie Ihre meistverkauften WooCommerce-Produkte auf der Checkout-Seite an

Sie können diesen Block jetzt über die Einstellungen im linken Menü konfigurieren. Weitere Details finden Sie in unserem Leitfaden unter Anzeigen beliebter Produkte in WooCommerce.

Als Nächstes ist es eine gute Idee, eine Überschrift über den beliebten Produkten hinzuzufügen. Ziehen Sie einfach den Block „Überschrift“ auf Ihre Seite und legen Sie ihn über dem Block „Beliebte Produkte“ ab.

Verkaufsschlager-Produkte auf einer benutzerdefinierten Checkout-Seite anzeigen

Klicken Sie dann, um den Block „Überschrift“ auszuwählen, und geben Sie die Überschrift ein, die Sie verwenden möchten.

Kundenrezensionen und Bewertungen anzeigen

Sobald Sie das getan haben, empfehlen wir, Social Proof anzuzeigen, indem Sie einen Block für Kundenstimmen hinzufügen. Suchen Sie einfach nach dem Block 'Testimonials' und ziehen Sie ihn auf Ihr Layout.

Hinzufügen von Kundenbewertungen zu einer benutzerdefinierten WooCommerce-Checkout-Seite

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 Sternbewertung unter Ihren Testimonials anzuzeigen. Dies ist eine gute Wahl, wenn Sie bereits viele positive Bewertungen haben.

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

Hinzufügen einer Kunden-Sternebewertung zur Checkout-Seite des Online-Shops
Schritt 4: Veröffentlichen Sie die WooCommerce-Checkout-Seite

Wenn Sie mit dem Aussehen der WooCommerce-Checkout-Seite zufrieden sind, ist es an der Zeit, sie zu veröffentlichen, indem Sie auf den Dropdown-Pfeil neben „Speichern“ klicken.

Wählen Sie dann die Option „Veröffentlichen“.

Veröffentlichung einer benutzerdefinierten WooCommerce-Checkout-Seite

Wenn Sie nun Ihren Shop besuchen, sehen Sie die Checkout-Seite live.

Profi-Tipp: Conversion-Tracking hilft Ihnen zu sehen, was auf Ihrer Checkout-Seite funktioniert und was nicht. Sie können diese Erkenntnisse nutzen, um Ihre Checkout-Seite mit SeedProd zu optimieren. Weitere Details finden Sie in unserem Leitfaden zur Einrichtung des WooCommerce Conversion Trackings.

Schritt 5: Weisen Sie Ihre Checkout-Seite WooCommerce zu

An diesem Punkt haben Sie die benutzerdefinierte Checkout-Seite veröffentlicht, aber Ihr WordPress-Blog oder Ihre Website verwendet immer noch das Standarddesign. Sie müssen die Standard-URL-Einstellungen ändern, damit WooCommerce Kunden an die neue Checkout-Seite und nicht an die Standardseite weiterleitet.

Gehen Sie dazu zu WooCommerce » Einstellungen und klicken Sie auf die Registerkarte „Erweitert“.

Die E-Commerce-Einstellungen des WooCommerce-Plugins

Öffnen Sie danach das Dropdown-Menü „Checkout-Seite“ und beginnen Sie mit der Eingabe der URL der benutzerdefinierten Checkout-Seite, die Sie gerade erstellt haben.

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

Ändern der standardmäßigen WooCommerce-Checkout-Seite in Ihrem E-Commerce-Shop

Wenn das erledigt ist, scrollen Sie zum Ende der Seite und klicken Sie auf „Änderungen speichern“, um Ihre Einstellungen zu speichern. WooCommerce wird nun die benutzerdefinierte Checkout-Seite verwenden.

Bonus: So reduzieren Sie den Abbruch von Checkout-Seiten

Die Erstellung einer benutzerdefinierten, benutzerfreundlichen Checkout-Seite ist ein großartiger erster Schritt zur Reduzierung von Warenkorbabbrüchen. Aber das Design ist nur ein Teil des Puzzles.

In diesem Abschnitt stellen wir einige bewährte Strategien vor, mit denen Sie den Prozess weiter optimieren und mehr Käufer davon überzeugen können, ihren Kauf abzuschließen.

Vermeiden Sie zusätzliche Checkout-Gebühren

Wenn ein Kunde zur Kasse geht, erwartet er, dass der Gesamtpreis dem Gesamtproduktpreis ähnelt. Wenn er zur Kasse gelangt und Steuern, hohe Versandkosten und andere zusätzliche Gebühren sieht, ist die Wahrscheinlichkeit groß, dass er den Kauf nicht abschließt.

Ein Beispiel für eine WooCommerce-Kasse mit zusätzlichen Gebühren

Manche Kunden setzen den Kauf fort, wenn sie denken, dass die Kosten gerechtfertigt sind. Es ist jedoch weitaus besser, transparent über Ihre Preise zu sein, damit die Kunden wissen, was sie erwartet.

Wenn Sie viele zusätzliche Gebühren haben, empfehlen wir, diese zu Ihren Produktpreisen hinzuzufügen. Das ist für den Kunden viel weniger verwirrend.

Wann immer möglich, ist es auch eine gute Idee, kostenlosen Versand anzubieten.

Kontoeinrichtung optional oder einfacher gestalten

Käufer zu zwingen, beim Bezahlvorgang ein Konto zu erstellen, erhöht die Reibung im Kaufprozess und kann die Abbruchraten beim Bezahlvorgang erhöhen.

Sie können die Benutzerregistrierung auf Ihrer WordPress-Website zulassen, sollten es aber vermeiden, diese obligatorisch zu machen. Stattdessen können Sie Käufern erlauben, als Gäste auszuchecken, ihnen aber einen Gutscheincode anbieten, wenn sie ein Konto erstellen.

Ein Beispiel für ein Newsletter-Anmeldeformular

Auf diese Weise können Sie Leads generieren und Ihre E-Mail-Liste erweitern, ohne Verkäufe zu verlieren.

Mehr Zahlungsoptionen an der Kasse anbieten

Die meisten Menschen haben eine bevorzugte Zahlungsmethode. Dies kann das PayPal-Konto sein, das auf dem Computer des Käufers gespeichert ist, oder die Kreditkarte, die physisch griffbereit ist.

Käufer können Ihre Checkout-Seite verlassen, wenn Sie ihre bevorzugte Zahlungsmethode nicht unterstützen. Obwohl es unmöglich ist, jede einzelne Methode anzubieten, sollten Sie die gängigsten Zahlungsoptionen anbieten.

Eine WooCommerce-Checkout-Seite mit mehreren Zahlungsoptionen

Für weitere Details sehen Sie sich unsere Liste der besten WooCommerce-Zahlungs-Gateways für WordPress an.

Zeitgesteuertes Popup anzeigen

Sie können auch Warenkorbabbrüche mit einem zeitgesteuerten Popup reduzieren.

OptinMonster ist das beste WordPress Popup-Plugin und verfügt über eine einzigartige Exit-Intent®-Technologie, die Popups genau dann anzeigen kann, wenn ein Käufer die Checkout-Seite verlassen möchte.

Sie können OptinMonster sogar verwenden, um Käufern einen speziellen Rabattcode anzubieten, wenn sie den Kauf jetzt abschließen.

Ein Popup für abgebrochene Warenkörbe, erstellt mit OptinMonster
Abgebrochene Warenkorb-Push-Benachrichtigungen einrichten

Eine weitere großartige Möglichkeit, Warenkorbabbrüche zu reduzieren, ist die Einrichtung von Web-Push-Benachrichtigungen.

Diese Benachrichtigungen werden auf den mobilen und Desktop-Browsern der Nutzer angezeigt, auch wenn sie sich nicht auf Ihrer Website befinden. So können Sie Käufer leicht erreichen und sie daran erinnern, sich umzusehen.

PushEngage wird von über 25.000 klugen Geschäftsinhabern genutzt und ist die beste Web-Push-Benachrichtigungssoftware auf dem Markt. Sie ermöglicht es Ihnen, einfach WooCommerce-Warenkorbabbrecher-Kampagnen zu erstellen.

Ein Beispiel für eine Benachrichtigung über einen abgebrochenen Warenkorb

Sie können auch Kampagnen für abgebrochene Warenkörbe, Preisnachlass-Benachrichtigungen, Ankündigungen neuer Produkte, Lagerbestandsbenachrichtigungen und mehr einrichten.

Erstellen einer benutzerdefinierten WooCommerce-Warenkorbseite

Nachdem Sie die WooCommerce-Checkout-Seite optimiert haben, möchten Sie vielleicht auch Ihre WooCommerce-Warenkorbseite anpassen.

Indem Sie sowohl den Warenkorb als auch die Checkout-Seite optimieren, können Sie den gesamten Kaufprozess mühelos gestalten, damit Sie keine Verkäufe verpassen. Sie können auch beide Seiten so gestalten, dass sie das gleiche Branding haben, damit Besucher ein konsistentes Checkout-Erlebnis erhalten.

Detaillierte Schritt-für-Schritt-Anleitungen finden Sie in unserem Leitfaden zur Erstellung einer benutzerdefinierten WooCommerce-Warenkorbseite.

Häufig gestellte Fragen zur Anpassung des WooCommerce-Checkouts

Hier sind einige Fragen, die unsere Leser häufig zur Verbesserung ihrer WooCommerce-Checkout-Seite gestellt haben:

Wie füge ich ein benutzerdefiniertes Feld im WooCommerce-Checkout hinzu?

Der einfachste Weg, ein benutzerdefiniertes Feld hinzuzufügen, ist die Verwendung eines Checkout-Editor-Plugins wie FunnelKit Builder. Es bietet eine visuelle Drag-and-Drop-Oberfläche zum Hinzufügen, Entfernen und Neuanordnen von Feldern in Ihrem Checkout-Formular, ohne dass Sie Code schreiben müssen.

Wie passe ich WooCommerce-Seiten an?

Der beste Weg, jede WooCommerce-Seite (wie Shop, Warenkorb oder Checkout) anzupassen, ist mit einem Page-Builder-Plugin wie SeedProd. Es ermöglicht Ihnen, vollständig benutzerdefinierte Layouts und Designs mit einem Drag-and-Drop-Editor zu erstellen, wodurch Sie die volle Kontrolle über das Aussehen und Gefühl Ihres Shops haben.

Für weitere Details siehe unseren Leitfaden für Anfänger zum Bearbeiten von WooCommerce-Seiten unter Bearbeiten von WooCommerce-Seiten.

Wie ändere ich den Text auf meiner WooCommerce-Checkout-Seite?

Sie können Texte auf der Checkout-Seite, wie Überschriften oder Schaltflächenbeschriftungen, einfach mit einem Plugin wie FunnelKit Builder ändern.

Sein Editor ermöglicht es Ihnen, Textelemente direkt anzuklicken und neu zu schreiben. Für komplexere Änderungen kann auch ein Übersetzungsprogramm verwendet werden, um bestimmte Textzeichenfolgen zu finden und zu ersetzen.

Wie bearbeite ich den WooCommerce-Checkout-Shortcode?

Sie können den [woocommerce_checkout] Shortcode nicht direkt bearbeiten, da sein Inhalt von den WooCommerce-Vorlagendateien generiert wird.

Um seine Ausgabe anzupassen, sollten Sie ein Plugin wie FunnelKit oder SeedProd verwenden, um ein neues Checkout-Seiten-Design zu erstellen, das dann die Standard-Shortcode-Ausgabe ersetzt.

Wir hoffen, dieser Artikel hat Ihnen geholfen, die WooCommerce-Checkout-Seite einfach anzupassen. Vielleicht möchten Sie auch unseren Leitfaden zum Erstellen eines WooCommerce-Popups zur Steigerung des Umsatzes und unsere Expertenauswahl der besten WooCommerce-Plugins für Ihren Shop sehen.

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Sehen Sie wie WPBeginner finanziert wird, warum das wichtig ist und wie Sie uns unterstützen können. Hier ist unser Redaktionsprozess.

Das ultimative WordPress-Toolkit

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

Leserinteraktionen

1 CommentLeave a Reply

  1. So viele Informationen an einem Ort, das ist absolut erstaunlich. Ich liebe WooCommerce, weil es mir große Flexibilität bei der Personalisierung meines Shops gibt. Dank Ihrer Anleitungen konnte ich bereits viele Dinge ändern und gestalten, um sie an meine Marke anzupassen, und ich möchte weitermachen, damit die gesamte Website meine Marke widerspiegelt und nicht das Standard-WooCommerce oder -Theme. Vielen Dank für weitere praktische Tipps zur Anpassung sogar der Checkout-Seite.

Hinterlassen Sie eine Antwort

Vielen Dank, dass Sie einen Kommentar hinterlassen. Bitte beachten Sie, dass alle Kommentare gemäß unserer Kommentarrichtlinie moderiert werden und Ihre E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwenden Sie KEINE Schlüsselwörter im Namensfeld. Führen wir ein persönliches und bedeutungsvolles Gespräch.