Come aggiungere un campo incisione ai prodotti WooCommerce

Un cliente vuole far incidere un nome sulla borraccia. Per preparare il prodotto ti servono il testo esatto e un limite di caratteri adatto allo spazio disponibile. Il prezzo deve essere chiaro prima di aggiungere la borraccia al carrello. Un campo per l’incisione in WooCommerce permette di raccogliere questa indicazione insieme all’acquisto del prodotto.

In questa guida usiamo HookSpark Product Options & Add-Ons per aggiungere un campo di testo obbligatorio a un prodotto semplice. La borraccia costa 20 USD, l’incisione aggiunge 5 USD per articolo e il testo può contenere fino a 20 caratteri. La configurazione di base usa i campi e i controlli per il prezzo fisso di Free.

A cosa serve un campo per l’incisione

Il campo salva nell’ordine il testo da incidere. Chi prepara la borraccia ritrova così l’indicazione del cliente. L’incisione vera e propria, la scelta del carattere e l’eventuale anteprima grafica restano a carico del tuo servizio di personalizzazione.

Chiarisci subito che cosa acquista il cliente. Nell’esempio la borraccia viene sempre personalizzata, quindi il testo da incidere è obbligatorio. Un servizio di incisione facoltativo richiede una configurazione diversa: una casella di selezione seguita da un campo di testo condizionale. La vediamo più avanti.

1. Crea un gruppo per il prodotto da personalizzare

Lavora su una copia di prova del negozio con WooCommerce e HookSpark Product Options attivi. Scegli un prodotto semplice pubblicato chiamato Borraccia personalizzata, con un prezzo di catalogo di 20 USD e scorte sufficienti per due pezzi.

1. Apri HookSpark → Product Options.
2. Crea un gruppo e imposta Nome del gruppo su «Incisione borraccia». Mantienilo disattivato durante la configurazione.
3. Nella selezione dei prodotti del gruppo, scegli Borraccia personalizzata.
4. Per questo esempio usa la visualizzazione direttamente nella pagina, Nella pagina prodotto.

Controlla gli altri gruppi di opzioni già assegnati alla borraccia. Un gruppo senza restrizioni può comparire anche su altri prodotti; selezionando la borraccia mantieni l’esempio mirato. Le esclusioni hanno la precedenza sulle inclusioni.

2. Aggiungi un campo di testo con istruzioni visibili sulla lunghezza

Scegli Aggiungi campo, poi seleziona Text. Un campo di testo su una sola riga è adatto a un nome o a un breve testo da incidere. Usa queste impostazioni:

Il limite di lunghezza dovrebbe dipendere da ciò che puoi effettivamente incidere. Venti è un esempio, non uno standard di produzione universale. Un nome lungo, la punteggiatura o un carattere accentato possono richiedere un’impaginazione diversa anche se rispettano il limite del software.

Nella versione attuale il server conta i punti di codice Unicode dopo aver rimosso gli spazi iniziali e finali. Un’emoji composta può contenere più punti di codice. Prova i tipi di carattere accettati dal tuo processo produttivo: il limite di lunghezza non verifica carattere tipografico, alfabeto o impaginazione dell’incisione.

3. Rendi chiaro il costo dell’incisione

Un valore fisso di Supplemento per articolo è adatto quando il servizio costa lo stesso per ogni testo da incidere accettato. Scrivere «MARCO» o «ANNA» aggiunge gli stessi 5 USD nel nostro esempio. Non è un prezzo per lettera.

Sono prezzi fittizi per il tutorial, non prezzi degli abbonamenti ai plugin. L’esempio presuppone che prezzo di catalogo ed extra usino la stessa base fiscale. WooCommerce applica separatamente le impostazioni fiscali del negozio, la località del cliente, i coupon e la spedizione: controlla i totali finali nel tuo negozio.

Due borracce aggiunte insieme con quantità due hanno lo stesso testo da incidere. Se il cliente vuole due nomi diversi, deve configurare e aggiungere ogni nome separatamente; verifica poi che carrello e ordine mantengano distinte le personalizzazioni.

