So verwenden Sie WooCommerce-Checkout-Hooks

In dieser Anleitung erfahren Sie, wie Sie Checkout-Hooks in WooCommerce verwenden . Wir werden uns einige der wichtigsten Haken ansehen und Ihnen einige Beispiele dafür geben, was Sie damit machen können. Machen Sie sich also bereit, Ihre Checkout-Seite anzupassen und Ihre Konversionsraten zu steigern.

Was sind WooCommerce-Hooks?

Hooks sind leistungsstarke Funktionen, mit denen Sie Code ändern oder hinzufügen können, ohne Kerndateien ändern zu müssen. Hooks bieten viel Flexibilität und Entwickler verwenden sie, um die Standardfunktionen von WooCommerce zu ändern.

Es gibt zwei verschiedene Arten von Haken:

• Mit Aktionshaken können Sie benutzerdefinierten Code hinzufügen, um bestimmte Aktionen auszuführen, wenn ein Ereignis eintritt.
• Filter-Hooks ändern das Verhalten einer vorhandenen Variablen oder Funktion.

Dank WooCommerce-Hooks können Entwickler auf sehr praktische und flexible Weise hochgradig individuelle Lösungen erstellen. Einige der wichtigsten Hooks in WooCommerce sind die Checkout-Hooks. Und wenn Sie einen Online-Shop haben, müssen Sie diesen verwenden, um den Checkout anzupassen und Ihre Konversionsraten zu verbessern.

WooCommerce-Checkout-Hooks

Checkout-Hooks sind nur eine Art der mehreren Hooks, die WooCommerce unterstützt, und sie laufen auf der Checkout-Seite. Sie können diese Checkout-Hooks verwenden, um Notizen zu bearbeiten, Inhalte vor den Rechnungsfeldern, vor der Bestellüberprüfung oder nach dem Checkout-Formular hinzuzufügen, eine Logik anzuwenden, um den Preis zu erhöhen oder Benutzer nach Rolle einzuschränken, und vieles mehr.

WooCommerce-Hooks funktionieren genau wie native WordPress-Hooks. Wenn Sie also mit WordPress-Hooks vertraut sind, wird das Beherrschen von WooCommerce-Hooks einfach sein.

Bevor wir anfangen

Bevor Sie zu den Haken springen, empfehlen wir Ihnen, ein untergeordnetes Thema zu erstellen. Es gibt viele Tools, die Sie verwenden können. Sie können sich unsere Liste der besten Child-Theme-Plugins für WordPress oder unsere detaillierte Anleitung zum Erstellen eines Child-Themes mit einem Plugin oder manuell ansehen.

Wenn Sie zum ersten Mal mit Hooks arbeiten, können Sie diese Skripte einfach kopieren und direkt in die Datei functions.php Ihres Child Themes einfügen. Am Ende des Beitrags finden Sie einige Beispiele für Dinge, die Sie mit Checkout-Hooks machen können, um Ihnen einige Ideen zu geben.

Wie verwendet man WooCommerce Checkout Hooks?

Wie wir zuvor gesehen haben, gibt es WooCommerce-Action-Hooks und Filter-Hooks und beide haben eine ähnliche Syntax.

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

 add_action('woocommerce_after_checkout_billing_form','QuadLayers_callback_function');
Funktion QuadLayers_callback_function(){
    # Fügen Sie hier Ihren Code hinzu
}

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

Filter-Hooks hingegen funktionieren auf die gleiche Weise, müssen jedoch einen Parameter in der Funktion empfangen und zurückgeben. Beispielsweise:

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

Liste der Checkout-Hooks für WooCommerce

Es gibt viele WooCommerce-Hooks, die Sie auf der Checkout-Seite verwenden können. Einige der wichtigsten sind:

• 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_after_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_review_order_after_payment
• woocommerce_after_checkout_form

