So passen Sie die WooCommerce-Checkout-Seite an 

Der Standard-WooCommerce-Checkout sieht genauso aus wie jeder andere WooCommerce-Shop. Keine Markenbildung, keine Vertrauenssignale, keine Kontrolle über das Design. Diese Trennung zwischen Ihrem Shop und Ihrem Checkout ist einer der Gründe, warum Kunden im letzten Schritt abbrechen.

In diesem Leitfaden zeige ich Ihnen, wie Sie Ihre WooCommerce-Checkout-Seite mit SeedProd neu gestalten. Sie kontrollieren das Layout, die Farben, die Typografie, die Button-Stile und das allgemeine Erscheinungsbild, ohne eine Zeile PHP zu berühren.

Um die WooCommerce-Checkout-Seite ohne Code anzupassen, verwenden Sie SeedProd. Installieren Sie das Plugin, ziehen Sie den Checkout-Block auf eine neue Seite, gestalten Sie ihn passend zu Ihrer Marke und weisen Sie ihn dann unter WooCommerce-Einstellungen » Erweitert zu.

Warum Sie die WooCommerce-Checkout-Seite anpassen sollten

Die Checkout-Seite ist das Letzte, was Kunden sehen, bevor sie ihren Kauf abschließen. Sie ist wichtiger als fast jede andere Seite in Ihrem Shop – im Durchschnitt brechen 70 % der Käufer ihren Warenkorb ab, bevor sie bezahlen, und ein verwirrender oder langsamer Checkout ist einer der Hauptgründe dafür.

• Abbrüche reduzieren: Ein verwirrender oder schlecht gestalteter Checkout ist einer der Hauptgründe, warum Kunden abbrechen, bevor sie einen Kauf abschließen.
• Fügen Sie Ihr Branding hinzu: Ein generischer WooCommerce-Checkout unterbricht das visuelle Erlebnis, das Kunden beim Stöbern in Ihrem Shop aufgebaut haben.
• Upselling im richtigen Moment: Eine benutzerdefinierte Checkout-Seite ermöglicht es Ihnen, verwandte Produkte anzuzeigen, wo Kunden bereits kaufbereit sind. Sehen Sie sich die besten WooCommerce-Upselling-Plugins an, um dies weiter auszubauen.
• Vertrauen aufbauen: Das Hinzufügen von Testimonials, Vertrauensabzeichen und einem sauberen Design im Checkout reduziert Abbrüche von Käufern, die im letzten Moment kalte Füße bekommen.

Die gute Nachricht ist, dass Sie nichts davon programmieren müssen. Ich zeige Ihnen, wie Sie alles mit einem Drag-and-Drop-Builder erledigen.

WooCommerce-Checkout-Einstellungen (kostenlose Optionen)

Bevor Sie etwas installieren, sollten Sie wissen, was WooCommerce standardmäßig ändern lässt. Diese Einstellungen sind kostenlos und in jeder WooCommerce-Installation verfügbar.

Gehen Sie zu WooCommerce > Einstellungen > Allgemein / Konten & Datenschutz / Erweitert, um auf diese Optionen zuzugreifen:

• Gast-Checkout: Aktivieren oder deaktivieren Sie den Checkout ohne Konto (WooCommerce > Einstellungen > Konten & Datenschutz)
• Gutscheinfeld: Zeigen oder verbergen Sie das Gutscheinfeld im Checkout (WooCommerce > Einstellungen > Allgemein)
• Zuweisung der Checkout-Seite: Wählen Sie aus, welche Seite als Ihr Checkout dient (WooCommerce > Einstellungen > Erweitert > Seiteneinrichtung)
• Button-Text: Der Standardtext des Buttons „Bestellung abschicken“ kann über einen einfachen WooCommerce-Filter in der functions.php Ihres Themes geändert werden
• Adressfelder: Die Sichtbarkeit einiger Felder kann in WooCommerce umgeschaltet werden. Eine detaillierte Feldsteuerung erfordert ein Plugin.