4. Salva, attiva e prova l’intero acquisto

Salva il gruppo, controlla l’anteprima per il prodotto selezionato, poi attivalo e salva di nuovo. L’anteprima della bozza aiuta a verificare il campo, ma non dimostra il corretto funzionamento di negozio, carrello e ordine.

Apri la pagina della borraccia come cliente ed esegui questi controlli:

• Campo vuoto: prova ad aggiungere la borraccia senza testo da incidere. Il campo obbligatorio dovrebbe impedire di proseguire con l’acquisto.
• Un nome normale: inserisci MARCO. Verifica che il testo valido venga accettato e che il prezzo di un articolo includa i 5 USD aggiuntivi.
• Il limite di lunghezza: prova un valore consentito di 20 caratteri e uno di 21. Il browser può bloccare la digitazione oltre il limite; anche il server deve rifiutare un valore inviato troppo lungo.
• Quantità due: verifica un totale di 50 USD per questo esempio, prima delle altre modifiche del negozio.
• Un prodotto diverso: apri un articolo non collegato e controlla che il gruppo riservato alla borraccia non compaia.
• Carrello e ordine di prova: verifica che testo e prezzo rimangano durante l’acquisto e compaiano nei dati dell’ordine usati da chi prepara i prodotti.

Usa un metodo di pagamento di prova e controlla i dettagli effettivi dell’ordine prima di attivare la configurazione per i clienti. Includi ortografia, navigazione da tastiera e uso da mobile. Il software può richiedere un valore, ma non può sapere se il cliente voleva scrivere «MARCO» oppure «MARCOO».

Dai le istruzioni prima che il cliente commetta un errore

In Usabilità dei moduli web: le 10 raccomandazioni principali (Nielsen Norman Group, Kathryn Whitenton, 1 maggio 2016), si consiglia di spiegare i requisiti dei campi e distinguere chiaramente quelli obbligatori da quelli facoltativi.

Per l’incisione significa mantenere visibile «Testo da incidere», indicare sotto il limite di lunghezza e spiegare quando il servizio è obbligatorio. Non lasciare le istruzioni essenziali solo nel testo segnaposto che scompare mentre il cliente scrive. È un principio di progettazione dei moduli, non un aumento delle conversioni misurato per questo esempio.

E se l’incisione è facoltativa?

Crea una casella di selezione come Aggiungi incisione prima del campo di testo. Imposta il campo perché compaia solo quando la casella è selezionata e rendilo obbligatorio quando è visibile.

Scegli un solo punto per il sovrapprezzo fisso. Per esempio, assegna i 5 USD alla casella e lascia a zero l’extra del campo di testo condizionale. Addebitare su entrambi sommerebbe i due importi. Quando la scelta di controllo nasconde il campo, il plugin ne cancella il valore e quel campo non contribuisce più al prezzo.

La guida alle opzioni prodotto condizionali WooCommerce descrive questa variante con incisione facoltativa, dalla casella di scelta ai due percorsi d’acquisto. Usala quando vuoi permettere anche l’acquisto della bottiglia senza incisione.

Prova entrambi i percorsi: senza incisione deve essere possibile comprare il prodotto base; con l’incisione selezionata il testo deve essere obbligatorio. Per un altro esempio di personalizzazione condizionale, vedi il nostro tutorial sulle confezioni regalo in WooCommerce.

Si può applicare un prezzo per carattere?

Sì, l’estensione Pro aggiunge prezzi per carattere e prezzi applicati una sola volta per riga del carrello. Risolvono esigenze diverse dalla configurazione Free a prezzo fisso per articolo descritta sopra.

A 1 USD per carattere, MARCO aggiunge 5 USD per articolo e ANNA ne aggiunge 4. Contano anche gli spazi interni. Un costo iniziale applicato una volta per riga rimane invece fisso quando aumenta la quantità di quella riga personalizzata. Consulta la guida di Product Options e prova separatamente questi calcoli prima di sostituire il prezzo fisso.