So ändern Sie die Warenkorbdetails auf der WooCommerce-Checkout-Seite

Die meisten von Ihnen wissen, dass WooCommerce es Kunden nicht erlaubt, den Warenkorb von der Checkout-Seite aus zu aktualisieren. Das bedeutet, dass Sie die Menge nicht ändern oder das Produkt von der Checkout-Seite löschen können. Der Kunde muss zur Warenkorbseite zurückkehren, den Warenkorb aktualisieren und dann erneut zur Kassenseite gehen. Dies führt dazu, dass Kunden alle erforderlichen Informationen erneut ausfüllen müssen. Dies ist für die Kunden etwas frustrierend , insbesondere für Gastbenutzer (die eine große Mehrheit ausmachen).

In diesem Beitrag werden wir besprechen, wie der Warenkorb auf der Checkout-Seite von WooCommerce aktualisiert wird. Ich habe dieses Feature in unserem Fun Friday Event im Büro entwickelt. An Fun Fridays versuchen wir, einen ganzen Tag damit zu verbringen, Dinge zu tun, die nicht mit der Haupttätigkeit der Person zu tun haben.

Werfen wir zunächst einen Blick auf die Tabelle mit den Warenkorbdetails auf der Checkout-Seite von WooCommerce:

Hier kann der Kunde die Menge des Produkts nicht bearbeiten oder löschen. Daher möchten wir Ihnen die Möglichkeit bieten, die Menge zu ändern und das Produkt zu löschen, ohne dass Ihr Kunde die Checkout-Seite verlässt.

Lass uns anfangen

Wenn Sie diese Erklärung überspringen und stattdessen die Funktionalität in Ihrem Shop implementieren möchten, können Sie das von mir erstellte Plugin herunterladen.

1. Vornehmen der UI-Änderungen im Warenkorbbereich der Checkout-Seite

Wir müssen die Spalte „Produkt“ in der Tabelle „Ihre Bestellung“ ändern. Wir müssen das „Löschen“-Symbol und die „Mengenauswahl“ für jeden Artikel im Warenkorb hinzufügen.

Um dies zu erreichen, hat WooCommerce einen Filter bereitgestellt, mit dem Sie die Produktnamenzeile jedes Warenkorbartikels ändern können: woocommerce_cart_item_name .

Die ausgewählte Menge, die in der Tabelle Ihre Bestellung angezeigt wird, kann auch mit dem anderen WooCommerce-Filter geändert werden: woocommerce_checkout_cart_item_quantity .

Wir werden beide Filter verwenden und Kunden ermöglichen, die Warenkorbdetails auf der Checkout-Seite zu bearbeiten. Sie können die folgenden Änderungen implementieren, indem Sie ein neues Plugin erstellen.

Erstens benötigen wir nicht die Menge, die für jeden Artikel in der Tabelle „Ihre Bestellung“ angezeigt wird. Wir verwenden also den Filter und geben eine leere Zeichenfolge zurück, damit die WooCommerce-Daten überschrieben werden.

Danach ändern wir die Zeile Produktname mit dem Filter woocommerce_cart_item_name und fügen das Feld Menge und das Symbol Löschen hinzu.

Hier verwenden wir die Funktion is_checkout() , um sicherzustellen, dass wir die Änderungen nur auf der Checkout-Seite anwenden. Ich habe es in 3 Schritte aufgeteilt, wie im obigen Code-Snippet erwähnt.

Schritt 1: Löschsymbol hinzufügen
Hier in diesem Schritt fügen wir das Löschen-Symbol für jeden Artikel im Warenkorb hinzu. Dies ist das gleiche Symbol, das im WooCommerce-Einkaufswagen verwendet wird.

Hier haben wir die WooCommerce-Funktion get_remove_url() verwendet. Wir müssen den $cart_key für jeden Warenkorbartikel übergeben. Die Funktion get_remove_url() gibt also eine eindeutige URL zurück, um jeden Warenkorbartikel zu löschen.

Schritt 2: Produktname hinzufügen
Da wir die Produktnamenzeile ändern, müssen wir auch den Produktnamen in der Zeile zusammen mit den neuen Feldern hinzufügen. Wir erhalten den Produktnamen vom Filter selbst, der als erstes Argument übergeben wird. In unserem Fall ist es $product_title.

Steigern Sie die Verkäufe im WooCommerce-Shop

„Es ist interessant zu sehen, wie sehr WooCommerce Abandoned Cart Pro den Umsatz für hochwertige Produkte gesteigert hat. Ich hätte erwartet, dass das Plugin den Umsatz für Produkte mit geringem Wert steigert, bei denen es den Kunden egal ist, ob sie sie kaufen (z. B. Lebensmittel), aber ich waren eher überrascht zu sehen, welchen Unterschied es bei Produkten machen kann, die eine so große Kaufentscheidung erfordern." - Katie Keith, Betriebsleiterin bei Barn2 Media

Schritt 3: Mengenauswahl hinzufügen
Zuletzt fügen wir die Mengenauswahl hinzu. Hier verwenden wir die WooCommerce-Funktion woocommerce_quantity_input() .

Wir müssen die vier Parameter für die Funktion „input_name“, „input_value“, „max_value“, „min_value“ angeben.

