Cum să adăugați câmpuri personalizate la pagina de plată WooCommerce

Publicat: 2020-07-21

Doriți să vă personalizați finalizarea comenzii ? În acest ghid, vă vom arăta cum să adăugați câmpuri personalizate la pagina de plată în WooCommerce pentru a vă duce magazinul la nivelul următor.

De ce să personalizați checkout-ul WooCommerce?

În QuadLayers, am văzut anterior cum să personalizăm pagina magazinului în WooCommerce. Astăzi, vom vedea cum să facem același lucru și să includem câmpuri personalizate în finalizarea comenzii. Checkout este una dintre cele mai importante pagini pentru orice magazin online . Este locul unde vrei să-ți duci cumpărătorii, astfel încât aceștia să finalizeze achiziția și tu să închizi vânzarea. Așadar, pentru a vă îmbunătăți ratele de conversie și veniturile, optimizarea procesului de achiziție cu câmpuri personalizate este o necesitate.

Cum este pagina de checkout perfectă? Asta depinde foarte mult de afacerea ta. De exemplu, plata pentru produsele fizice este diferită de cea pentru produsele digitale. Alegeți o finalizare cu o pagină sau mai multe pagini, afișați sau ascundeți câmpuri, utilizați culori diferite și așa mai departe. Cu toate acestea, cel mai important lucru este că achiziția dvs. generează încredere în utilizator, nu are distragere a atenției și este optimizată astfel încât cumpărătorul să petreacă cât mai puțin timp posibil.

Cum să adăugați câmpuri personalizate la pagina de plată WooCommerce?

Există două modalități principale de a adăuga sau de a ascunde câmpuri personalizate pe pagina de finalizare a achiziției în WooCommerce:

Cu pluginuri
Din punct de vedere programatic

Dacă nu aveți abilități de codare, vă recomandăm să verificați aceste plugin-uri:

WooCommerce Direct Checkout : Este un instrument excelent pentru a simplifica procesul de finalizare a comenzii și a redirecționa utilizatorii de pe pagina produsului către finalizarea comenzii. Are o versiune gratuită și planuri premium care încep de la 19 USD.
WooCommerce Checkout Manager : Cu peste 90.000 de instalări active, Checkout Manager este un plugin excelent pentru a vă crește ratele de conversie. Vă permite să adăugați, să personalizați și să ștergeți câmpuri pe pagina de finalizare a comenzii. Este un instrument freemium cu o versiune gratuită și planuri pro de la 19 USD.

Acele pluginuri de plată sunt alegeri excelente și vor face treaba fără probleme. Cu toate acestea, dacă nu doriți să instalați niciun plugin, vă puteți codifica soluția. În acest ghid, ne vom concentra asupra modului în care puteți adăuga câmpuri personalizate la pagina de finalizare a achiziției WooCommerce cu ceva codificare .

Adăugați câmpuri personalizate la finalizarea WooCommerce în mod programatic

În această secțiune, veți învăța cum să adăugați câmpuri personalizate la pagina de achiziție WooCommerce în mod programatic . Vă vom arăta cum să includeți:

Text
Caseta de bifat
Tipuri de intrare radio

Există și alte câmpuri personalizate pe care le puteți adăuga, dar vă rugăm să rețineți că ar putea avea nevoie de un anumit tip de validare. Deci, în acest tutorial, ne vom concentra pe acele 3 tipuri și ne vom omite câmpurile care necesită validarea valorilor introduse. În plus, vom afișa câmpuri personalizate în lista comenzilor backend și șabloanele de e-mail.

NOTĂ : Rețineți că, dacă doriți să adăugați alte câmpuri la proiectele dvs., trebuie să implementați o validare de securitate.

Deci, pentru a adăuga câmpuri personalizate la pagina de plată WooCommerce, există două opțiuni:

Vă puteți codifica scripturile într-o temă copil
Creați un plugin personalizat

Pentru a construi o soluție mai scalabilă și mai bine organizată, vom crea un plugin personalizat . În plus, spre deosebire de abordarea temei pentru copii, un plugin personalizat poate fi, de asemenea, punctul de plecare al dezvoltării ulterioare. Cu toate acestea, dacă preferați să utilizați o temă pentru copii, vă recomandăm să consultați acest ghid.

Adăugați câmpuri personalizate la finalizarea WooCommerce cu un plugin personalizat

Pluginul personalizat pe care îl vom construi va avea trei fișiere.

Principal
În față
Backend

Fișierul principal acționează ca o poartă de intrare în fișierul front-end, pe care îl vom folosi pentru scripturile noastre front-end. De asemenea, vom include al treilea fișier, unde sunt scripturile backend. Este de remarcat faptul că acest fișier front-end va fi fișierul de bază principal și ar trebui mutat într-un fișier ierarhic de nivel scăzut (la fel ca fișierul nostru de backend) dacă adăugați mai multe clase. Deci, acum, să vedem cum să adăugați câmpuri personalizate la pagina de finalizare a plății WooCommerce folosind un plugin personalizat .

1. Deschideți IDE-ul preferat și creați un folder cu trei fișiere:

QuadLayers_checkout_fields /__Classes /__/__class_qlccf_base.php (fișier Frontend) /__/__class_qlccf_back.php (fișier backend) /__QuadLayers_checkout_fields.php (Fișier principal)

2. Fișierul principal

Fișierul principal este QuadLayers_checkout_fields.php :

 <?php
/**
 * @link https://quadlayers.com/
 * @din 1.0.0
 * Nume plugin: Câmpuri personalizate QuadLayers Checkout 
 * URI plugin: https://quadlayers.com/
 * Descriere: plugin pentru a crea câmpuri personalizate în pagina de plată WooCommerce, pentru a imprima comenzile backend și șabloanele de e-mail
 * Versiunea: 1.0.0
 * Autor: Sebastopolys
 * URI autor: https://quadlayers.com/
 * Domeniu text: qlccf
 */
if(!defined('ABSPATH')){die('-1');}
elseif(!class_exists('run_init')){
	clasa finală run_init{	
		funcția publică statică run(){
			returnează include_once plugin_dir_path( __FILE__ ).'classes/class_qlccf_base.php';
		}
	}
	run_init::run();
}
altfel{
	echo „<h3>EROARE - Clasa run_init existentă în QuadLayers_checkout_fields.php !</h3>”;
}

Puteți modifica informațiile pluginului, funcțiile și numele fișierelor și puteți pune propriile dvs. Dar vă sugerăm mai întâi să copiați și să lipiți scripturile fără a edita nimic, astfel încât să înțelegeți mai bine cum funcționează.

3. Fișier de clasă front-end

Fișierul front end este class_qlccf_base.php . Aici locuiește clasa principală și unde poți include un număr nelimitat de clase și funcții. O clasă abstractă nu poate fi instanțiată, așa că trebuie să fie moștenită de o altă clasă. Iată fișierul front end și o explicație detaliată după cod:

 <?php
if(!defined('ABSPATH')){die('-1');}
elseif(!clasa_există('clasa_de_bază')){

clasa abstracta clasa_de_baza{   

    public const VERS = '1.1.0';// <-- Versiunea pluginului
    public const PREFIX = 'qlccf';// <-- Prefix plugin
    public const PLDIR = __DIR__ ;// <-- Plugin Dir cale
    public const PLPAT = __FILE__ ;// <-- Calea fișierului  

    funcția publică add_base_hooks(){    
       add_action( 'woocommerce_after_order_notes', array($this,'quadlayers_subscribe_checkout' ));       
       add_action('woocommerce_after_checkout_billing_form',array($this,'quadlayers_email_checkout'));
       add_action('woocommerce_before_order_notes', array($this,'quadlayers_radio_checkout'));
       add_action( 'woocommerce_checkout_update_order_meta',array($this, 'quadlayers_save_function' ));
    }
    //inserați caseta de selectare în finalizarea Woocommerce - hook: after_order_notes
    funcția publică quadlayers_subscribe_checkout( $checkout ) {
            woocommerce_form_field( 'subscriptor', array(
                'type' => 'caseta de selectare',
                //'required' => adevărat,
                'class' => array('custom-field form-row-wide'),
                'label' => 'Abonați-vă la buletinul nostru informativ.'                   
            ), $checkout->get_value( 'suscriptor' ) );              
    }
    // Inserați text în checkout woocommerce - hook: after_billing_form
    funcție publică quadlayers_email_checkout($checkout2){
        woocommerce_form_field( 'altmail', array(
            'type' => 'e-mail',
            //'required' => adevărat,
            'class' => array('custom-field form-row-wide'),
            'label' => 'E-mail alternativ.'                             
        ), $checkout2->get_value( 'altmail' ) );  
    }
    // Inserați câmpul personalizat radio în checkout woocommerce - hook: before_order_notes
    funcția publică quadlayers_radio_checkout($checkout3){
        woocommerce_form_field('feed', array(
            'type' => 'radio',
            //'required' => adevărat,
            'class' => array('custom-field form-row-wide'),
            'label' => 'Cum ne-ai găsit?.',            
                'opțiuni' => matrice(
                    „Google” => „Google”,                  
                    'Prieten' => 'Prieten',
                    'Facebook' => 'Facebook',
                    'Youtube' => 'YoutTube',
                    „Altele” => „Altele”            
                )
        ));
    }
    // salvează toate valorile câmpurilor personalizate
    funcția publică quadlayers_save_function( $order_id ){ 
        dacă (! gol( $_POST['subscriptor'] ) ) {
            update_post_meta( $comanda_id, 'subscriptor', sanitize_text_field( $_POST['subscriptor'] ) );
        }
        dacă (! gol( $_POST['altmail'] ) ) {
            update_post_meta( $comanda_id, 'altmail',sanitize_text_field( $_POST['altmail'] ) );
        }
        dacă (! gol( $_POST['feed'] ) ) {
            update_post_meta( $comanda_id, 'feed',sanitize_text_field( $_POST['feed'] ) );
        }      
    }
}// Includeți clasa backend
    include_once(plugin_dir_path( __FILE__ ).'class_qlccf_back.php');
}
altfel{
	echo „<h3>EROARE DE INITIALIZARE - Clasa de baza_clasa existenta !</h3>”;
}

După declararea clasei, definim câteva constante pe care le putem folosi ulterior. Apoi, includem toate hook-urile WooCommerce pe care le vom folosi într-o singură metodă, pe care o numim add_base_hooks() .

Deoarece o clasă abstractă nu poate fi instanțiată, rulăm această metodă din fișierul nostru backend, astfel încât să ruleze toate hook-urile declarate aici. Folosim fiecare dintre cârlige pentru o sarcină diferită, atribuind una dintre următoarele metode fiecăruia dintre ele. Adică acest cârlig: woocommerce_after_order_notes în metoda noastră add_base_hooks() rulează metoda quadlayers_subscribe_checkout() , ambele definite în clasa base_class .

Rețineți cum folosim unele dintre funcțiile WordPress și WooCommerce: woocommerce_form_field() un câmp personalizat în formularul de plată WooCommerce. update_post_meta() Această funcție nativă WordPress este utilizată pe scară largă pentru a actualiza metadatele bazei de date pentru postări, produse și alte tipuri de postări personalizate. În plus, tipurile de câmpuri de intrare disponibile sunt:

text	Selectați	radio
parola	datetime	datetime-local
Data	lună	timp
săptămână	număr	e-mail
url	tel

4.Fișierul backend, `class_qlccf_back.php`

Aici este locul în care clasa qlccf_back_class moștenește clasa de bază definită anterior în class_qlccf_base.php file base_class

 <?php