Wenn Sie mehr Kontrolle benötigen, wie z. B. benutzerdefinierte Feldlayouts, Designänderungen oder eine vollständige visuelle Überarbeitung, dann ist SeedProd die richtige Wahl. Das folgende Tutorial behandelt den No-Code-Ansatz. Für einen umfassenderen Einblick in die Optimierung Ihres gesamten Checkout-Prozesses lesen Sie die besten Sales-Funnel-Plugins für WooCommerce.

So passen Sie Ihre WooCommerce-Checkout-Seite an

Wenn Sie nicht die Zeit haben, Programmieren zu lernen, oder das Budget, einen Entwickler einzustellen, kann die Anpassung Ihrer Checkout-Seite fast unmöglich erscheinen.

Aber die Wahrheit ist, dass es mit den richtigen Werkzeugen nicht so ist.

Im folgenden Tutorial zeigen wir Ihnen, wie Sie Ihre WooCommerce-Checkout-Seite mit SeedProd anpassen.

SeedProd ist ein WordPress-Website-Builder mit Drag-and-Drop-Funktionalität. Es ermöglicht Ihnen, jede Seite in WordPress visuell zu erstellen und anzupassen.

Das bedeutet, dass Sie den Drag-and-Drop-Seiteneditor verwenden können, um benutzerdefinierte Seiten zu erstellen und die Ergebnisse in Echtzeit zu sehen. Es entfällt die Notwendigkeit, Ihre Seite manuell zu codieren, was eine hervorragende Nachricht für Menschen mit begrenzten Design- und technischen Fähigkeiten ist.

SeedProd bietet Hunderte von professionell gestalteten Landingpage-Vorlagen für einen schnellen Start. Sie können jede Vorlage dann im visuellen Editor mit flexiblen Seitenblöcken anpassen, wie z. B.:

• Opt-in-Formulare und Anmeldeformulare
• Bilder und Videos
• Text und Überschriften
• Social-Media-Profile und Teilen-Buttons
• Benutzerdefinierte Kontaktformulare mit 3rd-Party-Plugins wie WPForms
• RafflePress-Gewinnspiele
• Testimonials und Sternebewertungen
• Countdown-Timer und Fortschrittsbalken
• Navigationsmenüs und Akkordeons
• Und mehr.

SeedProd verfügt auch über Landingpage-Blöcke, die für WooCommerce-Shops bestimmt sind, einschließlich Warenkorb-Buttons, Checkout, Warenkorb und flexiblen Produktgittern. Das bedeutet, dass Sie ganz einfach vielseitige Produkt-, Warenkorb- und Checkout-Seiten für Ihren E-Commerce-Shop erstellen können, ohne einen Entwickler einstellen zu müssen. Sie können SeedProd auch verwenden, um Ihre WooCommerce-Shop-Seite anzupassen, indem Sie denselben Drag-and-Drop-Ansatz verwenden.

Vor diesem Hintergrund wollen wir uns ansehen, wie Sie die WooCommerce-Checkout-Seite mit SeedProd anpassen.

1. SeedProd installieren und aktivieren

Der erste Schritt ist, mit SeedProd zu beginnen und das Plugin auf Ihren Computer herunterzuladen. Um die WooCommerce-Integrationsfunktionen von SeedProd nutzen zu können, benötigen Sie mindestens einen SeedProd Pro Plan.

Nach dem Herunterladen von SeedProd müssen Sie das Plugin auf Ihrer WordPress-Website installieren und aktivieren. Sie können diese Schritte befolgen, um ein WordPress-Plugin zu installieren, wenn Sie Hilfe benötigen.

Nach der Aktivierung des Plugins sehen Sie einen Begrüßungsbildschirm.

Auf dem Bildschirm werden Sie aufgefordert, Ihren SeedProd-Lizenzschlüssel einzugeben. Sie finden Ihren Schlüssel, indem Sie sich in Ihr SeedProd-Konto einloggen und auf den Link Lizenzschlüssel, Details und Downloads anzeigen klicken.

Von dort aus können Sie Ihren Schlüssel kopieren, um ihn in Ihrer Zwischenablage zu speichern. Fügen Sie anschließend den Schlüssel in das Feld für den Lizenzschlüssel ein und klicken Sie auf die Schaltfläche Schlüssel überprüfen.

