Come creare un checkout di una pagina WooCommerce

Vuoi ridurre l'abbandono del carrello e aumentare i tassi di conversione? In questa guida imparerai come creare un checkout di una pagina WooCommerce sia con che senza plug-in per aiutarti ad aumentare le tue vendite.

Non è un segreto che la cassa sia una delle pagine più importanti per un negozio online. È anche, tuttavia, il passaggio in cui molti utenti abbandonano i loro carrelli. Secondo una recente ricerca, quasi il 70% degli acquirenti abbandona il carrello a un certo punto e il 21% lo fa alla cassa. Come mai? Di solito, perché il processo di acquisto è troppo lungo o complicato.

Anche se non esiste un'unica soluzione che funzioni per ogni singolo sito di eCommerce, le pagine di pagamento di una pagina funzionano meglio per la maggior parte delle aziende. Ecco perché la creazione di una pagina di pagamento per il tuo negozio WooCommerce può aiutarti a ridurre l'abbandono del carrello e aumentare le vendite.

Che cos'è un checkout di una pagina WooCommerce?

Un checkout di una pagina visualizza tutti i campi del checkout su un'unica pagina . Può includere il contenuto del carrello, i dettagli di pagamento, gli indirizzi di fatturazione e spedizione, le opzioni di spedizione e altre informazioni come immagini, testo o moduli di contatto aggiuntivi.

L'obiettivo principale di un checkout di una pagina è abbreviare il processo di acquisto e ridurre l'abbandono del carrello. Poiché i clienti inseriscono tutte le informazioni per effettuare l'ordine in un'unica pagina, è più probabile che completino il processo.

Vantaggi dei checkout di una pagina

Alcuni dei vantaggi di un checkout di una pagina sono:

• Aiuta a ridurre l'abbandono del carrello
• Accorcia il processo di pagamento
• Aumenta i tassi di conversione
• Facile da capire perché gli acquirenti possono vedere tutte le informazioni che devono compilare in un'unica pagina

Per ulteriori informazioni sui checkout di una o più pagine, dai un'occhiata a questa guida completa.

Come creare un checkout di una pagina WooCommerce

Esistono diversi modi per creare un checkout di una pagina WooCommerce :

1. Utilizzo di un plug-in
2. Programmaticamente
3. Con un generatore di pagine
4. Dalla dashboard di WordPress

In questa sezione, daremo un'occhiata a ciascuna opzione in modo da poter scegliere quella più adatta alle tue capacità ed esigenze.

1) Crea un checkout di una pagina con un plug-in

La prima opzione per creare un checkout di una pagina in WooCommerce è utilizzare un plug-in. Ci sono molti plugin di pagamento di una pagina là fuori, sia gratuiti che premium. Per questa dimostrazione, utilizzeremo WooCommerce Direct Checkout. Questo plugin ti aiuterà ad abbreviare il processo di checkout e ad aumentare i tuoi tassi di conversione. Non solo puoi creare un checkout di una pagina, ma anche rimuovere i campi di checkout non necessari, aggiungere un pulsante di acquisto rapido e altro ancora.

Pagamento in una pagina con pagamento diretto

Direct Checkout ha una versione gratuita con funzionalità di base e 3 piani premium con più funzionalità a partire da 19 USD (pagamento una tantum).

Innanzitutto, scarica il plug-in. Puoi farlo da questo link o dalla dashboard di WordPress. Dopo averlo attivato, vai su WooCommerce > Pagamento diretto . Qui, configuralo come segue in modo che reindirizzi gli utenti dal negozio e dalle pagine dei singoli prodotti direttamente alla pagina di pagamento.

