WooCommerce Checkout anpassen

Der Checkout ist einer der wichtigsten Schritte im Kaufprozess. Daher ist es wichtig, dass du ihn optimierst, um die Konversionsraten zu erhöhen.

Die standardmäßige WooCommerce-Kasse ist grundlegend und einschränkend, wenn es um Anpassungsoptionen geht.

Die Erstellung einer attraktiven und benutzerfreundlichen WooCommerce-Kassenseite ist wichtig für die Kundenbindung und erhöht die Konversionen erheblich.

Dieser Artikel führt dich durch die Grundlagen der Anpassung der WooCommerce-Kassenseite. Mehr zum Thema Kassenseite-Optimierung. Dies wird dazu beitragen, die Kundenerfahrung zu verbessern, Warenkorbabbrüche zu reduzieren und gleichzeitig den Umsatz zu steigern!

Die standardmäßige einseitige Kasse, die mit WooCommerce geliefert wird, kann aus den folgenden Gründen überwältigend, verwirrend und ablenkend sein:

Die Kopf und Fußzeile deiner Website sowie die Seitenleiste bleiben erhalten. Dies lenkt die Kunden von deiner eigentlichen Aufgabe ab, dem Auschecken.
Alle Checkout-Felder befinden sich auf einer Seite oder in einem einzigen Schritt. Dies lässt den Kunden denken, dass das Ausfüllen der Textfelder des Kassenformulars eine größere Aufgabe ist, als es tatsächlich ist. Es kann auch dazu führen, dass der Kunde überfordert ist und den Bestellvorgang abbricht, obwohl er das nicht muss.
Die Standard-Kasse von WooCommerce enthält obligatorische Felder, die für dein Online-Geschäft vielleicht gar nicht benötigt werden (z. B. die Felder für die Geschäftsadresse und die Gutscheine).

Warum solltest du die Kassenseite in WooCommerce bearbeiten?

Wenn du einen WooCommerce-Shop hast, ist die Kasse eine der wichtigsten Seiten. Hier bezahlt der Kunde und du schließt den Verkauf ab.

Wenn man bedenkt, wie viele Kunden ihre Warenkörbe abbrechen und wie groß der Wettbewerb heutzutage ist, sollten du die Kasse optimieren, um so viele Verkäufe wie möglich abzuschließen.

Auch wenn WooCommerce eine gute Standardkonfiguration enthält, musst du möglicherweise die Kassenseite bearbeiten, um die Konversionsraten in deinem Shop zu erhöhen.

Einige der Änderungen, die du vornehmen kannst, um deine WooCommerce-Kassenseite zu bearbeiten, sind:

Erstelle eine einseitige Kasse
Ändere den Stil und das Design der Kasse mit CSS
Hinzufügen, Entfernen oder Umordnen von Kassenfeldern
Einfügen von Inhalten
Ein Feld als erforderlich oder optional festlegen
Hinzufügen von bedingten Feldern und Erstellen von bedingter Logik
Füge zusätzliche Gebühren für Versand, Verpackung und so weiter hinzu.
Und viele andere

WooCommerce Checkout anpassen: 2 Methoden

In dieser Anleitung erfährst du, wie du die Kassenseite in WooCommerce auf 2 verschiedene Arten anpassen kannst:

Mit einem Plugin
Programmatisch (Kodierung)

Schauen wir uns die beiden Möglichkeiten genauer an.

Benutzerdefinierte Checkout-Vorlage
Die meisten Anpassungen können mit Hooks und Filtern vorgenommen werden, aber wenn du das Markup auf der Checkout-Seite bearbeiten möchtest, kannst du das in einem Theme tun.

ACHTUNG: Das Verschieben des Markups auf der Checkout-Seite kann zu Problemen mit anderen Plugins führen, die Hooks und Filter verwenden. Ich würde nicht empfehlen, irgendwelche Aktionshaken zu entfernen oder das Markup aggressiv zu bearbeiten.

Laut der WooCommerce-Dokumentation kannst du die Checkout-Vorlage in dein Theme kopieren, und zwar in einen Ordner, der wie folgt strukturiert ist: woocommerce/checkout/form-checkout.php.

Verschieben, Hinzufügen oder Entfernen von Checkout-Feldern

Der einfachste Weg, Kassenfelder anzupassen, ist die Verwendung von Plugins wie zum Beispiel:

Diese Plugins bieten eine einfache Benutzeroberfläche zum Verschieben, Bearbeiten, Hinzufügen oder Entfernen von Checkout-Feldern. Du kannst alles über die Felder bearbeiten, einschließlich Typ, Bezeichnung, Position und mehr.

Mit dem Drag & Drop-System kannst du die Felder an die gewünschte Stelle ziehen.
Lege fest, ob die Kasse in einer einzigen Zeile und nicht in zwei Zeilen angezeigt werden soll (wie in der Standardeinstellung von WooCommerce)
Bedingte Felder: Ein- oder Ausblenden von Kassenfeldern auf der Grundlage der Produkte/Kategorien im Warenkorb und/oder der in anderen Kassenfeldern getroffenen Auswahl
Standard-Felder bearbeiten
Neue Felder hinzufügen
Du kannst die Position der Felder ziehen und anpassen,
Checkout-Felder ausblenden
Checkout-Felder aktivieren oder deaktivieren
Die vom Kunden ausgefüllten Checkout-Felder können in den Bestelldetails angezeigt werden.
WooCommerce Checkout-Felder, die vom Kunden ausgefüllt wurden, können in den Bestell-E-Mails angezeigt werden
Anpassen der Spaltenbreite – Die Felder können in halber oder ganzer Breite auf der Kassenseite angezeigt werden.
Bedingte Checkout-Abschnitte.
Bedingte Regeln basierend auf vorhandenen Feldern, Produkt, Produktvariationen, Kategorie, Benutzerrolle, Versandart und Zahlungsart.
Hinzufügen von Feldern zur Kasse und zur Registrierung auf der Seite „Mein Konto“.
Erstelle neue Abschnitte mit Ausnahme der Standardabschnitte.
Neue Abschnitte an 13 verschiedenen Positionen verfügbar.
Bearbeiten, Duplizieren und Löschen von benutzerdefinierten Abschnitten.
Benutzerdefinierte Validierungsregeln mit RegEx für Text- und Textarea-Eingaben.
Preisoption: Hinzufügen einer zusätzlichen Gebühr basierend auf der Feldauswahl.
Option zum Hinzufügen der Steuer für die hinzugefügte Zusatzgebühr.

Die Kassenseite programmatisch bearbeiten (Kodierung)

In diesem Abschnitt zeigen wir dir, wie du die WooCommerce-Kassenseite programmatisch bearbeiten kannst. Am Ende dieses Abschnitts wisst du, wie du:

Benutzerdefinierter Felder auf der WooCommerce-Kassenseite Hinzufügst
Benutzerdefinierte Felder in der Datenbank speicherst
Ein erforderliches Feld optional machst
Inhalten auf der Checkout-Seite Hinzufügst
Shortcodes auf der WooCommerce-Kassenseite verwendest
Kassenseite mit benutzerdefiniertem CSS gestaltest

Um all diese Anpassungen zu erreichen, werden wir einige WooCommerce-Kassenhaken verwenden.

Da wir einige Änderungen an der Datei functions.php vornehmen werden, empfehlen wir dir, ein Child-Theme zu verwenden. Du kannst entweder eines der vielen Child-Theme-Plugins verwenden oder eines nach dieser Anleitung erstellen.

Hinzufügen von benutzerdefinierten Feldern auf der WooCommerce-Kassenseite
Als Erstes zeigen wir dir, wie du der Kassenseite benutzerdefinierte Felder hinzufügen kannst.

Dazu fügst du das folgende Skript in die Datei functions.php des Child-Themes ein oder nutze das Plugin Code Snippets

// checkbox field
add_action( 'woocommerce_after_order_notes', 'subscribe_checkout' );

function subscribe_checkout( $checkout ) {
woocommerce_form_field( 'subscriber', array(
'type' => 'checkbox',
//'required' => true,
'class' => array('custom-field form-row-wide'),
'label' => ' Subscribe to our newsletter.'
), $checkout->get_value( 'subscriber' ) );
}

Damit fügst du ein benutzerdefiniertes Kontrollkästchen am Ende der Checkout-Seite hinzu, um den Benutzern die Möglichkeit zu geben, deinen Newsletter zu abonnieren. Auf dieselbe Weise kannst du jeden beliebigen Feldtyp hinzufügen. Fügen wir zum Beispiel ein Radio-Eingabefeld mit dem folgenden Skript hinzu.

