WooCommerce: So passen Sie den Checkout für Conversions an

Veröffentlicht: 2020-06-06

Ich hatte die Ehre, auf der WCEU 2020 zu sprechen, dank WooCommerce, die mich in ihrem Sponsor-Track aufgenommen haben. Es war ein kurzer und süßer Blitzvortrag am ersten Tag (Freitag) mit dem Titel „ Customizing The WooCommerce Checkout To Improve Conversions “, gefolgt von einer Live-Codierungssitzung am Samstag.

Hier ist die Videoaufzeichnung des Lightning Talks sowie ein paar PHP- und CSS-Snippets, die Sie kopieren/einfügen können , um Ihren WooCommerce-Checkout zu verbessern und sofort eine Steigerung der Conversion-Rate zu erwarten. Also, genieße das Video und teste dann die Snippets, die du unten findest!

Video: Anpassen der WooCommerce-Kaufabwicklung zur Verbesserung der Conversions

Der WooCommerce Checkout ist die wichtigste Seite Ihrer Website. Das heißt, Sie müssen es optimieren.

In dieser Präsentation schaue ich mir erfolgreiche E-Commerce-B2C-Websites an und sehe, was sie tun. Vielleicht können wir Trends und Schwächen erkennen und daran arbeiten.

Bitte beachten Sie, dass Untertitel verfügbar sind. Klicken Sie einfach auf die Schaltfläche „CC“ unten rechts im Videoplayer.

10 PHP- und CSS-Snippets zur Optimierung der WooCommerce-Checkout-Conversion-Rate

In der Folgesitzung teilte ich meinen Bildschirm und begann live zu programmieren, was wir während des Blitzgesprächs gelernt hatten. Zusammenfassend haben wir beschlossen, in folgenden Punkten Maßnahmen zu ergreifen:

  1. Entfernen Sie Kopfzeile, Seitenleiste und Fußzeile, damit es keine Ablenkungen gibt und sich der Kunde voll und ganz auf den einzigen verbleibenden Call-to-Action konzentrieren kann – den „PAY“-Button
  2. Verschieben Sie die Bestellübersicht, den Versand und die Auswahl der Zahlungsmethode auf die rechte Seite, damit sie immer sichtbar sind
  3. Teilen Sie das lange Layout aus Rechnung, Versand, Bestellnotizen, Gutscheinformular etc. in visuelle Schritte auf
  4. Coupon-Formular nach unten verschieben, um Coupon-Betrug zu vermeiden
  5. Lassen Sie das Versandformular immer „offen“, da dies der wichtigste Abschnitt für B2C ist
  6. Verschieben Sie das Rechnungsformular unter das Versandformular
  7. Entfernen Sie unnötige Rechnungs-/Versandfelder; Je mehr Felder, desto niedriger Ihre Conversion-Rate!
  8. Heben Sie die Auswahl der Versandart stärker hervor, da das Standardlayout ziemlich schlecht ist
  9. Fügen Sie einen Link „Warenkorb bearbeiten“ hinzu, damit Benutzer zur Seite „Warenkorb“ zurückkehren und ihre Bestellung bearbeiten können
  10. Fügen Sie Sicherheitsabzeichen / Telefon / FAQs hinzu, damit der Kunde Ihrem Online-Geschäft vertrauen kann

Aber bevor wir codieren, werfen wir einen Blick auf den Tools-Stack.

Thema : Ich habe das offizielle WooCommerce-Thema Storefront verwendet. Dies beinhaltet bereits einige eingebaute CSS-Anpassungen für den Checkout. Ein weiterer Favorit von mir hätte Shoptimizer sein können, ein Theme, das für WooCommerce-Geschwindigkeit und Conversions entwickelt wurde. Da es in einem der Snippets darum geht, Kopf- und Fußzeilen von der Checkout-Seite zu entfernen, habe ich daher meine visuelle Hook-Anleitung für das Storefront-Thema verwendet, damit ich weiß, welche Hooks verwendet werden müssen.

Hooks : Zusätzlich zur Verwendung meines visuellen Hook-Leitfadens für Storefront müssen wir auch alle WooCommerce Checkout-Hooks kennen. Mein WooCommerce Visual Hook Guide für die Checkout-Seite ist perfekt für das, was wir brauchen.

Docs : WooCommerce hat ein nettes Dokument, das erklärt, wie man Checkout-Felder anpasst. In einem der Snippets werden wir einige der Rechnungs-/Versandfelder entfernen, daher ist dies eine unbedingt zu beachtende Referenz.

