Come aggiungere meglio i prodotti in WooCommerce e personalizzarli? Guida completa con esempi

Pubblicato: 2018-06-22

Vendere computer e massimizzare i profitti con l'up-selling può essere una sfida. In questa guida imparerai come aggiungere prodotti a WooCommerce. Quindi, ti mostrerò come utilizzare un plug-in gratuito per personalizzare la pagina del prodotto WooCommerce. Vedrai un costruttore di computer WooCommerce con un MacBook Pro come esempio. Alla fine, sarai pronto per vendere prodotti personalizzabili nel tuo negozio WooCommerce e ottenere maggiori profitti.

️ Trovi WooCommerce povero di opzioni o troppo complicato quando aggiungi prodotti?

Oggi ti mostrerò come aggiungere prodotti e personalizzarli nel tuo WooCommerce con un plugin gratuito !

Sommario

  • Come aggiungere prodotti WooCommerce - Guida rapida
  • Personalizza i prodotti WooCommerce - esempio di costruttore di computer
  • Personalizza la pagina del prodotto del costruttore di computer WooCommerce
  • Prodotti WooCommerce con campi personalizzati
  • Riepilogo e altro sul plug-in

Come aggiungere prodotti WooCommerce - Guida rapida

Vediamo come creare prodotti in pochi passaggi:

  1. Prodotti in WooCommerce

    Personalizza il prodotto WooCommerce
    Elenco dei prodotti WooCommerce

    Innanzitutto, vai al menu Prodotti per aggiungere, rimuovere e gestire i tuoi articoli.

  2. Aggiungi o modifica un prodotto

    Quindi, fai clic sul pulsante Aggiungi nuovo o modifica il prodotto esistente.

    WooCommerce personalizza il prodotto
    Modifica i prodotti WooCommerce
  3. Imposta il prodotto WooCommerce

    Ora scegli il nome del prodotto, la sua descrizione e un'immagine. Inoltre, vai alla sezione Dati prodotto per decidere prezzo, stock, attributi, tasse, ecc.

    Personalizza il prodotto WooCommerce
    Come aggiungere prodotti WooCommerce in pochi passaggi

    Quindi, pubblica il nuovo prodotto (o aggiorna quello esistente). Questo è tutto!

  4. Scegli il tipo di prodotto

    Puoi anche scegliere il tipo di prodotto:

    Ecco come aggiungere prodotti in WooCommerce
    Tipi di prodotti WooCommerce
  5. Categorie di prodotti e tag

    Naturalmente, ci sono molte altre cose che puoi impostare, come la categoria del prodotto o i tag per organizzare meglio i tuoi articoli. Vorrei sottolineare che puoi anche modificare rapidamente alcuni dati di prodotto più velocemente con l'opzione Modifica nella schermata principale del prodotto:

    WooCommerce personalizza il prodotto
    Modifica i prodotti WooCommerce
  6. Come personalizzare i prodotti in WooCommerce?

    ⁉️ Penso che tu sia pronto per aggiungere prodotti . Grazie al product builder di WooCommerce puoi preparare i prodotti e utilizzare dati aggiuntivi (come attributi, tag e la galleria dei prodotti).

    Nella parte successiva, ti mostrerò come personalizzare i prodotti WooCommerce con campi personalizzati per offrire molto di più !

Maggiori informazioni sull'aggiunta e la gestione dei prodotti WooCommerce nella guida approfondita .

Personalizza i prodotti WooCommerce - esempio di costruttore di computer

Sei mai stato sul sito di Apple? In generale, ti consentono di scegliere i componenti di un computer che desideri acquistare.

Come ho già detto, ho deciso di utilizzare un MacBook Pro come esempio per questa guida. Lavoreremo su un esempio reale a questo punto.

Fondamentalmente, questo è l'aspetto del loro mago:

Come personalizzare la pagina del prodotto in WooCommerce
Personalizzazione di MacBook Pro - Apple.com

In questa guida configureremo le opzioni della procedura guidata in modo identico per creare un prodotto personalizzabile WooCommerce: il tuo computer builder .

Sembrerà così una volta configurato:

Personalizza la pagina del prodotto WooCommerce
WooCommerce Computer Builder (clicca per ingrandire). Personalizza la pagina del prodotto woocommerce con i campi del prodotto flessibili.

Ovviamente non assomiglia esattamente a quello sul sito Web di Apple. Questa è la configurazione di base solo per dimostrarti come funziona.

Con uno stile personalizzato che va oltre il tema di base di Storefront, puoi creare qualcosa di bello. Voglio che questa guida sia facile per te, quindi non tratterò questo argomento in questa guida. Voglio solo insegnarti come personalizzare i prodotti WooCommerce con l'esempio del costruttore di computer . Lo stile non è importante in questo momento.

