Cum să adăugați un câmp suplimentar în formularul de plată WooCommerce

Publicat: 2020-09-21

Cum să adăugați un câmp suplimentar în formularul de plată WooCommerce Dacă conduceți un magazin WooCommerce, atunci știți deja despre semnificația unei pagini de finalizare a achiziției. Cu toate acestea, există momente când trebuie să adăugați un câmp suplimentar în formularul de finalizare a plății WooCommerce sau alte câmpuri personalizate de finalizare a plății pe o pagină de finalizare, în funcție de cerințele proiectului dvs. Aceasta poate fi o muncă grea pentru unii proprietari de magazine WooCommerce și de aceea am decis să creez un scurt tutorial despre cum puteți adăuga un câmp suplimentar în formularul de achiziție WooCommerce.

Pagina de plată WooCommerce

În general, pagina de finalizare a achiziției este un termen de comerț electronic care se referă la o pagină afișată unui client în timpul procesului sistematic de finalizare a achiziției, la ultimul pas înainte de a face achiziția. Există mai multe modalități de a îmbunătăți conversiile paginii de plată, dar una dintre modalități este să adăugați un câmp suplimentar în formularul de plată WooCommerce care este legat de produsul dvs. specific, precum și să eliminați toate celelalte câmpuri inutile ale paginii de plată.

Această pagină conține câmpuri pe care clienții trebuie să le completeze. De asemenea, merită menționat faptul că aceasta este cea mai importantă pagină atât pentru vânzător, cât și pentru client, deoarece clienții trebuie să furnizeze informații importante precum adrese, detalii de facturare, metoda de plată, care vor ajuta vânzătorul să livreze produsul clientului. . pagina de plată implicită

Când există erori pe această pagină, niciun client nu va putea face nicio achiziție. Acest lucru ar afecta foarte mult performanța magazinului dvs., deoarece nu veți putea realiza vânzări.

Dacă utilizați WooCommerce pentru a vă alimenta magazinul online, veți primi și pagina de finalizare a achiziției. Cu toate acestea, dacă sunteți familiarizat cu WooCommerce, atunci știți că acesta nu vă oferă posibilitatea de a vă personaliza pagina de plată din setări.

Adăugați un câmp suplimentar în formularul de plată WooCommerce

Există multe modalități de a modifica pagina de plată a magazinelor dvs. WooCommerce, cum ar fi utilizarea unui plugin terță parte, extensii WooCommerce sau dezvoltare personalizată.

Așa cum am menționat mai devreme, câmpul de plată personalizat WooCommerce este important în asamblare pentru a obține date suplimentare de la cumpărători înainte de a finaliza o comandă.

Există momente în care aveți nevoie de informații suplimentare de la clienții dvs. și aveți nevoie de un câmp suplimentar pentru a face acest lucru.

Acum că ați cunoscut elementele de bază, permiteți-ne să aruncăm o privire profundă în tutorial. Pentru a adăuga un câmp personalizat la pagina de plată, vom folosi două abordări:

  • Folosind un plugin.
  • Crearea unui cod personalizat.

a) Pași pentru a adăuga un câmp suplimentar la pagina dvs. de plată WooCommerce folosind cod

Această soluție este pentru persoanele care știu să codifice precum dezvoltatorii. Acest cod personalizat vă va ajuta să adăugați câmpul personalizat la pagina de finalizare a comenzii folosind câțiva pași simpli.

Iată pașii simpli pe care trebuie să-i urmezi:

  1. Conectați-vă la site-ul dvs. WordPress și accesați tabloul de bord ca utilizator administrator.
  2. 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 câmp suplimentar la pagina de finalizare a comenzii în WooCommerce .
  3. Adăugați următorul cod în fișierul php :
 /**

* Adăugați un câmp personalizat la pagina de finalizare a achiziției

*/

add_action('woocommerce_after_order_notes', 'custom_checkout_field');

function custom_checkout_field($checkout)

{

echo '<div id="custom_checkout_field"><h2>' . __(„Tit nou”) . „</h2>”;

woocommerce_form_field('nume_câmp_personalizat', array(

'type' => 'text',

'class' => array(

„clasa-meu-câmp-form-row-wide”

),

'label' => __('Câmp suplimentar personalizat') ,

'placeholder' => __('Câmp personalizat nou') ,

),

$checkout->get_value('nume_câmp_personalizat'));

ecou '</div>';

}
  1. Pentru a vedea rezultatul , trebuie să reîmprospătați pagina de plată și ar trebui să vedeți acest lucru: câmp personalizat în casă
  2. Cu toate acestea, este important să rețineți că trebuie să validăm datele câmpului personalizat. pentru a face asta, pur și simplu adăugați următorul cod în fișierul functions.php :
 /**

* Procesul de checkout

*/

add_action('woocommerce_checkout_process', 'customised_checkout_field_process');

funcția customised_checkout_field_process()

{

// Afișează un mesaj de eroare dacă câmpul nu este setat.

if (!$_POST['customised_field_name']) wc_add_notice(__('Vă rugăm să introduceți valoarea!') , 'eroare');

}

Dacă nu există nicio intrare în câmpul personalizat, va apărea o eroare și acesta va fi rezultatul : nicio intrare în câmpul personalizat

  1. Acum că am adăugat câmpul personalizat de plată și l-am validat, să confirmăm acum că detaliile introduse în câmpul personalizat sunt sau nu salvate . Acest lucru se poate face folosind următorul cod care va fi adăugat la fișierul functions.php :
 /**

* Actualizați valoarea dată în câmpul personalizat

*/

