wooCommerce_checkout_fields - 20 de exemple de cod pentru personalizarea checkout -ului WooCommerce

Personalizați -vă checkout -ul WooCommerce fără plugin? Este posibil - dacă sunteți confortabil cu câteva rânduri de PHP. În această postare, veți găsi 20 de fragmente de cod gata de utilizare folosind filtrul woocommerce_checkout_fields . Acestea acoperă cazuri din viața reală, cum ar fi eliminarea câmpurilor, redenumirea etichetelor sau adăugarea de noi opțiuni.

Dacă nu sunteți în codificare, nu vă faceți griji - vă vom arăta, de asemenea, cum să utilizați pluginul câmpurilor de checkout flexibile pentru a obține același rezultat vizual.

Ce este personalizarea checkout și cum ajută la îmbunătățirea conversiilor?

Checkout -ul dvs. este locul în care vizitatorii devin clienți. Dar dacă este aglomerat de câmpuri inutile sau nu are flexibilitate, poate provoca frecare. Personalizarea checkout -ului ajută la reducerea abandonului, la accelerarea achizițiilor și la crearea unei experiențe mai bune.

WooCommerce vine cu un filtru flexibil: woocommerce_checkout_fields . Îl puteți utiliza pentru a modifica facturarea, transportul sau câmpurile suplimentare. Este perfect pentru dezvoltatorii care doresc control asupra vizibilității, comenzii și conținutului pe teren.

20 de exemple de cod folosind filtrul wooCommerce_checkout_fields

Mai jos sunt 20 de exemple. Adăugați aceste fragmente la functions.php temei copilului dvs. Php sau un plugin personalizat.

1. Eliminați al doilea câmp de adresă

 // This code allows disabling the second address field. add_filter('woocommerce_checkout_fields','hide_address_2_field_classic_checkout'); function hide_address_2_field_classic_checkout($fields) { unset ($fields['billing']['billing_address_2']); return $fields; }

2. Ascunderea câmpului telefonului

 // This code allows hiding the phone field add_filter('woocommerce_checkout_fields', 'hide_billing_phone_field_classic_checkout'); function hide_billing_phone_field_classic_checkout($fields) { unset ($fields['billing']['billing_phone']); return $fields; }

3. Faceți câmpul de e -mail opțional

 // This code makes the email field optional add_filter('woocommerce_checkout_fields', 'optional_billing_email_field_classic_checkout'); function optional_billing_email_field_classic_checkout($fields) { $fields['billing']['billing_email']['required'] = false; return $fields; }

4. Schimbați locurile de locații pentru câmpurile de prenume și prenumele

 // This code allows adding the placeholder of the name and last name fields add_filter('woocommerce_checkout_fields', 'add_name_placeholders_classic_checkout'); function add_name_placeholders_classic_checkout($fields) { $fields['billing']['billing_first_name']['placeholder'] = 'Enter your name'; $fields['billing']['billing_last_name']['placeholder'] = 'Enter your surname'; return $fields; }

5. Redenumiți „Numele de familie” la „Prenume”

 // This code allows changing the last name field's label add_filter('woocommerce_checkout_fields', 'change_last_name_label_classic_checkout'); function change_last_name_label_classic_checkout($fields) { $fields['billing']['billing_last_name']['label'] = 'Surname'; return $fields; });

6. Adăugați un câmp de text personalizat

 // This code allows adding a new text field after the email field add_filter('woocommerce_checkout_fields', 'add_custom_text_field_classic_checkout'); function add_custom_text_field_classic_checkout($fields) { $fields['billing']['billing_extra_field'] = [ 'label' => 'Custom text field', 'type' => 'text', 'required' => false, 'priority' => 120, ]; return $fields; }

7. Adăugați o textaree pentru instrucțiuni de livrare

 // This code allows adding a textarea field after the email field and the custom field from the previous example - with further priority add_filter('woocommerce_checkout_fields', 'add_custom_textarea_field_classic_checkout'); function add_custom_textarea_field_classic_checkout($fields) { $fields['billing']['delivery_instructions'] = [ 'label' => 'Delivery instructions', 'type' => 'textarea', 'required' => false, 'priority' => 130, ]; return $fields; }