• Avviso aggiunto al carrello : Sostituisce l'avviso "Visualizza carrello" con il checkout diretto
• Aggiunto al collegamento al carrello : Sostituisce il collegamento "Visualizza carrello" con il checkout diretto
• Reindirizzamento carrello : consente di modificare il comportamento del pulsante Aggiungi al carrello
• Reindirizzamento carrello a : puoi scegliere dove reindirizzare gli utenti dopo che hanno aggiunto qualcosa al carrello. In questo caso, li reindirizzeremo alla cassa
• Sostituisci l'URL del carrello : poiché dopo che gli acquirenti hanno aggiunto qualcosa al loro carrello, li reindirizzeremo alla cassa, sostituiremo l'URL del carrello con il link alla cassa

Tieni presente che queste modifiche si applicheranno alle pagine del negozio, del singolo prodotto e delle categorie. Inoltre, assicurati di non avere alcun collegamento che porti gli utenti al carrello poiché lo disabiliteremo.

Questo è tutto! Hai appena semplificato la procedura di pagamento reindirizzando i clienti dalle pagine del prodotto e del negozio direttamente alla cassa. Inoltre, gli acquirenti potranno modificare e confermare i propri ordini nella pagina di pagamento.

Puoi creare un checkout di una pagina con la versione gratuita di WooCommerce Direct Checkout, ma se desideri più funzionalità per portare il tuo checkout al livello successivo, puoi controllare alcuni dei piani premium.

2) Creare un checkout di una pagina a livello di codice

In questa sezione, utilizzeremo alcuni script PHP e stili CSS per aggiungere funzionalità al checkout di una pagina che abbiamo creato con il plug-in. Quindi ti consigliamo di dare un'occhiata alla prima sezione e di installare e configurare il plug-in per creare un checkout a pagina singola. Ci vorranno letteralmente alcuni minuti.

Dopo averlo fatto, vediamo come personalizzare completamente la tua pagina di pagamento di una pagina in modo programmatico .

NOTA : poiché modificheremo alcuni file del tema principale, prima di iniziare, assicurati di creare un backup del tuo sito e di avere un tema figlio installato sul tuo sito. Puoi utilizzare uno qualsiasi di questi plugin per temi figlio o crearne uno da solo seguendo questa guida.

2.1) Aggiungi i metadati del prodotto alla pagina di pagamento

Iniziamo aggiungendo alcune informazioni sul prodotto che l'utente sta acquistando. Visualizzeremo il nome, l'immagine in miniatura e la descrizione del prodotto nella pagina di pagamento.

Poiché abbiamo disabilitato la pagina del carrello, dopo aver aggiunto un prodotto al carrello, gli acquirenti verranno reindirizzati alla cassa. Anche se la pagina del carrello è nascosta, possiamo utilizzarla per recuperare tutte le informazioni sul prodotto da essa.

Per farlo, incolla semplicemente il seguente codice nel file functions.php del tuo tema figlio:

 // hook per visualizzare i metadati del prodotto
 add_action('woocommerce_checkout_before_customer_details','QuadLayers_product_meta');
 funzione QuadLayers_product_meta(){
 echo '<div class="custom-product"><h2>Stai per acquistare un ';
 $carrello = WC()->carrello->get_cart();
 foreach($carrello as $cart_item_key => $cart_item ){
 $prodotto = $carrello_elemento['dati'];
 echo $product->get_name()."</h2>";
 echo $product->get_image();
 echo "<span>".$product->get_description()."</span>";
 }
 echo "<h3>Completa il tuo ordine compilando il modulo sottostante</h3>";
 }

Per verificarlo, fai clic sul pulsante di acquisto su qualsiasi prodotto e dopo essere stato reindirizzato alla pagina di pagamento, vedrai qualcosa del genere:

2.2) Sovrascrivere il file del modello di pagamento di WooCommerce

Il file responsabile della stampa della pagina di pagamento è form-checkout-php e si trova nel plugin WooCommerce nella cartella dei modelli: /woocommerce/templates/checkout.

Per sovrascrivere questo file, copia il file originale dal plugin WooCommerce e incollalo nella cartella checkout , all'interno della directory WooCommerce del tuo tema figlio.