add_action('woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta');

funcția custom_checkout_field_update_order_meta($order_id)

{

dacă (!gol ($_POST['nume_câmp_personalizat'])) {

update_post_meta($order_id, 'Some Field',sanitize_text_field($_POST['customised_field_name']));

}

}

Cum funcționează codul.

Acest cod funcționează în trei pași simpli. În primul fragment de cod, am creat câmpul personalizat cu titlul. Apoi, al doilea fragment este pentru validarea dacă există o intrare în câmpul personalizat.

Al treilea fragment de cod este folosit pentru a confirma că detaliile introduse în câmpul personalizat de către client sunt sau nu salvate. De asemenea, este important să rețineți că aceste fragmente de cod ar trebui adăugate în fișierul functions.php al magazinului dvs. WooCommerce.

b) Pași pentru a adăuga un câmp suplimentar la pagina de plată WooCommerce folosind un plugin

Această soluție este pentru utilizatorii WordPress care nu sunt familiarizați cu codificare. Această soluție implică utilizarea pluginului WooCommerce Checkout Manager. WooCommerce Checkout Manager

Vă voi oferi un ghid sistematic detaliat care vă va ajuta să descărcați pluginul și să îl utilizați pentru a adăuga un câmp suplimentar pe pagina de finalizare a achiziției.

Iată pașii pe care trebuie să-i urmezi:

  1. Conectați-vă la site-ul dvs. WordPress și accesați tabloul de bord ca utilizator administrator.
  2. Apoi, vom instala pluginul pe care l-am indicat mai devreme. Dacă l-ați descărcat folosind link-ul de mai sus, pur și simplu navigați la Plugin-uri > Adăugați nou. După aceea, faceți clic pe Încărcați pluginul și apoi căutați fișierul descărcat, după cum se arată mai jos: instalarea pluginului
  3. Pentru a-l descărca direct în panoul de administrare, pur și simplu navigați la Plugin-uri > Adăugați nou. După aceea, va trebui să faceți o căutare prin cuvinte cheie pentru pluginul „WooCommerce Checkout Manager”. Trebuie să îl instalați și să îl activați așa cum se arată mai jos: Instalare WooCommerce Checkout Manager
  4. Pentru a crea câmpuri noi, accesați Tabloul de bord WordPress și faceți clic pe WooCommerce > Setări . Apoi, faceți clic pe fila Checkout și faceți clic pe fila Adițional . Faceți clic pe Adăugați un câmp nou, așa cum se arată mai jos: adăugarea unui câmp nou folosind pluginul
  5. Va apărea o nouă fereastră și trebuie să adăugați detaliile relevante. Nu uitați să salvați toate modificările pe care le faceți: folosind pluginul
  6. Pentru a vedea rezultatul, reîmprospătați pagina de plată și veți vedea noul câmp de finalizare: câmp personalizat în casă

Concluzie

În acest scurt tutorial, v-am arătat cum să adăugați un câmp nou la pagina de finalizare a achiziției. Sunt sigur că până acum știi cum să adaugi un câmp suplimentar și nu este deloc greu. Am împărtășit două soluții. Unul implică utilizarea unui cod PHP care va adăuga câmpul suplimentar, iar celălalt este cu un plugin. Plugin-ul are și alte caracteristici suplimentare pe care le puteți vedea, de asemenea, și este o soluție pentru cei mai puțin cunoscători de tehnologie. Cu toate acestea, puteți schimba numele câmpurilor în funcție de cerințele dvs.

Articole similare

  1. Cum să omiteți coșul de cumpărături și să redirecționați către pagina de plată WooCommerce
  2. Cum să integrezi Stripe cu WooCommerce
  3. Cum să eliminați bara laterală din pagina de produs în temele WooCommerce
  4. Cum să adăugați pictograme de plată WooCommerce în subsol [HTML]
  5. Cum să obțineți metode de plată în WooCommerce » Exemplu de cod
  6. Cum să ascundeți produsele fără preț în WooCommerce
  7. Cum să eliminați detaliile de facturare din WooCommerce Checkout
  8. Ascundeți sau eliminați câmpul Cantitate din pagina produsului WooCommerce
  9. Cum să ascundeți câmpul Cod cupon WooCommerce
  10. Cum să redenumești mesajele de stare a comenzii în WooCommerce
  11. Cum să eliminați Sortarea implicită a produselor WooCommerce
  12. Cum să sortați categoriile WooCommerce pentru o experiență mai bună a utilizatorului
  13. Cum se adaugă imaginea produsului Pagina de plată WooCommerce
  14. Cum să ascundeți butonul Adăugați în coș în WooCommerce
  15. Cum să ascundeți produsul WooCommerce din rezultatele căutării
  16. Cum să ascundeți toate produsele din pagina de magazin în WooCommerce
  17. Cum se dezactivează metoda de plată pentru o anumită categorie
  18. Cum să verificați dacă pluginul este activ în WordPress [ 3 MODI ]
  19. Cum să utilizați atributele produsului WooCommerce pas cu pas [Ghid complet]
  20. Cum să redimensionați imaginile produselor WooCommerce
  21. Cum să adăugați categorii la produsele WooCommerce
  22. Cum să îmi creez pagina contului în WooCommerce
  23. Cum se creează o notificare de administrator WooCommerce pentru plugin – Dezvoltare WooCommerce
  24. Cum să găsești rapid ID-ul produsului în WooCommerce
  25. Cum să schimbați textul butonului de finalizare a comenzii în WooCommerce [Plasați comandă]