Come aggiungere un campo di caricamento personalizzato in WooCommerce

Vuoi includere un campo di caricamento nella tua pagina di pagamento? Sei nel posto giusto. In questo articolo, ti mostreremo come aggiungere un campo di caricamento personalizzato in WooCommerce passo dopo passo.

Con oltre 5 milioni di download attivi, WooCommerce è la piattaforma di eCommerce più popolare al mondo. Quando si tratta di creare un negozio online, è la scelta migliore per molti proprietari di negozi e per una buona ragione. WooCommerce rende l'intera esperienza online perfetta e diretta sia per i clienti che per i proprietari dei negozi.

Oltre ad essere facile da configurare e utilizzare, WooCommerce include anche tonnellate di funzionalità che ti offrono molta flessibilità. Utilizzando i plug-in o con un po' di codifica, puoi aggiungere tutte le funzionalità necessarie per migliorare l'esperienza di acquisto e aumentare le vendite.

Non è un segreto che per raggiungere questo obiettivo, il tuo checkout dovrebbe essere ottimizzato e privo di distrazioni. Un modo per migliorare l'esperienza dell'utente è aggiungere un campo di caricamento personalizzato al tuo negozio WooCommerce . In questo modo, puoi consentire ai tuoi clienti di caricare file durante il processo di pagamento e confermare l'ordine immediatamente invece di dover mantenere l'acquisto in sospeso fino a quando non ti invieranno ulteriore documentazione via e-mail.

Prima di entrare nei dettagli, capiamo meglio perché aggiungere un campo di caricamento personalizzato al tuo negozio è una buona idea.

Perché aggiungere un campo di caricamento personalizzato in WooCommerce?

Esistono diverse situazioni in cui gli acquirenti potrebbero dover caricare documenti quando acquistano un prodotto online.

Alcuni hotel potrebbero chiedere ai propri clienti di allegare un tipo di identificazione, normalmente una carta d'identità o un passaporto, quando prenotano online. In molti paesi, gli hotel devono fornire ogni giorno informazioni sui loro ospiti alla polizia o alle autorità locali, quindi potrebbero chiederti un documento d'identità prima del tuo arrivo per accelerare il processo di check-in.

Allo stesso modo, alcuni siti che vendono biglietti aerei o ferroviari online richiedono ai passeggeri di caricare il proprio documento d'identità o passaporto durante il processo di prenotazione. Se devi modificare il tuo biglietto, chiedere un rimborso o richiedere una sorta di risarcimento per un ritardo, la compagnia potrebbe chiederti di caricare determinati documenti come passaporto o carta d'identità, il biglietto che hai acquistato e così via.

Inoltre, i negozi online all'ingrosso hanno clienti che acquistano prodotti all'ingrosso e spendono migliaia di dollari in una singola transazione. In questi casi, come misura di sicurezza, potrebbero richiedere agli utenti di caricare una prova di identità.

Inoltre, un negozio di abbigliamento che offre la possibilità di acquistare magliette personalizzate può chiedere ai clienti di inviare i propri modelli per farli stampare. Per questo, devono consentire agli utenti di caricare file in modo che possano caricare i loro progetti.

Infine, avere la possibilità di caricare file è molto utile per i negozi che vendono servizi che richiedono una precedente certificazione come immersioni, parapendio e così via.

Anche se potrebbe non essere obbligatorio in ogni singolo caso, l'aggiunta di un campo di caricamento personalizzato alla pagina di pagamento può rendere il processo semplice e molto più conveniente per entrambe le parti .

Ora che capiamo meglio quando dovresti aggiungere un campo di caricamento personalizzato al tuo negozio WooCommerce, vediamo come farlo.

Come aggiungere un campo di caricamento personalizzato in WooCommerce

Il modo più semplice per aggiungere un campo di caricamento personalizzato in WooCommerce è utilizzare un plug-in. Per questa dimostrazione, utilizzeremo Checkout Manager per WooCommerce, uno strumento freemium con oltre 90.000 installazioni attive.

Questo plugin ha molte funzionalità per aiutarti a personalizzare il tuo checkout e include l'opzione per aggiungere un campo personalizzato. Per saperne di più su tutte le funzionalità offerte da questo strumento, controlla la pagina del prodotto.

Passaggio 1: installa Checkout Manager per WooCommerce

Per prima cosa, devi installare il plugin. Nella dashboard di amministrazione di WordPress, vai su Plugin > Aggiungi nuovo.

