Come aggiungere campi personalizzati alla pagina di pagamento di WooCommerce

Vuoi personalizzare la tua cassa ? In questa guida, ti mostreremo come aggiungere campi personalizzati alla pagina di pagamento in WooCommerce per portare il tuo negozio al livello successivo.

Perché personalizzare il checkout di WooCommerce?

In QuadLayers, abbiamo già visto come personalizzare la pagina del negozio in WooCommerce. Oggi daremo un'occhiata a come fare lo stesso e includere campi personalizzati nel checkout. La cassa è una delle pagine più importanti per qualsiasi negozio online . È dove vuoi portare i tuoi acquirenti in modo che completino l'acquisto e tu chiuda la vendita. Quindi, per migliorare i tuoi tassi di conversione e le tue entrate, è d'obbligo ottimizzare il checkout con campi personalizzati.

Com'è la pagina di pagamento perfetta? Dipende molto dalla tua attività. Ad esempio, il checkout per i prodotti fisici è diverso da quello per i prodotti digitali. Puoi scegliere un checkout di una o più pagine, visualizzare o nascondere i campi, utilizzare colori diversi e così via. Tuttavia, la cosa più importante è che il tuo checkout generi fiducia nell'utente, non abbia distrazioni ed è ottimizzato in modo che l'acquirente trascorra il minor tempo possibile.

Come aggiungere campi personalizzati alla pagina di pagamento di WooCommerce?

Esistono due modi principali per aggiungere o nascondere campi personalizzati nella pagina di pagamento in WooCommerce:

• Con plugin
• Programmaticamente

Se non hai competenze di programmazione, ti consigliamo di dare un'occhiata a questi plugin:

• WooCommerce Direct Checkout : è uno strumento eccellente per semplificare il processo di pagamento e reindirizzare gli utenti dalla pagina del prodotto alla cassa. Ha una versione gratuita e piani premium che partono da 19 USD.
  
• WooCommerce Checkout Manager : con oltre 90.000 installazioni attive, Checkout Manager è un ottimo plugin per aumentare i tuoi tassi di conversione. Ti consente di aggiungere, personalizzare ed eliminare campi nella pagina di pagamento. È uno strumento freemium con una versione gratuita e piani pro a partire da 19 USD.

  

Quei plugin di checkout sono scelte eccellenti e porteranno a termine il lavoro senza intoppi. Tuttavia, se non desideri installare alcun plug-in, puoi codificare la tua soluzione. In questa guida, ci concentreremo su come aggiungere campi personalizzati alla pagina di pagamento di WooCommerce con un po' di codice .

Aggiungi campi personalizzati al checkout di WooCommerce in modo programmatico

In questa sezione imparerai come aggiungere campi personalizzati alla pagina di pagamento di WooCommerce in modo programmatico . Ti mostreremo come includere:

• Testo
• Casella di controllo
• Tipi di ingressi radio

Ci sono altri campi personalizzati che puoi aggiungere, ma tieni presente che potrebbero richiedere un qualche tipo di convalida. Quindi, in questo tutorial, ci concentreremo su quei 3 tipi e salteremo i campi che richiedono la convalida dei valori inseriti. Inoltre, visualizzeremo i campi personalizzati nell'elenco degli ordini di back-end e nei modelli di email.

NOTA : Tieni presente che se desideri aggiungere altri campi ai tuoi progetti, devi implementare una convalida di sicurezza.

Quindi, per aggiungere campi personalizzati alla pagina di pagamento di WooCommerce, ci sono due opzioni:

• Puoi codificare i tuoi script in un tema figlio
• Crea un plug-in personalizzato

Per creare una soluzione più scalabile e ben organizzata, creeremo un plug-in personalizzato . Inoltre, a differenza dell'approccio a tema figlio, un plug-in personalizzato può anche essere il punto di partenza per un ulteriore sviluppo. Tuttavia, se preferisci utilizzare un tema figlio, ti consigliamo di consultare questa guida.

