WooCommerce Checkout bearbeiten

Du möchtest deinen WooCommerce Checkout optimieren, um mehr Verkäufe zu erzielen? Dann bist du hier genau richtig!

In dieser Schritt-für-Schritt-Anleitung zeige ich dir, wie du deine WooCommerce Kasse bearbeitest – vom Hinzufügen neuer Felder über das Entfernen überflüssiger Elemente bis hin zur Anpassung des Layouts.

Erfahre, wie du deinen Checkout-Prozess kundenfreundlicher gestaltest und so Warenkorbabbrüche reduzierst.

Inhaltsverzeichnis

Warum den WooCommerce Checkout anpassen?

Die Kasse ist die wichtigste Seite deines Shops – hier entscheidet sich, ob ein Besucher zum Kunden wird. Ein schlecht gestalteter Checkout kostet dich Umsatz. Hier sind die drei Hauptgründe, warum du deinen WooCommerce Checkout bearbeiten solltest:

  • Höhere Conversion-Rate: Ein schneller, einfacher Checkout verringert die Anzahl der Warenkorbabbrüche. Weniger Schritte, klarere Formulare und Gast-Checkout-Optionen sorgen dafür, dass mehr Kunden ihre Bestellung abschließen.
  • Bessere Benutzerfreundlichkeit: Deine Kunden wollen einfach einkaufen – nicht rätseln. Ein übersichtlicher Checkout ohne überflüssige Felder macht den Kaufprozess angenehm und schafft Vertrauen.
  • Markenidentität stärken: Der Checkout ist mehr als nur Funktionalität. Mit individuellen Farben, deinem Logo und einer persönlichen Ansprache schaffst du ein stimmiges Markenerlebnis, das im Gedächtnis bleibt.

Zwei Methoden: Plugin oder Code?

Du hast zwei Möglichkeiten, deinen WooCommerce Checkout anzupassen. Welche du wählst, hängt von deinen Kenntnissen und Zielen ab.

Methode 1: Mit einem Plugin (Empfohlen)

Diese Methode ist die einfachste und sicherste. Du brauchst keine Programmierkenntnisse und kannst alles per Drag & Drop erledigen.

Empfohlene Plugins:

  • Checkout Field Editor for WooCommerce
  • WooCommerce Checkout Manager
  • YITH WooCommerce Checkout Manager

Was du damit machen kannst:

  • Felder per Drag & Drop verschieben, hinzufügen oder löschen.
  • Felder als Pflichtfeld oder optional markieren.
  • Bedingte Logik einrichten: Felder nur anzeigen, wenn bestimmte Produkte im Warenkorb sind.
  • Zusätzliche Gebühren hinzufügen, z. B. für Geschenkverpackung oder Expressversand.

Weitere nützliche Erweiterungen:

  • One Page Checkout: Alles läuft auf einer einzigen Seite ab – das spart Zeit und reduziert Abbrüche.
  • Social Login: Deine Kunden können sich mit Google oder Facebook anmelden, ohne ein neues Konto anlegen zu müssen.

Methode 2: Programmatisch per Code (Für Fortgeschrittene)

Wenn du individuelle Anpassungen brauchst, die kein Plugin bietet, kannst du direkt in den Code eingreifen. Dafür solltest du Grundkenntnisse in PHP und CSS haben.

Wichtig: Arbeite immer mit einem Child-Theme oder einem Code-Snippet-Plugin. So gehen deine Änderungen bei Updates nicht verloren.

Alle folgenden Code-Beispiele fügst du in die functions.php deines Child-Themes ein.

a) Eigene Felder hinzufügen

Füge ein eigenes Feld hinzu, z. B. eine Checkbox für den Newsletter:

// Newsletter-Checkbox am Ende der Kasse hinzufügen
add_action( 'woocommerce_after_order_notes', 'custom_checkout_field' );

function custom_checkout_field( $checkout ) {
    woocommerce_form_field( 'newsletter_subscribe', array(
        'type'          => 'checkbox',
        'class'         => array('custom-field form-row-wide'),
        'label'         => ' Ja, ich möchte den Newsletter abonnieren.'
    ), $checkout->get_value( 'newsletter_subscribe' ) );
}