Nel checkout predefinito di WooCommerce, il layout è impostato su due colonne. I moduli di fatturazione, spedizione e ulteriori vengono visualizzati nella prima colonna e i dettagli dell'ordine nell'altra.

Puoi cambiarlo modificando la classe HTML dell'elemento <div> che racchiude i moduli, da col2-set a col1-set come segue:

 <div class="col1-set">

Dopo questa semplice edizione, tutti i moduli verranno visualizzati in un'unica colonna a larghezza intera come questa:

Successivamente, modificheremo il titolo dei dettagli dell'ordine e lo cambieremo da "Il tuo ordine" a "Revisione dell'ordine" con il seguente script:

 <h3><?php esc_html_e( 'Revisione dell'ordine', 'woocommerce' ); ?></h3>

Questi sono solo alcuni semplici esempi di ciò che puoi fare qui. Sentiti libero di andare oltre e apportare le tue personalizzazioni. Puoi utilizzare una qualsiasi delle funzioni native di WordPress qui. Per ulteriori informazioni sui ganci di pagamento, puoi dare un'occhiata a questo articolo.

Per saperne di più su come personalizzare i modelli WooCommerce in modo programmatico, dai un'occhiata a questa guida completa.

2.3) Aggiungi il carrello alla pagina di pagamento

Puoi utilizzare alcuni codici brevi nella pagina di pagamento, quindi se desideri aggiungere il carrello lì, puoi utilizzare lo shortcode del carrello WooCommerce come segue:

 echo do_shortcode(' [ woocommerce_cart ] ');

Per visualizzare il carrello subito prima dei dettagli dell'ordine, incolla questo script PHP nel file functions.php del tuo tema figlio:

 add_action('woocommerce_checkout_after_customer_details','QuadLayers_add_cart_checkout');
 funzione QuadLayers_add_cart_checkout(){
       echo do_shortcode(' [ woocommerce_cart ] ');
 }

Ora dovresti vedere il carrello con i prodotti che l'utente ha aggiunto alla fine dei moduli di pagamento:

2.4) Aggiungi contenuto personalizzato alla pagina di pagamento

Quando i clienti esaminano i dettagli dell'ordine, possono scegliere un metodo di pagamento e fare clic su "Effettua ordine" per completare l'acquisto. Poiché questo blocco viene visualizzato in una colonna di destra, inseriremo del contenuto sul lato sinistro per ottenere un design equilibrato.

Questa è la funzione di contenuto personalizzato che verrà incollata nel file functions.php in cui spieghiamo alcune delle politiche di reso, metodi di pagamento, consegna e così via. Sentiti libero di personalizzarlo e adattarlo al tuo negozio:

 add_action('woocommerce_checkout_before_order_review','QuadLayers_add_column_before_order_review');
funzione QuadLayers_add_column_before_order_review(){    
    printf(' <div><h3>Maggiori informazioni sul tuo ordine:</h3>
 <p>Grazie mille per aver acquistato sul nostro negozio. Ecco alcune informazioni utili che potresti dover sapere</p>
 <ul>
 <li>Facciamo del nostro meglio per consegnare il più velocemente possibile, ma per mantenere un servizio ottimale, il tuo prodotto potrebbe richiedere fino a due giorni lavorativi prima dell'arrivo</li>
 <li>Le nostre politiche di restituzione ti consentono di richiedere la sostituzione fino a 15 giorni dopo l'acquisto. <a href="#">Leggi qui le norme del negozio</a></li>
 <li>Se si sceglie il metodo di pagamento con carta di credito, in alcuni casi ciò potrebbe aggiungere un ritardo di due giorni nella consegna</li>
 <li>Se non sei soddisfatto di ciò che hai ricevuto, puoi anche optare per un rimborso in base alla nostra politica di rimborso</li>
 <li>Hai un buono sconto? Se nota, prendilo qui e torna indietro in modo da poterlo applicare</li>
 </ul>
 </div>','woocommerce');
}

E questo è il risultato finale:

2.5) Aggiunta di alcuni stili CSS alla pagina di pagamento

