So platzieren Sie den WooCommerce-Warenkorb und die Kasse auf einer Seite

Veröffentlicht: 2020-09-21

Platzieren Sie den WooCommerce-Einkaufswagen und die Kasse auf einer Seite

In diesem kurzen Tutorial werde ich eine Lösung vorstellen, wie Sie den WooCommerce-Warenkorb und die Kasse auf einer Seite platzieren können. Dies würde den Checkout-Prozess erheblich optimieren und den Kunden viel Zeit sparen, da sie nicht warten müssen, bis eine weitere Seite geladen wird. Diese Lösung kann verwendet werden, wenn Sie einen zusätzlichen Schritt sparen möchten, insbesondere bei hochpreisigen Produkten, bei denen ungefähr ein Produkt pro Bestellung verkauft wird.

WooCommerce Warenkorb und Kasse auf einer Seite

Kunden, die regelmäßig online einkaufen, brauchen immer einen schnellen Checkout-Prozess. Sie können sich für einen anderen Shop entscheiden, wenn die Ladegeschwindigkeit niedrig ist oder wenn sie vor der Zahlung auf andere Seiten weitergeleitet werden. Der Hauptgrund, warum viele Leute WooCommerce für ihren Online-Shop verwenden, ist, dass Sie ihn ändern können.

Der standardmäßige Checkout-Prozess in WooCommerce hat zwei separate Seiten für Warenkorb und Checkout. Ich möchte veranschaulichen, wie Sie den WooCommerce-Warenkorb und die Kasse auf einer Seite platzieren können, um die Benutzererfahrung zu verbessern und Ihre Conversions zu steigern.

Dies wird Ihr ultimativer Leitfaden sein, da es eine Mischung aus Shortcodes, Einstellungen und PHP-Snippets gibt, die Sie verwenden können, damit dies funktioniert. Das mag etwas kompliziert erscheinen, aber wenn Sie die Schritte, die ich Ihnen gleich mitteilen werde, genau befolgen, werden Sie es einfacher finden, als Sie denken.

Der Hauptgrund dafür ist, dass bei einem mehrstufigen Checkout-Prozess mit größerer Wahrscheinlichkeit Probleme mit dem Verlassen des Einkaufswagens auftreten und dadurch die Verkäufe in Ihrem WooCommerce-Shop verbessert werden.

Nach alledem finden Sie hier eine einfache Schritt-für-Schritt-Anleitung, um Warenkorb und Kasse auf derselben Seite zu platzieren. Darüber hinaus können Sie sich entscheiden, einige WooCommerce-Tests und -Tracking durchzuführen, um zu sehen, ob die Conversion-Rate besser ist.

Schritte, um den WooCommerce-Einkaufswagen und die Kasse auf einer Seite zu platzieren

Melden Sie sich bei Ihrer WordPress-Site an und greifen Sie als Admin-Benutzer auf das Dashboard zu.
Klicken Sie im Dashboard-Menü auf Darstellungsmenü > Themen-Editor-Menü . Wenn die Seite „Designeditor“ geöffnet wird, suchen Sie nach der Datei mit den Designfunktionen , in der wir die Funktion hinzufügen, die Warenkorb und Kasse auf einer Seite platziert.
Fügen Sie den folgenden Code am Ende der PHP -Datei hinzu. Das bedeutet, dass wir den Shortcode „woocommerce_cart“ zur Checkout-Seite hinzufügen müssen. Denken Sie daran, die Änderungen zu speichern:

 /**

 * Warenkorb nur auf der Checkout-Seite anzeigen – WooCommerce

*/

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

Funktion njengah_cart_on_checkout_page_only() {

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

echo do_shortcode('[woocommerce_cart]');

}

Um das Ergebnis zu sehen, aktualisieren Sie einfach die Checkout-Seite und Sie sollten Folgendes sehen:

Es ist erwähnenswert, dass Sie, wenn Sie mit dem Layout der Warenkorbseite vertraut sind, möglicherweise den Abschnitt Warenkorbsummen kennen. Dieser nette Code, den ich geteilt habe, verbirgt automatisch die Gesamtsummen aufgrund der zwei Shortcodes auf derselben Seite. Dies ist eine nette Funktion.

Der Shortcode allein macht den Trick, aber wenn Sie ein wenig nachforschen, werden Sie feststellen, dass die Warenkorbseite immer noch als eigenständige . Außerdem wird der Warenkorb auf der Checkout-Seite geleert, und WooCommerce leitet Benutzer auf die Warenkorbseite um und zeigt die Nachricht „Leerer Warenkorb“ an. Dies bedeutet, dass einige Anpassungen vorgenommen werden müssen, um dies zu ändern. Sie müssen die Warenkorbseite vollständig entfernen, damit die Benutzer sie nie sehen.

Klicken Sie in Ihrem WordPress-Dashboard auf WooCommerce > Einstellungen. Klicken Sie auf der Einstellungsseite auf die Registerkarte „ Erweitert “ und klicken Sie einfach auf das kleine „x“ und speichern Sie die Änderungen wie gezeigt:

Danach müssen Sie die Warenkorbseite löschen . Dies liegt daran, dass es nicht mehr nützlich ist und bereits Weiterleitungen vorhanden sind und sich Ihre Warenkorbtabelle bereits auf der Checkout-Seite befindet.
Wenn Sie jedoch eine leere Checkout-Seite umleiten möchten, wenn Benutzer direkt darauf zugreifen oder wenn die Warenkorbtabelle geleert wird, ist hier ein kleiner Ausschnitt für Sie. Dies hilft Ihnen, die leere Checkout-Seite auf die Startseite umzuleiten.

Klicken Sie im Dashboard-Menü auf Darstellungsmenü > Themen-Editor-Menü . Suchen Sie nach dem Öffnen der Theme-Editor -Seite nach der Theme-Funktionsdatei, in der wir die Funktion hinzufügen, die die leere Checkout-Seite auf die Homepage umleitet.

Fügen Sie den folgenden Code am Ende der PHP -Datei hinzu.

 /**

* Leeren Warenkorb/Kasse umleiten - WooCommerce

*/




add_action( 'template_redirect', 'njengah_redirect_empty_cart_checkout_to_home' );

Funktion njengah_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());

Ausfahrt;

}

}

Um das Ergebnis zu sehen, entfernen Sie alle Produkte aus dem Warenkorb und Sie werden wie gezeigt auf die Startseite weitergeleitet:

Fazit

Das ist es! Jetzt haben Sie einen optimierten Checkout-Prozess und müssen sich in Ihrem WooCommerce-Shop keine Sorgen mehr über Probleme mit dem Verlassen des Einkaufswagens machen. Im ersten Snippet habe ich den Shortcode „woocommerce_cart“ zur Checkout-Seite hinzugefügt, um die Warenkorbtabelle oben und das Checkout-Formular darunter hinzuzufügen. Es ist jedoch wichtig zu beachten, dass Sie die Warenkorbseite vollständig entfernen müssen, damit die Benutzer sie nie sehen.

Zusätzlich habe ich ein Bonus-PHP-Code-Snippet hinzugefügt, das Ihnen hilft, einen leeren Checkout umzuleiten. Ich hoffe, dass dieser kurze Beitrag eine Lösung dafür bietet, wie Sie einen WooCommerce-Warenkorb und eine Kasse auf einer Seite platzieren können.

So platzieren Sie den WooCommerce-Warenkorb und die Kasse auf einer Seite

WooCommerce Warenkorb und Kasse auf einer Seite

Schritte, um den WooCommerce-Einkaufswagen und die Kasse auf einer Seite zu platzieren

Fazit

Ähnliche Artikel