b) Felder entfernen

Entferne überflüssige Felder wie die zweite Adresszeile oder die Firma:

// Überflüssige Checkout-Felder entfernen
add_filter( 'woocommerce_checkout_fields' , 'remove_checkout_fields' );

function remove_checkout_fields( $fields ) {
    unset($fields['billing']['billing_address_2']); // Zweite Adresszeile
    unset($fields['billing']['billing_company']);   // Firmenname
    unset($fields['order']['order_comments']);      // Bestellnotizen
    return $fields;
}

c) Platzhalter und Beschriftungen ändern

Passe die Texte der Felder an, um sie kundenfreundlicher zu machen:

// Platzhalter und Labels anpassen
add_filter( 'woocommerce_checkout_fields' , 'change_checkout_field_labels' );

function change_checkout_field_labels( $fields ) {
    $fields['billing']['billing_phone']['label'] = 'Telefonnummer für Rückfragen';
    $fields['billing']['billing_phone']['placeholder'] = 'Deine Telefonnummer';
    $fields['billing']['billing_email']['placeholder'] = 'deine@email.de';
    return $fields;
}

Design & Benutzerfreundlichkeit verbessern

Neben den inhaltlichen Anpassungen kannst du auch das Aussehen deiner Kasse optimieren.

Mit CSS das Aussehen anpassen

Mit ein paar Zeilen CSS verpasst du deinem Checkout einen individuellen Look. Füge den Code im Customizer unter „Zusätzliches CSS“ ein:

/* Hintergrund des Checkout-Bereichs */
.woocommerce-checkout .col2-set {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
}

/* Bestell-Button hervorheben */
.woocommerce #payment #place_order {
    background-color: #007cba;
    color: white;
    font-weight: bold;
    padding: 15px 30px;
    border-radius: 50px;
    width: 100%;
}

Den Warenkorb überspringen (Direct Checkout)

Du kannst Kunden direkt von der Produktseite zur Kasse leiten – ohne Umweg über den Warenkorb.

  1. Gehe zu WooCommerce > Einstellungen > Produkte.
  2. Deaktiviere die Option „Nach erfolgreichem Hinzufügen zur Einkaufswagenseite umleiten“.
  3. Füge diesen Code in deine functions.php ein:
// Direkt zur Kasse weiterleiten
add_filter( 'woocommerce_add_to_cart_redirect', 'redirect_to_checkout' );

function redirect_to_checkout() {
    return wc_get_checkout_url();
}

Häufige Fragen (FAQ)

Was sollte eine WooCommerce-Kassenseite enthalten?
Die Kasse braucht: Rechnungsdaten, Versandadresse, Bestellübersicht, Zahlungsmethoden und einen Login-Bereich.

Was ist der Gast-Checkout?
Der Gast-Checkout erlaubt es Kunden, zu kaufen, ohne ein Konto anzulegen. Das senkt die Hürde für Neukunden enorm.

Wie kann ich Warenkorbabbrüche reduzieren?
Biete Gast-Checkout an, zeige Versandkosten frühzeitig an, biete mehrere Zahlungsmethoden und halte die Formulare so kurz wie möglich.

Was kostet die Anpassung der Kasse?
Es gibt viele kostenlose Plugins für grundlegende Änderungen. Premium-Plugins kosten meist einmalig oder als Abo. Individuelle Entwicklungen durch einen Profi können mehrere hundert Euro kosten.

Fazit

Die Anpassung deines WooCommerce Checkouts ist eine der effektivsten Maßnahmen, um deinen Umsatz zu steigern. Ob du ein Plugin verwendest oder selbst Hand anlegst – jede Verbesserung macht den Kauf für deine Kunden einfacher und angenehmer.

Leg jetzt los und optimiere deine WooCommerce Kasse – deine Kunden und dein Umsatz werden es dir danken!

Mehr Inspiration für dich: