Come modificare la pagina di pagamento di WooCommerce

Pubblicato: 2020-08-15

La pagina di pagamento è uno dei passaggi più importanti del processo di acquisto. Se hai un negozio online, è fondamentale personalizzarlo e ottimizzarlo per aumentare i tassi di conversione. Ci sono diversi modi per farlo. In questa guida, ti mostreremo 2 diversi metodi per modificare la pagina di pagamento di WooCommerce : con i plugin e in modo programmatico.

Perché dovresti personalizzare la pagina di pagamento in WooCommerce?

Se hai un negozio WooCommerce, il checkout è una delle pagine più cruciali. È dove il cliente paga e tu chiudi la vendita. Considerando quanti acquirenti abbandonano i loro carrelli e quanta concorrenza c'è oggigiorno, dovresti ottimizzare il checkout per chiudere quante più vendite possibili.

Anche se WooCommerce include una buona configurazione predefinita, potrebbe essere necessario modificare la pagina di pagamento per aumentare i tassi di conversione nel tuo negozio. Alcune delle modifiche che puoi applicare per modificare la tua pagina di pagamento WooCommerce sono:

  • Crea un checkout di una pagina
  • Cambia lo stile e il design del checkout con CSS
  • Aggiungi, rimuovi o riordina i campi di pagamento
  • Includi contenuto
  • Rendi un campo obbligatorio o facoltativo
  • Aggiungi campi condizionali e crea logica condizionale
  • Aggiungi costi aggiuntivi per spedizione, imballaggio e così via
  • E molti altri

In precedenza abbiamo visto come personalizzare la pagina del negozio e come rimuovere i campi dal checkout, e oggi ti mostreremo 2 diversi modi per personalizzare la pagina del checkout in WooCommerce .

Modifica la pagina di pagamento di WooCommerce: 2 metodi

In questa guida imparerai come modificare la pagina di pagamento in WooCommerce in 2 modi diversi:

  1. Con un plug-in
  2. Programmaticamente (codifica)

Diamo un'occhiata più da vicino a ciascuna opzione.

1) Personalizza la pagina di pagamento con un plugin

Se non hai competenze di programmazione, puoi modificare la pagina di pagamento di WooCommerce con un plug-in. Ci sono molte opzioni là fuori, ma per questo tutorial useremo WooCommerce Checkout Manager .

Questo plugin è sul mercato da un paio d'anni e ha più di 90.000 download attivi. Ha una versione gratuita con funzionalità di base ma potenti che puoi scaricare da qui e 3 piani premium con funzionalità più avanzate che partono da 19 USD (pagamento una tantum). Diamo un'occhiata a cosa può fare questo strumento.

personalizza la pagina di pagamento di WooCommerce - WooCommerce Checkout Manager principale

Gestore cassa WooCommerce

Checkout Manager è uno dei migliori plugin per gestire la tua pagina di pagamento. Ti consente di aggiungere, modificare ed eliminare campi nella pagina di pagamento per aumentare le tue vendite. E la parte migliore è che è molto facile da usare. Ad esempio, puoi aggiungere campi di spedizione, fatturazione e ulteriori alla pagina di pagamento semplicemente abilitando le opzioni dal menu.

Lo strumento consente di aggiungere o nascondere campi come nome e cognome, nome dell'azienda, paese, città, codice postale, indirizzo, numero di telefono, e-mail e altri. Per fare ciò, sulla dashboard di WordPress vai su WooCommerce > Checkout e quindi sulla scheda Fatturazione, Spedizione o Aggiuntivo. Lì vedrai un elenco di tutti i campi che desideri visualizzare o nascondere. personalizza la pagina di pagamento di woocommerce - Plugin di gestione del pagamento

Crea un campo file di caricamento personalizzato