Nel file function.php , vedrai che abbiamo aggiunto la nostra classe, che abbiamo chiamato custom-product . Utilizzeremo questa classe per definire lo stile del contenuto con alcuni script CSS. Inoltre, possiamo dare gli ultimi ritocchi al design della nostra nuova cassa di una pagina senza utilizzare la nostra classe personalizzata.

Questo è lo script CSS completo che abbiamo usato in questo tutorial. Copialo e incollalo semplicemente nel file style.css del tuo tema figlio:

 /* nascondi il titolo del modulo di fatturazione */
.woocommerce-billing-fields > h3:nth-child(1){
    display:nessuno;
}
/* stai per acquistare... */
.prodotto-personalizzato > h2:nth-child(1){
    allineamento testo: centro;
}
/* Immagine */
img.attachment-woocommerce_thumbnail:nth-child(2){
    margine:automatico;
}
/* descrizione */
.prodotto-personalizzato > span:nth-child(3){
    margine:automatico;
    larghezza: 50%;
    blocco di visualizzazione;
}
/* Completa l'ordine ...*/
.prodotto-personalizzato > h3:nth-child(4){
    allineamento testo: centro;
    margine: 25px 0 25px 0;
}
/* maggiori informazioni.. */
.prodotto-personalizzato > div:nth-child(8){
    galleggiante: sinistra;
    larghezza: 47%;
}
#Dettagli cliente{
    margine inferiore:40px;
}

NOTA : per questa dimostrazione, abbiamo utilizzato il tema Storefront, quindi potrebbe essere necessario regolare i selettori CSS se utilizzi un tema diverso o se hai aggiunto le tue personalizzazioni.

Dopodiché, se tutto è andato bene, dovresti vedere quanto segue nella tua pagina di pagamento:

Questo è tutto! Hai appena creato una verifica di una pagina WooCommerce completamente personalizzata in modo programmatico .

3) Crea un checkout di una pagina con un generatore di pagine

Un'altra opzione interessante per creare e personalizzare un checkout di una pagina in WooCommerce è utilizzare un generatore di pagine. Ci sono diversi page builder là fuori. Per questa dimostrazione, utilizzeremo Site Origin. Con oltre 1 milione di installazioni attive, questo è uno dei page builder più popolari per la sua semplicità ed efficienza.

Il processo è simile per la maggior parte dei page builder, quindi indipendentemente da quello che usi, dovresti essere in grado di seguire la guida senza problemi.

Innanzitutto, scarica Site Origin dal repository di WordPress, installalo e attivalo sul tuo sito web. Quindi, apri la pagina di pagamento con l'editor e aggiungi un nome ad essa. Lo chiameremo pagamento di una pagina.

Come puoi vedere, la pagina di pagamento è solo uno shortcode WooCommerce inserito in un blocco Gutenberg. Se hai disabilitato i blocchi Gutenberg nel backend, vedrai anche lo stesso shortcode ma nel vecchio editor di testo. Elimina semplicemente il blocco dello shortcode e aggiungine uno di page builder.

Ora possiamo iniziare a creare un checkout di una pagina completamente personalizzato utilizzando il generatore di pagine. Puoi aggiungere qualsiasi widget nelle colonne e impostarlo sul layout desiderato. Tieni presente che devi inserire il

 [ woocommerce_checkout ]

shortcode di nuovo, altrimenti non funzionerà.

E qui arriva la parte migliore. Puoi anche utilizzare uno qualsiasi dei widget o moduli disponibili nel layout del generatore di pagine. Inoltre, puoi includere altri shortcode. Il carrello e quelli “Il mio conto” sono abbastanza comuni.

