28 WooCommerce Checkout Hooks: Mehr als ein visueller Leitfaden

Eine der besten Funktionen von WooCommerce ist die Anpassung. Mithilfe von Hooks können Sie Inhalte auf den Produktseiten, der Warenkorbseite und der Checkout-Seite hinzufügen.

Diese Anleitung listet alle WooCommerce-Checkout-Hooks auf und wo Sie sie auf der Checkout-Seite platzieren können und wofür.

Lassen Sie uns einen kurzen Überblick über Hooks und ihre Typen geben und dann zu den Checkout-Page-Hooks springen.

Was sind Haken?

Mit Hooks in WordPress können Sie Code ändern oder hinzufügen, ohne die Kerndateien zu ändern.

Sie werden Haken genannt, weil sie wie ein echter Haken zum Halten von Gegenständen funktionieren. In der E-Commerce-Welt haben Hooks zusätzliche Programme abgehalten.

Um das Kundenerlebnis zu verbessern, verwenden Ladenbesitzer und Entwickler diese Hooks. Hier fügen sie Absätze, Produktbeschreibungen, Symbole, Bilder, Logos und Texte hinzu.

Die zwei Hauptarten von Haken

Obwohl es viele WordPress-Hooks gibt, kannst du sie in zwei Typen einteilen:

1. Aktionshaken
2. Filterhaken

Aktionshaken

Mit Aktionshaken können Sie überall auf Ihrer Website zusätzliche Funktionen hinzufügen. Dieser Hook kann verwendet werden, um zusätzliche Widgets, Menüs oder sogar eine Nachricht hinzuzufügen.

Dies ist ein Beispiel für einen Action-Hook:

add_action( 'woocommerce_before_checkout_billing_form', 'storeapps_before_checkout_billing_form' );
Funktion storeapps_before_checkout_billing_form() {
   // Fügen Sie hier Ihren Code hinzu
}

Woocommerce_before_checkout_billing_form ist der Haken und storeapps_callback_function ist die Funktion, die wir erstellen, um unsere benutzerdefinierten Skripte hinzuzufügen.

Filterhaken

Mit Filter-Hooks können Sie eine vorhandene Funktion ändern. In diesen Hooks fügen Sie nichts Neues hinzu, sondern ändern oder filtern nur die Daten.

Zum Beispiel:

add_filter( 'woocommerce_breadcrumb_defaults', 'storeapps_change_breadcrumb' );
Funktion storeapps_change_breadcrumb( $content ) {
   $content .= "StoreApps";
   gib $inhalt zurück;
}

Ein weiteres Beispiel könnten die Schaltflächen „Zum Warenkorb hinzufügen“ Ihres gesamten Shops sein, die sich mit einem Filter ändern.

Warum Hooks in WooCommerce verwenden?

Es gibt fast keine Möglichkeit, diese Hooks zu ignorieren und nicht zu verwenden, sobald Sie sehen, was sie können. Alles in Ihrem Shop ist anpassbar, sodass Sie mit diesen Hooks einen beliebigen WooCommerce-Shop erstellen können.

Sie müssen sich über diese Folgen keine Gedanken machen, wenn Sie Hooks verwenden. Das Ändern von Designs wirkt sich nicht auf die Änderungen aus. Es ist also besser, bei Haken zu bleiben, um alle Kopfschmerzen und Risiken zu vermeiden.

Da die Kasse die wichtigste Seite für jedes Geschäft ist, schauen wir uns die Checkout-Seiten-Hooks von WooCommerce an.

Alle Checkout-Hooks von WooCommerce

1. woocommerce_before_checkout_form
2. woocommerce_checkout_before_customer_details
3. woocommerce_checkout_billing
4. woocommerce_before_checkout_billing_form
5. woocommerce_after_checkout_billing_form
6. woocommerce_before_checkout_registration_form
7. woocommerce_after_checkout_registration_form
8. woocommerce_checkout_shipping
9. woocommerce_before_checkout_shipping_form
10. woocommerce_after_checkout_shipping_form
11. woocommerce_before_order_notes
12. woocommerce_after_order_notes
13. woocommerce_checkout_after_customer_details
14. woocommerce_checkout_before_order_review_heading
15. woocommerce_checkout_order_review
16. woocommerce_checkout_before_order_review
17. woocommerce_review_order_before_cart_contents
18. woocommerce_review_order_after_cart_contents
19. woocommerce_review_order_before_shipping
20. woocommerce_review_order_after_shipping
21. woocommerce_review_order_before_order_total
22. woocommerce_review_order_after_order_total
23. woocommerce_review_order_before_payment
24. woocommerce_review_order_before_submit
25. woocommerce_review_order_after_submit
26. woocommerce_review_order_after_payment
27. woocommerce_checkout_after_order_review
28. woocommerce_after_checkout_for