Scrollen Sie nun ein kurzes Stück nach unten auf der Seite und klicken Sie auf die Schaltfläche Erste Seite erstellen.

Dies führt Sie zum Landingpage-Dashboard von SeedProd. Am oberen Rand der Seite befinden sich 4 verschiedene Seitenmodi:

• Wartungsmodus (Coming Soon)
• Wartungsmodus
• 404
• Anmelden

Jeder Seitenmodus ermöglicht es Ihnen, mit einem einzigen Klick bestimmte Landingpages zu aktivieren.

Sie können beispielsweise den "Coming Soon"-Modus aktivieren, um eine "Coming Soon"-Seite hinzuzufügen, die Leute über Ihren neuen Shop informiert. Oder Sie können den "404 Page"-Modus aktivieren, um Ihrer Website eine benutzerdefinierte 404-Fehlerseite hinzuzufügen.

Unter diesem Abschnitt sehen Sie eine Liste aller anderen Seiten, die Sie mit SeedProd erstellen. Da wir noch keine erstellt haben, klicken Sie auf die Schaltfläche Neue Landingpage erstellen, um zu beginnen.

2. Erstellen Sie eine neue Landingpage

Nachdem Sie auf die Schaltfläche zum Erstellen einer neuen Landingpage geklickt haben, sehen Sie die Vorlagenbibliothek für Landingpages von SeedProd.

Sie können die Vorlagen nach Ziel oder Branche filtern, indem Sie auf die Registerkarten oben klicken.

Jede Vorlage ist multifunktional. Daher können Sie jedes Design verwenden und es im Drag-and-Drop-Editor anpassen, damit es so aussieht, wie Sie möchten.

In dieser Anleitung zeigen wir Ihnen, wie Sie Ihre WooCommerce-Checkout-Seite von Grund auf mit der Leeren Vorlage erstellen und anpassen. Dies gibt Ihnen einen hervorragenden Überblick darüber, wie einfach es ist, SeedProd zu verwenden.

Fahren Sie also mit der Maus über die Miniaturansicht der Leeren Vorlage und klicken Sie auf das Häkchensymbol.

Als Nächstes erscheint ein Popup, in dem Sie einen Namen und eine URL für Ihre Seite eingeben können. Sie können diese Einstellung später ändern, nennen Sie sie also, wie Sie möchten.

Klicken Sie nun auf die Schaltfläche Speichern und mit der Bearbeitung der Seite beginnen, um Ihre Seite zu starten.

Auf dem folgenden Bildschirm sehen Sie den Landingpage-Editor von SeedProd.

Er hat ein einfaches 2-Panel-Layout:

1. Linkes Bedienfeld: Seitenblöcke und Abschnitte zum Erstellen und Anpassen Ihrer Seite
2. Rechtes Bedienfeld: Vorschau, wie Ihre Landingpage in Echtzeit aussieht

Das Hinzufügen von Inhalten zu Ihrer Seite ist so einfach wie das Ziehen eines Blocks von links und das Ablegen an der richtigen Stelle auf der rechten Seite. Wir zeigen Ihnen, wie das geht, im nächsten Schritt.

3. Fügen Sie den Checkout-Block zu Ihrer Seite hinzu

Hinweis zum WooCommerce Block Checkout: WooCommerce wird standardmäßig mit einem blockbasierten Checkout geliefert (seit WooCommerce 8.x). Dieses Tutorial funktioniert sowohl mit dem Block-Checkout als auch mit dem klassischen Shortcode-Checkout. Sie ersetzen den aktuell aktiven Checkout-Typ, indem Sie Ihre SeedProd-Seite in Schritt 7 zuweisen.

Bevor Sie mit der Anpassung Ihrer WooCommerce-Checkout-Seite beginnen, richten wir eine grundlegende Struktur für die Checkout-Seite ein.

Wählen Sie im rechten Bereich ein Seitenlayout aus, indem Sie auf eine der Spaltenoptionen klicken.

Wie Sie unten sehen können, wird ein einfacher Rahmen zu Ihrer Seite hinzugefügt. Hier werden alle Seitenelemente platziert, die Sie hinzufügen.