if(!defined('ABSPATH')){die('-1');}
if(!class_exists('qlccf_back_class')):
    clasa qlccf_back_class extinde clasa de bază{

        funcția publică __construct(){       
            parent::add_base_hooks(); 
            if(este_admin()):
                add_filter( 'manage_edit-shop_order_columns', array($this,'qlccf_checkbox'));
                add_filter( 'manage_edit-shop_order_columns', array($this,'qlccf_email'));
                add_action( 'manage_shop_order_posts_custom_column',array($this, 'qlccf_column_content'));
                add_action('woocommerce_email_order_meta',array($this,'qlccf_email_template'));
            endif;
        }             
        # afișează valoarea câmpurilor personalizate în lista de comenzi backend 
        funcția publică qlccf_column_content($coloană){
                global $post; 
                if ( 'suscriptor' === $coloană ) { # Casetă de selectare
                    $comanda = wc_get_order( $post->ID );     
                    $c_meta = $comanda->get_meta('suscriptor');       
                    if($c_meta==1):$img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/true-icon.png';
                    else:$img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/false-icon.png';
                    endif;                       
                    echo '<img src="'.$img_url.'"/>';
                } 
                elseif('altmail' === $coloană ){ # Poștă alternativă
                    $comanda = wc_get_order( $post->ID );     
                    $e_meta = $comanda->get_meta('altmail');
                    echo $e_meta;
                }   
                altfel{}     
        }    
        # Setați coloana casetei de selectare
        funcția publică qlccf_checkbox($coloane){
                $columns['subscriptor'] = __('subscriptor');            
                returnează $coloane;
        }
        # Setați coloana de e-mail alternativ
        funcția publică qlccf_email($columns1){
                $columns1['altmail'] = __('Posta alternativa');            
                returnează $coloane1;
        }
        # Includeți câmpul Alt Mail în șablonul de e-mail WC
        funcția publică qlccf_email_template($order_obj){
            $is_set = get_post_meta( $order_obj->get_order_number());           
                // returnează dacă nu este setat niciun câmp personalizat
            if( gol ( $ is_set ) )
		    întoarcere; 
	        // ok, mergem mai departe și ecou câmpul personalizat
            $alt_email = get_post_meta( $order_obj->get_order_number(), 'altmail', true );            
            echo '<h2>Câmpul meu personalizat</h2><p>E-mail alternativ:'.$alt_email.'</p>';            
        }              
    }    
  $run=noua clasa qlccf_back_;    
endif;

În acest fișier, definim un constructor pentru a rula cârligele front-end pe care le-am menționat în celălalt fișier al nostru. Apoi, adăugăm cârligele necesare pentru a afișa câmpurile personalizate în lista comenzilor backend și șabloanele de e-mail WooCommerce folosind un if() condiționat și funcția WordPress is_admin() pentru a o aplica numai dacă utilizatorul se află în ecranul backend administrativ. manage_shop_order_posts_custom_column() inserează o coloană în lista de comenzi, astfel încât să putem afișa câmpuri în funcția noastră qlccf_column_content() .

Odată ce suntem cuplati în bucla WooCommerce, verificăm dacă numele câmpului aparține unuia dintre câmpurile noastre personalizate și dacă este, îl tipărim. Folosind un condițional if()else, putem verifica toate câmpurile noastre personalizate în aceeași funcție.

După aceea, creăm o casetă de selectare și text coloane de câmp personalizat în lista comenzilor backend. Trebuie să ne setăm coloanele personalizate pentru a afișa câmpurile WooCommerce personalizate odată ce un client finalizează procesul de plată și comanda este creată.

În cele din urmă, în ultima metodă, folosim hook woocommerce_email_order_meta pentru a afișa câmpul de text personalizat în șablonul de e-mail de administrator. Funcțiile WordPress și WooCommerce utilizate:

wc_get_order() : Obține obiectul de comandă curent cu toate datele atașate acestuia

get_meta() : Pentru a obține metadatele comenzii

get_post_meta() : Obține valorile câmpurilor noastre personalizate salvate în baza de date

get_order_number() : Pentru a obține numărul de identificare al comenzii curente

Încheierea

Una peste alta, personalizarea paginii de plată este o necesitate pentru orice magazin online. În acest ghid, v-am arătat cum să adăugați câmpuri personalizate la pagina de finalizare a plății WooCommerce în mod programatic, cu un pic de codificare. Ați învățat cum să creați un plugin personalizat pas cu pas pentru a optimiza finalizarea plății.

În plus, dacă doriți să personalizați pagina de plată și să o duceți la nivelul următor, vă recomandăm să consultați acest ghid pas cu pas.

Ai incercat aceasta metoda? Vă puteți gândi la modalități de a-l îmbunătăți? Vă rugăm să ne împărtășiți experiențele dvs. în secțiunea de comentarii de mai jos!

Dacă doriți să vă îmbunătățiți conversiile în WooCommerce, vă recomandăm să aruncați o privire la aceste ghiduri:

Cele mai bune butoane de Cumpărare rapidă pentru WooCommerce
Cum să optimizați checkout-ul în WooCommerce
Cum se editează pagina magazinului în WooCommerce prin codificare?