Aggiungi campi personalizzati al checkout di WooCommerce con un plug-in personalizzato

Il plugin personalizzato che creeremo avrà tre file.

1. Principale
2. Fine frontale
3. Backend

Il file principale funge da gateway di ingresso al file front-end, che utilizzeremo per i nostri script front-end. Inoltre, includeremo il terzo file, dove si trovano gli script di back-end. Vale la pena notare che questo file front-end sarà il file di base principale e dovrebbe essere spostato in un file gerarchico di basso livello (proprio come il nostro file back-end) se aggiungi più classi. Quindi ora, vediamo come aggiungere campi personalizzati alla pagina di pagamento di WooCommerce utilizzando un plug-in personalizzato .

1. Apri il tuo IDE preferito e crea una cartella con tre file:

QuadLayers_checkout_fields /__Classes /__/__class_qlccf_base.php (file frontale) /__/__class_qlccf_back.php (file backend) /__QuadLayers_checkout_fields.php (file principale)

2. File principale

Il file principale è QuadLayers_checkout_fields.php :

 <?php
/**
 * @link https://quadlayers.com/
 * @dalla 1.0.0
 * Nome del plug-in: Campi personalizzati QuadLayers Checkout 
 * URI plug-in: https://quadlayers.com/
 * Descrizione: Plugin per creare campi personalizzati nella pagina di pagamento di WooCommerce, stampare in ordini di back-end e modelli di email
 * Versione: 1.0.0
 * Autore: Sebastopoli
 * URI autore: https://quadlayers.com/
 * Dominio di testo: qlccf
 */
if(!defined('ABSPATH')){die('-1');}
elseif(!class_exists('run_init')){
	classe finale run_init{	
		funzione statica pubblica run(){
			ritorna include_once plugin_dir_path( __FILE__ ).'classes/class_qlccf_base.php';
		}
	}
	run_init::run();
}
altro{
	echo "<h3>ERRORE - Classe run_init esistente in QuadLayers_checkout_fields.php !</h3>";
}

Puoi modificare le informazioni del plug-in, la funzione e i nomi dei file e inserirne uno tuo. Ma ti suggeriamo prima di copiare e incollare gli script senza modificare nulla in modo da capire meglio come funzionano.

3. File di classe front-end

Il file front-end è class_qlccf_base.php . È qui che vive la classe principale e dove puoi includere un numero illimitato di classi e funzioni. Una classe astratta non può essere istanziata, quindi deve essere ereditata da un'altra classe. Ecco il file front-end e una spiegazione dettagliata dopo il codice:

 <?php