„Ein Kundenkonto eröffnen?“ Umbennen und nach oben verschieben

add_filter('gettext', 'translate_strings');
 
function translate_strings($translated) {
	
	
	$translated = str_ireplace('Ein Kundenkonto eröffnen?', 'Kundenkonto anlegen', $translated);

return $translated;
 
}

Um die Checkbox nach oben zu verschieben solltest du zuerst die Datei form-billing.php (woocommerce-templates-checkout) in dein Child Theme kopieren: yourtheme/woocommerce/checkout/form-billing.php.

Als nächstes verschiebe die Zeile 51-55 nach 21-25

Hinzufügen von Gebühren auf der Kassenseite

Schauen wir uns an, wie du WooCommerce Checkout anpassen und zusätzliche Gebühren hinzufügen kannst. Meistens gibt es zwei Arten von Zusatzgebühren:

Feste
Prozentsatz

In diesem Abschnitt zeigen wir dir, wie du beide zu deiner Kasse hinzufügen kannst.

Füge eine feste Gebühr hinzu
Ein typisches Beispiel für eine feste Gebühr ist der Expressversand. Nehmen wir an, du möchtest eine feste Gebühr von 10 € für die Expresslieferung einfügen.

Verwende einfach das unten stehende Skript und bearbeite den Text für den Feldnamen. In diesem Beispiel nennen wir es „Extra Charge“ und fügen der Bestellung €10 hinzu.

add_action ( 'woocommerce_cart_calculate_fees' ,  function ()  { 
if  ( is_admin ()  &&  ! defined ( 'DOING_AJAX' ))  { 
return ; 
} 
WC ()-> cart -> add_fee ( __ ( 'Extra Charge' ,  'txtdomain' ),  10 ); 
});

Denke daran, dass dieser Code automatisch eine Pauschalgebühr von €10 zum Gesamtbetrag der Kundenbestellung während des Bestellvorgangs hinzufügt.

Eine prozentuale Gebühr hinzufügen
Eine weitere Alternative ist die Erhebung einer prozentualen Gebühr. Dies kann nützlich sein, wenn zusätzliche Steuern anfallen oder du zusätzliche Kosten für bestimmte Zahlungsgateways erheben möchtest.

Nehmen wir an, wir möchten eine Gebühr von 3 % auf den Gesamtpreis der Bestellung (Produkte + Versand) aufschlagen.

add_action ( 'woocommerce_cart_calculate_fees' ,  function ()  { 
if  ( is_admin ()  &&  ! defined ( 'DOING_AJAX' ))  { 
return ; 
} 
$percentage =  0.03 ; 
$percentage_fee =  ( WC ()-> cart -> get_cart_contents_total ()  + WC ()-> Warenkorb -> get_shipping_total ())  * $prozentsatz ; 
 WC ()-> Warenkorb-> add_fee ( __ ( 'Tax' ,  'txtdomain' ), $percentage_fee ); 
});

Dieses Skript fügt während des Bezahlvorgangs eine Gebühr von 3 % zur Gesamtbestellung des Käufers hinzu.

Entfernen des Checkout-Feldes

Du kannst den folgenden Code verwenden, um bestimmte Checkout-Felder aus der WooCommerce-Kasse zu entfernen. Es werden alle Kassenfelder entfernt. Achte also darauf, nur die Felder anzugeben, die du aus der Kasse entfernen möchtest.

Wenn du zum Beispiel nur das Feld billing_address_2 aus der Kasse entfernen möchtest, kannst du die anderen Rechnungsfelder aus dem unten stehenden Code löschen und das Feld billing_address_2 beibehalten. Auf diese Weise wird das Feld „billing_address_2“ aus der Kasse entfernt.

Behalte die Felder, die du entfernen möchtest, und lösche den Rest aus dem folgenden Code.