8. Setați clasa CSS personalizată

 // This code allows adding custom CSS classes to the first and last name fields add_filter('woocommerce_checkout_fields', 'add_custom_css_classes_classic_checkout'); function add_custom_css_classes_classic_checkout($fields) { $fields['billing']['billing_first_name']['class'] = ['form-row-wide primary']; $fields['billing']['billing_last_name']['class'] = ['form-row-wide secondary effect']; return $fields; }

9. Schimbați prioritatea câmpului de e -mail

 /* This code allows moving email after the last name field. The default priority for billing fields: billing_first_name (10) billing_last_name (20) billing_company (30) billing_country (40) billing_address_1 (50) billing_address_2 (60) billing_city (70) billing_state (80) billing_postcode (90) billing_phone (100) billing_email (110) */ add_filter('woocommerce_checkout_fields', 'place_email_after_last_name_classic_checkout'); function place_email_after_last_name_classic_checkout($fields) { $fields['billing']['billing_email']['priority'] = 25; return $fields; }

10. Eliminați câmpul codului poștal

 // This code allows disabling the postcode field. add_filter('woocommerce_checkout_fields','disable_postcode_field_classic_checkout'); function disable_postcode_field_classic_checkout($fields) { unset ($fields['billing']['billing_postcode']); return $fields; }

11. Reordonarea prenumelui după prenumele

 // This code allows moving the first name field after the last name field add_filter('woocommerce_checkout_fields', 'place_first_name_after_last_name_classic_checkout'); function place_first_name_after_last_name_classic_checkout($fields) { $fields['billing']['billing_first_name'] = array( 'priority' => 22, 'class' => 'form-row-last', 'label' => 'First name', ); $fields['billing']['billing_last_name']['class'] = 'form-row-first'; return $fields; }

12. Adăugați o casetă de selectare pentru solicitare de factură

 // This code allows adding a custom checkbox for invoice request. add_filter('woocommerce_checkout_fields', 'add_custom_checkbox_field_classic_checkout'); function add_custom_checkbox_field_classic_checkout($fields) { $fields['billing']['request_invoice'] = [ 'label' => 'Request invoice', 'type' => 'checkbox', 'required' => false, 'priority' => 140, ]; return $fields; }

13. Adăugați Dropdown Selectați pentru timpul de livrare

 // This code allows adding a custom select field add_filter('woocommerce_checkout_fields', 'add_custom_select_classic_checkout'); function add_custom_select_classic_checkout($fields) { $fields['billing']['delivery_time'] = [ 'label' => 'Delivery time', 'type' => 'select', 'options' => [ '' => 'Select...', 'morning' => 'Morning', 'evening' => 'Evening', ], 'priority' => 150, ]; return $fields; }

14. Comentarii de comandă înainte de completare

 // This code allows adding a default field value for order notes add_filter('woocommerce_checkout_fields', 'add_default_value_extra_notes_classic_checkout'); function add_default_value_extra_notes_classic_checkout($fields) { $fields['order']['order_comments']['default']= 'No comments'; return $fields; }

15. Adăugați un câmp de număr personalizat

 // This code allows adding a custom number field add_filter('woocommerce_checkout_fields', 'add_custom_number_field_classic_checkout'); function add_custom_number_field_classic_checkout($fields) { $fields['billing']['number_field'] = [ 'label' => 'Number field', 'type' => 'number', 'validate' => 'number', 'required' => false, 'priority' => 200, ]; return $fields; }

16. Adăugați un pictor de date

 // This code adds a custom date picker add_filter('woocommerce_checkout_fields', 'add_custom_datepicker_classic_checkout'); function add_custom_datepicker_classic_checkout($fields) { $fields['billing']['pickup_date'] = [ 'label' => 'Pickup date', 'type' => 'date', 'validate' => 'date', 'required' => false, 'priority' => 170, ]; return $fields; }

17. Dezactivați validarea telefonului

 // This code removes the phone field validation add_filter('woocommerce_checkout_fields', 'remove_phone_field_validation_classic_checkout'); function remove_phone_field_validation_classic_checkout($fields) { $fields['billing']['billing_phone']['validate'] = false; return $fields; }