Una delle caratteristiche più interessanti del plugin WooCommerce Checkout Manager è la possibilità di consentire agli acquirenti di caricare qualsiasi tipo di file durante il processo di acquisto . Questo è molto utile quando prenoti un hotel o noleggi un'auto online e devi caricare il tuo documento d'identità o la patente di guida. Puoi anche modificare quei file e lasciare che gli utenti gestiscano i loro file nel caso in cui debbano fornire documenti aggiuntivi. Inoltre, puoi aggiungere commissioni fisse o percentuali a qualsiasi campo principale o condizionale.

Aggiungi commissioni alla cassa

Un'altra opzione interessante per modificare la pagina di pagamento di WooCommerce è aggiungere commissioni. Questo può essere molto utile se desideri includere un costo aggiuntivo per situazioni come:

  • consegna espressa
  • Trattamento speciale
  • Costo aggiuntivo per la spedizione in determinati paesi o località
  • Commissioni relative a carte di credito o gateway di pagamento

Anche se WooCommerce offre alcune opzioni per aggiungere questi costi aggiuntivi, Checkout Manager ti offre maggiore controllo e flessibilità. Per aggiungere commissioni con Checkout Manager, vai su WooCommerce > Checkout > Fatturazione .

Vedrai diversi campi di fatturazione che puoi abilitare. Per questa dimostrazione, aggiungeremo una tariffa per la consegna espressa e dovremo creare un nuovo campo, quindi premiamo il pulsante Aggiungi nuovo campo . Selezioneremo radio come tipo di pulsante e daremo un nome al nuovo campo.

Quindi, vai alla scheda Opzioni e aggiungeremo due etichette: Sì e No . Quando l'acquirente seleziona la consegna espressa, aggiungeremo un costo aggiuntivo di $ 10.

Aggiungi commissioni alla cassa - Opzioni Salva le modifiche e il gioco è fatto! Ora, quando l'utente seleziona l'opzione Consegna espressa al momento del pagamento, verrà aggiunto al carrello un costo aggiuntivo di $ 10.

Crea campi condizionali

Oltre ad aggiungere campi e commissioni, puoi anche personalizzare la pagina di pagamento di WooCommerce creando campi condizionali per migliorare l'esperienza dell'utente. Devi semplicemente selezionare il campo padre condizionale e il valore. Vediamo il processo passo dopo passo:

  1. Nella dashboard di WordPress, vai su WooCommerce > Checkout > Fatturazione e fai clic su Aggiungi nuovo campo
  2. Seleziona il tipo di campo che desideri creare e compila l'etichetta, il segnaposto/tipo e la descrizione. Questo dipenderà dal tipo di condizionale che stai creando
  3. Successivamente, spunta la casella di controllo condizionale a destra. Selezionare il campo padre e il valore che il campo padre deve assumere per visualizzare il campo condizionale
  4. Premi Salva e il gioco è fatto!

La cosa buona è che Checkout Manager ti consente di creare campi personalizzati illimitati e applicare tutte le condizioni che desideri per modificare la tua pagina di pagamento e offrire agli utenti un'esperienza unica.

Per ulteriori informazioni su come creare campi condizionali in WooCommerce, dai un'occhiata a questa guida completa che contiene diversi esempi di cosa puoi fare per personalizzare il tuo checkout.

Questo è solo un semplice esempio, ma c'è molto di più che puoi fare. Per ulteriori informazioni, consulta la nostra guida completa su come aggiungere commissioni al checkout di WooCommerce.

Tutto sommato, se vuoi modificare facilmente la pagina di pagamento, WooCommerce Checkout Manager è un'ottima scelta. La versione gratuita è un ottimo inizio, ma se desideri funzionalità più avanzate, ti consigliamo uno qualsiasi dei piani premium.

2) Modifica la pagina di pagamento in modo programmatico (codifica)

In questa sezione, ti mostreremo come modificare la pagina di pagamento di WooCommerce tramite codifica . Quindi, alla fine, saprai come:

  1. Aggiungi campi personalizzati alla pagina di pagamento di WooCommerce
  2. Salva i campi personalizzati nel database
  3. Rendi facoltativo un campo obbligatorio
  4. Aggiungi contenuto alla pagina di pagamento
  5. Usa gli shortcode nella pagina di pagamento di WooCommerce
  6. Stile la pagina di pagamento con CSS personalizzato

