Cum să modificați detaliile coșului de pe pagina de plată WooCommerce

Cei mai mulți dintre voi ar ști că WooCommerce nu permite clienților să actualizeze coșul din pagina de finalizare a achiziției. Ceea ce înseamnă că nu poți modifica cantitatea sau șterge produsul din pagina de finalizare a comenzii. Clientul trebuie să se întoarcă la pagina coșului de cumpărături, să actualizeze coșul de cumpărături și apoi să meargă din nou la pagina de finalizare a achiziției. Astfel, clienții trebuie să completeze din nou toate informațiile necesare. Acest lucru este puțin frustrant pentru clienți , în special pentru utilizatorii oaspeți (care este o mare majoritate).

În această postare, vom discuta despre cum să actualizați coșul de cumpărături pe pagina de finalizare a comenzii WooCommerce. Am dezvoltat această funcție în cadrul evenimentului nostru Fun Friday de la birou. În Vineri Distractive , încercăm să petrecem o zi întreagă făcând lucruri care nu au legătură cu activitatea de bază a persoanei.

Mai întâi, să aruncăm o privire la tabelul cu detaliile coșului de pe pagina WooCommerce Checkout:

Aici, clientul nu poate edita cantitatea produsului sau o poate șterge. Așa că dorim să oferim funcționalitatea de modificare a cantității și de a șterge produsul fără ca clientul să părăsească pagina de finalizare a comenzii.

Sa incepem

Dacă doriți să săriți peste această explicație și, în schimb, doriți să implementați funcționalitatea în magazinul dvs., atunci puteți descărca pluginul pe care l-am creat.

1. Efectuarea modificărilor interfeței de utilizare în secțiunea coș a paginii de plată

Trebuie să modificăm coloana „Produs” din tabelul „Comanda dumneavoastră”. Trebuie să adăugăm pictograma „Șterge” și „selectorul cantității” pentru fiecare articol din coș.

Pentru a realiza acest lucru, WooCommerce a oferit un filtru care vă permite să modificați rândul Nume produs al fiecărui articol din coș: woocommerce_cart_item_name .

Cantitatea selectată afișată în tabelul Comanda dvs. poate fi modificată și folosind un alt filtru WooCommerce: woocommerce_checkout_cart_item_quantity .

Vom folosi ambele filtre și vom permite clienților să editeze detaliile coșului pe pagina de finalizare a achiziției. Puteți implementa modificările de mai jos prin crearea unui nou plugin.

În primul rând, nu avem nevoie de cantitatea afișată pentru fiecare articol în tabelul comenzii dvs. Deci vom folosi filtrul și vom returna un șir gol, astfel încât să suprascrie datele WooCommerce.

După aceasta, vom modifica rândul Nume produs folosind filtrul woocommerce_cart_item_name și vom adăuga câmpul Cantitate și pictograma Ștergere.

Aici folosim funcția is_checkout() pentru a ne asigura că aplicăm modificările numai pe pagina de checkout. L-am împărțit în 3 pași, așa cum s-a menționat în fragmentul de cod de mai sus.

Pasul 1: Adăugați pictograma de ștergere
Aici, în acest pas, vom adăuga pictograma Ștergere pentru fiecare articol din coș. Aceasta este aceeași pictogramă folosită în coșul WooCommerce.

Aici, am folosit funcția WooCommerce get_remove_url() . Trebuie să transmitem $cart_key pentru fiecare articol din coș. Deci, funcția get_remove_url() va returna o adresă URL unică pentru a șterge fiecare articol din coș.

Pasul 2: Adăugați numele produsului
Pe măsură ce modificăm rândul cu numele produsului, trebuie să adăugăm și numele produsului pe rând împreună cu noile câmpuri. Vom obține numele produsului de la filtrul însuși, care este transmis ca prim argument. Este $product_title în cazul nostru.

Creșteți vânzările în magazinul WooCommerce

„Este interesant de văzut cât de mult a crescut WooCommerce Abandoned Cart Pro vânzările pentru produse cu valoare mare. M-aș fi așteptat ca pluginul să crească vânzările pentru produse cu valoare mică pe care clienții nu le deranjează dacă le cumpără sau nu (de exemplu, alimente), dar eu am fost mai surprinși să văd diferența pe care o poate face pentru produsele care necesită o decizie de cumpărare atât de mare.” - Katie Keith, director de operațiuni la Barn2 Media

Pasul 3: Adăugați selectorul de cantitate
În cele din urmă, vom adăuga selectorul de cantitate. Aici vom folosi funcția WooCommerce woocommerce_quantity_input() .