Als Nächstes müssen Sie Ihren WooCommerce-Checkout zu Ihrer Seite hinzufügen. Scrollen Sie im linken Bereich nach unten zum Abschnitt WooCommerce. Klicken Sie dann auf den Block Checkout und ziehen Sie ihn in eine der zuvor erstellten Spalten.

Sie sollten nun Ihr WooCommerce-Checkout-Formular direkt in Ihrem Landingpage-Design sehen.

Anpassen von WooCommerce-Checkout-Feldern mit SeedProd

Wenn Sie auf den Checkout-Block im SeedProd-Editor klicken, gibt Ihnen die Registerkarte Stil präzise Kontrolle darüber, wie Ihr Checkout-Formular aussieht. Sie arbeiten hier mit visuellem Design – SeedProd kümmert sich um das Styling, während WooCommerce sich darum kümmert, welche Felder angezeigt werden.

Hier können Sie auf der Registerkarte "Stil" Folgendes ändern:

• Layout: Wechseln Sie zwischen 1-Spalten- und 2-Spalten-Formularlayouts
• Kopfzeile: Typografie und Farbe
• Felder: Hintergrundfarbe, Textfarbe, Randfarbe, Randbreite, Beschriftungsfarbe, Beschriftungstypografie und Zeilenabstand
• Schaltfläche: Stil (flach, 2D, Vintage, Ghost oder Link), Farbe und Radius des Rahmens
• Hinweise: Akzentfarbe für Info-, Fehler- und Erfolgsmeldungen
• Warenkorb: Randfarbe, -breite und -radius; Hintergrundfarbe; Textfarbe; Schriftarten; Kopfzeilenschriftart, -farbe und -hintergrundfarbe
• Zahlungsbereich: Hintergrundfarbe, Textfarbe und Schriftfamilie

Klicken Sie nun auf die Registerkarte Vorlagen, und Sie sehen eine Vielzahl von benutzerdefinierten Stilen für Ihre Checkout-Felder. Klicken Sie auf einen beliebigen Stil, um ihn sofort zu Ihrem Checkout-Formular hinzuzufügen.

Hinweis: Die Registerkarte „Stil“ steuert nur das Erscheinungsbild. Sie können Felder nicht neu anordnen, Feldbezeichnungen ändern oder „Firmenname“ von hier aus ausblenden. Für Änderungen auf Feldebene wie diese benötigen Sie ein separates Plugin wie „Checkout Field Editor for WooCommerce“.

Klicken Sie, bevor Sie fortfahren, auf die grüne Schaltfläche Speichern in der oberen rechten Ecke Ihres Bildschirms, um Ihre Fortschritte zu sichern.

4. Gestalten Sie Ihr Checkout-Seiten-Design

Da Ihre Landingpage jetzt besser aussieht, sehen wir uns einige andere Möglichkeiten an, Ihre WooCommerce-Checkout-Seite anzupassen.

Hinzufügen einer Kopfzeile zu Ihrer WooCommerce-Checkout-Seite

Damit sich Kunden zurechtfinden, ist es eine gute Praxis, Ihrer Checkout-Seite eine Kopfzeile hinzuzufügen. SeedProd bietet eine einfache Möglichkeit, dies mit Bereichen zu tun.

Klicken Sie neben dem Block-Panel auf die Registerkarte Bereiche. Hier sehen Sie mehrere vorgefertigte Layouts, die Sie mit einem einzigen Klick zu Ihrer Seite hinzufügen können.

Wenn Sie beispielsweise den Bereich Kopfzeilen anklicken, werden 3 verschiedene vorgefertigte Kopfzeilenstile angezeigt. Wählen Sie ein Design, das Ihnen gefällt, und klicken Sie auf das Plus-Symbol, um es in Ihr Design zu importieren.

Standardmäßig wird jeder neue Bereich am Ende Ihrer Seite hinzugefügt. Um ihn in Ihren Kopfzeilenbereich zu verschieben, bewegen Sie die Maus darüber und klicken Sie auf das Symbol zum Verschieben des Bereichs. Ziehen Sie dann den gesamten Bereich an den oberen Rand der Seite.