Per ottenere tutte queste personalizzazioni, utilizzerai alcuni hook di pagamento di WooCommerce. Se non hai familiarità con gli hook, ti ​​consigliamo di consultare la nostra guida introduttiva su come utilizzare gli hook di WooCommerce. Poiché applicheremo alcune modifiche al file functions.php , ti consigliamo di utilizzare un tema figlio. Puoi utilizzare uno dei tanti plugin per temi figlio o crearne uno seguendo questa guida.

2.1) Aggiungi campi personalizzati alla pagina di pagamento di WooCommerce

La prima cosa che ti mostreremo è come aggiungere campi personalizzati alla pagina di pagamento. Per fare ciò, incolla il seguente script nel file functions.php del tema figlio:

 // campo della casella di controllo
add_action( 'woocommerce_after_order_notes', 'quadlayers_subscribe_checkout');

funzione quadlayers_subscribe_checkout($checkout) {
woocommerce_form_field( 'abbonato', array(
'tipo' => 'casella di controllo',
//'richiesto' => vero,
'class' => array('custom-field form-row-wide'),
'label' => ' Iscriviti alla nostra newsletter.'
), $checkout->get_value('abbonato'));
}

Questo aggiungerà una casella di controllo personalizzata alla fine della pagina di pagamento per dare agli utenti la possibilità di iscriversi alla tua newsletter. Allo stesso modo, puoi aggiungere qualsiasi tipo di campo. Ad esempio, aggiungiamo un tipo di campo di input radio con il seguente script:

 // Campo di immissione della radio
add_action('woocommerce_before_order_notes', 'quadlayers_radio_checkout');
funzione 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'
)
));
}

Questo aggiungerà un tipo di ingresso radio in modo da poter chiedere ai tuoi clienti dove hanno sentito parlare di te. Aggiungi campi personalizzati alla pagina di pagamento di woocommerce Per ulteriori informazioni su come aggiungere campi personalizzati alla pagina di pagamento di WooCommerce, consulta questa guida completa con diversi esempi.

2.2) Salva i valori dei campi personalizzati nel database

Ora, vediamo come puoi utilizzare questi campi personalizzati per modificare il checkout e raccogliere informazioni sugli ordini WooCommerce. Per fare ciò, devi essere in grado di recuperare i valori dei campi personalizzati ogni volta che ne hai bisogno. Inoltre, è necessario salvare i valori dei campi personalizzati nel database una volta che i clienti hanno completato il modulo e premuto il pulsante Effettua ordine .

Per raggiungere questo obiettivo, devi utilizzare l' 'woocommerce_checkout_update_order_meta' . Per aggiornare i due campi personalizzati aggiunti nel passaggio 2.1, copia e incolla il codice seguente nel file funcitons.php del tema figlio:

 add_action('woocommerce_checkout_update_order_meta','quadlayers_save_function');
funzione quadlayers_save_function($order_id){
if ( ! empty( $_POST['subscriber'] ) ) {
update_post_meta($order_id, 'abbonato', sanitize_text_field($_POST['abbonato']));
}
if ( ! vuoto( $_POST['feed'] ) ) {
update_post_meta($order_id, 'feed',sanitize_text_field($_POST['feed']));
}
}

Questo script controlla se il campo personalizzato è vuoto o meno con un condizionale if() prima di salvarlo nel database. Dopo aver aggiunto questo script, puoi recuperare i dati salvati dal database utilizzando un oggetto WP global “$post” . Nello script seguente, otteniamo i metadati dell'abbonato dell'ordine corrente. Puoi usarlo nel back-end dell'elenco degli ordini di WooCommerce.

 posta $ globale;
$ordine = wc_get_ordine($post->ID);
$c_meta = $ordine->get_meta('abbonato');

Vale la pena notare che questo è uno script grezzo, quindi dovrai adattarlo per soddisfare le tue esigenze specifiche.