Guarda un'altra cosa che voglio mostrarti prima di andare avanti:

Componenti aggiuntivi del prodotto nella pagina del prodotto
Ripartizione dei prezzi ottenuta con Campi di prodotti flessibili

Questo calcolatore viene visualizzato quando selezioni un'opzione nel generatore di computer WooCommerce.

Guarda questo esempio dal vivo in azione: Macbook Pro nel nostro negozio demo →

Personalizza la pagina del prodotto del costruttore di computer WooCommerce

Innanzitutto, hai bisogno di Flexible Product Fields , il nostro plug-in che consente ai proprietari dei negozi di aggiungere campi personalizzati e componenti aggiuntivi ai prodotti WooCommerce (e facoltativamente addebitarli) . Useremo questo plugin in questa guida.

Campi di prodotti flessibili WooCommerce

Crea una procedura guidata del prodotto per vendere incisioni, confezioni regalo, messaggi regalo, biglietti da visita, francobolli e facoltativamente addebitarli (fissi o percentuali).

Scarica gratis oppure Vai su WordPress.org
Oltre 10.000 installazioni attive
Ultimo aggiornamento: 2023-03-13
Funziona con WooCommerce 7.1 - 7.5.x
In questo tutorial utilizzeremo le funzionalità Pricing e Conditional logic , disponibili in Flexible Product Fields PRO . Tuttavia, ti invitiamo a scaricare prima la versione gratuita e a verificare se fa per te o no!

Puoi scaricarlo gratuitamente da WordPress.org o installarlo direttamente dalla sezione dei plug-in del tuo negozio alla ricerca di campi di prodotti flessibili :

Componenti aggiuntivi del prodotto WooCommerce
Installa e attiva la versione gratuita di Flexible Product Fields

️ Per coprire tutti i casi d'uso di cui discutiamo qui, avrai bisogno della versione PRO del plugin . In breve, la versione gratuita non ti offre di addebitare ai clienti opzioni aggiuntive . Tuttavia, puoi verificare se il metodo dei campi extra soddisfa le tue esigenze.

La versione gratuita ti consente di personalizzare la pagina del prodotto WooCommerce con 18 campi prodotto personalizzati . Quindi, tutte le opzioni, ad esempio l'aggiornamento del processore, saranno disponibili nella versione gratuita. Una volta deciso che è ciò di cui hai bisogno, puoi aggiornare facilmente il plug-in:


‼️ Una volta installato il plugin, configuriamolo. Scegli Prodotti → Campi prodotto nel menu di WordPress (1). Quindi è necessario aggiungere un nuovo gruppo di campi (2):

Componenti aggiuntivi del prodotto WooCommerce: aggiunta di un nuovo gruppo di campi
Aggiungi un nuovo gruppo di campi in Campi prodotto flessibili

Personalizza i prodotti WooCommerce con campi personalizzati

Infine, siamo arrivati ​​alla sezione di configurazione dei campi. Voglio che questo articolo sia facile per te, quindi ti guiderò passo dopo passo. Presto sarai in grado di creare da solo una procedura guidata per MacBook nel tuo negozio .

La configurazione generale del nostro costruttore di computer WooCommerce è la seguente:

Personalizza la pagina del prodotto WooCommerce con Campi prodotto flessibili
Ulteriori componenti aggiuntivi del prodotto aggiunti con i campi del prodotto flessibile

Potrebbe sembrarti travolgente, ma non preoccuparti. Come ho notato, ti guiderò passo dopo passo attraverso la configurazione per personalizzare la pagina del prodotto WooCommerce con nuovi campi . Cominciamo allora!

In questo tutorial utilizzeremo le funzionalità Pricing e Conditional logic , disponibili in Flexible Product Fields PRO .

Impostazioni principali

Personalizza la pagina del singolo prodotto WooCommerce
Impostazioni principali - Personalizzazione della pagina del prodotto WooCommerce

Nelle impostazioni della sezione , puoi scegliere dove visualizzare i campi nella pagina del prodotto.

Quindi puoi assegnare questo gruppo a :

  • uno o più prodotti selezionati,
  • tutti i prodotti nel tuo negozio,
  • o categorie selezionate.

A questo punto assegno i campi a un prodotto (MacBook Pro). È l'unica opzione disponibile nella versione gratuita . Puoi utilizzare l'assegnazione a una categoria, ad esempio computer, nel tuo negozio. In questo caso, avrai bisogno della versione PRO.

Infine, guarda l'opzione dell'ordine . Se aggiungi più di 1 gruppo di campi a un prodotto, puoi impostarne l'ordine di visualizzazione.

Aggiungi campi

Il prossimo passo è aggiungere nuovi campi di prodotto al nostro generatore di computer WooCommerce. Probabilmente hai già notato l'elenco dei componenti aggiuntivi. Dovrai aggiungerli uno per uno.