if(!defined('ABSPATH')){die('-1');}
elseif(!class_exists('base_class')){

classe astratta classe_base{   

    public const VERS = '1.1.0';// <-- Versione del plugin
    public const PREFIX = 'qlccf';// <-- Prefisso del plugin
    public const PLDIR = __DIR__ ;// <-- Percorso della directory del plug-in
    public const PLPAT = __FILE__ ;// <-- Percorso del file  

    funzione pubblica 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' ));
    }
    //inserisci la casella di controllo nel checkout di woocommerce - hook: after_order_notes
    funzione pubblica quadlayers_subscribe_checkout($checkout) {
            woocommerce_form_field( 'suscriptor', array(
                'tipo' => 'casella di controllo',
                //'richiesto' => vero,
                'class' => array('custom-field form-row-wide'),
                'label' => ' Iscriviti alla nostra newsletter.'                   
            ), $checkout->get_value('suscriptor'));              
    }
    // Inserisci il testo nel checkout woocommerce - hook: after_billing_form
    funzione pubblica quadlayers_email_checkout($checkout2){
        woocommerce_form_field( 'altmail', array(
            'tipo' => 'e-mail',
            //'richiesto' => vero,
            'class' => array('custom-field form-row-wide'),
            'label' => 'E-mail alternativa.'                             
        ), $ checkout2->get_value( 'altmail' ) );  
    }
    // Inserisci il campo personalizzato della radio nel checkout woocommerce - hook: before_order_notes
    funzione pubblica quadlayers_radio_checkout($checkout3){
        woocommerce_form_field( 'feed', array(
            'tipo' => 'radio',
            //'richiesto' => vero,
            'class' => array('custom-field form-row-wide'),
            'label' => 'Come ci hai trovato?.',            
                'opzioni' => array(
                    'Google' => 'Google',                  
                    'Amico' => 'Amico',
                    'Facebook' => 'Facebook',
                    'Youtube' => 'YoutTube',
                    'Altro' => 'Altro'            
                )
        ));
    }
    // salva tutti i valori dei campi personalizzati
    funzione pubblica quadlayers_save_function($order_id){ 
        if ( ! vuoto( $_POST['suscriptor'] ) ) {
            update_post_meta($order_id, 'suscriptor', sanitize_text_field($_POST['suscriptor']));
        }
        if ( ! vuoto( $_POST['altmail'] ) ) {
            update_post_meta($order_id, 'altmail',sanitize_text_field($_POST['altmail']));
        }
        if ( ! vuoto( $_POST['feed'] ) ) {
            update_post_meta($order_id, 'feed',sanitize_text_field($_POST['feed']));
        }      
    }
}// Includi classe back-end
    include_once(plugin_dir_path( __FILE__ ).'class_qlccf_back.php');
}
altro{
	echo "<h3>ERRORE DI INIZIALIZZAZIONE - Classe base_class esistente!</h3>";
}         
   

Dopo aver dichiarato la classe, definiamo alcune costanti che possiamo utilizzare in seguito. Quindi, includiamo tutti gli hook di WooCommerce che utilizzeremo in un unico metodo, che chiamiamo add_base_hooks() .

Poiché una classe astratta non può essere istanziata, eseguiamo questo metodo dal nostro file di backend in modo che esegua tutti gli hook dichiarati qui. Usiamo ciascuno degli hook per un compito diverso, assegnando a ciascuno di essi uno dei seguenti metodi. Ad esempio questo hook: woocommerce_after_order_notes nel nostro metodo add_base_hooks() esegue il metodo quadlayers_subscribe_checkout() , entrambi definiti all'interno della classe base_class .

Nota come utilizziamo alcune delle funzioni di WordPress e WooCommerce: woocommerce_form_field() un campo personalizzato nel modulo di pagamento di WooCommerce. update_post_meta() Questa funzione nativa di WordPress è ampiamente utilizzata per aggiornare i metadati del database di post, prodotti e altri tipi di post personalizzati. Inoltre, i tipi di campi di input disponibili sono:

4.Il file di backend, class_qlccf_back.php

Qui è dove la classe qlccf_back_class eredita base_class precedentemente definita nel class_qlccf_base.php file :

 <?php
