Cum să utilizați WooCommerce Checkout Hooks

În acest ghid, veți învăța cum să utilizați cârlige de plată în WooCommerce . Vom arunca o privire la unele dintre principalele cârlige și vă vom oferi câteva exemple despre ceea ce puteți face cu ele. Așadar, pregătiți-vă să vă personalizați pagina de plată și să vă creșteți ratele de conversie.

Ce sunt cârligele WooCommerce?

Cârligele sunt funcții puternice care vă permit să schimbați sau să adăugați cod fără a fi nevoie să modificați fișierele de bază. Cârligele oferă multă flexibilitate, iar dezvoltatorii le folosesc pentru a schimba funcționalitățile implicite WooCommerce.

Există două tipuri diferite de cârlig:

• Cârligele de acțiune vă permit să adăugați cod personalizat pentru a efectua anumite acțiuni atunci când are loc un eveniment.
• Cârligele de filtrare modifică comportamentul unei variabile sau funcții existente.

Datorită cârligelor WooCommerce, dezvoltatorii pot crea soluții foarte personalizate într-un mod foarte practic și flexibil. Unele dintre cele mai importante cârlige din WooCommerce sunt cârligele de plată. Și dacă aveți un magazin online, va trebui să le utilizați pentru a personaliza finalizarea comenzii și pentru a vă îmbunătăți ratele de conversie.

WooCommerce Checkout Hooks

Cârligele de plată sunt doar un tip de cârlige multiple pe care WooCommerce le acceptă și rulează pe pagina de plată. Puteți folosi aceste cârlige de finalizare a comenzii pentru a edita notele, adăugați conținut înainte de câmpurile de facturare, înainte de revizuirea comenzii sau după formularul de finalizare, aplicați o logică pentru a crește prețul sau a limita utilizatorii după rol și multe altele.

Cârligele WooCommerce funcționează exact ca și cârligele native WordPress. Deci, dacă sunteți familiarizat cu cârligele WordPress, stăpânirea cârligelor WooCommerce va fi ușor.

Înainte de a începe

Înainte de a sări la cârlige, vă recomandăm să creați o temă pentru copil. Există multe instrumente pe care le puteți folosi. Puteți consulta lista noastră cu cele mai bune pluginuri pentru teme pentru copii pentru WordPress sau ghidul nostru detaliat despre cum să creați o temă pentru copii cu un plugin sau manual.

Dacă este prima dată când utilizați hooks, puteți pur și simplu să copiați aceste scripturi și să le lipiți direct în fișierul functions.php al temei dumneavoastră Child. La sfârșitul postării, veți găsi câteva exemple de lucruri pe care le puteți face cu cârlige de casă pentru a vă oferi câteva idei.

Cum se utilizează WooCommerce Checkout Hooks?

După cum am văzut anterior, există cârlige de acțiune WooCommerce și cârlige de filtrare și ambele au o sintaxă similară.

Acesta este un exemplu de cârlig de acțiune:

 add_action('woocommerce_after_checkout_billing_form','QuadLayers_callback_function');
funcția QuadLayers_callback_function(){
    # adăugați codul dvs. aici
}

Unde woocommerce_after_checkout_billing_form este cârligul și QuadLayers_callback_function este funcția pe care o creăm pentru a adăuga scripturile noastre personalizate.

Cârligele de filtrare, pe de altă parte, funcționează în același mod, dar trebuie să primească și să returneze un parametru în funcție. De exemplu:

 add_filter('woocommerce_breadcrumb_defaults','quadlayers_change_breadcrumb');
funcția quadlayers_change_breadcrumb( $conținut) {
$content .= „QuadLayers”;
returnează $conținut;
}

Lista de cârlige de plată pentru WooCommerce

Există multe cârlige WooCommerce pe care le puteți folosi pe pagina de finalizare a comenzii. Unele dintre cele principale sunt:

• woocommerce_before_checkout_form
• woocommerce_checkout_before_customer_details
• woocommerce_checkout_billing
• woocommerce_before_checkout_billing_form
• woocommerce_checkout_shipping
• woocommerce_before_order_notes
• woocommerce_after_order_notes
• woocommerce_checkout_after_order_review
• woocommerce_checkout_after_customer_details
• woocommerce_review_order_before_cart_contents
• woocommerce_review_order_before_shipping
• woocommerce_review_order_after_order_total
• woocommerce_checkout_order_review
• woocommerce_review_order_before_submit
• woocommerce_review_order_before_payment
• woocommerce_review_order_after_submit
• woocommerce_review_order_after_payment
• woocommerce_after_checkout_form

Toate au nume care se explică de la sine. Dacă doriți să aruncați o privire la lista completă a cârligelor WooCoommerce, consultați această documentație. Și pentru a vedea cum funcționează fiecare cârlig, aruncați o privire la această postare.

De exemplu, să presupunem că doriți să adăugați conținut după formularul de facturare și înainte de titlul secțiunii de expediere. Ai folosi ceva de genul asta:

 add_action('woocommerce_after_checkout_billing_form','QuadLayers_callback_function');
funcția QuadLayers_callback_function(){
echo 'aici merge textul conținutului sau html';
}

În acest caz, doar adăugăm ceva text, dar puteți adăuga structuri HTML complexe și puteți crea logica personalizată cu funcții PHP. Să aruncăm o privire la câteva exemple pentru a vă oferi câteva idei despre cum să profitați la maximum de cârligele de plată WooCommerce.

Cum să personalizați pagina de finalizare a achiziției cu cârlige WooCommerce

Aici, vă vom arăta câteva exemple de ceea ce puteți face pentru a personaliza pagina de finalizare a comenzii folosind hook-urile WooCommerce de pe site-ul dvs.

Adăugați o imagine la examinarea comenzii

Puteți adăuga o imagine pe pagina de revizuire a comenzii. În acest caz, am adăugat un cod QR, dar puteți include alte imagini, un GIF animat sau imagini de fundal.

 add_action('woocommerce_review_order_before_payment','example_callback');
funcția example_callback( ) {
    echo „<img src="https://quadlayers.com/wp-content/uploads/2020/06/frame.png" width="200px" height="200px">';  
} 

Schimbați breadcrumbs în pagina de finalizare a comenzii

Puteți împiedica utilizatorii să navigheze înapoi la pagina de pornire prin editarea breadcrumb-urilor. În acest exemplu, vă vom arăta cum să schimbați textul de pornire din meniul de navigare pentru Magazin .

 add_filter('woocommerce_breadcrumb_defaults', 'quadlayers_change_breadcrumb');
funcția „quadlayers_change_breadcrumb” ($implicit) {
    $default['home'] = 'Magazin';
    returnează $implicit;
}

Afișați insigne de încredere lângă butonul Plasați comandă

Cârligele de casă WooCommerce oferă câteva opțiuni excelente pentru a construi încredere și pentru a oferi clienților liniște atunci când sunt pe cale să cumpere. Afișând insigne de încredere chiar lângă butonul Plasați comandă , vă puteți îmbunătăți ratele de conversie și puteți construi încrederea în jurul mărcii dvs.

 add_action('woocommerce_review_order_after_submit', 'quadlayers_trust_badges');
funcția quadlayers_trust_badges() {
    echo '<div class="trust-badges">
    <img src="https://www.pngitem.com/pimgs/m/19-197703_transparent-secure-checkout-png-best-trust-badges-for.png">
    </div><div class="trust-badge-message"><i>Am adăugat insignele de încredere mai sus cu un cârlig WooCommerce</i></div>';
} 

Editați câmpurile de plată existente