Anschließend können Sie auf jedes Element in Ihrem Kopfzeilenbereich klicken, um die Anpassungsoptionen im linken Bereich anzuzeigen. Wenn Sie beispielsweise auf den Bildblock im Kopfzeilenbereich klicken, können Sie ein neues Bild hochladen, das als Ihr Logo verwendet wird.

Sie können sogar den Schaltflächenblock in Ihrer Kopfzeile löschen und ihn durch Ihre Social-Media-Profilsymbole ersetzen.

Hinzufügen von empfohlenen Produkten zu Ihrer WooCommerce-Checkout-Seite

Mit SeedProds leistungsstarker WooCommerce-Integration ist es einfach, Ihre Produkte und Dienstleistungen von jeder Landingpage aus zu bewerben und Cross-Selling zu betreiben. Die Produktgitter-Blöcke ermöglichen es Ihnen, Folgendes anzuzeigen:

• Aktuelle Produkte
• Sonderangebote
• Bestseller-Produkte
• Vorgestellte Produkte
• Top-bewertete Produkte

Wählen Sie einfach den Block Produktgitter aus und ziehen Sie ihn an die gewünschte Stelle auf Ihrer Seite. Sie können dann auf den Block klicken, um die Einstellungen im linken Bereich anzuzeigen.

In diesem Bereich können Sie festlegen, wie viele Spalten mit Produkten angezeigt werden sollen und Paginierung zu Ihrem Produktgitter hinzufügen. Sie können auch filtern, welche Produkte Besucher sehen, indem Sie aus dem Dropdown-Menü einen Abfragetyp auswählen.

Anschließend können Sie die Produktreihenfolge festlegen nach:

• Datum
• ID
• Menüreihenfolge
• Beliebtheit
• Zufällig
• Bewertung
• Titel

Sie können auch wählen, ob sie in aufsteigender oder absteigender Reihenfolge angezeigt werden sollen.

Testimonials zu Ihrer Checkout-Seite hinzufügen

Testimonials und Sternebewertungen sind eine weitere großartige Möglichkeit, Vertrauen und Glaubwürdigkeit zu Ihrer Checkout-Seite hinzuzufügen. Wenn potenzielle Kunden sehen, dass Leute Ihre Produkte positiv bewerten, werden sie ihren Kauf eher abschließen. Die Umfrage von BrightLocal aus dem Jahr 2026 ergab, dass 85 % der Verbraucher sagen, dass positive Bewertungen sie eher dazu bringen, ein Unternehmen zu nutzen.

Um Kunden-Testimonials zu Ihrer WooCommerce-Checkout-Seite hinzuzufügen, ziehen Sie den Testimonial-Block aus dem linken Bereich und legen Sie ihn an der gewünschten Stelle auf Ihrer Seite ab. Dann können Sie auf den Block klicken, um die Einstellungen anzuzeigen und Ihre Kunden-Testimonials hinzuzufügen.

Sie können so viele Testimonials einfügen, wie Sie möchten, und sie sogar als gleitenden Testimonial-Karussell anzeigen.

Globale Anpassungseinstellungen

Die globalen Anpassungseinstellungen von SeedProd ermöglichen es Ihnen, das Gesamterscheinungsbild Ihrer WooCommerce-Checkout-Seite zu ändern.

Klicken Sie auf das Zahnradsymbol in der unteren linken Ecke Ihres Bildschirms. Dies zeigt ein Panel mit globalen Einstellungen für Schriftarten, Farben, Hintergrund und benutzerdefiniertes CSS.

Schriftarten

Durch Erweitern der Überschrift Schriftart können Sie Ihre Kopf- und Textschriftarten sowie deren Strichstärken ändern. Es ist so einfach wie die Auswahl einer Google-Schriftart aus dem Dropdown-Menü.

Oder Sie klicken auf die Schaltfläche Schriftarten-Themen, um Beispiele für verschiedene Schriftartenkombinationen anzuzeigen. Von dort aus ist es nur ein Klick, um sie auf Ihre Seite anzuwenden.

