WooCommerce: puneți coșul și finalizarea comenzii pe aceeași pagină

Acesta este ghidul tău suprem – complet cu coduri scurte, fragmente și soluții de soluționare – pentru a omite complet pagina Coș și pentru a avea atât tabelul coșului, cât și formularul de finalizare a comenzii pe aceeași pagină.

Dar mai întâi... de ce ai vrut să faci asta? Ei bine, dacă vindeți produse cu bilete mari (adică, în medie, vindeți aproximativ un produs per comandă), dacă doriți să economisiți un pas suplimentar (doi pași convertiți mai bine decât trei: „Adaugă în coș” > „Pagina coș” > „Pagină de plată” – și aceasta nu este știință rachetă), dacă fluxul de lucru personalizat și obiectivele de comerț electronic vă cer să gestionați Coșul de cumpărături și achiziția toate împreună, ei bine, acest tutorial este pentru dvs.

Există o combinație de coduri scurte, setări și fragmente PHP pe care le puteți folosi pentru a face acest lucru din cutie. Și crede-mă, este mai ușor decât crezi.

În timp ce mulți dezvoltatori decid să transforme procesul de plată într-un „Cazare în mai mulți pași ” (ehm, nu știu sigur de ce – cu cât sunt mai mulți pași, cu atât este mai probabil să se abandoneze căruciorul), aici vom vedea exact opusul.

Deci, cum o fac?

Ei bine, iată ghidul complet, ușor, pas cu pas pentru a pune Coșul de cumpărături și achiziția pe aceeași pagină . Încercați, faceți niște teste și urmărire WooCommerce și vedeți dacă se convertește mai bine

Pasul 1: Adăugați codul scurt la coș pe pagina de plată

Mai întâi, trebuie să adăugați codul scurt „woocommerce_cart” la pagina de finalizare a achiziției. În acest fel îi spunem lui WooCommerce că vrem să avem tabelul de coș deasupra și formularul de finalizare a comenzii dedesubt .

Actualizare: 19/oct/2018. În prima versiune a acestui tutorial am sugerat să adăugați codul scurt [woocommerce_cart] deasupra codului scurt „woocommerce_checkout” de pe pagina Checkout (captură de ecran). Din păcate, acest lucru creează o eroare pe „pagina de mulțumire” după plasarea unei comenzi. De fapt, acolo este afișat un mesaj „coș gol”, deoarece conținutul paginii Checkout (care include codul scurt al coșului) apare și pe pagina de mulțumire (nu știu sigur de ce!). Așa că trebuie să găsim o modalitate de a încărca codul scurt [woocommerce_cart] pe pagina de finalizare a achiziției, DAR nu pe pagina de mulțumire. Iată soluția și da, este un fragment PHP frumos.

Fragment PHP: Afișați tabelul coșului deasupra formularului de finalizare a achiziției pe pagina WooCommerce Checkout

/**
 * @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]');

}

Odată cu această mică schimbare, noua ta pagină Checkout va arăta ca în următoarea captură de ecran. Vă rugăm să rețineți – dacă sunteți familiarizat cu aspectul paginii Coș, s-ar putea să vă amintiți secțiunea „Colaterale coș” (adică „Totale coș ”, unde sunt afișate subtotalul, transportul și totalurile)... Ei bine, aceasta este ascunsă automat doar pentru că dvs. folosiți cele două coduri scurte de pe aceeași pagină. Nu este minunat?

Pasul 2: Anulează pagina de coș @ Setări WooCommerce (Actualizat pentru Woo 3.7+)

Probabil, schimbarea codului scurt este suficientă pentru a obține ceea ce aveți nevoie (Coș și Checkout pe aceeași pagină). Cu toate acestea, sunt necesare câteva modificări în cazul în care doriți cu adevărat să o faceți corect.

De fapt, dacă Coșul de cumpărături este golit (adică, Coșul de cumpărături este golit pe pagina de Finalizare), WooCommerce va redirecționa utilizatorii către pagina Coșul de cumpărături și va afișa mesajul de coș gol („Întoarcere la magazin”).

Acum, scopul nostru este să scăpăm complet de pagina Coș, astfel încât utilizatorii să nu o vadă niciodată.

Actualizare: 21/Aug/2019. Până la WooCommerce 3.7 a fost posibil să setați pagina „Checkout” atât ca „Coș” cât și „Checkout”. Acest lucru nu mai este posibil, așa că trebuie doar să urmați noile instrucțiuni.

Din acest motiv, trebuie să dezactivați pagina Coș (sub WooCommerce > Setări > Avansat) – pur și simplu faceți clic pe „x” și „Salvați modificările”. Iată captura de ecran actualizată de la WooCommerce 3.7:

Pasul 3: Ștergeți pagina de coș @ pagini WordPress

Nu este nevoie de o captură de ecran aici.

Acum că pagina Coș nu mai este utilă, este timpul să o ștergeți din paginile dvs. WordPress . Redirecționările sunt deja la locul lor și tabelul de coș este deja pe pagina de finalizare a comenzii, așa că nu trebuie să vă faceți griji.

Continuați și puneți pagina Coș în coșul de gunoi!

Pasul 4 (Bonus): Redirecționează Plata goală

Apoi, există o mică soluție în cazul în care nu doriți să afișați o pagină de Checkout goală dacă utilizatorii o accesează direct sau când tabelul coșului este golit.

De exemplu, poate doriți să redirecționați coșurile goale către pagina de pornire sau poate către pagina magazinului (sau chiar mai bine către ultimul produs vizualizat), astfel încât clienții să poată începe din nou cumpărăturile.

Iată un mic fragment pentru tine – un mic bonus – astfel încât să poți redirecționa pagina goală de plată către pagina de pornire, de exemplu. Încearcă!

Fragment PHP: Redirecționează Coșul gol @ WooCommerce Checkout cu Coș

/**
 * @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;
	}
}