1. PHP-Snippet: Kopf-, Seitenleiste und Fußzeile auf der WooCommerce-Checkout-Seite entfernen

Dieses Snippet gilt nur für das Storefront-Design . Sie müssen den Code für Ihr benutzerdefiniertes Design anpassen. 

/**
 * @snippet       Storefront Theme Remove Header Footer @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'wp', 'bbloomer_unhook_storefront_functions' );

function bbloomer_unhook_storefront_functions() {
	if ( is_checkout() ) {
		remove_all_actions( 'storefront_header' );
		remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
		remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
		remove_action( 'storefront_footer', 'storefront_footer_widgets', 10 );
	}
}

Wenn Sie in Storefront die Seitenleiste mit dem obigen Aufruf remove_action entfernen, passt sich das Layout nicht automatisch an die volle Breite an. Die Seitenleiste wird verschwinden, aber ihr „Leerzeichen“ bleibt dort und schiebt das Checkout-Formular nach links.

Das heißt, wir brauchen auch ein bisschen CSS, um das zu beheben: 

@media (min-width: 768px) {
	.woocommerce-checkout.right-sidebar .content-area {
		width: 100%;
		float: none;
		margin-right: 0;
	}
}

Benötigen Sie einen visuellen Beweis? Klicken Sie hier, um die „Vorher“- und „Nachher“-Screenshots zur Anpassung der WooCommerce-Checkout-Seite anzuzeigen.

2. CSS-Snippet: Bestellübersicht nach oben rechts auf die WooCommerce-Checkout-Seite verschieben

Das Storefront-Theme macht das bereits out of the box! Es scheint also, dass sie auch E-Commerce-Trends studiert und entschieden haben, dass dies die richtige Wahl war.

Natürlich machen das die meisten Themes nicht standardmäßig. Als Inspiration können Sie versuchen, das CSS von Storefront zu kopieren (möglicherweise müssen Sie einige Selektoren ändern): 

@media (min-width: 768px) {

	/* Billing & Shipping @ Left */

	.col2-set {
		width: 52.9411764706%;
		float: left;
		margin-right: 5.8823529412%;
	}

	/* Order Review @ Right */

	#order_review_heading, #order_review {
		width: 41.1764705882%;
		float: right;
		margin-right: 0;
		clear: right;
	}

}

Nun möchte ich auch die ganze Bestellübersicht „sticky“ machen. Das heißt, sobald ein Benutzer nach unten scrollt, um beispielsweise Checkout-Felder auszufüllen, sollte das Feld „Bestellüberprüfung“ (jetzt oben rechts) sichtbar und „fixiert“ am oberen Rand des Browsers bleiben.

Ich habe das folgende CSS ausprobiert, aber leider scheint es nicht zu funktionieren (Storefront-Thema). Kannst du vielleicht helfen? 

#order_review {
    position: sticky;
    top: 0;
}

Benötigen Sie einen visuellen Beweis? Klicken Sie hier, um die „Vorher“- und „Nachher“-Screenshots zur Anpassung der WooCommerce-Checkout-Seite anzuzeigen.

3. PHP-Snippet: Verschieben Sie das Coupon-Formular nach unten auf der WooCommerce-Checkout-Seite

Wir können dafür den Visual Hook Guide für den Checkout verwenden. Zuerst entfernen wir es, dann lesen wir es ganz unten. 