Quindi, cerca il plug-in Checkout Manager per WooCommerce di QuadLayers e fai clic sul pulsante " Installa ora ". Una volta installato il plug-in, premere " Attiva ".

Ora è il momento di configurare il plugin. Iniziamo aggiungendo un nuovo campo di caricamento personalizzato alla pagina di pagamento di WooCommerce.

Prima di ciò, vediamo come appare la pagina di pagamento. Come puoi vedere, non ci sono campi che consentano ai clienti di caricare file.

Vediamo come configurare Checkout Manager per consentire agli acquirenti di aggiungere file durante il checkout.

Passaggio 2: aggiungi il campo di caricamento personalizzato nella pagina di pagamento di WooCommerce

Nella dashboard di WordPress , vai su WooCommerce > Checkout. Lì troverai tutte le impostazioni per Checkout Manager.

Vai alla scheda Checkout e vai alla sezione Ulteriori per aprire le impostazioni dei campi aggiuntivi.

NOTA : In questo esempio, aggiungeremo il campo nella sezione Aggiuntivo, ma puoi aggiungerlo a Fatturazione, Spedizione o qualsiasi sezione del checkout che desideri semplicemente andando nell'area corrispondente nella scheda Checkout.

Nell'angolo destro, vedrai un menu a tendina che ti consente di selezionare la posizione in cui desideri visualizzare questi campi aggiuntivi. Fare clic sul pulsante " Aggiungi nuovo campo " per iniziare a creare un nuovo campo aggiuntivo.

Imposta il campo Caricamento personalizzato

Successivamente, andrai a una nuova pagina con un menu delle impostazioni. Qui puoi specificare i parametri per il campo che vuoi aggiungere. Poiché vogliamo aggiungere un campo di caricamento personalizzato, seleziona File in Tipo e imposta l'etichetta personalizzata e il testo del pulsante. Quindi, premere " Salva ".

Dopo aver creato alcuni campi aggiuntivi, puoi gestire i diversi parametri dal menu delle impostazioni dei campi aggiuntivi. Questi parametri includono:

• Riposizionare: utilizzare le frecce su e giù per spostare un campo in alto o in basso. In alternativa, puoi fare clic e trascinare l'icona delle tre linee orizzontali per riposizionare un campo.
• Obbligatorio: l'abilitazione del campo obbligatorio rende il campo obbligatorio. Ciò significa che l'utente non può continuare finché non compila quel campo.
• Posizione: è possibile selezionare la posizione in cui si desidera visualizzare il campo. Ci sono tre opzioni tra cui scegliere: sinistra, destra o larga.
• Cancella: l'abilitazione di questo non consente a qualsiasi altro campo di apparire a sinistra oa destra di questo campo particolare.
• Disabilita: selezionando il pulsante Disabilita, quel campo specifico non verrà visualizzato nella pagina di pagamento.
• Modifica ed Elimina: come suggerisce il nome, puoi modificare o eliminare un campo particolare facendo clic sul rispettivo pulsante.

Dopo aver configurato tutte le impostazioni, salvare le modifiche.

Ora diamo un'occhiata al nostro sito dal front-end per vedere le modifiche. Come puoi vedere, ora c'è un pulsante per caricare i file. Dei 2 campi personalizzati che abbiamo creato, solo il Campo Test è attivato e non è obbligatorio quindi appare come facoltativo nella pagina di checkout.

Questo è tutto! Ecco quanto è semplice aggiungere un campo di caricamento personalizzato in WooCommerce. Utilizzando questo pulsante, i clienti possono caricare qualsiasi file o persino caricare più file durante il processo di pagamento. I file caricati verranno salvati nella pagina degli ordini insieme ad altri dettagli dell'ordine. Inoltre, sarai in grado di gestire tutti i file che gli utenti caricano tramite il dashboard dell'ordine dell'amministratore.

Ma non è tutto ciò che puoi fare con Checkout Manager. Avere un checkout ottimizzato è la chiave per aumentare i tassi di conversione, quindi dovresti visualizzare solo i campi che il cliente deve compilare per completare l'ordine. Vediamo come aggiungere campi condizionali che compaiono solo quando viene soddisfatta una determinata condizione.

Bonus: aggiungi un campo condizionale in WooCommerce

