Cum să personalizați câmpurile de plată WooCommerce

Publicat: 2020-01-09

Procesul de finalizare a achiziției este unul dintre cei mai importanți pași în călătoria cumpărătorului - este ultima șansă pe care o aveți de a convinge cumpărătorii să facă o achiziție. Dar 63,23% dintre coșurile de cumpărături din comerțul electronic sunt abandonate. Sunt mulți cumpărători online care decid să cumpere un produs, dar se răzgândesc în ultima secundă.

Există o varietate de factori care influențează cărucioarele abandonate (cum ar fi costurile de transport și opțiunile de plată), dar pagina de finalizare a achiziției în sine joacă, de asemenea, un rol. Dacă este prea complicat, prea lung sau necesită informații prea personale, clienții pot părăsi și cumpăra un produs similar în altă parte.

O modalitate de a vă optimiza pagina de plată? Câmpuri de plată personalizate în funcție de nevoile afacerii dvs. și de publicul țintă. De exemplu: dacă de obicei nu vindeți companiilor, eliminați câmpul Nume companie . Dacă trimiteți clienților surprize de ziua nașterii, includeți un câmp pentru Data nașterii . Dacă vindeți produse pentru animale de companie, poate fi logic să cereți tipul de animal de companie .

În acest articol, vă vom prezenta cum să vă personalizați pagina de plată pentru a răspunde atât nevoilor publicului țintă, cât și ale afacerii.

Modificări în câmpul de checkout

WooCommerce oferă toate câmpurile esențiale pentru pagina dvs. de plată. În mod implicit, solicită clienților:

  • Detalii de facturare
  • Nume
  • Numele de familie
  • Numele Companiei
  • Țară
  • Abordare
  • Oraș/Oraș
  • District
  • Cod poștal / Zip
  • Telefon
  • Adresa de e-mail
  • Note de comandă

Există o mulțime de moduri de a personaliza pagina, inclusiv:

  • Editarea designului
  • Schimbarea textului de pe butonul „Plasează comandă”.
  • Eliminarea unui câmp
  • Efectuarea unui câmp obligatoriu (sau neobligatoriu)
  • Modificarea etichetelor câmpurilor de introducere și a textului substituent
  • Colectarea numerelor de cont ale clienților
  • Verificarea unei preferințe de livrare
  • Permiterea clienților să solicite o dată de livrare sau un termen limită
  • Setarea unei metode de contact preferate

Acestea sunt doar câteva dintre personalizările pe care le puteți face; WooCommerce oferă o flexibilitate aproape nesfârșită pentru fiecare nivel de experiență. Dacă vă place să editați codul, îl puteți personaliza cu fragmente de cod. Dacă preferați puțin mai multă structură, există o varietate de extensii și pluginuri pentru editarea câmpurilor de plată.

Personalizați câmpurile de plată folosind fragmente de cod

Notă: Dacă nu sunteți familiarizat cu codul și cu rezolvarea potențialelor conflicte, selectați un WooExpert sau un dezvoltator pentru asistență. Nu putem oferi asistență pentru personalizări conform Politicii noastre de asistență.

Fragmentele de cod sunt modalități flexibile prin care dezvoltatorii și proprietarii de magazine pot personaliza câmpurile de plată WooCommerce. Iată o listă de etichete principale, inclusiv clase și ID-uri, pe care le puteți folosi pentru a personaliza designul vizual al paginii dvs. de plată. Adăugați CSS personalizat la tema copilului dvs. sau la Personalizatorul WordPress.

Pentru a vedea toate clasele și selectoarele, utilizați inspectorul browserului dvs. de pe site-ul dvs. web pentru a găsi zona exactă pe care doriți să o personalizați.

 <body class="woocommerce-checkout"> <div class="woocommerce"> <form class="woocommerce-checkout"> <div class="col2-set"> <div class="woocommerce-billing-fields"> <p class="form-row"> <div class="woocommerce-shipping-fields"> <p class="form-row"> <div class="woocommerce-additional-fields"> <div class="woocommerce-checkout-review-order"> <table class="woocommerce-checkout-review-order-table"> <div> <ul class="wc_payment_methods payment_methods methods"> <div class="form-row place-order">

De exemplu, dacă doriți să schimbați culoarea de fundal a casetelor de introducere a textului și să le oferiți colțuri rotunjite, ați adăuga:

 input[type="text"] { border-radius: 10px !important; background-color: #222 !important; }

Eliminați un câmp de plată:

Acest lucru este destul de simplu, dar aveți grijă , deoarece această modificare poate provoca conflicte cu alte extensii și pluginuri.

Adăugați următorul cod în fișierul functions.php al temei copilului dumneavoastră. Rețineți că lipirea întregului cod va elimina tot câmpurile din pagina de finalizare a achiziției, deci asigurați-vă că includeți numai câmpurile pe care doriți să le eliminați.

 /** Remove all possible fields **/ function wc_remove_checkout_fields( $fields ) { // Billing fields unset( $fields['billing']['billing_company'] ); unset( $fields['billing']['billing_email'] ); unset( $fields['billing']['billing_phone'] ); unset( $fields['billing']['billing_state'] ); unset( $fields['billing']['billing_first_name'] ); unset( $fields['billing']['billing_last_name'] ); unset( $fields['billing']['billing_address_1'] ); unset( $fields['billing']['billing_address_2'] ); unset( $fields['billing']['billing_city'] ); unset( $fields['billing']['billing_postcode'] ); // Shipping fields unset( $fields['shipping']['shipping_company'] ); unset( $fields['shipping']['shipping_phone'] ); unset( $fields['shipping']['shipping_state'] ); unset( $fields['shipping']['shipping_first_name'] ); unset( $fields['shipping']['shipping_last_name'] ); unset( $fields['shipping']['shipping_address_1'] ); unset( $fields['shipping']['shipping_address_2'] ); unset( $fields['shipping']['shipping_city'] ); unset( $fields['shipping']['shipping_postcode'] ); // Order fields unset( $fields['order']['order_comments'] ); return $fields; } add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' );

Notă: câmpul Țară este obligatoriu . Dacă îl eliminați, comenzile nu pot fi finalizate, iar formularul dvs. de finalizare va da următoarea eroare: „Vă rugăm să introduceți o adresă pentru a continua”.

Faceți un câmp obligatoriu care nu este obligatoriu:

În exemplul de mai jos, vom edita câmpul Telefon de facturare . Adăugați acest cod în fișierul functions.php al temei copilului dumneavoastră.

 add_filter( 'woocommerce_billing_fields', 'wc_unrequire_wc_phone_field'); function wc_unrequire_wc_phone_field( $fields ) { $fields['billing_phone']['required'] = false; return $fields; }

Ca alternativă, dacă doriți să faceți obligatoriu un câmp, schimbați textul „fals” în „ adevărat ”.

Modificați etichetele câmpurilor de intrare și substituenții:

Adăugați următorul cod în fișierul functions.php al temei copilului și personalizați-l pentru a se potrivi nevoilor dvs.

 add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields'); function custom_override_checkout_fields($fields) { unset($fields['billing']['billing_address_2']); $fields['billing']['billing_company']['placeholder'] = 'Business Name'; $fields['billing']['billing_company']['label'] = 'Business Name'; $fields['billing']['billing_first_name']['placeholder'] = 'First Name'; $fields['shipping']['shipping_first_name']['placeholder'] = 'First Name'; $fields['shipping']['shipping_last_name']['placeholder'] = 'Last Name'; $fields['shipping']['shipping_company']['placeholder'] = 'Company Name'; $fields['billing']['billing_last_name']['placeholder'] = 'Last Name'; $fields['billing']['billing_email']['placeholder'] = 'Email Address '; $fields['billing']['billing_phone']['placeholder'] = 'Phone '; return $fields; }

Personalizați câmpurile de plată cu pluginuri

WooCommerce oferă câteva extensii excelente pentru editarea câmpurilor de plată fără a atinge o linie de cod.

Checkout Field Editor

Extensia Checkout Field Editor vă permite să adăugați și să eliminați câmpuri de plată sau să actualizați tipul, eticheta și valoarea substituentului cu câteva clicuri. De asemenea, puteți marca fiecare câmp de plată ca „obligatoriu” sau „nu este obligatoriu”.

captură de ecran a opțiunilor Checkout Field Editor

Când adăugați un câmp nou, puteți alege dintre următoarele tipuri:

  • Text – introducerea textului standard
  • Parola – introducerea textului parolei
  • Textarea – Un câmp de zonă de text
  • Selectare – O casetă drop-down/selectare
  • Multi-select – O casetă multi-select
  • Radio – Un set de intrări radio
  • Casetă de selectare – Un câmp de casetă de selectare
  • Selector de dată – Un câmp de text cu un selector de dată atașat
  • Titlu – Un titlu, pentru organizarea unei pagini mai lungi

Dacă produsele dvs. sunt oferite în mod obișnuit ca cadouri, ați putea oferi mai multe opțiuni de ambalare. Puteți folosi butoanele radio pentru a le permite clienților să aleagă între ambalaj simplu, ambalaj cu tematică aniversară sau ambalaj cu tematică aniversară. Puteți face acest câmp obligatoriu, setați eticheta la „Alegeți tipul de pachet” și setați substituentul la „simple”.

Pentru a ajuta cu personalizări avansate, Checkout Field Editor oferă documentație utilă.

Suplimente WooCommerce Checkout

Extensia WooCommerce Checkout Add-Ons vă oferă flexibilitatea de a oferi suplimente gratuite sau plătite la finalizare, cum ar fi îndeplinirea rapidă, împachetarea cadourilor sau vânzări în plus, cum ar fi autocolante sau asigurări. Puteți adăuga mai multe tipuri de câmpuri la pagina dvs. de finalizare, inclusiv câmpuri de text, zone de text, liste derulante, selecții multiple, butoane radio, casete de selectare, casete de selectare multiple și încărcări de fișiere.

Suplimentele de finalizare a comenzii sunt afișate pe o pagină de plată

În tabloul de bord, veți putea, de asemenea, să sortați și să filtrați comenzile în funcție de opțiunile pe care le-ați creat. Acest lucru ar putea fi util dacă doriți să acordați prioritate comenzilor după data livrării sau să afișați numai comenzile cu procesare accelerată. Sau poate doriți să împachetați comenzile împachetate în cadou, toate în același timp.

WooCommerce One Page Checkout

Doriți să vă simplificați și mai mult procesul de plată? Extensia WooCommerce One Page Checkout transformă orice pagină într-o pagină de plată.

Potrivit unui studiu al Institutului Baymard, unul din patru cumpărători a abandonat un cărucior în ultimul trimestru din cauza unui proces de plată lung sau complicat. WooCommerce One Page Checkout combate acest lucru, permițând clienților să adauge produse în coșul lor și să trimită plata, toate pe aceeași pagină.

Puteți chiar să adăugați câmpuri de plată în paginile de destinație , ceea ce este deosebit de util dacă sunteți o companie bazată pe servicii.

Conectare socială WooCommerce

Forțarea unui client să-și creeze un cont pe site-ul dvs. este o potențială barieră în calea achiziției. Oferându-le posibilitatea de a-și folosi profilurile de rețele sociale existente pentru a-și crea un cont, ajută la înlăturarea acestei bariere.

Prompt de conectare WooCommerce Social pe pagina de conectare a clientului

Extensia WooCommerce Social Login face acest proces cât mai ușor și sigur posibil. Clienții se pot conecta la site-ul dvs. folosind conturile lor de Facebook, Twitter, Google, Amazon, LinkedIn, PayPal, Instagram, Disqus, Yahoo sau VK, în loc să creeze noi informații de conectare.

Începeți să personalizați

Procesul de finalizare a achiziției poate avea un impact semnificativ asupra ratei de conversie, așa că ar trebui să faceți modificări cu atenție, având în vedere un obiectiv specific.

Din fericire, WooCommerce vă oferă flexibilitatea de a vă personaliza procesul de plată pentru a vă servi cel mai bine clienții online. Indiferent dacă trebuie să faceți modificări vizuale sau să adăugați și să eliminați câmpuri de plată, aveți o mulțime de soluții din care să alegeți.