/**
 * @snippet       Move Coupon @ Checkout Bottom
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

Benötigen Sie einen visuellen Beweis? Klicken Sie hier, um die „Vorher“- und „Nachher“-Screenshots zur Anpassung der WooCommerce-Checkout-Seite anzuzeigen.

4. PHP-Snippet: Lassen Sie das Versandformular immer „offen“ @ WooCommerce Checkout Page

Wenn Sie sich zum Glück die Vorlagendatei form-shipping.php ansehen, gibt uns WooCommerce hier einen Filter: 

apply_filters( 'woocommerce_ship_to_different_address_checked', 'shipping' === get_option( 'woocommerce_ship_to_destination' ) ? 1 : 0 )

Das bedeutet, dass ich jetzt ein einfaches PHP-Snippet codieren kann, um dieses Verhalten zu überschreiben: 

/**
 * @snippet       Shipping Always Open @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter( 'woocommerce_ship_to_different_address_checked', 'bbloomer_open_shipping_checkout' );

function bbloomer_open_shipping_checkout() {
	return 1;
}

Benötigen Sie einen visuellen Beweis? Klicken Sie hier, um die „Vorher“- und „Nachher“-Screenshots zur Anpassung der WooCommerce-Checkout-Seite anzuzeigen.

5. CSS-Snippet: Verschieben Sie das Rechnungsformular unter das Versandformular @ WooCommerce Checkout Page

Zunächst müssen Rechnungs- und Versandformulare in voller Breite erstellt werden. Das Storefront-Design macht das bereits, falls Sie also ein anderes Design verwenden, versuchen Sie es mit diesem: 

.col2-set .col-1, .col2-set .col-2 {
	float:none;
	width: 100%
	margin: 0;
}

Sobald Sie Rechnung und Versand übereinander haben, möchten wir jetzt das Versandformular zuerst (oben) und das Rechnungsformular danach (unten) zeigen. Dies ist mit PHP möglich, aber es gibt einen viel einfacheren Weg, dies zu erreichen: CSS flex . 

.col2-set {
    display: flex;
    flex-direction: column;
}

.col2-set > .col-1 {
	order: 2; 
}

.col2-set > .col-2 {
	order: 1; 
}

Kurz gesagt erkläre ich, dass die Kundendetails (Billing & Shipping Forms Wrapper) als „Flex“ angezeigt werden. Auf diese Weise kann ich die Eigenschaft „Bestellung“ verwenden und die vertikale Reihenfolge der Rechnungs- und Versand-Divs ändern.

Benötigen Sie einen visuellen Beweis? Klicken Sie hier, um die „Vorher“- und „Nachher“-Screenshots zur Anpassung der WooCommerce-Checkout-Seite anzuzeigen.

6. PHP-Snippet: Teilen Sie das lange Layout aus Rechnungsstellung, Versand und Auftragsprüfung in visuelle Schritte auf der WooCommerce-Checkout-Seite auf

Hier verwenden wir wieder die visuelle Hook-Anleitung und drucken 3 neue Divs an bestimmten Positionen (über dem Versand, über der Rechnungsstellung, über der Bestellübersicht). 

/**
 * @snippet       Add Visual Steps @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_checkout_shipping', 'bbloomer_checkout_step1' );

function bbloomer_checkout_step1() {
	echo '<p class="steps">STEP1</p>';
}

add_action( 'woocommerce_checkout_billing', 'bbloomer_checkout_step2' );

function bbloomer_checkout_step2() {
	echo '<p class="steps">STEP2</p>';
}

add_action( 'woocommerce_checkout_before_order_review_heading', 'bbloomer_checkout_step3' );

function bbloomer_checkout_step3() {
	echo '<p class="steps">STEP3</p>';
}

Natürlich brauchen wir auch etwas CSS: 

.steps {
	background: black;
	color: white;
	display: inline-block;
	padding: 0.5em 2em;
}

Benötigen Sie einen visuellen Beweis? Klicken Sie hier, um die „Vorher“- und „Nachher“-Screenshots zur Anpassung der WooCommerce-Checkout-Seite anzuzeigen.

7. PHP-Snippet: Entfernen Sie unnötige Rechnungs-/Versandfelder auf der WooCommerce-Checkout-Seite

Hier kommt die Dokumentationsreferenz, die ich oben geteilt habe, zur Rettung. Der Filter „ woocommerce_checkout_fields “ ermöglicht es uns, nicht benötigte Felder zu „deaktivieren“. 

/**
 * @snippet       Remove Ship/Bill Fields @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {
	
     unset( 
		 $fields['order']['order_comments'], 
		 $fields['shipping']['shipping_company'],
		 $fields['shipping']['shipping_address_2'],
		 $fields['billing']['billing_company'],
		 $fields['billing']['billing_address_2'],
		 $fields['billing']['billing_postcode'],
		 $fields['billing']['billing_phone']
     );

     return $fields;
}

Benötigen Sie einen visuellen Beweis? Klicken Sie hier, um die „Vorher“- und „Nachher“-Screenshots zur Anpassung der WooCommerce-Checkout-Seite anzuzeigen.

8. PHP-Snippet (Idee): Heben Sie die Auswahl der Versandart auf der WooCommerce-Checkout-Seite stärker hervor

Dies ist das schwierigste Snippet, und das liegt daran, dass WooCommerce in dieser Hinsicht nicht wirklich flexibel ist. Um das zu demonstrieren, müssen wir zunächst herausfinden, wie das Versandartformular generiert wird.

In der Checkout-Vorlage „Bestellüberprüfung“ finden wir dieses PHP: 

<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>

   <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>

   <?php wc_cart_totals_shipping_html(); ?>

   <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>

<?php endif; ?>

Es ist offensichtlich, dass wir untersuchen müssen, wie die Funktion wc_cart_totals_shipping_html() funktioniert, um zu sehen, ob es Filter gibt, mit denen wir die Ausgabe anpassen können.

Leider ruft diese Funktion dank der Funktion wc_get_template() einfach die Template-Datei cart-shipping.php auf; Ich sage leider, weil dieselbe Vorlage auch auf der Warenkorbseite verwendet wird.

Nun, das wird zwar komplizierter als ich, aber wenn wir das Versandartformular aus dieser Bestellüberprüfungstabelle nehmen möchten, müssen wir grundsätzlich eine benutzerdefinierte Vorlage schreiben oder besitzen (z. B. checkout-shipping.php) und in / woocommerce-Ordner unseres untergeordneten Designs und verwenden Sie dann den wc_get_template -Filter, um unsere alternative Vorlage nur auf der Checkout-Seite zu laden. Etwas komplex, aber machbar – das überlasse ich Ihnen

Benötigen Sie einen visuellen Beweis? Klicken Sie hier, um die „Vorher“- und „Nachher“-Screenshots zur Anpassung der WooCommerce-Checkout-Seite anzuzeigen.

9. PHP-Snippet: Fügen Sie einen „Warenkorb bearbeiten“-Link auf der WooCommerce-Checkout-Seite hinzu

Da wir alle Links von der Checkout-Seite entfernt haben, ist es fair, dem Benutzer die Möglichkeit zu geben, zur Warenkorbseite zurückzukehren, falls er Mengen ändern oder Produkte entfernen möchte.

Sie können einen beliebigen WooCommerce Checkout-Hook auswählen, aber in diesem Fall habe ich den Haken „woocommerce_checkout_before_order_review“ ausgewählt, der sich direkt unter der Überschrift „Ihre Bestellung“ befindet. 

/**
 * @snippet       Add edit cart link @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_checkout_before_order_review', 'bbloomer_edit_cart_checkout' );

function bbloomer_edit_cart_checkout() {
	echo '<a href="' . wc_get_cart_url() . '">Edit Cart</a>';
}

Mit ein wenig CSS können Sie dies auch in der gleichen Zeile wie „Ihre Bestellung“ positionieren und etwas Platz sparen.

Benötigen Sie einen visuellen Beweis? Klicken Sie hier, um die „Vorher“- und „Nachher“-Screenshots zur Anpassung der WooCommerce-Checkout-Seite anzuzeigen.

10. PHP-Snippet: Fügen Sie eine Telefonnummer auf der WooCommerce-Checkout-Seite hinzu

Sie können der Checkout-Seite beliebige Inhalte hinzufügen, vor allem, wenn es potenziellen Kunden hilft, Ihrem Unternehmen zu vertrauen.

Normalerweise fügen Sie Badges für sichere Zahlungen, FAQ oder Kontaktlinks sowie eine sofortige Kontaktmöglichkeit (Live-Chat und Telefonnummer) hinzu.

So fügen Sie also eine Telefonnummer direkt unter der Schaltfläche „BESTELLUNG AUFGEBEN“ auf der Checkout-Seite hinzu. 

/**
 * @snippet       Phone Number @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_review_order_after_submit', 'bloomer_phone_checkout_page' );

function bloomer_phone_checkout_page() {
	?>
	<p>Need help? Give us a call at <a href="tel:1123456789">+1 123456789</a></p>
	<?php
}

Benötigen Sie einen visuellen Beweis? Klicken Sie hier, um die „Vorher“- und „Nachher“-Screenshots zur Anpassung der WooCommerce-Checkout-Seite anzuzeigen.

Anpassung der WooCommerce Checkout-Seite: „Vorher“- und „Nachher“-Screenshots

Vor

Die WooCommerce-Checkout-Seite (Storefront-Design) BEVOR Sie die Snippets 1->10 anwenden.

Nach

Dies ist die WooCommerce Checkout-Seite NACH dem Anwenden der Snippets 1->10. Wie Sie sehen können, haben wir ein ablenkungsfreies, B2C-fokussiertes, versandorientiertes, sicheres Checkout-Layout erreicht.