Un campo condizionale ha due parti: un campo padre e un campo figlio. Il campo figlio dipende dall'input del campo padre. Ciò significa che non è visibile per impostazione predefinita ma viene visualizzato quando il campo padre assume un valore specifico.

Ad esempio, se desideri aggiungere un campo di caricamento personalizzato al tuo negozio WooCommerce che sarà richiesto solo in circostanze specifiche, la soluzione migliore è creare un campo condizionale in modo che il campo appaia solo quando è necessario.

Lo faremo in due passaggi. Innanzitutto, chiederemo all'utente se desidera caricare un file o meno. Se dicono "Sì", e solo allora, il campo dei file di caricamento diventerà visibile. In questo esempio, la nostra prima domanda sarà il campo padre e il pulsante di caricamento file sarà il campo figlio.

Ora che sappiamo cos'è un campo condizionale, vediamo come aggiungerlo a WooCommerce utilizzando il plug-in Checkout Manager.

Crea un campo condizionale con Checkout Manager

Innanzitutto, aggiungiamo il campo padre. Seguendo lo stesso esempio, lo aggiungeremo alla sezione Aggiuntivo ma puoi aggiungerlo nella sezione Fatturazione, Spedizione o in qualsiasi sezione del checkout che desideri.

Vai su WooCommerce > Cassa, vai alla scheda Cassa e apri la sezione Aggiuntiva . Premere il pulsante " Aggiungi nuovo campo " e impostare i parametri per il campo padre. Utilizzando l'esempio sopra, sceglieremo Seleziona come "Tipo" e aggiungeremo un'etichetta personalizzata e un testo segnaposto.

Quindi vai alla scheda Opzioni sul lato sinistro e imposta tutte le possibili opzioni che l'utente può selezionare. In questo esempio, stiamo ponendo una domanda all'utente che può avere solo due risposte: "Sì" o "No". Poiché la risposta a questa domanda non comporta alcun costo aggiuntivo (come la consegna veloce o la spedizione internazionale ad esempio), impostiamo il prezzo a 0. Una volta configurati tutti i parametri, salva le modifiche.

Crea il campo figlio

Successivamente, è necessario creare il campo figlio, il campo di caricamento personalizzato, e impostare i parametri condizionali.

Per fare ciò, crea un campo, imposta il tipo, l'etichetta e il segnaposto del pulsante. Quindi vai alla sezione giusta e seleziona la casella " Attiva requisito campo condizionale ". Successivamente, scegli il campo che hai appena creato nel passaggio precedente come campo padre e seleziona il valore del campo padre per il quale deve essere attivato il campo figlio. In questo caso, vogliamo visualizzare il file di caricamento solo quando l'utente risponde "Sì" alla prima domanda.

Una volta terminato, ricordati di salvare le modifiche.

Questo è tutto! Ora hai impostato correttamente un campo condizionale nella pagina di pagamento di WooCommerce.

Ora vai alla tua pagina di pagamento e controlla che il campo condizionale funzioni correttamente. Inizialmente verrà visualizzato solo il campo padre, ma se si seleziona "Sì", verrà visualizzato il pulsante di caricamento dei file.

Per ulteriori informazioni su come aggiungere campi condizionali a WooCommerce, dai un'occhiata alla nostra guida completa.

Conclusione

Tutto sommato, l'aggiunta di un campo di caricamento personalizzato nel checkout di WooCommerce può tornare utile in quanto consente ai tuoi clienti di caricare tutti i file richiesti durante il processo di pagamento.

Possono esserci diverse situazioni in cui gli utenti potrebbero dover caricare file o immagini. Ad esempio, verifica dell'identità per prenotazioni alberghiere online, acquisto di biglietti aerei, design personalizzato per abbigliamento, cambio o rimborso di articoli o servizi che richiedono una determinata certificazione. Ecco perché consentire ai tuoi acquirenti di caricare file alla cassa rende l'intero processo più semplice e conveniente.

In questo articolo abbiamo discusso:

• Vantaggi dell'aggiunta di un campo di caricamento personalizzato
• Istruzioni dettagliate su come aggiungere un campo di caricamento personalizzato in WooCommerce con Checkout Manager
• Cosa sono i campi condizionali e come funzionano
• Come puoi aggiungere un campo condizionale in WooCommerce per ottimizzare il checkout

Hai aggiunto un campo di caricamento personalizzato al tuo negozio? Conoscete altri metodi che dovremmo includere? Fateci sapere nei commenti qui sotto!