Alle haben selbsterklärende Namen. Wenn Sie sich die vollständige Liste der WooCoommerce-Hooks ansehen möchten, lesen Sie diese Dokumentation. Und um zu sehen, wie jeder Haken funktioniert, schau dir diesen Beitrag an.

Angenommen, Sie möchten nach dem Rechnungsformular und vor dem Titel des Versandabschnitts Inhalte hinzufügen. Sie würden so etwas verwenden:

 add_action('woocommerce_after_checkout_billing_form','QuadLayers_callback_function');
Funktion QuadLayers_callback_function(){
echo 'hier kommt der Inhaltstext oder HTML';
}

In diesem Fall fügen wir nur etwas Text hinzu, aber Sie können komplexe HTML-Strukturen hinzufügen und Ihre benutzerdefinierte Logik mit PHP-Funktionen erstellen. Schauen wir uns einige Beispiele an, um Ihnen einige Ideen zu geben, wie Sie die Checkout-Hooks von WooCommerce optimal nutzen können.

So passen Sie die Checkout-Seite mit WooCommerce-Hooks an

Hier zeigen wir Ihnen einige Beispiele dafür, was Sie tun können, um die Checkout-Seite mit WooCommerce-Hooks auf Ihrer Website anzupassen.

Fügen Sie der Bestellübersicht ein Bild hinzu

Sie können der Bestellübersichtsseite ein Bild hinzufügen. In diesem Fall haben wir einen QR-Code hinzugefügt, aber Sie können andere Bilder, ein animiertes GIF oder Hintergrundbilder einfügen.

 add_action('woocommerce_review_order_before_payment','example_callback');
Funktion example_callback( ) {
    echo '<img src="https://quadlayers.com/wp-content/uploads/2020/06/frame.png" width="200px" height="200px">';  
} 

Ändern Sie die Breadcrumbs auf der Checkout-Seite

Sie können verhindern, dass Benutzer zurück zur Startseite navigieren, indem Sie die Breadcrumbs bearbeiten. In diesem Beispiel zeigen wir Ihnen, wie Sie den Home -Text im Breadcrumb für Store ändern.

 add_filter( 'woocommerce_breadcrumb_defaults', 'quadlayers_change_breadcrumb' );
Funktion 'quadlayers_change_breadcrumb'( $default ) {
    $default['home'] = 'Store';
    $Standard zurückgeben;
}

Zeigen Sie Vertrauensabzeichen neben der Schaltfläche „Bestellung aufgeben“ an

Die Checkout-Hooks von WooCommerce bieten einige großartige Optionen, um Vertrauen aufzubauen und den Kunden Sicherheit zu geben, wenn sie kurz vor dem Kauf stehen. Indem Sie Vertrauensabzeichen direkt neben der Schaltfläche „ Bestellung aufgeben“ anzeigen, können Sie Ihre Konversionsraten verbessern und Vertrauen in Ihre Marke aufbauen.

 add_action( 'woocommerce_review_order_after_submit', 'quadlayers_trust_badges' );
Funktion quadlayers_trust_badges() {
    echo '<div class="trust-badges">
    <img src="https://www.pngitem.com/pimgs/m/19-197703_transparent-secure-checkout-png-best-trust-badges-for.png">
    </div><div class="trust-badge-message"><i>Ich habe die Vertrauensabzeichen oben mit einem WooCommerce-Hook hinzugefügt</i></div>';
} 

Bestehende Checkout-Felder bearbeiten

Die beste Möglichkeit, die Checkout-Seite vollständig anzupassen, besteht darin, Beschriftungen und die Platzhalter von Feldern zu bearbeiten. In diesem Beispiel bearbeiten wir das Label für Vorname und Platzhalter des Bestellscheins mit dem Hook woocommerce_checkout_fields .

 add_filter( 'woocommerce_checkout_fields' , 'quadlayers_labels_placeholders', 9999 ); 