2.3) Rendi facoltativo un campo obbligatorio

Un altro modo semplice ma efficace per modificare la pagina di pagamento in WooCommerce è rendere i campi obbligatori o obbligatori opzionali. In questo modo, consenti agli acquirenti di compilare solo i campi necessari per la transazione e migliorare la loro esperienza di acquisto.

Ad esempio, supponiamo che tu venda prodotti scaricabili o virtuali, quindi desideri rendere facoltativo il campo Indirizzo nella sezione Fatturazione. Aggiungi semplicemente il seguente codice al file functions.php del tuo tema figlio.

 add_filter( 'woocommerce_billing_fields', 'wc_address_field_optional');
funzione wc_address_field_optional($campi) {
$fields['billing']['billing_address_1']['required'] = false; 
restituisci $campi; 
}

Usando questo snippet come base, puoi rendere facoltativi più campi in pochissimo tempo.

Campi condizionali

Se vuoi portare la tua pagina di pagamento WooCommerce un ulteriore passo avanti, puoi personalizzarla aggiungendo campi condizionali. I campi condizionali hanno una logica condizionale in modo che ci siano campi che appaiono o scompaiono in base ai valori di un altro campo. Ad esempio, puoi creare una logica condizionale in modo che i campi della carta di credito vengano visualizzati solo se l'utente seleziona Carta di credito come opzione di pagamento.

Per saperne di più sui campi condizionali e su come utilizzarli per modificare la tua pagina di pagamento, dai un'occhiata a questa guida completa .

2.4) Aggiungi contenuto alla pagina di pagamento

Un altro modo per modificare la pagina di pagamento di WooCommerce è aggiungere del contenuto. Con una solida conoscenza dei ganci per casse WC, puoi inserire facilmente qualsiasi tipo di contenuto come immagini, titoli, testo e così via dove vuoi. Ad esempio, puoi utilizzare questo script per aggiungere un'immagine del badge di fiducia prima del pulsante Effettua ordine nella pagina di pagamento:

 add_action('woocommerce_review_order_before_submit','quadlayers_checkout_content');
funzione quadlayers_checkout_content(){
echo '<img src="https://www.heresylab.com/wp-content/uploads/2019/01/paypal-1.png" />;
}

aggiungi badge di fiducia alla pagina di pagamento di woocommerce Oltre alle immagini, puoi anche aggiungere un semplice testo di intestazione nella parte superiore del checkout:

 add_action(woocommerce_checkout_before_customer_details
,'quadlayers_checkout_header');
funzione quadlayers_checkout_header(){
echo "<h2>Questa è un'intestazione personalizzata<h2>
";
}

Un'altra alternativa interessante è aggiungere un messaggio alla tua pagina di pagamento. In genere, i negozi menzionano cose relative alla spedizione, alla consegna e così via. Ad esempio, supponiamo che tu voglia ricordare ai clienti che potrebbero dover attendere 5 giorni lavorativi per ricevere i loro prodotti. Nel file functions.php del tema del tuo file, aggiungi:

 add_action('woocommerce_after_order_notes', 'wc_add_message');
funzione wc_aggiungi_messaggio () {
echo 'Ricorda che la consegna può richiedere fino a 5 giorni lavorativi.';
}

2.5) Aggiungi le commissioni alla pagina di pagamento

Diamo un'occhiata a come modificare la pagina di pagamento di WooCommerce e aggiungere costi aggiuntivi. Il più delle volte, ci sono due tipi di commissioni aggiuntive:

  • Fisso
  • Percentuale

In questa sezione, ti mostreremo come aggiungere entrambi al tuo checkout.

Aggiungi una tariffa fissa

Un tipico esempio di tariffa fissa è la consegna espressa. Supponiamo che tu voglia includere una tariffa fissa di $ 10 per la consegna espressa.