Schauen wir uns jeden Haken im Detail an, wo er platziert ist und wie Sie ihn hinzufügen können.

1. woocommerce_before_checkout_form
Der Hook wird vor dem Checkout-Formular definiert. Es wird über dem Coupon-Feld auf der Checkout-Seite platziert.

add_action( 'woocommerce_before_checkout_form', 'storeapps_before_checkout_form', 10 );
Funktion storeapps_before_checkout_form() {
	echo '<h2>woocommerce_before_checkout_form</h2>';
}

2. woocommerce_checkout_before_customer_details
Der Haken wird im Checkout-Formular kurz vor den Kundendaten definiert.

add_action( 'woocommerce_checkout_before_customer_details', 'storeapps_checkout_before_customer_details', 10 );
Funktion storeapps_checkout_before_customer_details() {
	echo '<h2>woocommerce_checkout_before_customer_details</h2>';
}

3. woocommerce_checkout_billing
Dies ist ein neuer Haken, der der Checkout-Seite hinzugefügt wurde. Die Rechnungsformularvorlage auf der Checkout-Seite wird über diesen Hook eingebunden.

add_action('woocommerce_checkout_billing', 'storeapps_checkout_billing');
Funktion storeapps_checkout_billing() {
    echo '<h2>woocommerce_checkout_billing</h2>';
}

4. woocommerce_before_checkout_billing_form
Der Haken wird vor dem Beginn des Abrechnungsformulars definiert.

add_action( 'woocommerce_before_checkout_billing_form', 'storeapps_before_checkout_billing_form', 10 );
Funktion storeapps_before_checkout_billing_form() {
	echo '<h2>woocommerce_before_checkout_billing_form</h2>';
}

5. woocommerce_after_checkout_billing_form
Der Haken wird nach dem Ausfüllen des Abrechnungsformulars definiert.

add_action( 'woocommerce_after_checkout_billing_form', 'storeapps_after_checkout_billing_form', 10 );
Funktion storeapps_after_checkout_billing_form() {
	echo '<h2>woocommerce_after_checkout_billing_form</h2>';
}

6. woocommerce_before_checkout_registration_form
Der Haken wird in der Abrechnungsformularvorlage nach dem Kontoerstellungsformular definiert. Dies wird für die Gastbenutzer ausgeführt.

add_action('woocommerce_before_checkout_registration_form', 'storeapps_before_checkout_registration');
Funktion storeapps_before_checkout_registration_form() {
    echo '<h2>woocommerce_before_checkout_registration_form</h2>';
}

7. woocommerce_after_checkout_registration_form
Dieser Haken ist in der Abrechnungsformularvorlage definiert. Dies wird für die Gastbenutzer ausgeführt.

add_action('woocommerce_after_checkout_registration_form', 'storeapps_after_checkout_registration_form');
Funktion storeapps_after_checkout_registration_form() {
    echo '<h2>woocommerce_after_checkout_registration_form_form</h2>';
}

8. woocommerce_checkout_shipping
Dieser Haken wird in der Versandformularvorlage vor dem Versandformular definiert.

add_action('woocommerce_checkout_shipping', 'storeapps_checkout_shipping');
Funktion storeapps_checkout_shipping() {
    echo '<h2>woocommerce_checkout_shipping</h2>';
}

9. woocommerce_before_checkout_shipping_form
Dieser Haken wird kurz vor Beginn des Versandformulars definiert.

add_action( 'woocommerce_before_checkout_shipping_form', 'storeapps_before_checkout_shipping_form', 10 );
Funktion storeapps_before_checkout_shipping_form() {
	echo '<h2>woocommerce_before_checkout_shipping_form</h2>';
}

10. woocommerce_after_checkout_shipping_form
Dieser Haken wird nach dem Ausfüllen des Versandformulars definiert.

add_action( 'woocommerce_after_checkout_shipping_form', 'storeapps_after_checkout_shipping_form', 10 );
Funktion storeapps_after_checkout_shipping_form() {
	echo '<h2>woocommerce_after_checkout_shipping_form</h2>';
}

11. woocommerce_before_order_notes
Dieser Haken wird vor dem Bestellanmerkungsfeld auf der Checkout-Seite definiert.

add_action( 'woocommerce_before_order_notes', 'storeapps_before_order_notes', 10 );
Funktion storeapps_before_order_notes() {
	echo '<h2>woocommerce_before_order_notes</h2>';
}

