Cum să personalizați pagina de plată a magazinului

Publicat: 2020-10-29

Vitrina Personalizați pagina de plată Procesul de plată în orice magazin online este cel mai important în călătoria cumpărătorului. Acest lucru se datorează faptului că este ultima șansă de a convinge cumpărătorii să facă o achiziție. În plus, merită menționat faptul că multe coșuri de cumpărături sunt abandonate atunci când utilizatorii se răzgândesc în ultimul pas.

Vitrina Personalizați pagina de plată

Factori precum costurile de transport și opțiunile de plată sunt cauza principală a abandonului coșului. Cu toate acestea, pagina de checkout joacă, de asemenea, un rol important. Dacă formularul de finalizare a comenzii este prea complicat sau durează mult pentru a se completa, clienții l-ar putea cumpăra din altă parte. În plus, vă recomand să eliminați câmpurile de plată care solicită informații sensibile.

Cea mai bună modalitate de a optimiza formularul de plată este să ai câmpurile necesare. Acestea ar trebui să se bazeze pe nevoile dvs. de afaceri și pe publicul țintă.

Această postare vă va explica cum să personalizați pagina de plată pentru a vă satisface publicul țintă și nevoile de afaceri.

Personalizarea câmpurilor de plată

Pagina de checkout solicită clienților:

Detalii de facturare
Nume
Numele de familie
Numele companiei
Țară
Abordare
Oraș/Oraș
District
Cod poștal / Zip
Telefon
Adresa de email
Note de comandă

Cel mai bun mod de a personaliza câmpurile de finalizare a plății este prin utilizarea fragmentelor de cod. Pentru a vedea toate clasele și selectoarele, utilizați inspectorul browserului dvs. de pe site-ul dvs. web pentru a găsi elementul exact pe care doriți să îl personalizați.

 <body class="woocommerce-checkout">

<div class="woocommerce">

<form class="woocommerce-checkout">

<div id="customer_details" 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 id="order_review" class="woocommerce-checkout-review-order">

<table class="woocommerce-checkout-review-order-table">

<div id="plata">

<ul class="wc_payment_methods payment_methods methods">

<div class="form-row place-order">

Pași pentru a schimba culoarea de fundal și aspectul casetelor de introducere a textului și pentru a le oferi colțuri rotunjite

Iată pașii simpli 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 > Personalizare .
Navigați în jos la CSS suplimentar în bara laterală din stânga care apare.
Adăugați CSS

 introducere[tip="text"] {

border-radius: 10px !important;

culoare de fundal: aqua !important;

}

Acesta este rezultatul:
Pentru a modifica aspectul câmpurilor, adăugați următorul cod CSS:

 /****************VERIFICĂ***************/

.woocommerce formular .form-row {

latime: 100% !important;

}

.woocommerce-checkout #payment div.payment_box input.input-text, .woocommerce-checkout #payment div.payment_box textarea {

latime: 100% !important;

umplutură: 8px;

}

.woocommerce #payment .form-row select, .woocommerce-page #payment .form-row select {

latime: 100%;

înălțime: 30px;

}

.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {

plutește la stânga;

latime: 100%;

}

.custom-checkout h3 {

culoare de fundal: #165f1c; /****SCHIMBAȚI CULOAREA PENTRU FUNDALUL TITLULUI ****/

latime: 45%;

text-align: centru;

umplutură: 10px;

chenar-rază: 5px;

margine-sus: 50px;

culoare: #FFF;

plutire: dreapta;

}

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {

captuseala: .6180469716em;

culoare de fundal: #f2f2f2;

culoare: #43454b;

contur: 0;

chenar: 0;

-webkit-aspect: nici unul;

chenar-rază: 2px;

dimensionare cutie: chenar-cutie;

greutate font: 400;

chenar: solid 2px #e4e4e4;

}

#wc_checkout_add_ons {

latime: 45%;

plutire: dreapta;

text-align: centru;

}

Ecran @media și (lățime minimă: 980 px) {

.woocommerce-livrare-câmpuri h3, .woocommerce-billing-fields h3 {width:100%;}

.woocommerce .col2-set, .woocommerce-page .col2-set {

latime: 45%;

plutește la stânga;

}

.woocommerce-checkout-review-order{

latime: 45%;

plutire: dreapta;

}

}

Ecran @media și (lățime maximă: 979 px) {

.custom-checkout h3 {

latime: 100%;

}

}

Acesta este rezultatul:

Pași pentru a elimina un câmp de plată

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 pentru a elimina câmpul de finalizare.
Adăugați următorul cod în fișierul php . Cu toate acestea, inserarea întregului cod va elimina toate câmpurile din pagina de finalizare a achiziției, așa că asigurați-vă că includeți numai câmpurile pe care doriți să le eliminați .

 /**

Eliminați toate câmpurile posibile

**/