Usa semplicemente lo script qui sotto e modifica il testo per il nome del campo. In questo esempio, chiameremo " Extra Charge " e aggiungerà $ 10 all'ordine.

 add_action ( 'woocommerce_cart_calculate_fees' , funzione () {
 if ( is_admin () && ! definito ( 'DOING_AJAX' )) {
 ritorno ;
 }
 WC ()-> carrello -> add_fee ( __ ( 'Extra Charge' , 'txtdomain' ), 10 );
 });

Tieni presente che questo codice aggiungerà automaticamente una commissione fissa di $ 10 al totale dell'ordine dei clienti durante il checkout.

Aggiungi una commissione in percentuale

Un'altra alternativa è quella di addebitare una commissione percentuale. Questo può essere utile se ci sono tasse extra o se vuoi aggiungere un costo aggiuntivo per alcuni addebiti dei gateway di pagamento. Supponiamo di voler aggiungere una commissione del 3% al prezzo totale dell'ordine (prodotti + spedizione).

 add_action ( 'woocommerce_cart_calculate_fees' , funzione () {
 if ( is_admin () && ! definito ( 'DOING_AJAX' )) {
 ritorno ;
 }
 $percentuale = 0,03 ;
 $percentage_fee = ( WC ()-> carrello -> get_cart_contents_total () + WC ()-> carrello -> get_shipping_total ()) * $percentuale ;
 WC ()-> carrello -> add_fee ( __ ( 'Tasse' , 'txtdomain' ), $percentage_fee );
 });

Questo script aggiungerà una commissione del 3% all'ordine totale dell'acquirente durante il checkout.

Per ulteriori informazioni ed esempi per aggiungere commissioni al tuo negozio, consulta la nostra guida su come aggiungere commissioni alla cassa di WooCommerce.

2.6) Usa gli shortcode nella pagina di pagamento di WooCommerce

Gli shortcode di WooCommerce ti danno molta flessibilità e ti consentono di aggiungere qualsiasi tipo di contenuto utilizzando gli hook di checkout. Tuttavia, se stampi semplicemente lo shortcode, non funzionerà. Invece, dovresti includerli come segue:

 echo do_shortcode('[ woocommerce_cart ]');

Quindi, usando un hook nello stesso modo in cui hai fatto negli esempi precedenti, puoi finire con qualcosa del genere:

 add_action('woocommerce_after_checkout_form','quadlayers_checkout_shortcode');
funzione quadlayers_checkout_shortcode(){
echo do_shortcode('[ woocommerce_cart ]'); }

Questo script porterà il

 [ woocommerce_cart ]

shortcode in azione, visualizzando il carrello WooCommerce in fondo alla pagina di pagamento. Aggiungi il supporto per lo shortcode alla pagina di pagamento del WC Tieni presente che puoi utilizzare qualsiasi WordPress, WooCommerce o shortcode personalizzato. Tuttavia, alcuni shortcode potrebbero non essere compatibili o supportati da WooCommerce, quindi verificalo prima di utilizzarli. Per saperne di più sugli shortcode, puoi consultare la nostra guida completa agli shortcode di WooCommerce.

2.7) Modifica la pagina di pagamento di WooCommerce con CSS personalizzato

Infine, puoi anche personalizzare la pagina di checkout del tuo negozio WooCommerce modificando lo stile CSS. Ciò non significa che devi passare ore a ricostruire l'intera pagina di pagamento. Anche un paio di semplici modifiche possono aiutarti a ottimizzare il checkout. Ad esempio, modificando i colori, i caratteri, i margini o i bordi, puoi vedere alcuni grandi miglioramenti nei tassi di conversione.

Non esiste una formula magica che funzioni per ogni azienda qui e dovrai testare stili diversi, ma regolare alcune cose può aiutarti a incrementare le vendite. Ad esempio, puoi utilizzare questo semplice script per applicare uno stile CSS personalizzato e modificare il colore di sfondo nella pagina di pagamento:

 add_action('wp_head','quadlayers_checkout_style');

funzione quadlayers_checkout_style(){
         if(is_checkout()==vero){

                 echo '<style> body{background:#dfdfff!important;}<style>';
         }
}