12. woocommerce_after_order_notes
Dieser Haken wird nach dem Bestellanmerkungsfeld auf der Checkout-Seite definiert.

add_action( 'woocommerce_after_order_notes', 'storeapps_after_order_notes', 10 );
Funktion storeapps_after_order_notes() {
	echo '<h2>woocommerce_after_order_notes</h2>';
}

13. woocommerce_checkout_after_customer_details
Der Haken wird nach dem Ausfüllen der Kundendaten gesetzt, dh nach den Rechnungs- und Versandfeldern.

add_action( 'woocommerce_checkout_after_customer_details', 'storeapps_checkout_after_customer_details', 10 );
Funktion storeapps_checkout_after_customer_details() {
	echo '<h2>woocommerce_checkout_after_customer_details</h2>';
}

14. woocommerce_checkout_before_order_review_heading
Dieser Haken wird in der Checkout-Vorlage vor der Überschrift der Bestellübersicht definiert, dh „Ihre Bestellung“. Dieser Hook wurde in WooCommerce v3.6.0 hinzugefügt.

add_action('woocommerce_checkout_before_order_review_heading', 'storeapps_checkout_before_order_review_heading');
Funktion storeapps_checkout_before_order_review_heading() {
    echo '<h2>woocommerce_checkout_before_order_review_heading</h2>';
}

15. woocommerce_checkout_order_review
Der Hook ist in der Haupt-Checkout-Vorlage definiert. Die Vorlage für die Bestellübersichtstabelle wird mit diesem Hook eingebunden.

add_action('woocommerce_checkout_order_review', 'storeapps_checkout_order_review');
Funktion storeapps_checkout_order_review() {
    echo '<h2>woocommerce_checkout_order_review</h2>';
}

16. woocommerce_checkout_before_order_review
Dieser Haken wird vor den Bestelldetails auf der Checkout-Seite definiert.

add_action( 'woocommerce_checkout_before_order_review', 'storeapps_checkout_before_order_review', 10 );
Funktion storeapps_checkout_before_order_review() {
	echo '<h2>woocommerce_checkout_before_order_review</h2>';
}

17. woocommerce_review_order_before_cart_contents
Dieser Haken wird innerhalb des Auftragstabellenkörpers vor dem Inhalt definiert.

add_action( 'woocommerce_review_order_before_cart_contents', 'storeapps_review_order_before_cart_contents', 10 );
Funktion storeapps_review_order_before_cart_contents() {
	echo '<h2>woocommerce_review_order_before_cart_contents</h2>';
}

18. woocommerce_review_order_after_cart_contents
Dieser Haken wird nach allen Inhalten im Körper der Auftragstabelle definiert.

add_action( 'woocommerce_review_order_after_cart_contents', 'storeapps_review_order_after_cart_contents', 10 );
Funktion storeapps_review_order_after_cart_contents() {
	echo '<h2>woocommerce_review_order_after_cart_contents</h2>';
}

19. woocommerce_review_order_before_shipping
Dieser Haken wird in der Bestelltabelle vor dem Versandabschnitt definiert.

add_action( 'woocommerce_review_order_before_shipping', 'storeapps_review_order_before_shipping', 10 );
Funktion storeapps_review_order_before_shipping() {
	echo '<h2>woocommerce_review_order_before_shipping</h2>';
}

20. woocommerce_review_order_after_shipping
Dieser Haken wird nach dem Versandabschnitt in der Bestelldetailtabelle definiert.

add_action( 'woocommerce_review_order_after_shipping', 'storeapps_review_order_after_shipping', 10 );
Funktion storeapps_review_order_after_shipping() {
	echo '<h2>woocommerce_review_order_after_shipping</h2>';
}

21. woocommerce_review_order_before_order_total
Dieser Haken wird vor dem Gesamtabschnitt und nach dem Versandabschnitt in der Bestelldetailtabelle definiert.

add_action( 'woocommerce_review_order_before_order_total', 'storeapps_review_order_before_order_total', 10 );
Funktion storeapps_review_order_before_order_total() {
	echo '<h2>woocommerce_review_order_before_order_total</h2>';
}

22. woocommerce_review_order_after_order_total
Dieser Haken wird nach dem Gesamtabschnitt & in der Auftragsdetailstabelle definiert.

add_action( 'woocommerce_review_order_after_order_total', 'storeapps_review_order_after_order_total', 10 );
Funktion storeapps_review_order_after_order_total() {
	echo '<h2>woocommerce_review_order_after_order_total</h2>';
}