Trebuie să dăm cei patru parametri pentru funcția „nume_intrare”, „valoare_intrare”, „valoare_max”, „valoare_min”.

• input_name: va conține matricea cu numele „cart”, în aceasta trebuie să treceți cheia articolului din coș și cantitatea.
• input_value: va conține cantitatea selectată a produsului.
• max_value: va fi numărul maxim de stoc al produsului.
• min_value: Va fi valoarea minimă a selectorului de cantitate.

Odată ce toți pașii de mai sus sunt finalizați, va afișa acum butonul de ștergere și selectorul de cantitate în tabelul Comanda dvs. din pagina Checkout.

Aici, avem o condiție if ( is_checkout() ) { condition. Este necesar din motivele menționate mai jos.

Filtrul pe care l-am folosit pentru modificarea valorii coloanei cu numele produsului (woocommerce_cart_item_name) este numit și în pagina Coș a magazinului dvs. Așadar, pentru a ne asigura că codul pe care îl scriem nu încalcă funcționalitatea paginii Coș, ne-am asigurat că modificările sunt aplicate doar pe pagina de plată.

2. Actualizarea coșului prin apel Ajax

Adăugarea atât de mult nu va funcționa, trebuie să ne asigurăm că atunci când un client modifică cantitatea, aceasta se va reflecta în totalul coșului.

Modificarea cantității

Avem nevoie de apelul Ajax pentru a schimba totalul coșului. Deci, atunci când un client modifică cantitatea, trebuie să luăm o acțiune și să modificăm totalul coșului.

Acum, vom pune în coadă fișierul „add_quantity.js” în subsolul site-ului și ne vom asigura că este inclus atunci când suntem pe pagina de finalizare a achiziției.

Acum trebuie să adăugăm funcția în fișierul Javascript, care va apela ajax pentru modificarea totalului coșului.

Mai sus, javascript va apela ajax-ul în care vom trece datele din formularul de checkout modificat. Dar va suna când facem clic pe pictograma cantității. Deci va conține valoarea modificată a cantității.

Acum, trebuie să adăugăm funcția pentru ajax, care va schimba totalul coșului în funcție de cantitatea modificată.

Când modificăm cantitatea de pe pagina de checkout, funcția de mai sus va fi apelată și va schimba totalul coșului. Am folosit funcțiile WooCommerce în funcțiile noastre.

Am folosit funcțiile „set_quantity()”, „calculate_totals()”, „woocommerce_cart_totals()” pentru a modifica totalul coșului și a-l afișa în tabelul Your Order din pagina de finalizare a comenzii.

set_quantity() : Această funcție va seta cantitatea modificată în coș.

Am trimis datele din funcția javascript care va avea valoarea cantității modificată, așa că vom folosi acea valoare modificată și o vom pune în coș.

calculate_totals() : Folosind această funcție, instruim să calculăm din nou totalul coșului.

woocommerce_cart_totals() : Această funcție este folosită pentru afișarea coșului modificat.

Odată ce toate calculele de mai sus sunt făcute, se va întoarce înapoi la javascript-ul de la care am numit funcția ajax. În răspunsul acestei funcții, vom „declanșa” funcția „update_checkout” care, la rândul său, va modifica coșul și îl va afișa utilizatorului.

Avem nevoie de CSS pentru butonul „Șterge” din tabelul comenzii tale. Deci ar trebui să arate ca butonul de ștergere a coșului WooCommerce. Deci trebuie să adăugăm CSS-ul pentru el. Puteți adăuga CSS-ul în subsolul site-ului dvs.

Odată ce este adăugat, trebuie să dăm CSS butonului de ștergere din fișierul CSS. CSS-ul a fost prezentat mai jos.

Așadar, suntem pregătiți cu funcționalitatea în care putem modifica cantitatea pe pagina de checkout a WooCommerce.

După implementarea celor de mai sus, așa ar arăta tabelul Comanda dvs. de pe pagina de finalizare a comenzii:

Acesta va adăuga selectorul de cantitate și pictograma de ștergere pentru fiecare articol din tabelul Comanda dvs. din pagina de finalizare a comenzii.

L-am creat ca un plugin, numit Change Quantity on Checkout pentru WooCommerce, care a fost lansat în septembrie 2016. Este folosit în peste 400 de magazine WooCommerce. Dacă utilizați deja acest plugin în magazinul dvs. WooCommerce, atunci v-aș aprecia dacă puteți rezerva ceva timp pentru a revizui pluginul.

Dacă aveți feedback, puteți să-mi spuneți în comentariile de mai jos sau puteți posta pe forumul de asistență al pluginului.