Farben

Der Abschnitt Farben ist ähnlich. Klicken Sie auf eine beliebige Farbe, um ein Pipettenwerkzeug anzuzeigen und einzelne Farben für Überschriften, Text, Schaltflächen und mehr auszuwählen.

Oder Sie klicken auf die Schaltfläche Farbpaletten, um aus über 20 vordefinierten Farbschemata auszuwählen.

Hintergrund

Im Abschnitt Hintergrund können Sie Ihre Hintergrundfarbe, Ihren Verlauf und Ihr Bild ändern. Sie können sogar einen Video-Hintergrund oder eine Vollbild-Diashow hinzufügen.

Benutzerdefiniertes CSS

Und schließlich können Sie im Abschnitt Benutzerdefiniertes CSS benutzerdefinierten Code hinzufügen, um die WooCommerce-Checkout-Seite noch weiter anzupassen.

Wenn Sie mit dem Aussehen zufrieden sind, klicken Sie auf die Schaltfläche Speichern.

5. Konfigurieren Sie Ihre Checkout-Seiten-Einstellungen

Nachdem Sie Ihre Anpassungen vorgenommen haben, werfen wir einen Blick auf einige weitere Einstellungen, die Sie auf Ihrer Checkout-Seite ändern können. 

Verbinden Sie Ihre E-Mail-Liste

Zuerst die E-Mail-Marketing-Einstellungen. SeedProd ermöglicht es Ihnen, Ihre Landingpage einfach mit Ihrer E-Mail-Liste zu verbinden. 

Klicken Sie oben auf dem Bildschirm auf Verbinden, und Sie sehen eine große Auswahl an beliebten E-Mail-Marketingdiensten. Wenn Sie also Benutzer bitten möchten, Ihren Newsletter auf Ihrer Checkout-Seite zu abonnieren, verwenden Sie dieses Panel, um Ihren E-Mail-Marketingdienst zu verknüpfen. 

Wählen Sie einfach Ihren bevorzugten Anbieter aus und folgen Sie den Schritten in unserer Dokumentation zur E-Mail-Integration, um die Einrichtung vorzunehmen.

Auf demselben Bildschirm können Sie Ihre Checkout-Seite über Zapier mit Tausenden von Apps verknüpfen, die Leistung Ihrer Website mit Google Analytics überwachen und sie mit Recaptcha vor Spam schützen.

Konfigurieren Sie Ihre Seiteneinstellungen

Nachdem Sie Ihre E-Mail-Liste verbunden haben, klicken Sie auf die Registerkarte Seiten-Einstellungen, um weitere Einstellungen anzuzeigen, die Sie in SeedProd konfigurieren können. Auf der Einstellungsseite gibt es normalerweise 5 Abschnitte, dies hängt jedoch von der Art der Seite ab, die Sie erstellen, und von Ihrem SeedProd-Plan.

Allgemeine Einstellungen

Die allgemeinen Einstellungen ermöglichen es Ihnen, den Namen und die URL für die WooCommerce-Kasse zu ändern. Sie können auch zwischen veröffentlicht und Entwurf wechseln.

Wenn Sie Plugin-Konflikte vermeiden und Ihre Seite beschleunigen möchten, können Sie den Isolationsmodus aktivieren. Dies verhindert, dass bestimmte Kopf- und Fußzeilen-Skripte ausgeführt werden und Ihre Leistung beeinträchtigen.

SEO und Analysen

Unter dem Tab SEO können Sie ein WordPress SEO Plugin verwenden, um den Titel-Tag, die Meta-Beschreibung usw. Ihrer Landingpage zu konfigurieren. Eines der besten Plugins dafür ist All In One SEO.

Dasselbe gilt für den Analytics-Tab. Hier können Sie Ihr bevorzugtes Google Analytics Plugin verbinden und die Leistung Ihrer Landingpage überwachen. Probieren Sie doch mal MonsterInsights für Google Analytics aus?

Wenn Sie mehr Details wünschen, können Sie jederzeit unseren MonsterInsights Testbericht lesen.

Skripte