Cel mai bun mod de a personaliza complet pagina de finalizare a comenzii este editarea etichetelor și a substituenților câmpurilor. În acest exemplu, vom edita eticheta pentru prenume și substituent al notei de comandă folosind hook-ul woocommerce_checkout_fields .

 add_filter( 'woocommerce_checkout_fields' , 'quadlayers_labels_placeholders', 9999 ); 
funcția quadlayers_labels_placeholders( $f ) { 	
	$f['billing']['billing_first_name']['label'] = 'Cum te cheamă?';
	$f['order']['order_comments']['placeholder'] = 'La ce te gândești?'; 
	returnează $f; 
} 

Adăugați un câmp personalizat de plată

În sfârșit, iată un exemplu mai complex. Vă vom arăta cum să creați un nou câmp personalizat care le permite clienților să se aboneze la newsletter-ul dvs. la finalizarea comenzii. Pentru asta, vom folosi două cârlige: unul pentru afișarea câmpului de abonare și altul pentru a salva starea butonului în baza de date (dacă a fost verificat sau nu).

 add_action( 'woocommerce_after_order_notes', 'quadlayers_subscribe_checkout');
add_action( 'woocommerce_checkout_update_order_meta', 'quadlayers_save_function');

// introduceți caseta de selectare în finalizarea comenzii woocommerce 
funcția quadlayers_subscribe_checkout( $checkout ) { 
	woocommerce_form_field('abonat', matrice(
		'type' => 'caseta de selectare',
		'class' => array('misha-field form-row-wide'),
		'label' => 'Abonați-vă la buletinul nostru informativ.',
		), $checkout->get_value( 'abonat' ) ); 
}
// salvează valoarea câmpului
funcția quadlayers_save_function( $order_id ){ 
	if( !empty( $_POST['contactmethod'] ) )
		update_post_meta( $order_id, 'contactmethod', sanitize_text_field( $_POST['contactmethod'] ) ); 
	if( !empty( $_POST['abonat'] ) && $_POST['abonat'] == 1 )
		update_post_meta( $comanda_id, 'abonat', 1); 
}

Personalizați pagina de plată cu pluginuri

Dacă nu vă simțiți confortabil să utilizați cârlige, puteți, de asemenea, să vă personalizați pagina de plată folosind pluginuri. Există multe instrumente, dar vă recomandăm acestea două:

• Manager de plată pentru WooCommerce : Cu peste 70.000 de instalări active, acesta este unul dintre cele mai populare pluginuri de plată pentru WooCommerce. Checkout Manager vă permite să personalizați, să adăugați, să editați și să ștergeți câmpuri de pe pagina de finalizare a plății. Are o versiune gratuită și 3 planuri premium care încep de la 20 USD.
• Direct Checkout pentru WooCommerce : Cu acest instrument freemium, puteți simplifica procesul de finalizare a comenzii și vă puteți crește ratele de conversie. Puteți scurta procesul de cumpărare redirecționând clienții dvs. de pe pagina produsului direct către casă. Direct Checkout are o versiune gratuită și planuri premium care încep de la 20 USD (plată unică).

Pentru mai multe informații despre cum să utilizați aceste plugin-uri și să îmbunătățiți pagina de finalizare a comenzii, consultați ghidul nostru detaliat.

Concluzie

Una peste alta, cu hook-urile WooCommerce vă puteți personaliza pagina de finalizare a comenzii și puteți crește ratele de conversie. Aici, v-am arătat câteva exemple despre cum să utilizați aceste cârlige pentru a personaliza diferite secțiuni ale comenzii. Totuși, poți face mult mai mult! Așadar, vă încurajăm să vă jucați cu ei și să vă dezlănțuiți creativitatea.

Pentru mai multe exemple și informații despre cum să personalizați pagina de plată WooCommerce, consultați acest ghid pas cu pas.

Anunțați-ne în secțiunea de comentarii de mai jos dacă aveți întrebări. Și dacă ți-a plăcut lectura, distribuie această postare pe rețelele de socializare!