• input_name: Es enthält das Array mit dem Namen 'cart', in diesem müssen Sie den Warenkorbartikelschlüssel und die Menge übergeben.
• input_value: Enthält die ausgewählte Menge des Produkts.
• max_value: Dies ist die maximale Bestandszahl des Produkts.
• min_value: Dies ist der Mindestwert des Mengenselektors.

Sobald alle oben genannten Schritte abgeschlossen sind, werden nun die Schaltfläche „Löschen“ und die Mengenauswahl in der Tabelle „Ihre Bestellung“ auf der Seite „Kasse“ angezeigt.

Hier haben wir eine Bedingung if ( is_checkout() ) { condition. Dies ist aus den unten genannten Gründen erforderlich.

Der Filter, den wir zum Ändern des Spaltenwerts des Produktnamens (woocommerce_cart_item_name) verwendet haben, wird auch auf der Warenkorbseite Ihres Shops aufgerufen. Um sicherzustellen, dass der von uns geschriebene Code die Funktionalität der Warenkorbseite nicht beeinträchtigt, haben wir sichergestellt, dass Änderungen nur auf der Checkout-Seite angewendet werden.

2. Aktualisieren des Einkaufswagens per Ajax-Aufruf

Das Hinzufügen von so viel wird nicht funktionieren, wir müssen sicherstellen, dass wenn ein Kunde die Menge ändert, dies in der Gesamtsumme des Einkaufswagens widergespiegelt wird.

Menge ändern

Wir benötigen den Ajax-Aufruf, um die Warenkorbsumme zu ändern. Wenn also ein Kunde die Menge ändert, müssen wir handeln und die Gesamtsumme des Warenkorbs ändern.

Jetzt werden wir die Datei „add_quantity.js“ in die Fußzeile der Website einreihen und sicherstellen, dass sie enthalten ist, wenn wir uns auf der Checkout-Seite befinden.

Jetzt müssen wir die Funktion in der Javascript-Datei hinzufügen, die das Ajax zum Ändern der Warenkorbsumme aufruft.

Das obige Javascript ruft das Ajax auf, in dem wir die Daten des modifizierten Checkout-Formulars übergeben. Aber es wird anrufen, wenn wir auf das Mengensymbol klicken. Es enthält also den modifizierten Wert der Menge.

Jetzt müssen wir die Funktion für das Ajax hinzufügen, die die Warenkorbsumme entsprechend der geänderten Menge ändert.

Wenn wir die Menge auf der Checkout-Seite ändern, wird die obige Funktion aufgerufen und die Gesamtsumme des Warenkorbs geändert. Wir haben in unseren Funktionen die WooCommerce-Funktionen verwendet.

Wir haben die Funktionen „set_quantity()“, „calculate_totals()“, „woocommerce_cart_totals()“ verwendet, um die Warenkorbsumme zu ändern und sie in der Tabelle „Ihre Bestellung“ auf der Checkout-Seite anzuzeigen.

set_quantity() : Diese Funktion setzt die geänderte Menge in den Warenkorb.

Wir haben die Daten von der Javascript-Funktion gesendet, die den geänderten Mengenwert haben werden, also werden wir diesen geänderten Wert verwenden und in den Einkaufswagen legen.

compute_totals() : Mit dieser Funktion weisen wir an, dass die Summe des Warenkorbs erneut berechnet wird.

woocommerce_cart_totals() : Diese Funktion wird verwendet, um den geänderten Warenkorb anzuzeigen.

Sobald die obige Berechnung abgeschlossen ist, kehrt es zu dem Javascript zurück, von dem wir die Ajax-Funktion aufgerufen hatten. Als Antwort auf diese Funktion werden wir die Funktion „update_checkout“ „auslösen“ , die wiederum den Warenkorb ändert und dem Benutzer anzeigt.

Wir benötigen das CSS für die Schaltfläche „Löschen“ der Tabelle „Ihre Bestellung“. Es sollte also wie die Schaltfläche zum Löschen des WooCommerce-Warenkorbs aussehen. Also müssen wir das CSS dafür hinzufügen. Sie können das CSS in der Fußzeile Ihrer Website hinzufügen.

Sobald es hinzugefügt wurde, müssen wir das CSS der Schaltfläche „Löschen“ in der CSS-Datei zuweisen. Das CSS wurde unten gezeigt.

Wir sind also bereit mit der Funktionalität, mit der wir die Menge auf der Checkout-Seite von WooCommerce ändern können.

Nach der Implementierung des oben Gesagten sieht die Tabelle „Ihre Bestellung“ auf der Checkout-Seite folgendermaßen aus:

Es fügt die Mengenauswahl und das Löschsymbol für jeden Artikel der Tabelle Ihre Bestellung auf der Checkout-Seite hinzu.

Ich habe dies als Plugin mit dem Namen Change Quantity on Checkout für WooCommerce erstellt, das im September 2016 veröffentlicht wurde. Es wird in über 400 WooCommerce-Shops verwendet. Wenn Sie dieses Plugin bereits in Ihrem WooCommerce-Shop verwenden, würde ich mich freuen, wenn Sie sich etwas Zeit nehmen könnten, um das Plugin zu überprüfen.

Wenn Sie Feedback haben, können Sie es mir in den Kommentaren unten mitteilen oder im Support-Forum des Plugins posten.