WooCommerce: Warenkorb und Kasse auf derselben Seite platzieren

Dies ist Ihr ultimativer Leitfaden – komplett mit Shortcodes, Snippets und Problemumgehungen – um die Warenkorbseite vollständig zu überspringen und sowohl die Warenkorbtabelle als auch das Checkout-Formular auf derselben Seite zu haben.

Aber zuerst … warum wolltest du das tun? Nun, wenn Sie hochpreisige Produkte verkaufen (dh Sie verkaufen im Durchschnitt ungefähr ein Produkt pro Bestellung), wenn Sie einen zusätzlichen Schritt sparen möchten (zwei Schritte konvertieren besser als drei: „In den Warenkorb“ > „Warenkorb-Seite“ > „Checkout-Seite“ – und das ist kein Hexenwerk), wenn Ihre benutzerdefinierten Workflow- und E-Commerce-Ziele es erfordern, dass Sie Warenkorb und Checkout zusammen verwalten, dann ist dieses Tutorial genau das Richtige für Sie.

Es gibt eine Mischung aus Shortcodes, Einstellungen und PHP-Snippets, die Sie verwenden können, damit dies sofort funktioniert. Und glauben Sie mir, das ist einfacher als Sie denken.

Während viele Entwickler sich entscheiden, den Checkout-Prozess in einen „ Multi-Step Checkout “ umzuwandeln (ähm, nicht sicher warum – je mehr Schritte, desto wahrscheinlicher ist es, dass der Warenkorb abgebrochen wird), sehen wir hier genau das Gegenteil.

Also, wie machen sie es?

Nun, hier ist die vollständige, einfache Schritt-für-Schritt-Anleitung, um Einkaufswagen und Kasse auf derselben Seite zu platzieren . Probieren Sie es aus, führen Sie WooCommerce-Tests und -Tracking durch und sehen Sie, ob es besser konvertiert

Schritt 1: Einkaufswagen-Shortcode @ Checkout-Seite hinzufügen

Zuerst müssen Sie den Shortcode „woocommerce_cart“ zur Checkout-Seite hinzufügen. Auf diese Weise teilen wir WooCommerce mit, dass wir die Warenkorbtabelle oben und das Checkout-Formular darunter haben möchten.

Aktualisierung: 19.10.2018. In der ersten Version dieses Tutorials habe ich vorgeschlagen, den Shortcode [woocommerce_cart] über dem Shortcode „woocommerce_checkout“ auf der Checkout-Seite hinzuzufügen (Screenshot). Leider führt dies zu einem Fehler auf der „Danke-Seite“, nachdem eine Bestellung aufgegeben wurde. Tatsächlich wird dort eine Nachricht „Leerer Warenkorb“ angezeigt, da der Inhalt der Checkout-Seite (einschließlich des Warenkorb-Shortcodes) auch auf der Danke-Seite angezeigt wird (nicht sicher warum!). Also müssen wir einen Weg finden, den Shortcode [woocommerce_cart] auf der Checkout-Seite zu laden, ABER nicht auf der Danke-Seite. Hier ist die Lösung, und ja, es ist ein nettes PHP-Snippet.

PHP-Snippet: Zeigen Sie die Warenkorbtabelle über dem Checkout-Formular auf der WooCommerce-Checkout-Seite an

/**
 * @snippet       Display Cart @ Checkout Page Only - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */ 

add_action( 'woocommerce_before_checkout_form', 'bbloomer_cart_on_checkout_page_only', 5 );

function bbloomer_cart_on_checkout_page_only() {

if ( is_wc_endpoint_url( 'order-received' ) ) return;

echo do_shortcode('[woocommerce_cart]');

}

Mit dieser kleinen Änderung sieht Ihre neue Checkout-Seite wie im folgenden Screenshot aus. Bitte beachten Sie – wenn Sie mit dem Seitenlayout des Einkaufswagens vertraut sind, erinnern Sie sich vielleicht an den Abschnitt „Cart Collaterals“ (dh „ Cart Totals “, wo Zwischensummen, Versand und Gesamtsummen angezeigt werden) … nun, dieser wird automatisch ausgeblendet, nur weil Sie Verwenden Sie die beiden Shortcodes auf derselben Seite erneut. Ist das nicht wunderbar?

Schritt 2: Warenkorbseite aufheben @ WooCommerce-Einstellungen (aktualisiert für Woo 3.7+)

Wahrscheinlich reicht die Shortcode-Änderung allein aus, um das zu bekommen, was Sie brauchen (Warenkorb und Kasse auf derselben Seite). Es sind jedoch ein paar Anpassungen erforderlich, falls Sie es wirklich richtig machen wollen.

Wenn der Checkout geleert wird (ich meine, der Warenkorb wird auf der Checkout-Seite geleert), leitet WooCommerce die Benutzer auf die Warenkorbseite um und zeigt die Nachricht „Zurück zum Shop“ an.

Jetzt ist es unser Ziel, die Warenkorbseite vollständig loszuwerden, damit die Benutzer sie nie sehen werden.

Aktualisierung: 21.08.2019. Bis WooCommerce 3.7 war es möglich, die „Kasse“-Seite sowohl als „Warenkorb“- als auch als „Kasse“-Seite festzulegen. Dies ist nicht mehr möglich, folgen Sie einfach den neuen Anweisungen.

Aus diesem Grund müssen Sie die Warenkorbseite deaktivieren (unter WooCommerce > Einstellungen > Erweitert) – klicken Sie einfach auf das kleine „x“ und „Änderungen speichern“. Hier ist der aktualisierte Screenshot seit WooCommerce 3.7:

Schritt 3: Warenkorbseite @ WordPress-Seiten löschen

Hier ist kein Screenshot erforderlich.

Jetzt, da die Warenkorbseite nicht mehr nützlich ist, ist es an der Zeit, sie von Ihren WordPress-Seiten zu löschen . Umleitungen sind bereits vorhanden und Ihre Warenkorbtabelle befindet sich bereits auf der Checkout-Seite, sodass Sie sich keine Sorgen machen müssen.

Legen Sie die Einkaufswagenseite in den Papierkorb!

Schritt 4 (Bonus): Leere Kasse umleiten

Dann gibt es eine kleine Problemumgehung , falls Sie keine leere Checkout-Seite anzeigen möchten, wenn Benutzer direkt darauf zugreifen oder wenn die Warenkorbtabelle geleert wird.

Zum Beispiel möchten Sie leere Warenkörbe auf die Startseite oder vielleicht auf die Shop-Seite (oder noch besser auf das zuletzt angesehene Produkt) umleiten, damit Kunden wieder einkaufen können.

Hier ist ein kleiner Ausschnitt für Sie – ein kleiner Bonus – damit Sie beispielsweise die leere Checkout-Seite auf die Startseite umleiten können. Versuch es!

PHP-Snippet: Leeren Warenkorb umleiten @ WooCommerce Checkout mit Warenkorb

/**
 * @snippet       Redirect Empty Cart/Checkout - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=80321
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */ 

add_action( 'template_redirect', 'bbloomer_redirect_empty_cart_checkout_to_home' );

function bbloomer_redirect_empty_cart_checkout_to_home() {
	if ( is_cart() && is_checkout() && 0 == WC()->cart->get_cart_contents_count() && ! is_wc_endpoint_url( 'order-pay' ) && ! is_wc_endpoint_url( 'order-received' ) ) {
		wp_safe_redirect( home_url() );
		exit;
	}
}