checkoutwoocommerce
WooCommerce-Checkout anpassen: Felder, Layout und sichere Lösungen
16. Oktober 202612 min Lesezeit·ShopMonitor Team
Loading…
Eine Änderung am Checkout kann eine schnelle Anpassung im Editor sein oder ein kleines Entwicklungsprojekt werden. Entscheidend ist nicht ihr Umfang, sondern die Technik im Shop: klassischer Shortcode oder Checkout-Block. Beide führen zum gleichen Ziel, sprechen aber unterschiedliche APIs an. Ein Feldfilter kann deshalb in der einen Variante funktionieren und in der anderen wirkungslos bleiben.
Prüfe zuerst die Checkout-Variante. Das spart dir meist eine Menge Fehlersuche.
Öffne Seiten im WordPress-Admin, suche die als Checkout hinterlegte Seite und klicke auf Bearbeiten. Dort siehst du eine von zwei Varianten: einen Shortcode-Block mit [woocommerce_checkout], das ist der klassische Checkout, oder einen Block namens Checkout mit inneren Blöcken wie Kontaktinformationen, Lieferadresse und Zahlungsoptionen. Dann nutzt dein Shop den Checkout-Block.
Ist der Editor nicht eindeutig, öffne den Checkout im Browser und prüfe den Quelltext. Die Block-Variante nutzt Wrapper mit Klassennamen, die mit wp-block-woocommerce-checkout beginnen. Die klassische Variante rendert ein form.checkout.woocommerce-checkout.
An dieser Entscheidung hängen alle folgenden Anpassungen.
Klassischer Shortcode-Checkout im Vergleich zum Checkout-Block
| Gewünschte Änderung | Klassischer Shortcode-Checkout | Checkout-Block |
|---|---|---|
| Sichtbarkeit und Pflichtstatus von Feldern | woocommerce_checkout_fields-Filter | Optionen in der Block-Seitenleiste |
| Eigenes Feld hinzufügen | woocommerce_form_field an einem Checkout-Hook | Additional Checkout Fields API |
| Layout und Reihenfolge der Abschnitte | Template-Overrides und Hooks | Innere Blöcke im Editor verschieben |
| Überschriften und Feldbezeichnungen | Filter oder Übersetzungsdateien | Text direkt im Editor bearbeiten |
| Styling | Theme-CSS | Globale Styles plus Theme-CSS |
| Zahlungsgateways | Jedes Gateway mit WooCommerce-Unterstützung | Nur Gateways mit Block-Unterstützung |
Aktuelle WooCommerce-Versionen unterstützen beide Varianten. Der Shortcode bleibt sinnvoll, wenn dein Shop tiefgreifende Anpassungen braucht oder ein älteres Payment-Gateway nutzt.
Ein klassischer Filter ändert keinen Block
Für den Block-Weg brauchst du weder eigenen Code noch ein zusätzliches Plugin. Nutzt dein Shop bereits den Checkout-Block, ist das dein Startpunkt.
Bearbeite deine Checkout-Seite, klicke den äußeren CheckoutBlock an und öffne die Einstellungsseitenleiste. Dort erledigst du die typischen Anpassungen: Firmenname, Wohnungs- oder Suitezeile und Telefon lassen sich ausblenden, optional machen oder als Pflichtfeld setzen. Die inneren Blöcke bestimmen die Struktur. Du kannst Abschnitte verschieben, den Bestellnotiz-Block entfernen und sichtbare Überschriften direkt auf der Seite bearbeiten.
Auch normale WordPress-Blöcke lassen sich im Checkout platzieren. So ergänzt du etwa einen kurzen Retourenhinweis im Zahlungsabschnitt oder einen Versandhinweis über der Bestellübersicht.
Die Seitenleiste deckt klar begrenzte Aufgaben ab. Kenne diese Grenze, bevor du dich für diesen Weg entscheidest.
Eigene Felder im Block-Checkout laufen über die Additional Checkout Fields API, nicht über den klassischen Filter. Registriere das Feld auf woocommerce_init, gib der ID ein Namespace-Präfix und wähle einen von drei Bereichen: contact, address oder order.
add_action( 'woocommerce_init', 'sm_register_checkout_fields' );
function sm_register_checkout_fields() {
if ( ! function_exists( 'woocommerce_register_additional_checkout_field' ) ) {
return;
}
woocommerce_register_additional_checkout_field(
array(
'id' => 'my-store/delivery-instructions',
'label' => __( 'Delivery instructions', 'my-store' ),
'location' => 'order',
'type' => 'text',
'required' => false,
)
);
}WooCommerce rendert und prüft die Eingabe, speichert sie an der Bestellung und zeigt den Wert im Admin-Bereich. Die function_exists-Abfrage verhindert außerdem einen fatalen Fehler, falls WooCommerce deaktiviert ist.
Unterstützung des Payment-Gateways zuerst prüfen
Code gibt dir die präziseste Kontrolle. Am richtigen Ort übersteht er Theme-Wechsel. Am falschen bleibt ein Fehler womöglich bis zur nächsten Bestellung unbemerkt. Dieser Abschnitt gilt nur für den klassischen Shortcode-Checkout.
Der klassische Checkout baut das Formular aus einem verschachtelten Array. Ein Filter übergibt dir dieses Array vor dem Rendern. Auf der obersten Ebene liegen vier Gruppen: billing, shipping, account und order. Jede Gruppe enthält benannte Felder. Jedes Feld hat Eigenschaften wie label, placeholder, required, class und priority.
priority wird oft übersehen. Die Zahl bestimmt die Reihenfolge innerhalb einer Gruppe. So verschiebst du Felder, ohne eine Template-Datei anzufassen.
Entferne einen Feld-Key mit unset. Setze priority, um das Feld zu verschieben:
add_filter( 'woocommerce_checkout_fields', 'sm_edit_checkout_fields' );
function sm_edit_checkout_fields( $fields ) {
// Remove fields this store does not need.
unset( $fields['billing']['billing_company'] );
unset( $fields['order']['order_comments'] );
// Move email and phone above the address block.
$fields['billing']['billing_email']['priority'] = 21;
$fields['billing']['billing_phone']['priority'] = 22;
return $fields;
}Gib immer $fields zurück. Gibt der Filter nichts zurück, erhält WooCommerce ein leeres Checkout-Formular. Damit kann der Zahlungsvorgang sofort ausfallen.
Steuer- und Versandfelder sind Abhängigkeiten
Ein besseres Label gehört zu den risikoärmsten Checkout-Änderungen. Klare Worte helfen oft mehr als ein gestrichenes Feld:
add_filter( 'woocommerce_checkout_fields', 'sm_relabel_checkout_fields' );
function sm_relabel_checkout_fields( $fields ) {
$fields['billing']['billing_phone']['label'] = 'Mobile number for delivery updates';
$fields['billing']['billing_phone']['placeholder'] = 'So the courier can reach you';
$fields['billing']['billing_address_2']['label'] = 'Apartment, floor, or company';
$fields['billing']['billing_address_2']['placeholder'] = 'Optional';
return $fields;
}Der Ablageort entscheidet, ob die Anpassung das nächste Update überlebt. Von robust bis fragil:
wp-content/plugins/Dort übersteht es Theme-Wechsel und Theme-Updates.
Nicht im Parent-Theme ablegen
Plugins tauschen etwas Kontrolle gegen einen schnelleren Start. Es sind kommerzielle Produkte. Prüfe Preise und Kompatibilität deshalb direkt beim Anbieter.
Checkout Field Editor
CheckoutWC
FunnelKit
Wähle ein Plugin, wenn nicht technische Teams regelmäßig Änderungen brauchen, ein mehrstufiges Layout sonst teuer selbst gebaut werden müsste oder du validierte Feldtypen nicht selbst pflegen möchtest.
Code oder Plugin nach Situation wählen
| Situation | Passende Wahl |
|---|---|
| Ein paar Felder einmal entfernen oder umbenennen | Code |
| Nicht technische Mitarbeitende ändern Felder regelmäßig | Field Editor Plugin |
| Mehrstufiges Layout mit Bestellübersicht in der Seitenleiste | Checkout-Template-Plugin |
| Ein bedingtes Feld mit eigener Validierung | Code |
| Upsells und Warenkorb-Recovery neben Checkout-Änderungen | Funnel-Plugin |
Jedes Plugin ist eine weitere mögliche Konfliktquelle im Zahlungsschritt. Die Testcheckliste unten gilt deshalb für Plugins genauso wie für eigenen Code.
Diese fünf Anpassungen stehen bei Shops besonders oft auf der Liste.
Firmenname und die zweite Adresszeile sind typische Kandidaten. Du kannst sie entfernen, wenn dein Shop die Daten nicht braucht. Prüfe vorher nachgelagerte Systeme: Ein Rechnungs-Plugin kann den Firmennamen drucken, eine Versand-Integration die zweite Adresszeile auslesen. Fehlt ein erwartetes Feld, entstehen oft kaputte Exporte, obwohl der Checkout selbst noch normal aussieht.
Aktuelle WooCommerce-Versionen erlauben ein optionales Telefonfeld in den Adresseinstellungen. Der Block-Checkout bietet dieselbe Option in der Seitenleiste. Im klassischen Checkout setzt du im Code $fields['billing']['billing_phone']['required'] = false; im Filter oben. Bei physischer Ware solltest du das Feld eher optional lassen, weil Kuriere es für Zustellhinweise nutzen können.
Im klassischen Checkout gibst du die Eingabe über einen Checkout-Hook aus und speicherst sie an der Bestellung:
add_action( 'woocommerce_after_order_notes', 'sm_delivery_date_field' );
function sm_delivery_date_field( $checkout ) {
woocommerce_form_field(
'sm_delivery_date',
array(
'type' => 'date',
'class' => array( 'form-row-wide' ),
'label' => 'Preferred delivery date',
'required' => false,
),
$checkout->get_value( 'sm_delivery_date' )
);
}
add_action( 'woocommerce_checkout_create_order', 'sm_save_delivery_date', 10, 2 );
function sm_save_delivery_date( $order, $data ) {
if ( ! empty( $_POST['sm_delivery_date'] ) ) {
$order->update_meta_data(
'_sm_delivery_date',
sanitize_text_field( wp_unslash( $_POST['sm_delivery_date'] ) )
);
}
}woocommerce_checkout_create_order speichert den Wert über das Bestellobjekt und ist mit High Performance Order Storage kompatibel. Eigene Felder führen häufig zu Problemen nach Updates. Notiere deshalb, was du ergänzt hast und wo es registriert ist.
Den Checkout in nummerierte Schritte zu teilen ist hier die tiefgreifendste Änderung. Sie verändert Formular-Markup und JavaScript-Validierung. Ein Plugin oder ein gezielt gebautes One-Page-Checkout-Template ist meist sicherer. Soll der Weg zur Zahlung kürzer werden, prüfe zuerst deine Warenkorb-Weiterleitung, denn sie bestimmt bereits, ob Kunden eine Warenkorbseite sehen.
Ein Zahlungs-Icon, ein kurzer Retourenhinweis oder eine Lieferzeit neben dem Zahlungs-Button ist schnell ergänzt und verändert keine Checkout-Logik. Beim Block-Checkout platzierst du einen Absatz oder Bildblock im Zahlungsabschnitt. Beim klassischen Checkout nutzt du woocommerce_review_order_before_submit. Halte die Aussage kurz, statt eine Wand aus Badges zu bauen.
Jede Checkout-Änderung schafft einen weiteren möglichen Fehlerpunkt. Im Checkout hat selbst ein kleiner technischer Fehler direkte geschäftliche Folgen.
Diese vier Muster verursachen einen großen Teil der Probleme:
Nicht jeder Fehler meldet sich laut. Oft sinkt nur das Bestellvolumen. Das sieht genauso aus wie bei einem Checkout, der nach einem Update bricht, aus welchem Grund auch immer.
Arbeite diese Liste nach jeder Anpassung und nach jedem WooCommerce-, Theme- oder Plugin-Update durch. Die Änderung bricht selten am Tag der Umsetzung. Meist verändert sich später eine Abhängigkeit.
Die manuellen Schritte zeigt unser Guide dazu, wie du den Checkout nach Änderungen testest, einschließlich der Arbeit mit Testkarten.
ShopMonitor kann deinen Checkout-Pfad als geplanten Browser-Test ausführen und warnen, wenn ein Schritt scheitert. Der Dienst führt einen Browser durch den konfigurierten Checkout und prüft die Bestellbestätigungsseite. Zusätzlich kann ShopMonitor künftig die Zustellung transaktionaler E-Mails testen.
ShopMonitor testet Checkout und Formulare automatisiert im Browser und warnt, wenn ein konfigurierter Pfad scheitert. Dafür brauchst du keine Änderungen am Checkout-Code und keine Plugins.
Keine Kreditkarte nötig.
Über die Autoren
Verfasst vom Team bei Winning Solutions, der Agentur hinter ShopMonitor. Wir helfen WooCommerce-Teams, Checkout-Änderungen sicherer umzusetzen und Fehler im Browser-Pfad nach Theme-, Plugin- und Core-Updates zu erkennen.