funcția wc_remove_checkout_fields( $fields ) {

// Câmpuri de facturare

unset( $fields['billing']['billing_company'] );

unset( $fields['billing']['billing_email'] );

unset( $fields['billing']['billing_phone'] );

unset( $fields['billing']['billing_state'] );

unset( $fields['facturare']['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'] );
// Câmpuri de expediere

unset( $fields['shipping']['shipping_company'] );

unset( $fields['shipping']['shipping_phone'] );

unset( $fields['shipping']['shipping_state'] );

unset( $fields['livrare']['nume_nume_livrare'] );

unset( $fields['livrare']['nume_nume_livrare'] );

unset( $fields['shipping']['shipping_address_1'] );

unset( $fields['shipping']['shipping_address_2'] );

unset( $fields['shipping']['shipping_city'] );

unset( $fields['shipping']['shipping_postcode'] );

// Câmpuri de comandă

unset( $fields['order']['order_comments'] );

returnează $câmpuri;

}

add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' );

De menționat că câmpul de țară este obligatoriu. Dacă eliminați acest câmp, comenzile clienților nu pot fi finalizate. Acest lucru se datorează faptului că veți primi o eroare care vă spune „Vă rugăm să introduceți o adresă pentru a continua”.

Pași pentru a face un câmp obligatoriu să nu fie obligatoriu

În acest exemplu, voi edita câmpul Telefon de facturare. 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 pentru a face un câmp obligatoriu să nu fie necesar.
Adăugați următorul cod la funcție. fișier php

 add_filter( 'woocommerce_billing_fields', 'wc_unrequire_wc_phone_field');

function wc_unrequire_wc_phone_field( $fields ) {

$fields['billing_phone']['required'] = false;

returnează $câmpuri;

}

Acesta este rezultatul:

Pași pentru a schimba etichetele câmpurilor de intrare și substituenții

Iată pașii simpli 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 pentru a schimba etichetele câmpurilor de intrare și substituenții.
Adăugați următorul cod în fișierul php

 add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');

funcția custom_override_checkout_fields($fields)

{

unset($fields['billing']['billing_address_2']);

$fields['billing']['billing_company']['placeholder'] = 'Numele companiei';

$fields['billing']['billing_company']['label'] = 'Numele companiei';

$fields['billing']['billing_first_name']['placeholder'] = 'Prenumele';

$fields['shipping']['shipping_first_name']['placeholder'] = 'Prenumele';

$fields['shipping']['shipping_last_name']['placeholder'] = 'Nume';

$fields['shipping']['shipping_company']['placeholder'] = 'Numele companiei';

$fields['billing']['billing_last_name']['placeholder'] = 'Nume';

$fields['billing']['billing_email']['placeholder'] = 'Adresa de e-mail ';

$fields['billing']['billing_phone']['placeholder'] = 'Telefon ';

returnează $câmpuri;

}

Acesta va fi rezultatul:

Concluzie

În rezumat, am împărtășit cum puteți personaliza câmpurile de finalizare a comenzii de pe pagina de finalizare a comenzii. Optimizarea acestei pagini este importantă, deoarece este ultima șansă pe care o ai de a convinge cumpărătorii să facă o achiziție.

În plus, trebuie să colectați informațiile de care aveți nevoie în funcție de nevoia de afaceri și de publicul țintă. Acest lucru vă va ajuta să reduceți abandonul coșului și să îmbunătățiți semnificativ vânzările în magazinul dvs.

Cu toate acestea, dacă nu puteți modifica fragmentele de cod pe care le-am distribuit, vă rugăm să angajați un dezvoltator, astfel încât să nu vă distrugeți site-ul.

Articole similare

Cum să adăugați un câmp suplimentar în formularul de plată WooCommerce
Cum să ascundeți produsul WooCommerce din rezultatele căutării
Cum să vinzi produse digitale cu WooCommerce
Cum să adăugați numere GTIN pe produse în WooCommerce
Cum să adăugați starea comenzii personalizate în WooCommerce
Ascundeți sau eliminați câmpul Cantitate din pagina produsului WooCommerce
Cum să ascundeți categoria WooCommerce Storefront Theme
Cum se dezactivează metoda de plată pentru o anumită categorie
Cum să ascundeți subsolul mobil din magazinul WooCommerce
Cum se schimbă culoarea butoanelor tema vitrinei
Cum să schimbați numărul de produse pe rând de vitrine
Cum să dezactivezi filele Următorul produs în WooCommerce Storefront
Cum să eliminați produsele înrudite Tema magazinului WooCommerce
Fragment PHP de deconectare WooCommerce pentru a crea butonul de deconectare
Cum să schimbați produsele pe pagină Tema magazinului WooCommerce
Cum să adăugați pictograme de plată WooCommerce în subsol [HTML]
Cum să eliminați coșul din antetul temei Vitrinei
Cum se schimbă ordinea produselor cu tema vitrinei
Cum să schimbați dimensiunea fontului Tema magazinului WooCommerce
Cum să redenumești mesajele de stare a comenzii în WooCommerce