Inoltre, puoi prendere questo script come base e aggiungere le tue regole CSS all'interno del tag HTML per dargli l'aspetto perfetto per il tuo sito. Questo è un trucco veloce per applicare CSS alla pagina di pagamento. È molto utile aggiungere piccoli pezzi di CSS. Ma se desideri script di stile più estesi, dovresti accodare lo stile CSS in modo WordPress, utilizzando l'hook WP nativo wp_enqueue_style() come segue:

 add_action( 'wp_enqueue_scripts', 'quadlayers_enqueue_css' );

funzione quadlayers_enqueue_css(){    
    wp_enqueue_style( 'checkout_style',
        get_stylesheet_directory_uri() . '/stile-checkout.css'
    );
}

In questo modo, puoi avere tutti i tuoi CSS personalizzati in un file separato ( checkout-style.css in questo esempio) che verrà archiviato nella cartella del tema figlio allo stesso livello del file style.css principale.

Questi sono solo alcuni esempi di come personalizzare la pagina di pagamento in WooCommerce con alcuni semplici script. Ti consigliamo di prenderli come base e di giocare per aggiungere o modificare qualsiasi altro aspetto del tuo checkout. Inoltre, se desideri modificare la pagina del negozio tramite codifica, ti consigliamo di dare un'occhiata alla nostra guida su come personalizzare la pagina del negozio di WooCommerce in modo programmatico.

Bonus: ganci alla cassa

Ci sono molti hook di pagamento che puoi utilizzare per modificare la pagina di pagamento in WooCommerce. Questi sono alcuni dei principali:

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_before_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_before_order_notes
  • woocommerce_checkout_after_order_review
  • woocommerce_checkout_after_customer_details
  • woocommerce_review_order_before_cart_contents
  • woocommerce_review_order_before_shipping
  • woocommerce_review_order_after_order_total
  • woocommerce_checkout_order_review
  • woocommerce_review_order_before_submit
  • woocommerce_review_order_before_payment
  • woocommerce_review_order_after_submit
  • woocommerce_after_checkout_form

Per ulteriori informazioni sugli hook e su come funzionano, consulta le seguenti guide:

  • Come utilizzare gli hook di pagamento di WooCommerce
  • Come usare gli hook di WooCommerce – La guida completa

Infine, per l'elenco completo degli hook che puoi utilizzare, dai un'occhiata a questa pagina della documentazione.

Conclusione

Tutto sommato, la modifica della pagina di pagamento può fare una grande differenza e aiutarti a portare il tuo negozio WooCommerce al livello successivo. Anche con poche modifiche, puoi aumentare i tassi di conversione e aumentare le vendite. In questa guida, ti abbiamo mostrato due modi per modificare il checkout:

  • Con un plug-in
  • A livello di codice (tramite codifica)

Se non hai competenze di programmazione ma desideri una soluzione semplice ma solida, WooCommerce Checkout Manager è la scelta migliore. Questo plugin freemium ha potenti funzionalità per modificare la pagina di pagamento ed è facile da usare.

D'altra parte, se vuoi creare la tua soluzione tramite codice e non vuoi installare alcun plug-in, puoi modificare la pagina di pagamento in modo programmatico. Ti abbiamo mostrato cinque diversi esempi per modificare diversi aspetti del checkout, ma le opzioni sono infinite. Gioca con gli script e libera la tua creatività per ottimizzare il tuo checkout.

Se desideri abbreviare il processo di pagamento per migliorare i tassi di conversione, ti consigliamo di utilizzare un plug-in di acquisto rapido per WooCommerce o collegamenti di pagamento diretto.

Infine, se vuoi imparare diverse opzioni per modificare la pagina del negozio nel tuo negozio, ti consigliamo di dare un'occhiata a questa guida passo passo .

Hai domande o vuoi condividere con noi le personalizzazioni di checkout che hai applicato al tuo sito? Fatecelo sapere nella sezione commenti qui sotto! Saremo felici di sentirti!