Im Bereich Skripte können Sie Code in den Kopf-, Körper- und Fußbereich Ihrer Seite einfügen. Dies kann alles sein, wie Ihre Tracking-Cookies, der Facebook-Tracking-Pixel oder sogar Ihr Analyse-Skript.

Benutzerdefinierte Domain

Wenn Sie ein Benutzer von SeedProd's Pro Plan sind, können Sie jeder Landingpage eine benutzerdefinierte Domain geben, die nicht mit Ihrer bestehenden Website verbunden ist.

Wenn Sie beispielsweise eine neue Website starten möchten und diese noch nicht eingerichtet haben, können Sie in SeedProd auf Ihrer bestehenden Website eine „Coming Soon“-Seite erstellen und diese auf Ihre neue Website verweisen.

Mit dieser Taktik können Sie neue Abonnenten für die Liste Ihrer zukünftigen Website gewinnen, ohne eine neue WordPress-Installation einzurichten.

Nachdem Sie Ihre Einstellungen konfiguriert haben, speichern Sie Ihre Änderungen und klicken Sie zurück zum Design-Tab.

6. Veröffentlichen Sie Ihre benutzerdefinierte Checkout-Seite

Bevor Sie Ihre Kasse live schalten, ist es ratsam, sie auf Mobilgeräten zu testen. Wenn Ihre Kasse nicht mobilfreundlich ist, wird sie auf kleineren Touchscreens wie Tablets und Smartphones nicht gut aussehen und funktionieren.

Es könnte Benutzer sogar dazu veranlassen, ihre Einkaufswagen aus Frustration zu verlassen.

Die gute Nachricht ist, dass SeedProd eine integrierte mobile Vorschauoption bietet, damit Sie überprüfen können, ob Ihre Seite mobilfreundlich ist. Klicken Sie einfach auf das mobile Symbol unten auf Ihrem Bildschirm.

Jetzt können Sie sehen, wie Ihre Kasse auf Mobilgeräten aussieht und alles ändern, was nicht richtig aussieht oder funktioniert.

Wenn alles gut aussieht, ist es Zeit zu veröffentlichen. Klicken Sie auf den Pfeil nach unten neben der grünen Schaltfläche Speichern und dann auf Veröffentlichen.

Jetzt können Sie die Seite besuchen, um sie in Aktion zu sehen.

Gute Arbeit! Sie haben jetzt eine großartige, angepasste WooCommerce-Kasse!

7. Weisen Sie Ihre Checkout-Seite in WooCommerce zu

Es ist noch ein Schritt, bis Ihre neue Kasse bereit ist, Bestellungen entgegenzunehmen. Sie müssen sie in WooCommerce als Ihre Standard-Kasse festlegen.

Navigieren Sie dazu zu WooCommerce > Einstellungen > Erweitert > Seiten-Setup. Suchen Sie das Dropdown-Menü Kasse und wählen Sie die Seite aus, die Sie gerade in SeedProd erstellt haben.

Denken Sie daran, auf die Schaltfläche Änderungen speichern zu klicken, um Ihre Einstellungen zu speichern.

Hinweis für Block-Kassen-Benutzer: WooCommerce 8.x liefert standardmäßig die Block-Kasse aus. Diese Einstellung funktioniert weiterhin. SeedProd ersetzt die Kassen-Seite visuell, unabhängig davon, ob Sie zuvor eine Block- oder klassische Kasse verwendet haben.

Und das ist alles!

Sie wissen jetzt, wie Sie die WooCommerce-Kasse mit dem Landingpage-Builder von SeedProd anpassen können. Die WooCommerce-Integration von SeedProd erleichtert die Steuerung des Designs Ihres Online-Shops.

Das Plugin ist schnell und schlank. Anfänger können einen angepassten Shop erstellen, ohne einen Entwickler einstellen zu müssen.

Sobald Ihr Checkout live ist, können Sie auch Ihre WooCommerce-Dankesseite anpassen, um Upselling zu betreiben, Bewertungen zu sammeln oder Social Shares nach dem Verkauf zu fördern.

Häufig gestellte Fragen

Wie entferne ich Felder von der WooCommerce-Checkout-Seite?

