Il primo shop indipendente
al mondo per lo sviluppo di plugin per WooCommerce
Filtra per categoria
E-COMMERCE UX VIDEOTRAINING

E-COMMERCE UX VIDEOTRAINING

Scopri i nostri tutorial e migliora il tuo e-commerce per fidelizzare i clienti e aumentare le vendite. visualizza i nostri corsi

Consulenza UX e-commerce

Consulenza UX e-commerceIn arrivo

Faremo una consulenza sul tuo e-commerce e ti aiuteremo ad ottimizzarlo per ottenere un indice di conversione più alto.

Italiano

< Torna agli articoli

Come creare la tua pizza: personalizza i prodotti WooCommerce con opzioni aggiuntive

Hai sempre sognato di aprire una pizzeria take away o ti sei mai trovato a dover creare prodotti con diversi ingredienti o componenti? Questo tutorial sarà un prezioso punto di partenza per comporre con WooCommerce prodotti tipo “Crea la tua pizza”.

Se sei nuovo in WooCommerce e stai iniziando adesso, ti consigliamo di leggere la guida essenziale su come configurare il tuo store.

A chi è rivolto questo tutorial per Product Add-ons e WooCommerce?

Come già suggerisce il titolo, in questo tutorial vedremo come creare la tua pizza. Sappiamo bene che ciascuno di noi ha la sua pizza preferita e non sarà mai la stessa per tutte le persone sedute allo stesso tavolo. Questo può creare delle difficoltà di gestione per i ristoranti o le pizzerie da asporto. Ma se ci pensi bene, una pizza non è altro che un prodotto con delle opzioni selezionabili, così come lo è una torta di compleanno, un panino o anche prodotti di altro tipo, non per forza prodotti da mangiare.

Se vendi tutti i tuoi prodotti con delle opzioni, in quattro e quattr’otto potrai applicare lo stesso tipo di opzioni a diversi tipi di prodotti.

Le difficoltà del creare un prodotto del tipo “Crea la tua pizza”

Se hai installato WooCommerce, sai già che creare opzioni aggiuntive personalizzate per i tuoi prodotti può diventare davvero problematico. Se hai in mente di utilizzare dei dropdown o semplici checkbox, probabilmente non avrai problemi a implementarle, ma non appena inizi ad aggiungere dei costi diversi in base all’opzione selezionata oppure se devi creare del testo personalizzato, caricare un file, offire prodotti in up-sell, diventa tutto molto più complesso, anche quando si tratta di un plugin per custom post type, perché sarà necessario modificare lo stile per far sì che si veda bene col tuo tema.

Aggiungendo il plugin YITH WooCommerce Product Add-ons and Extra Options sei già a buon punto con una soluzione alla prima parte del problema. Il prossimo passo consiste nel trovare una guida per replicare le stesse opzioni che trovi nella nostra demo.

Scegli gli ingredienti

Creare le opzioni aggiuntive in 8 semplici passi

Step 1 – Crea un prodotto WooCommerce

Crea un prodotto con un prezzo di base. All’interno del prodotto aggiungi una descrizione, le immagini e se possibile anche la quantità in magazzino (ti sarà utile se, per esempio, per le pizze oggi hai a disposizione un totale di 30 panetti).

Step 2 – Aggiungi un blocco

Vai nelle impostazioni di YITH Product Add-ons e seleziona “Aggiungi blocco” per iniziare a configurare un nuovo blocco di opzioni. I blocchi rappresentano le opzioni di cui necessita il prodotto. Dopo il primo step, puoi aggiungere tutti i blocchi che desideri in base alle tue esigenze e assegnarli ad uno o più prodotti.

Aggiungi blocco

Step 3 – Inserisci il nome del blocco e imposta la priorità

È molto importante impostare la priorità nel caso in cui devi creare più di un blocco per lo stesso prodotto. In questo modo, infatti, quando ci sono diversi blocchi potrai gestire l’ordine in cui appaiono i blocchi opzioni nella pagina del prodotto.

Nome blocco e priorità

Step 4 – Imposta le regole di visualizzazione

In questa sezione dovrai impostare in quali prodotti mostrare le opzioni aggiuntive. Nel nostro esempio, abbiamo un solo prodotto chiamato “Crea la tua pizza”. Ma se vuoi, puoi mostrare le opzioni su tutti i prodotti del tuo store o su tutti quelli appartenenti ad una determinata categoria o tag.

Regole di visualizzazione

Step 5 – Aggiungi le opzioni per gli ingredienti

Torna adesso alla tab per configurare le opzioni e clicca su “Aggiungi opzione”: si aprirà un popup con gli elementi HTML e i tipi di opzione disponibili. Per gli ingredienti, crea delle etichette con testo e icona per identificare facilmente ciascuno degli ingredienti, quindi scegli “Etichetta o immagine”.

Tipi di opzioni

Crea quindi le etichette con testo e icona per identificare facilmente i vari ingredienti. Dopodiché, scegli un titolo (“Scegli gli ingredienti”), da’ un nome all’ingrediente, scegli un’immagine che lo rappresenti e, infine, imposta il prezzo di €2,00.

Opzioni di visualizzazione

Ripeti il processo per ciascun ingrediente utilizzando il pulsante “+ Aggiungi nuova opzione”.