// Remove checkout fields
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {
 // remove billing fields
    unset($fields['billing']['billing_first_name']); // Billing First name
    unset($fields['billing']['billing_last_name']); // Billing Last name
    unset($fields['billing']['billing_company']); // Billing company
    unset($fields['billing']['billing_address_1']); // Billing Address 1
    unset($fields['billing']['billing_address_2']); // Billing Address 2
    unset($fields['billing']['billing_city']); // Billing city
    unset($fields['billing']['billing_postcode']); // Billing postcode
    unset($fields['billing']['billing_country']); // Billing country
    unset($fields['billing']['billing_state']); // Billing state
    unset($fields['billing']['billing_phone']); // Billing phone
    unset($fields['billing']['billing_email']); // Billing email
   
    // remove shipping fields 
    unset($fields['shipping']['shipping_first_name']); // Shipping first name  
    unset($fields['shipping']['shipping_last_name']); // Shipping last name  
    unset($fields['shipping']['shipping_company']); // Shipping company  
    unset($fields['shipping']['shipping_address_1']); // Shipping address 1
    unset($fields['shipping']['shipping_address_2']); // Shipping address 2
    unset($fields['shipping']['shipping_city']); // Shipping city 
    unset($fields['shipping']['shipping_postcode']); // Shipping postcode
    unset($fields['shipping']['shipping_country']); // Shipping country
    unset($fields['shipping']['shipping_state']); // Shipping state
    
    // remove order comment fields
    unset($fields['order']['order_comments']); // Order comments
     return $fields;
}

Hinweis: Das Feld Land ist obligatorisch. Wenn es entfernst, kannst du die Benutzer keine Bestellungen aufgeben, und auf deiner Kassenseite wird die Fehlermeldung „Bitte gib eine Adresse ein, um fortzufahren“ angezeigt.

Platzhalter und Beschriftungen ändern
Nachfolgend findest du den Code zum Ändern der Platzhalter und Bezeichnungen für die Kassenfelder. Du kannst die Beschriftung und den Platzhalter für jedes beliebige Kassenfeld ändern.

function custom_override_checkout_fields($fields)
 {
 $fields['billing']['billing_company']['placeholder'] = 'Business Name';
 $fields['billing']['billing_company']['label'] = 'Business Name';
 $fields['billing']['billing_first_name']['placeholder'] = 'First Name'; 
 $fields['shipping']['shipping_first_name']['placeholder'] = 'First Name';
 $fields['shipping']['shipping_last_name']['placeholder'] = 'Last Name';
 $fields['shipping']['shipping_company']['placeholder'] = 'Company Name'; 
 $fields['billing']['billing_last_name']['placeholder'] = 'Last Name';
 $fields['billing']['billing_email']['placeholder'] = 'Email Address ';
 $fields['billing']['billing_phone']['placeholder'] = 'Phone ';
 return $fields;
}
add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');

Bearbeite die WooCommerce-Kassenseite mit benutzerdefiniertem CSS

Schließlich kannst du auch die Kassenseite deines WooCommerce-Shops anpassen, indem du den CSS-Stil bearbeitest. Das bedeutet nicht, dass du Stunden damit verbringen musst, die gesamte Kassenseite neu zu gestalten.

Schon ein paar einfache Änderungen können dir helfen, die Kasse zu optimieren. Wenn du z. B. die Farben, Schriftarten, Ränder oder Umrandungen bearbeitest, kannst du die Konversionsraten erheblich verbessern.

Es gibt kein Patentrezept, das für jedes Unternehmen funktioniert, und du musst verschiedene Stile testen, aber die Anpassung einiger weniger Dinge kann dir helfen, deine Verkäufe zu steigern.

Checkout-Haken
Es gibt viele Checkout-Hooks, die du verwenden kannst, um die Checkout-Seite in WooCommerce zu bearbeiten. Hier sind einige der wichtigsten davon:

woocommerce_before_checkout_form
woocommerce_checkout_before_customer_details
woocommerce_checkout_billing
woocommerce_before_checkout_billing_form
woocommerce_checkout_shipping
woocommerce_before_order_notes
woocommerce_checkout_after_order_review
woocommerce_checkout_after_customer_details
woocommerce_review_order_before_cart_contents
woocommerce_review_order_before_shipping
woocommerce_review_order_after_order_total
woocommerce_checkout_order_review
woocommerce_review_order_before_submit
woocommerce_review_order_before_payment
woocommerce_review_order_after_submit
woocommerce_after_checkout_form

Erweiterungen für die WooCommerce-Kasse

Es gibt eine Vielzahl von Erweiterungen zur Anpassung der Kassenseite, hier sind nur einige davon.

Checkout auf einer Seite

Mit dieser Erweiterung kannst du ein Kassenformular auf der gleichen Seite wie dein Produkt platzieren, so dass der Bezahlvorgang in einem Schritt erfolgt.