if(!defined('ABSPATH')){die('-1');}
if(!class_exists('qlccf_back_class')):
    classe qlccf_back_class estende base_class{

        funzione pubblica __costruzione(){       
            genitore::add_base_hooks(); 
            if(is_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'));
            finisci se;
        }             
        # visualizza il valore dei campi personalizzati nell'elenco degli ordini di back-end 
        funzione pubblica qlccf_column_content($colonna){
                posta $ globale; 
                if ( 'suscriptor' === $colonna ) { # Casella di controllo
                    $ordine = wc_get_ordine($post->ID);     
                    $c_meta = $ordine->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';
                    finisci se;                       
                    echo '<img src="'.$img_url.'"/>';
                } 
                elseif('altmail' === $colonna ){ # Posta alternativa
                    $ordine = wc_get_ordine($post->ID);     
                    $e_meta = $ordine->get_meta('altmail');
                    eco $e_meta;
                }   
                altro{}     
        }    
        # Imposta la colonna della casella di controllo
        funzione pubblica qlccf_checkbox($colonne){
                $colonne['suscriptor'] = __( 'suscriptor');            
                restituisci $colonne;
        }
        # Imposta la colonna della posta alternativa
        funzione pubblica qlccf_email($colonne1){
                $colonne1['altmail'] = __( 'Posta alternativa');            
                restituisce $colonne1;
        }
        # Includi il campo Alt Mail nel tamplate dell'e-mail WC
        funzione pubblica qlccf_email_template($ order_obj){
            $is_set = get_post_meta($order_obj->get_order_number());           
                // ritorna se non è impostato alcun campo personalizzato
            if( vuoto( $ è_set ) )
		    Restituzione; 
	        // ok, andiamo avanti e facciamo eco al campo personalizzato
            $alt_email = get_post_meta($order_obj->get_order_number(), 'altmail', true);            
            echo '<h2>Il mio campo personalizzato</h2><p>E-mail alternativa:'.$alt_email.'</p>';            
        }              
    }    
  $ run=nuova qlccf_back_class;    
finisci se;

In questo file, definiamo un costruttore per eseguire gli hook front-end che abbiamo indicato nell'altro nostro file. Quindi, aggiungiamo gli hook necessari per visualizzare i campi personalizzati nell'elenco degli ordini di back-end e nei modelli di e-mail di WooCommerce utilizzando un if() condizionale e la funzione di WordPress is_admin() per applicarlo solo se l'utente è nella schermata di back-end dell'amministratore. L' manage_shop_order_posts_custom_column() inserisce una colonna nell'elenco degli ordini, così possiamo visualizzare i campi nella nostra funzione qlccf_column_content() .

Una volta agganciati al ciclo di WooCommerce, controlliamo se il nome del campo appartiene a uno dei nostri campi personalizzati e, in caso affermativo, lo stampiamo. Usando un if()else condizionale, possiamo controllare tutti i nostri campi personalizzati nella stessa funzione.

Successivamente, creiamo una casella di controllo e colonne di campi personalizzati di testo nell'elenco degli ordini di back-end. Dobbiamo impostare le nostre colonne personalizzate per visualizzare i nostri campi WooCommerce personalizzati una volta che un cliente ha completato il processo di pagamento e l'ordine è stato creato.

Infine, nell'ultimo metodo, utilizziamo l'hook woocommerce_email_order_meta per visualizzare il nostro campo di testo personalizzato nel modello di email dell'amministratore. Funzioni WordPress e WooCommerce utilizzate:

wc_get_order() : Ottiene l'oggetto ordine corrente con tutti i dati allegati

get_meta() : per ottenere i metadati dell'ordine

get_post_meta() : Ottiene i valori dei nostri campi personalizzati salvati nel database

get_order_number() : Per ottenere il numero ID dell'ordine corrente

Avvolgendo

Tutto sommato, personalizzare la pagina di pagamento è un must per qualsiasi negozio online. In questa guida, ti abbiamo mostrato come aggiungere campi personalizzati alla pagina di pagamento di WooCommerce in modo programmatico con un po' di codifica. Hai imparato passo dopo passo come creare un plug-in personalizzato per ottimizzare il checkout.

Inoltre, se desideri personalizzare la pagina di pagamento e portarla al livello successivo, ti consigliamo di consultare questa guida passo passo.

Hai provato questo metodo? Riesci a pensare a come migliorarlo? Per favore condividi le tue esperienze con noi nella sezione commenti qui sotto!

Se vuoi migliorare le tue conversioni in WooCommerce, ti consigliamo di dare un'occhiata a queste guide:

• I migliori pulsanti di acquisto rapido per WooCommerce
• Come ottimizzare il checkout in WooCommerce
• Come modificare la pagina del negozio in WooCommerce tramite la codifica?