Nella tab “Impostazioni di visualizzazione” troverai ulteriori opzioni, come la possibilità di nascondere i prezzi. Siccome nel nostro caso non vogliamo mostrarli, impostiamo il pulsante su “SÌ”. Poi da “Layout opzioni > Opzioni per riga”, imposta il valore “4”. Attiva il layout a griglia, così le opzioni saranno visibili per tutta la larghezza dello schermo.

Opzioni di visualizzazione

Per il momento lasciamo invariate le tab “Stile” e “Logica condizionale” e ci concentreremo sulle “Opzioni avanzate” da cui sarà possibile configurare una parte fondamentale di questo componente. Da questa sezione, infatti, possiamo decidere di offrire un determinato numero di opzioni gratuitamente: nel nostro caso saranno i primi 3 ingredienti. Seleziona, allora, “Multipla” così il cliente potrà scegliere tutti gli ingredienti che desidera.

Opzioni avanzate

Una volta completato il processo per aggiungere gli ingredienti e configurate tutte le opzioni necessarie, salva le modifiche. Ecco come apparirà il risultato finale della nostra configurazione nella pagina prodotto:

Ingredienti selezionabili

Come puoi notare, il cliente può scegliere tre ingredienti gratuitamente e pagare €2 per ogni ingrediente extra. Abbiamo impostato il costo di €2,00 per ciascun ingrediente e con quest’ultima impostazione abbiamo fatto sì che le prime tre opzioni selezionate siano comunque gratuite. Inoltre, il cliente potrà selezionare diversi ingredienti, non solo uno.

Step 6 – Vendi di più e aggiungi delle bevande

Nel nostro esempio, il cliente potrà scegliere una bevanda fra quelle messe a disposizione. Come fatto già prima, da “Aggiungi opzioni” potrai scegliere il tipo di opzioni “Checkbox” e inserire un titolo. Chiama la prima opzione “Coca Cola” e imposta un prezzo. Assicurati di aver selezionato “Aumenta il prezzo del prodotto principale”, poiché ogni bevanda potrà avere un prezzo diverso.

Aggiungi bevanda

Una volta inserite le opzioni per le bevande disponibili, verifica le impostazioni nelle altre tab. Nel nostro caso, dalle “Opzioni avanzate” faremo in modo che il cliente possa selezionare una sola bevanda.

Selezione singola o multipla

Step 7 – Offri ai tuoi clienti la possibilità di impostare una data e un orario per il ritiro

Grazie ad un altro interessante tipo di opzione, il cliente potrà selezionare la data e l’ora in cui andare a prendere la sua pizza personalizzata. Sai già come creare una nuova opzione, ma per questa opzione dovrai selezionare il tipo “Data”.

Per questo tipo di opzione potrai impostare anche delle restrizioni. Ecco cosa abbiamo fatto noi:

Opzioni data

Nella pagina prodotto apparirà in questo modo:

Opzioni di consegna

Come puoi vedere, non siamo andati a configurare ogni minimo dettaglio, ma se vuoi dare ai tuoi utenti la possibilità di scegliere solo determinate fasce orarie, potrai farlo senza problemi! Abilita le opzioni per le fasce orarie. Nel nostro caso, saranno fasce orarie di 15 minuti a partire dalle 18:00.

Opzioni data e fasce orarie

Step 8 – Controlla le impostazioni e perfeziona lo stile delle tue opzioni

Avrai sicuramente notato molte impostazioni che non abbiamo analizzato in questo tutorial. Ci sono moltissime opzioni di stile che ti aiuteranno a raggiungere il tuo obiettivo. E la cosa bella è che non ti servirà uno sviluppatore per scrivere il codice, troverai ogni opzione spiegata nel dettaglio nella nostra documentazione.

Perché usare YITH Product Add-ons and Extra Options?

Ti abbiamo mostrato quanto sia semplice aggiungere opzioni, etichette o impostare prezzi aggiuntivi per le opzioni selezionate nel prodotto. Sia che crei opzioni per prodotti di tipo alimentare sia che si tratti di un qualsiasi tipo di personalizzazione, quello che ti abbiamo mostrato è solo una minima parte di ciò che è possibile fare con questo plugin.

Le opzioni possono essere applicate a tutti i prodotti del sito, per categoria/tag o anche solo per singolo prodotto. In questo modo, potrai creare e gestire i componenti aggiuntivi in modo semplice ed efficiente. Ad esempio, potrai gestire un aumento di prezzo per la selezione del salame come ingrediente in tutte le tue pizze in pochi secondi.

Il nostro plugin è integrato con almeno altri 12 plugin, tra cui Request a Quote, Product Bundles, Deposits and Down Payments e molti altri.

Scopri di più o provalo subito

Per maggiori dettagli su tutte le funzionalità e le integrazioni, visita la pagina del plugin oppure prova la versione gratuita del plugin, anche se con meno opzioni, scaricabile da wordpress.org.

Per testare, invece, il plugin in una demo o con altre configurazioni possibili, visita la nostra sandbox site.

Per le diverse impostazioni abbiamo creato una documentazione dettagliata oppure, se preferisci, puoi guardare i nostri video tutorial in inglese, spagnolo, o in italiano su Youtube.

Articoli consigliati

Iscriviti alla nostra newsletter per ricevere tutte le novità nella tua email!