Ulteriori componenti aggiuntivi disponibili in Flexible Product Fields PRO
Campi che useremo in questa guida definitiva ai componenti aggiuntivi del prodotto WooCommerce

Dimensioni (campo radio)

Per poter offrire variazioni dimensionali è necessario configurare il campo radio.

Dimensione extra campo radio addon
Campo taglia nella pagina del prodotto

Per prima cosa, inserisci il nome del campo in Label . Quindi seleziona Radio dal Tipo di campo . Obbligatorio è l'opzione successiva. Dovresti usarlo o un cliente sarà in grado di effettuare l'ordine senza selezionare una taglia. Come faresti a sapere di che taglia hanno bisogno allora?

Personalizza la pagina del prodotto WooCommerce - campo radio
Impostazioni del campo radio: ecco come aggiungere ulteriori componenti aggiuntivi alla pagina del prodotto

Prima o poi potresti voler modellare i campi a modo tuo. C'è l'opzione Classe CSS da usare in questa situazione.

Nella sezione Opzioni , puoi finalmente configurare le taglie che vuoi offrire nel tuo negozio. In questo caso, utilizziamo dimensioni da 13 pollici e 15 pollici. Il secondo costa $ 600 in più. Ecco come lo imposti: vai alla scheda Prezzi e aggiungi prezzi extra:

Aggiunta di prezzi extra (Flexible Product Fields PRO)
Aggiungi prezzi extra nella scheda Prezzi

Non usiamo la logica condizionale , l'ultima opzione. Tuttavia, lo useremo in seguito nel nostro generatore di computer WooCommerce.

In questo tutorial utilizzeremo le funzionalità Pricing e Conditional logic , disponibili in Flexible Product Fields PRO .

Processore (campo radio)

Pagina del prodotto addon extra radio
Campo Processore nella pagina del prodotto

Il Processore è anche un campo radio, puoi configurarlo allo stesso modo del campo Dimensione . Lo stesso vale per l'aggiunta di un prezzo aggiuntivo alle opzioni selezionate.

WooCommerce personalizza la pagina del prodotto con un campo radio con prezzi extra
Aggiunta di prezzi extra a un campo radio aggiunto con Flexible Product Fields PRO

Mentre in Size sia il valore che l'etichetta erano uguali, qui usiamo valori ed etichette diversi. Il valore è visibile solo per l'amministratore del negozio e memorizzato nel database. L' etichetta è visibile ai clienti sulla pagina del prodotto.

Memoria (campo radio)

I campi radio arricchiranno la tua pagina prodotto
Campo di memoria sulla pagina del prodotto

Questa volta sai tutto. Devi solo fornire opzioni di memoria al nostro costruttore di computer WooCommerce. Procedi esattamente come nei passaggi precedenti.

Stoccaggio (campo radio)

Personalizza la pagina del prodotto WooCommerce con i campi radio
Campo di archiviazione nella pagina del prodotto

Sai già come configurare questo campo radio L'unica differenza è che dovrai aggiungere 2 prezzi aggiuntivi. Aspetto:

Ecco come personalizzare la pagina del prodotto WooCommerce con Flexible Product Fields PRO
Aggiungi 2 opzioni di prezzo aggiuntive

Lingua della tastiera (seleziona il campo)

Seleziona componente aggiuntivo aggiuntivo
Campo della lingua della tastiera nella pagina del prodotto

Questa volta configurerai un nuovo tipo di campo: select field .

La configurazione è molto familiare alla precedente. La differenza principale è la selezione nel tipo di campo .

Personalizza la pagina del prodotto WooCommerce con un campo a discesa selezionato
Campo della lingua della tastiera della procedura guidata del computer

Data di consegna (campo data)

Campo della data di consegna nella pagina del prodotto

Qui puoi vedere un altro tipo di campo. Questo è il campo della data. Le impostazioni generali sono abbastanza simili alle precedenti ma ci sono alcune funzionalità aggiuntive nella scheda Avanzate :

Come personalizzare la pagina del prodotto in WooCommerce con un campo data
Impostazioni avanzate nel campo della data

️ Alcune delle caratteristiche sono:

  • formato data
  • giorni prima
  • giorni dopo

Con giorni prima e giorni dopo puoi impostare un intervallo di tempo di date disponibili per la selezione da parte di un cliente. Può essere utile quando offri l'incisione del prodotto poiché hai bisogno di tempo per realizzarlo.

Mostra opzioni regalo (campo casella di controllo)

In questo tutorial utilizzeremo le funzionalità Pricing e Conditional logic , disponibili in Flexible Product Fields PRO .

Questo campo di prodotti sarà molto importante nella nostra configurazione. Di default ha questo aspetto:

Personalizza la pagina del singolo prodotto woocommerce aggiungendo un campo checkbox
Mostra il campo delle opzioni regalo nella pagina del prodotto

Quando un cliente seleziona questo campo, vengono visualizzati nuovi campi.

Logica condizionale aggiunta con Flexible Product Fields (PRO)
Mostra il campo delle opzioni regalo nella pagina del prodotto (contrassegnato)

Questa è la logica condizionale . Tuttavia, non si imposta l'opzione Logica condizionale per questo campo. Aggiungi il campo nel modo normale ea questo punto devi preoccuparti della scheda Logica condizionale .

Impostazioni generali del campo della casella di controllo
Mostra il campo delle opzioni regalo della procedura guidata del computer
La logica condizionale è una caratteristica cruciale di Flexible Product Fields PRO . Può essere molto utile quando personalizzi la pagina del prodotto WooCommerce come questo costruttore di computer . In questo caso, dovrai impostare questa opzione in altri campi.

Incisione (campo di testo)

Questo è un campo semplice in cui un cliente può fornire del testo, ad esempio l'incisione.

Incisione aggiuntiva della pagina del prodotto WooCommerce
Campo dell'incisione nella pagina del prodotto

Questo campo dovrebbe essere visualizzato solo quando il cliente contrassegna la casella di controllo Mostra opzioni regalo .

In questa situazione, è necessario configurare la logica condizionale per questo campo.

Inizia con la personalizzazione aggiungendo un prezzo extra nella scheda Prezzi:

E ora andiamo alla scheda Logica condizionale dove aggiungeremo anche questa funzione extra:

WooCommerce personalizza il prodotto
Impostazioni della logica condizionale

Come puoi vedere sopra, ho contrassegnato l'opzione Logica condizionale . Nelle Regole , ho impostato che questo campo venga visualizzato quando il campo Mostra opzioni regalo è uguale a selezionato .

Forse in questo momento troverai interessante la nostra guida alle opzioni del prodotto condizionale WooCommerce .

Confezione regalo (campo casella di controllo)

Personalizza la pagina del singolo prodotto WooCommerce
Campo Confezione regalo nella pagina del prodotto

Devi impostare la logica condizionale per questo campo come sopra. Puoi anche aggiungere prezzi extra se vuoi che il cliente paghi soldi extra per la confezione regalo. Sai già come aggiungere prezzi extra

Come personalizzare la pagina del prodotto WooCommerce con componenti aggiuntivi aggiuntivi
Confezione regalo: impostazione della logica condizionale con Flexible Product Fields PRO

Messaggio regalo (campo di testo)

Componente aggiuntivo messaggio regalo
Campo del messaggio regalo nella pagina del prodotto

Infine, l'ultimo. È necessario impostare anche la logica condizionale qui.

Puoi anche impostare un limite di caratteri nella scheda Avanzate .
Aggiungi la logica condizionale
Campo del messaggio regalo della procedura guidata del computer
Puoi creare il tuo negozio demo con il plugin e il prodotto preconfigurato per te. Puoi anche provare come aggiungere prodotti WooCommerce e personalizzare la pagina del prodotto con il plugin!

Ancora una volta, diamo un'occhiata all'effetto che abbiamo ottenuto:

WooCommerce come aggiungere prodotti
Ulteriori componenti aggiuntivi aggiunti con Flexible Product Fields PRO

Campi di prodotti flessibili PRO WooCommerce $ 59

Crea una procedura guidata del prodotto per vendere incisioni, confezioni regalo, messaggi regalo, biglietti da visita, francobolli e facoltativamente addebitarli (fissi o percentuali).

Aggiungi al carrello o Visualizza dettagli
Oltre 10.000 installazioni attive
Ultimo aggiornamento: 2023-03-15
Funziona con WooCommerce 7.1 - 7.5.x

Riepilogo e altro sul plug-in

In questo articolo, ho spiegato come aggiungere prodotti WooCommerce e poi personalizzarli con un plugin gratuito!

Hai anche imparato come creare il tuo computer builder grazie alla lettura di questa guida per WooCommerce Computer Builder . Spero di esserti stato d'aiuto e che ora tu sia pronto a vendere prodotti personalizzabili nel tuo negozio WooCommerce. Sei pronto per creare un mago del computer nel tuo negozio?

Dopotutto, potresti avere alcune domande. Sentiti libero di chiedere! Si prega di utilizzare la sezione commenti qui sotto.

Infine, non ho trattato tutte le funzionalità del plugin in questo articolo. Penso che la nostra guida alle opzioni di prodotto extra di WooCommerce possa essere interessante per te. È un altro grande articolo. Leggilo nel caso in cui desideri saperne di più casi d'uso per questo plugin.