18. Faceți ca câmpul de expediere să apară ultimul

 /* This code allows moving shipping country after the last field. The default priority for shipping fields: shipping_first_name (10) shipping_last_name (20) shipping_company (30) shipping_country (40) shipping_address_1 (50) shipping_address_2 (60) shipping_city (70) shipping_state (80) shipping_postcode (90) */ add_filter('woocommerce_checkout_fields', 'place_country_after_last_field_classic_checkout'); function place_country_after_last_field_classic_checkout($fields) { $fields['shipping']['shipping_country']['priority'] = 999; return $fields; }

19. Eliminați câmpul de cod poștal de expediere

 // This code allows disabling the shipping postcode field. add_filter('woocommerce_checkout_fields','disable_shipping_postcode_field_classic_checkout'); function disable_shipping_postcode_field_classic_checkout($fields) { unset ($fields['shipping']['shipping_postcode']); return $fields; }

20. Adăugați un câmp personalizat după detaliile comenzii

 // This code allows adding a new text field after the order notes add_filter('woocommerce_checkout_fields', 'add_custom_text_field_after_order_notes_classic_checkout'); function add_custom_text_field_after_order_notes_classic_checkout($fields) { $fields['order']['order_extra_field'] = [ 'label' => 'Text field', 'type' => 'text', 'required' => false, 'priority' => 20, ]; return $fields; }

Cum se personalizează checkout fără codificare folosind câmpuri de checkout flexibile

Nu este dezvoltator? Nici o problemă. Pluginul câmpurilor de checkout flexibile vă permite să faceți toate cele de mai sus - vizual, din tabloul de bord WordPress.

• Adăugați, îndepărtați și rearanjați câmpurile folosind drag-and-drop
  

  

• Editați etichete, locații și valori implicite
• Setați câmpurile după cum este necesar, opțional sau ascuns
  

  

• Aplicați clase CSS sau reguli de validare
  

  

• Alegeți secțiunea: facturare, transport sau informații suplimentare
• Alocați valori implicite pentru testare sau scopuri UX
• Toate fără a edita PHP sau a scrie cod personalizat

Rezultate fără dezvoltare deasupra capului.

Câmpuri de checkout flexibile Pro - Caracteristici avansate

Vrei mai multă putere și flexibilitate? Versiunea Pro adaugă capabilități avansate:

• Logică condiționată pentru afișarea/ascunderea câmpurilor pe baza conținutului de coș sau a datelor utilizatorului
• Suport pentru tipuri suplimentare de câmp: Date Picker, Time Picker, Radio cu culori sau imagini și multe altele
• Controlul vizibilității pentru rolurile utilizatorului - Afișați diferite câmpuri pentru utilizatorii B2B și B2C
• Afișare pe câmp pe baza metodei de expediere sau de plată selectate
• Preț suplimentar pe setări pe teren

Este posibil să vedeți caracteristicile pluginului pe pagina sa de produs.

Rezumat: Ce metodă este cea mai bună pentru checkout -ul dvs.?

Utilizarea woocommerce_checkout_fields este o modalitate puternică de a personaliza checkout -ul WooCommerce - dar necesită o codificare și testare atentă. De asemenea, trebuie să aveți grijă de actualizările de cod și temă.

Dacă sunteți încrezător să vă editați tema, cele 20 de exemple de mai sus ar trebui să vă ajute să gestionați cele mai comune scenarii.

Dar pentru toți ceilalți, câmpurile de checkout flexibile pentru pluginul WooCommerce oferă o alternativă fără cod, ușor de utilizat, cu și mai multe opțiuni în versiunea Pro.

Puncte cheie

• Filtrul woocommerce_checkout_fields vă permite să personalizați formularul de checkout cu PHP
• Îl puteți utiliza pentru a adăuga, elimina, redenumi, reordona sau stil
• Pluginul câmpurilor de checkout flexibile face același lucru - dar fără a fi nevoie să codificați
• Versiunea Pro adaugă logică condiționată, tipuri suplimentare de câmp și reguli de prețuri pe teren
• Alegeți metoda care se potrivește fluxului de lucru: cod pentru control, plugin pentru viteză