Cum să editați pagina de plată WooCommerce
Publicat: 2021-07-21
Doriți să editați pagina de plată din magazinul dvs. WooCommerce? Citiți mai departe, deoarece vă vom oferi o soluție.
Este important să rețineți că pagina de finalizare a achiziției este locul în care clienții plătesc pentru produsul sau serviciul pe care îl oferiți în magazinul dvs. Prin urmare, trebuie să o înțelegeți corect.
Cu toate acestea, WooCommerce vă oferă o configurație implicită, dar poate fi necesar să o personalizați din necesitate, deoarece nu are un aspect profesional. Acest lucru vă va ajuta să vă creșteți ratele de conversie.
Cum să editați pagina de plată WooCommerce
Există două moduri de a personaliza pagina:
- Șablon de plată personalizat – documentația WooCommerce afirmă în mod clar că puteți copia șablonul de finalizare a plății pe tema dvs. într-o structură de foldere ca aceasta: woocommerce/checkout/form-checkout.php. Aceasta înseamnă că puteți personaliza form-checkout.php în funcție de cerințele dvs.
- Plugin -uri – Există o varietate de extensii disponibile pentru a personaliza pagina de plată. Unele dintre ele sunt disponibile gratuit, în timp ce altele sunt extensii plătite.
- Cod personalizat – Această metodă este puțin complicată și necesită anumite cunoștințe tehnice pentru a implementa soluțiile. Cu toate acestea, aceasta este o soluție perfectă dacă doriți doar să faceți o mică editare și nu doriți să cumpărați un plugin. Vom folosi această metodă în acest tutorial.
Pași pentru a edita pagina de plată WooCommerce
Înainte de a începe, merită menționat că WooCommerce are cârlige de acțiune pe fiecare pagină. Cârligele de acțiune pot fi folosite pentru a adăuga sau elimina elemente din pagina de finalizare a achiziției. Există 9 cârlige de acțiune pe pagina de plată:
- woocommerce_before_checkout_form
- woocommerce_checkout_before_customer_details
- woocommerce_checkout_billing
- woocommerce_checkout_shipping
- woocommerce_checkout_after_customer_details
- woocommerce_checkout_before_order_review
- woocommerce_checkout_order_review
- woocommerce_checkout_after_order_review
- woocommerce_after_checkout_form
În plus, există 7 cârlige suplimentare care pot fi disponibile, în funcție de aspectul temei dvs. Le puteți verifica aici.
Am decis să împărtășim câteva exemple pentru a vă ajuta. Iată pașii pe care trebuie să-i urmezi:
- Conectați-vă la site-ul dvs. WordPress și accesați tabloul de bord ca utilizator administrator.
- Din meniul Tablou de bord, faceți clic pe Meniu Aspect > Meniu Editor de teme . Când pagina Editor de teme este deschisă, căutați fișierul cu funcțiile temei unde vom adăuga funcția care va adăuga un mesaj clientului despre detaliile de livrare .
- Adăugați următorul cod în fișierul php :
add_action( 'woocommerce_before_checkout_shipping_form', function() {
echo 'Don\'t forget to include your unit number in the address!';
});
- Acesta este rezultatul:
- Dacă doriți să manipulați orice câmp, puteți utiliza filtrul woocommerce_checkout_fields. De exemplu, pentru a elimina câmpul numărului de telefon de facturare, adăugați următorul cod în același fișier:
// Hook in
add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function njengah_override_checkout_fields( $fields ) {
unset($fields['billing']['billing_phone']); return $fields; }
- Pentru a adăuga un câmp pentru numărul de telefon de expediere, adăugați următorul cod:
// Hook in
add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function njengah_override_checkout_fields( $fields ) {
$fields['shipping']['shipping_phone'] = array(
'label' => __('Phone', 'woocommerce'),
'placeholder'=> _x('Phone', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-wide'),
'clear' => true
);
return $fields;
}
/**
* Display field value on the order edit page
*/
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'njengah_custom_checkout_field_display_admin_order_meta', 10, 1 );
function njengah_custom_checkout_field_display_admin_order_meta($order){
global $post_id;
$order = new WC_Order( $post_id );
echo '<p><strong>'.__('Field Value').':</strong> ' . get_post_meta($order->get_id(), '_shipping_field_value', true ) . '</p>';
}
- Pentru a schimba substituentul câmpului Poștal sau Cod poștal, adăugați următorul cod:
add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function njengah_override_checkout_fields( $fields ) {
$fields['billing']['billing_postcode']['placeholder'] = 'Postal Code';
return $fields;
}
Concluzie
În rezumat, am împărtășit cum puteți utiliza cârligele de acțiune WooCommerce pentru a edita pagina de finalizare a achiziției. Este important să rețineți că puteți vizualiza documentația WooCommerce aici.
Dacă nu sunteți familiarizat cu codarea, vă recomandăm să utilizați un plugin. De asemenea, puteți consulta un dezvoltator WordPress calificat.
Sperăm că acest tutorial v-a ajutat să găsiți o soluție la problema dvs.
Articole similare
- Cum să configurați fișierul de încărcare WooCommerce la finalizarea comenzii
- Cum să adăugați conținut sub titlul produsului prezentat în vitrina
- Cum să adăugați verificarea e-mailului de înregistrare WooCommerce
- Cum se creează paginarea numerelor în WordPress fără a utiliza pluginul
- Ghid complet pentru utilizarea cârligelor personalizate WordPress do_action & apply_filters cu exemple
- Cum să configurați coșul și achiziția WooCommerce pe aceeași pagină
- Cum să personalizați pagina categoriei de produse în WooCommerce
- WooCommerce Creați o pagină de produs unică personalizată
- Cum să adăugați un calculator de livrare WooCommerce pe pagina coșului
- WooCommerce Acceptați termenii și condițiile Caseta de selectare pe formularul de înregistrare
- Cum să adăugați butonul Vizualizare coș în WooCommerce
- Cum să obțineți produsul curent WooCommerce
- Cum să adăugați câmpuri de produse personalizate WooCommerce
- Cum să schimbați șablonul de e-mail în WooCommerce
- Cum să configurați WooCommerce Cumpărați unul Obțineți unul
- Cum să adăugați PayPal Express Checkout la WooCommerce
- Cum se schimbă textul substituent al câmpului de plată WooCommerce