Der normale Ablauf in WooCommerce ist: Gehe zu dem einzelnen Produkt, klicke auf „In den Warenkorb“, gehe zur Warenkorbseite und gehe dann zur Kasse. Mit der One-Page-Checkout-Funktion kannst du das ändern: zur Produktseite gehen => zur Kasse gehen.

Checkout-Add-Ons

Diese Erweiterung ermöglicht es dir, kostenpflichtige Dienstleistungen oder Produkte an der Kasse hinzuzufügen. Beispiele wären Geschenkverpackungen, Priority Boarding, Einrichtungsdienste und mehr.

Diese Erweiterung ermöglicht es Kunden, sich mit deinen sozialen Konten an der Kasse anzumelden, so dass sie nicht manuell ein neues Konto erstellen müssen.

Sie lässt sich mit den meisten großen sozialen Netzwerken wie Facebook, Twitter, Google und anderen integrieren.

FAQs zum Anpassen der WooCommerce-Kassenseite

Wenn du noch Fragen hast, die in diesem Artikel unbeantwortet geblieben sind, kannst du sie in diesem Abschnitt beantworten. Hier werden wir einige der am häufigsten gestellten Fragen zum Anpassen der WooCommerce-Kassenseite beantworten.

Was ist die WooCommerce-Kassenseite?
Die WooCommerce-Kassenseite ist die letzte Landing Page, auf der Kunden alle notwendigen Informationen wie Zahlungsinformationen, Rechnungsadresse, Promo-Code usw. angeben, um ein Produkt zu kaufen.

Was sollte eine WooCommerce-Kassenseite enthalten?
Die folgenden Abschnitte müssen auf der WooCommerce-Kassenseite zwingend enthalten sein.

1) Rechnungsdaten
2) Versandadresse
3) Zusammenfassung der Bestellung
4) Zahlungsarten
5) Link zum Registrierungsformular (nur für neue Benutzer)

Was ist die mehrseitige WooCommerce-Kaufabwicklung?
Die mehrseitige WooCommerce-Kaufabwicklung ist ein Verfahren, bei dem ein Käufer mehrere Seiten besuchen muss, um den Kauf abzuschließen.

Was ist die einseitige WooCommerce-Kaufabwicklung?
Bei der einseitigen WooCommerce-Kaufabwicklung müssen Käufer nicht mehrere Seiten besuchen, um einen Kauf abzuschließen.

Sie können alles auf einer Seite abschließen, um eine Bestellung online zu machen. Da es spart viel Zeit und gibt eine bessere Erfahrung, um die Käufer, eine Seite WooCommerce Kasse wurde so effektiv für die Umsetzung.

Wie kann man die Abbruchrate beim eCommerce-Einkaufswagen reduzieren?
Du kannst die eCommerce Einkaufswagen Abbruchrate auf folgende Weise zu reduzieren.

Biete eine Gast-Checkout-Option an.
Biete mehrere Lieferoptionen an.
Verlange keine unnötig hohen Preise.
Stelle sicher, dass die Rückgabe und Erstattung Optionen.
Biete eine kostenlose Versandoption an.
Sorge für einen 24/7-Kundendienst.
E-Mail-Kunden, um sie über den Warenkorb Artikel erinnern.

Was ist WooCommerce Gast Checkout?
In WooCommerce, Gast-Checkout Käufer einen Kauf aus dem Online-Shop ohne Anmeldung in ein Konto oder Speichern von Informationen (Benutzername, Passwort, Lieferadresse, etc.) in der Datenbank.

Es gibt viele, die nicht gerne ihre persönlichen Daten mit eCommerce-Sites zu teilen. WooCommerce Gast Checkout ist die beste Option für sie.

Abschließende Hinweise auf, wie man WooCommerce Checkout-Seite anpassen
Die Anpassung der WooCommerce-Kassenseite ist wichtig, um ein positives Einkaufserlebnis für die Käufer zu gewährleisten.

Dies ist die letzte Seite, auf der potenzielle Kunden landen, um ihre gewünschten Produkte zu kaufen. Also, halten diese einfach, einfach, und Blickfang ist ein Muss für den Erfolg eines jeden eCommerce-Geschäft.

In diesem Leitfaden haben wir erklärt, wie du die WooCommerce-Kassenseite am einfachsten anpassen kannst. Wenn du diese Tipps befolgst, kannst du jetzt hoffentlich eine Kassenseite für deinen WooCommerce-Shop erstellen, auch wenn du keine Erfahrung hast.