23. woocommerce_review_order_before_payment
Dieser Haken wird vor dem Abschnitt Zahlungsmethoden auf der Checkout-Seite definiert.

add_action( 'woocommerce_review_order_before_payment', 'storeapps_review_order_before_payment', 10 );
Funktion storeapps_review_order_before_payment() {
	echo '<h2>woocommerce_review_order_before_payment</h2>';
}

24. woocommerce_review_order_before_submit
Dieser Haken wird vor der Schaltfläche „Bestellung aufgeben“ auf der Checkout-Seite definiert.

add_action( 'woocommerce_review_order_before_submit', 'storeapps_review_order_before_submit', 10 );
Funktion storeapps_review_order_before_submit() {
	echo '<h2>woocommerce_review_order_before_submit</h2>';
}

25. woocommerce_review_order_after_submit
Dieser Haken wird nach der Schaltfläche „Bestellung aufgeben“ auf der Checkout-Seite definiert.

add_action( 'woocommerce_review_order_after_submit', 'storeapps_review_order_after_submit', 10 );
Funktion storeapps_review_order_after_submit() {
	echo '<h2>woocommerce_review_order_after_submit</h2>';
}

26. woocommerce_review_order_after_payment
Dieser Haken wird nach dem gesamten Zahlungsabschnitt einschließlich der Schaltfläche „Bestellung aufgeben“ definiert.

add_action( 'woocommerce_review_order_after_payment', 'storeapps_review_order_after_payment', 10 );
Funktion storeapps_review_order_after_payment() {
	echo '<h2>woocommerce_review_order_after_payment</h2>';
}

27. woocommerce_checkout_after_order_review
Dieser Haken wird nach dem Bestellüberprüfungsabschnitt auf der Checkout-Seite definiert, der die Bestelldetailstabelle und den Zahlungsabschnitt enthält.

add_action( 'woocommerce_checkout_after_order_review', 'storeapps_checkout_after_order_review', 10 );
Funktion storeapps_checkout_after_order_review() {
	echo '<h2>woocommerce_checkout_after_order_review</h2>';
}

28. woocommerce_after_checkout_form
Dieser Haken wird am Ende des Checkout-Formulars definiert.

add_action( 'woocommerce_after_checkout_form', 'storeapps_after_checkout_form', 10 );
Funktion storeapps_after_checkout_form() {
	echo '<h2>woocommerce_after_checkout_form</h2>';
}

Entfernen der Standardaktionen auf der Checkout-Seite

Standardmäßig werden nur einige der Hooks von WooCommerce verwendet, um Folgendes hinzuzufügen:

• Login-Formular vor Checkout-Formular (woocommerce_checkout_login_form)
• Gutscheinformular vor dem Checkout-Formular (woocommerce_checkout_coupon_form)
• Bestellübersichtstabelle zum Bestellübersichtsbereich (woocommerce_order_review)
• Zahlungstabelle auch zum Bestellüberprüfungsbereich (woocommerce_checkout_payment)

Dieser Code kann wie unten gezeigt einfach entfernt werden. Sie können sich auch auf dieses Dokument zum sicheren Hinzufügen von WordPress-Code-Snippets beziehen.

/**
 * Entfernen Sie die standardmäßigen Checkout-Hooks von WooCommerce
 */
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
remove_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );

Benutzerdefinierter Checkout-Feldeditor in WooCommerce

Die obigen Beispiele zeigen, wie man einige Texte mit einfachen Codeschnipseln zur WooCommerce-Checkout-Seite hinzufügt.

Aber was ist mit benutzerdefinierten Checkout-Feldern? Eine benutzerdefinierte Codierung würde viel mehr Arbeit erfordern.

Aber mit Hilfe von Cashier können Sie WooCommerce-Kernfelder bearbeiten/hinzufügen/entfernen und auch benutzerdefinierte Felder für den Abschnitt Versand, Rechnungsstellung und zusätzliche Felder hinzufügen.

Einpacken

Ich hoffe, dieser Leitfaden hat Ihnen dabei geholfen, alle wichtigen Checkout-Hooks von WooCommerce abzudecken.

Verwenden Sie sie, um die Checkout-Seite Ihres Online-Shops zu verbessern. Das Fazit ist, dass eine Checkout-Seite wie ein Tor zu Ihren Kunden ist und diese Hooks die allgemeine Benutzererfahrung Ihres Shops verbessern können, wenn sie mit Bedacht eingesetzt werden.

Und für mehr Checkout-Optimierung stehen WooCommerce-Checkout-Plugins immer zur Verfügung.