Questo è un esempio di base, quindi dovrai regolare ogni widget e personalizzare la pagina di pagamento in base alle tue esigenze. Inoltre, tieni presente che ogni page builder funziona in modo diverso, quindi anche se il processo è simile, potresti dover modificare alcune cose. Come raccomandazione generale, i modelli con larghezza intera e senza barra laterale di solito funzionano meglio.

4) Crea un checkout di una pagina utilizzando l'editor di blocchi Gutenberg

Allo stesso modo, puoi personalizzare il tuo pagamento di una pagina WooCommerce utilizzando l'editor dei blocchi di Gutenberg. Per questo, nella dashboard di WordPress, apri la pagina di pagamento e vedrai il blocco con lo shortcode di pagamento. Aggiungiamo altri blocchi a questa pagina facendo clic sul pulsante Aggiungi blocco ( + ) e selezionando Colonne .

Qui puoi utilizzare uno qualsiasi dei blocchi e codici brevi disponibili per personalizzare completamente la tua pagina di pagamento. In alternativa, se hai competenze di programmazione, puoi anche modificare il checkout inserendo il tuo codice HTML con il blocco di codice. Per questa demo, abbiamo aggiunto il carrello e il mio account shortcode in 2 colonne in modo che assomigli a questo:

Ed è così che puoi facilmente creare un checkout di una pagina in WooCommerce con l'editor di blocchi Gutenberg.

Suggerimenti finali

• Quando crei un checkout di una pagina, tieni sempre presente l'obiettivo principale del checkout: consentire ai clienti di effettuare gli ordini il più facilmente possibile. Dovresti evitare qualsiasi contenuto che distragga gli utenti da questo obiettivo.
• Tutte le informazioni che gli utenti devono rivedere prima di premere il pulsante "Inserisci ordine" dovrebbero essere disponibili nella stessa pagina, in modo che possano fare tutto dalla pagina di pagamento. Includere tutte le informazioni necessarie ed evitare di inserire collegamenti che portano gli utenti a un URL diverso.
• Agli utenti non piacciono le pagine di contenuto lunghe durante l'acquisto. Mantieni le cose semplici e pulite e concentrati sul raggiungimento di una pagina di pagamento efficiente e professionale

Conclusione

Tutto sommato, i checkout di una pagina ti aiuteranno ad abbreviare il processo di acquisto, ridurre l'abbandono del carrello e aumentare i tassi di conversione. Anche se in alcuni casi i checkout su più pagine possono essere più efficaci, per la maggior parte dei negozi, i checkout più brevi tendono a funzionare meglio.

In questa guida, abbiamo visto diversi modi per creare un checkout di una pagina in WooCommerce:

• Con un plug-in
• Programmaticamente
• Con un generatore di pagine
• Utilizzando l'editor di blocchi di Gutenberg

Se desideri una soluzione rapida ed efficiente, utilizzare Direct Checkout è la scelta migliore. Questo plug-in freemium ti consente di creare un checkout di una pagina in pochi minuti e include anche diverse funzionalità per aiutarti a migliorare il tuo checkout e aumentare le vendite. Ad esempio, puoi rimuovere i campi di pagamento, aggiungere pulsanti di acquisto rapido e visualizzazione rapida e molto altro. Se non desideri installare un plug-in aggiuntivo e utilizzi un generatore di pagine, puoi creare la pagina di pagamento utilizzando l'editor di blocchi Gutenberg o con il tuo generatore di pagine.

D'altra parte, se hai abilità di programmazione hai più opzioni per modificare la tua pagina di pagamento. Dopo aver creato il checkout con il plug-in Direct Checkout, puoi aggiungere script PHP e CSS per personalizzare completamente il tuo checkout. In questo articolo abbiamo visto alcuni esempi, ma c'è molto di più che puoi fare. Sentiti libero di usarli come base e gioca per trovare ciò che funziona meglio per te.

Qual è il tuo metodo preferito per creare un checkout di una pagina in WooCommerce? Ne conoscete altri che dovremmo includere? Fatecelo sapere nella sezione commenti qui sotto!