Funktion quadlayers_labels_placeholders( $f ) { 	
	$f['billing']['billing_first_name']['label'] = 'Wie heißt du?';
	$f['order']['order_comments']['placeholder'] = 'Woran denken Sie gerade?'; 
	gib $f zurück; 
} 

Fügen Sie ein benutzerdefiniertes Checkout-Feld hinzu

Zum Schluss noch ein komplexeres Beispiel. Wir zeigen Ihnen, wie Sie ein neues benutzerdefiniertes Feld erstellen, mit dem Kunden Ihren Newsletter an der Kasse abonnieren können. Dafür verwenden wir zwei Hooks: einen, um das Feld zum Abonnieren anzuzeigen, und einen anderen, um den Status der Schaltfläche in der Datenbank zu speichern (ob sie aktiviert war oder nicht).

 add_action( 'woocommerce_after_order_notes', 'quadlayers_subscribe_checkout' );
add_action( 'woocommerce_checkout_update_order_meta', 'quadlayers_save_function' );

// Kontrollkästchen in der Woocommerce-Kasse einfügen 
Funktion quadlayers_subscribe_checkout( $checkout ) { 
	woocommerce_form_field( 'abonniert', array(
		'Typ' => 'Kontrollkästchen',
		'class' => array('misha-field form-row-wide'),
		'label' => 'Abonnieren Sie unseren Newsletter.',
		), $checkout->get_value( 'abonniert' ) ); 
}
// Feldwert speichern
Funktion quadlayers_save_function( $order_id ){ 
	if( !empty( $_POST['contactmethod'] ) )
		update_post_meta( $order_id, 'contactmethod', sanitize_text_field( $_POST['contactmethod'] ) ); 
	if( !empty( $_POST['abonniert'] ) && $_POST['abonniert'] == 1 )
		update_post_meta( $order_id, 'abonniert', 1 ); 
}

Passen Sie die Checkout-Seite mit Plugins an

Wenn Sie mit Hooks nicht vertraut sind, können Sie Ihre Checkout-Seite auch mit Plugins anpassen. Es gibt viele Tools, aber wir empfehlen diese beiden:

• Checkout Manager für WooCommerce : Mit mehr als 70.000 aktiven Installationen ist dies eines der beliebtesten Checkout-Plugins für WooCommerce. Mit Checkout Manager können Sie Felder auf der Checkout-Seite anpassen, hinzufügen, bearbeiten und löschen. Es hat eine kostenlose Version und 3 Premium-Pläne, die bei 20 USD beginnen.
• Direct Checkout für WooCommerce : Mit diesem Freemium-Tool können Sie den Checkout-Prozess vereinfachen und Ihre Konversionsraten steigern. Sie können den Kaufprozess verkürzen, indem Sie Ihre Kunden von der Produktseite direkt zur Kasse weiterleiten. Direct Checkout hat eine kostenlose Version und Premium-Pläne, die bei 20 USD (einmalige Zahlung) beginnen.

Weitere Informationen zur Verwendung dieser Plugins und zur Verbesserung der Checkout-Seite finden Sie in unserer ausführlichen Anleitung.

Fazit

Alles in allem können Sie mit WooCommerce-Hooks Ihre Checkout-Seite anpassen und die Conversion-Raten erhöhen. Hier haben wir Ihnen einige Beispiele gezeigt, wie Sie diese Hooks verwenden können, um verschiedene Bereiche Ihres Checkouts zu personalisieren. Sie können jedoch noch viel mehr tun! Wir ermutigen Sie also, mit ihnen herumzuspielen und Ihrer Kreativität freien Lauf zu lassen.

Weitere Beispiele und Informationen zum Anpassen der Checkout-Seite von WooCommerce finden Sie in dieser Schritt-für-Schritt-Anleitung.

Lassen Sie uns im Kommentarbereich unten wissen, wenn Sie Fragen haben. Und wenn Ihnen das Lesen gefallen hat, teilen Sie diesen Beitrag bitte in den sozialen Medien!