Multi-step checkout

Das Modul teilt den Checkout in vier Schritte auf: Adresse, Versand, Zahlung und Zusammenfassung. Der Kunde sieht eine Fortschrittsleiste und durchläuft jeden Schritt nacheinander.

Checkout-Schritte

Der mehrstufige Checkout besteht aus vier Schritten:

Schritt	Standardname	Inhalt
1	Adresse	Formular für Rechnungsdaten und Lieferadresse
2	Versand	Auswahl der Versandmethode und Lieferoptionen
3	Zahlung	Auswahl der Zahlungsmethode und Zahlungsdaten
4	Zusammenfassung	Bestellübersicht, rechtliche Checkboxen, Schaltfläche “Bestellung aufgeben”

Der Kunde kann zu vorherigen Schritten zurückkehren, ohne eingegebene Daten zu verlieren. Der Übergang zum nächsten Schritt erfordert das korrekte Ausfüllen des aktuellen Formulars.

Konfiguration

Gehen Sie zu WooCommerce > Einstellungen > Polski > PRO-Module > Checkout.

Modul aktivieren

Der mehrstufige Checkout wird über die Option gesteuert:

polski_pro_checkout[multistep_enabled]

Ein Wert von 1 aktiviert das mehrstufige Layout, 0 stellt den standardmäßigen WooCommerce-Checkout wieder her.

Namen der Schritte

Die Standardnamen der Schritte können in den Einstellungen geändert werden:

Einstellung	Standardwert
Titel von Schritt 1	Adresse
Titel von Schritt 2	Versand
Titel von Schritt 3	Zahlung
Titel von Schritt 4	Zusammenfassung

Die Namen der Schritte werden in der Fortschrittsleiste über dem Checkout-Formular angezeigt.

Validierung zwischen den Schritten

Das Plugin validiert die Daten nach jedem Schritt, bevor der Übergang zum nächsten erlaubt wird:

Schritt 1 (Adresse) - Pflichtfelder: Vorname, Nachname, Adresse, Stadt, Postleitzahl, Telefon, E-Mail
Schritt 2 (Versand) - Auswahl der Versandmethode erforderlich
Schritt 3 (Zahlung) - Auswahl der Zahlungsmethode erforderlich
Schritt 4 (Zusammenfassung) - obligatorische rechtliche Checkboxen müssen angehakt werden

Validierungsmeldungen erscheinen inline unter dem entsprechenden Feld.

Technische Umsetzung

WooCommerce Checkout Blocks (React)

Für Shops, die WooCommerce Checkout Blocks (Block-Editor) verwenden, nutzt das Modul React zur Darstellung der Schritte. Die Komponenten integrieren sich mit der WooCommerce Store API und bewahren die volle Kompatibilität mit Checkout-Blocks-Erweiterungen.

Das Rendering erfolgt clientseitig. Das Plugin registriert sich als Checkout-Blocks-Erweiterung und ändert das Layout des Formulars, ohne in die WooCommerce-Logik einzugreifen.

Klassischer Fallback (Shortcode)

Für Shops, die den klassischen Checkout verwenden (Shortcode [woocommerce_checkout]), stellt das Modul einen JavaScript-Fallback bereit. Das Skript teilt das bestehende Formular in Abschnitte auf und fügt eine Navigation zwischen ihnen hinzu.

Der klassische Fallback:

benötigt kein React
funktioniert mit bestehenden Themes und Checkout-Anpassungen
unterstützt dieselben vier Schritte wie die Blocks-Version
verwendet jQuery zur DOM-Manipulation

Modus-Erkennung

Das Plugin erkennt automatisch, ob der Checkout Checkout Blocks oder den klassischen Shortcode verwendet, und lädt die passende Implementierung. Eine manuelle Modus-Konfiguration ist nicht erforderlich.

Gestaltung

CSS-Body-Klasse

Wenn der mehrstufige Checkout aktiv ist, wird dem <body>-Element eine Klasse hinzugefügt:

polski-multistep-checkout

Dadurch lassen sich CSS-Stile ausschließlich auf Seiten mit dem mehrstufigen Checkout anwenden:

body.polski-multistep-checkout .woocommerce-checkout {
    max-width: 720px;
    margin: 0 auto;
}

Schritt-Klassen

Jeder Schritt erhält seine eigene CSS-Klasse:

.polski-checkout-step { /* gemeinsame Stile der Schritte */ }
.polski-checkout-step--active { /* aktiver Schritt */ }
.polski-checkout-step--completed { /* abgeschlossener Schritt */ }
.polski-checkout-step--address { /* Adressschritt */ }
.polski-checkout-step--shipping { /* Versandschritt */ }
.polski-checkout-step--payment { /* Zahlungsschritt */ }
.polski-checkout-step--review { /* Zusammenfassungsschritt */ }

Fortschrittsleiste

Die Fortschrittsleiste wird als <ol>-Element mit der Klasse .polski-checkout-progress gerendert. Jedes Listenelement entspricht einem Schritt:

.polski-checkout-progress { /* Container der Leiste */ }
.polski-checkout-progress__step { /* einzelner Schritt in der Leiste */ }
.polski-checkout-progress__step--active { /* aktiver Schritt in der Leiste */ }
.polski-checkout-progress__step--done { /* abgeschlossener Schritt in der Leiste */ }

Kompatibilität mit anderen Modulen

Rechtliche Checkboxen

Rechtliche Checkboxen aus der kostenlosen Version von Polski for WooCommerce werden automatisch in Schritt 4 (Zusammenfassung) verschoben. Der Kunde muss sie anhaken, bevor er die Bestellung aufgibt.

USt-IdNr.-Feld

Das USt-IdNr.-Feld wird in Schritt 1 (Adresse) angezeigt, gemäß der Konfiguration zur bedingten Anzeige aus dem USt-IdNr.-Modul.

Benutzerdefinierte Felder

Von anderen Plugins hinzugefügte Felder (z. B. über den Hook woocommerce_checkout_fields) werden anhand ihres Abschnitts automatisch dem passenden Schritt zugeordnet:

billing_* - Schritt 1
shipping_* - Schritt 2
order_* - Schritt 4

Der mehrstufige Checkout unterstützt:

Tastaturnavigation (Tab, Enter, Escape)
ARIA-Attribute (aria-current, aria-label, role="tablist")
Ankündigung von Schrittwechseln durch Screenreader
sichtbaren Fokus auf interaktiven Elementen

Leistung

Das Modul lädt Skripte und Stile nur auf der Checkout-Seite. Auf anderen Shop-Seiten fügt es keine Ressourcen hinzu. Skripte werden mit dem Attribut defer geladen, um das Rendering der Seite nicht zu blockieren.

Häufige Probleme

Checkout teilt sich nicht in Schritte auf

Prüfen Sie, ob die Option polski_pro_checkout[multistep_enabled] auf 1 gesetzt ist
Leeren Sie den Cache (Caching-Plugins, CDN, Browser-Cache)
Prüfen Sie die Browser-Konsole auf JavaScript-Fehler
Vergewissern Sie sich, dass kein Konflikt mit anderen Plugins besteht, die den Checkout verändern

Formular geht nicht zum nächsten Schritt weiter

Prüfen Sie, ob alle Pflichtfelder ausgefüllt sind
Überprüfen Sie die Validierungsmeldungen unter den Feldern
Prüfen Sie die Browser-Konsole - AJAX-Fehler können die Validierung blockieren

Stile funktionieren nicht richtig

Prüfen Sie, ob die Klasse polski-multistep-checkout am <body>-Element vorhanden ist
Überprüfen Sie, ob die Plugin-Stile nicht vom Theme überschrieben werden (verwenden Sie den Inspektor)
Fügen Sie eigene Stile mit höherer Selektor-Spezifität hinzu