Der Stil-Tab von SeedProd steuert das visuelle Design Ihres Checkout-Formulars, nicht welche Felder erscheinen. Um Felder wie Firmenname oder Adresszeile 2 zu entfernen oder auszublenden, verwenden Sie ein spezielles Plugin zur Feldverwaltung wie Checkout Field Editor for WooCommerce (kostenlose Version verfügbar).

Wenn Sie den klassischen Shortcode-Checkout verwenden, können Sie Felder auch mit einem PHP-Filter in functions.php entfernen. Dieser Ansatz funktioniert nicht mit dem Block-Checkout.

Kann ich den WooCommerce-Checkout kostenlos anpassen?

WooCommerce bietet kostenlose Optionen: Schalten Sie das Gutscheinfeld um, aktivieren Sie den Gast-Checkout, ändern Sie, welche Seite als Checkout dient. Für visuelle Designänderungen, benutzerdefinierte Feldlayouts und das Entfernen bestimmter Felder benötigen Sie ein Plugin.

SeedProd benötigt einen Pro-Plan für WooCommerce-Funktionen.

Wie mache ich den WooCommerce-Checkout zu einer Seite?

Ein echter One-Page-Checkout platziert den Warenkorb, die Rechnungsdetails und die Bestellübersicht auf einer Seite ohne Neuladen. Mit SeedProd erstellen Sie ein Layout mit dem Checkout-Block und weisen diese Seite als Ihre Checkout-URL in den WooCommerce-Einstellungen zu.

Für ein vollständiges One-Page-Warenkorb- und Checkout-Erlebnis kombinieren Sie die Warenkorb- und Checkout-Blöcke auf derselben SeedProd-Seite.

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

Wenn Sie PHP-Filter wie woocommerce_checkout_fields verwenden und diese nicht funktionieren, verwendet Ihr Shop höchstwahrscheinlich den Block-Checkout. PHP-Hooks, die im klassischen Shortcode-Checkout funktionieren, werden im Block-Checkout stillschweigend ignoriert.

Die Lösung: Wechseln Sie zurück zum klassischen Checkout oder verwenden Sie ein visuelles Plugin wie SeedProd, das die Checkout-Seite ersetzt, ohne auf PHP-Hooks angewiesen zu sein.

Funktioniert SeedProd mit dem WooCommerce-Block-Checkout?

Ja. SeedProd erstellt eine vollständig benutzerdefinierte Checkout-Seite, und Sie weisen diese als Ihre Checkout-URL in den WooCommerce-Einstellungen zu. Dies ersetzt jeden zuvor aktiven Checkout-Typ (Block oder klassisch) durch Ihr SeedProd-Design.

Sie müssen die WooCommerce-Checkout-Modi nicht wechseln. SeedProd verwaltet das Checkout-Formular über seine eigene WooCommerce-Block-Integration.

Während Sie hier sind, finden Sie vielleicht auch die folgenden WooCommerce-Anleitungen hilfreich:

• So passen Sie den WooCommerce-Tab „Zusätzliche Informationen“ an
• So fügen Sie die Schaltfläche „Warenkorb anzeigen“ in WooCommerce hinzu
• So ändern Sie den Titel der Shop-Seite in WooCommerce
• So erstellen Sie eine beeindruckende Produktbildergalerie in WooCommerce 
• So fügen Sie Produktseiten in WooCommerce Sternebewertungen hinzu
• So zeigen Sie verwandte Produkte in WooCommerce an
• So zeigen Sie Produktkategorien und -tags in WooCommerce an 
• So erhalten und zeigen Sie Produktbeschreibungen in WooCommerce an
• So zeigen Sie empfohlene Produkte in WooCommerce an 
• So beheben Sie, dass WooCommerce „Warenkorb anzeigen“ nicht funktioniert
• So passen Sie Ihren WooCommerce-„In den Warenkorb“-Button an
• So fügen Sie ein WooCommerce-Warenkorbsymbol zu Menüs hinzu
• So passen Sie Produktkategorie-Seiten in WooCommerce an
• So fügen Sie eine neue Produktkategorie zu WooCommerce in WordPress hinzu

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.