Creare un E-Commerce con WordPress e WooCommerce

By Andrea Marchetti
@marchetti_design

Creare un E-Commerce con WordPress e WooCommerce

WordPress è un CMS dalle grandi potenzialità e negli anni si è sviluppato molto arrivando a poter realizzare le più diverse tipologie di siti. L’unica “pecca” a mio avviso era la mancanza di un plug-in per E-Commerce di alto livello: c’erano vari plug-in, come WP e-Commerce e altri, ma tutti erano difficili da utilizzare e non ben integrati con WordPress.

Dopo anni di attesa il plug-in è arrivato e si chiama WooCommerce.

WooCommerce 2.0 from WooThemes on Vimeo.

WooCommerce è un plug-in veramente ben fatto, ed è realizzato da WooThemes. Questo gruppo di sviluppo ha venduto migliaia di temi nel loro marketplace tramite il sistema che poi hanno racchiuso nel plug-in WooCommerce. Il plug-in può vendere sia prodotti reali (quindi con gestione delle spedizioni e dell’invetario), sia prodotti digitali come immagini o audio (quindi con gestione della distribuzione via mail dei file audio e immagini).

Installazione del plug-in

Come prima cosa scarichiamo il plugin dalla directory di wordpress:

http://wordpress.org/extend/plugins/woocommerce/

Lo carichiamo nella cartella plugin di wordpress e lo attiviamo. Ci apparirà il messaggio di benvenuto:

Cliccando su Install WooCommerce Pages verranno create le pagine necessarie al corretto funzionamento dell’ecommerce:

Pagina Carrello

Pagine Cassa (Checkout, Order recived)

Pagine Mio account (Cambia Password, Edit my adress, Logout,Lost psw, Vedi ordine)

Ora dobbiamo creare il template dove il plugin mostrerà i prodotti dello Shop. Duplichiamo la pagina page.php e rinominiamola in woocommerce.php. Apriamo la pagina con un editor di testo e sostituiamo il loop con:

<?php woocommerce_content(); ?>

Con questa soluzione avremo la pagina shop, le categorie prodotti e il singolo prodotto visualizzati con un unico template woocommerce.php. Ora clicchiamo il pulsante per nascondere il messaggio che non stiamo utilizzando un template del plugin.

Se adesso proviamo a visualizzare la pagina shop ci apparirà il messaggio che non ci sono prodotti.

Settaggi

Clicchiamo ora nel menu del backend Woocommerce –> Impostazioni. Nel pannello General impostiamo il paese (Italia) e la moneta (Euro) poi in fondo alla pagina clicchiamo salva le modifiche.

Successivamente nella sezione Payment Gateways trasciniamo (tramite drag ‘n’ drop) il Gateway paypal in alto impostandolo come sistema di pagamento di default.

Successivamente nella sezione Payment Gateways clicchiamo il pulsante paypal. In questa sezione dobbiamo inserire la mail del conto paypal dove arriveranno i soldi dei prodotti venduti.

Inseriamo la mail nel campo Email paypal e Reciver paypal. Scorriamo fino in fondo e deselezioniamo la voce Sandbox PayPal che serve per fare dei test. Noi il primo test lo faremo con una transazione vera di un prodotto dal costo di un euro.

Struttura

L’Ecommerce è strutturato in due macrosezioni presenti nel menu di wordpress Woocommerce e Prodotti:

WooCommerce

Ordini – Elenco dei prodotti venduti e stato dell’ordine (in lavorazione, in sospeso[…]) con le informazioni di spedizione.
Satatistiche – Prodotti piu venduti, grafici […].
Buoni sconto – Gestione degli sconti con sistema coupon.
Impostazioni – Getione dei sistemi di pagamento abilitati e impostazioni generali.
System status – Stato del sistema dati tecnici.

Prodotti

Prodotti – Elenco dei prodotti.
Aggiungi Prodotto – Pagina di inserimento prodotto.
Categorie – Categorie dei prodotti.
Tag – Tag dei prodotti
Classi di spedizione – Pagina per crere le classi di spedizione per accomunare prodotti simili (per es.prodotti di stessa dimensione avranno stessa classe di spedizione)
Attributes – Pagina per creare attributi extra del prodotto come taglia o colore.

Inserimento prodotti

Ora che abbiamo impostato il nostro ecommerce proviamo a inserire un prodotto. Clicchiamo nel menu Prodotti -> Aggiungi prodotto. Inseriamo il titolo, la descrizione del prodotto e l’immagine in evidenza (Cliccando Add product gallery images possiamo aggiungere ulteriori immagini del prodotto).

Ora bisogna impostare il tipo di prodotto: se il nostro prodotto non ha caratteristiche particolri (come la possibilità di scelgliere la taglia o il colore) nel pannello Products data lasciamo impostato Simple products.

Il nostro prodotto però è un paio di scarpe e si avrà quindi la possibilita di scegliere tra il numero tra 42,43 e 44. Salviamo come bozza il prodotto e clicchiamo nel menu Prodotti -> Attributes qui aggiungiamo l’attributo Numero.

Una volta creato clicchiamo su di esso e aggiungiamo i vari numeri 42,43,44.

Ritorniamo nella pagina del prodotto e nella tendina Products data scegliamo Variable products. Sotto clicchiamo la voce Attributes ci apparirà una tendina Custom products attributes, selezioniamo l’attributo Numero creato in precedenza e clicchiamo add, successivamente spuntiamo Used for variantion e clicchiamo select all.

Se non vogliamo aggiungere tutte i numeri perchè le scarpe potrebbero non averli tutti, cancelliamo quelli di troppo tramite la x alla destra del numero. Al contrario se vogliamo aggiungere un numero clicchiamo su add. Questo sistema garantisce una base molto flessibile per gli attributi dei nostri prodotti.

Salviamo la bozza del prodotto e clicchiamo la voce Variations nel pannello Products data, clicchiamo Aggiungi variazione, nel pannello che si apre inseriamo il prezzo (qui volendo possiamo impostare anche la quantità dei prodotti). Sotto il pannello alla voce Default selections selezioniamo il numero di default delle nostre scarpe.

Pubblichiamo il prodotto cliccando Pubblica.

Funzionamento

Ora vediamo il funzionamento dell’ecommerce dal punto di vista dell’utente. Tramite il pulsante Acquista il prodotto viene aggiunto al carrello.

N.B. Nel esempio a scopo di test ho acquistato due paia di scarpe cliccando su + nel box quantità

Qui cliccando Procedi all’acquisto l’utente viene indirizzato alla sezione Cassa.

In questa sezione l’utente compila un modulo con nome, cognome, indirizzo spedizione […]. Sotto al modulo da compilare vi sono le varie modalità di pagamento accettate: Bonifico, Assegno o Paypal […]. Noi utilizzeremo Paypal che consente di pagare con carta di credito anche se non si ha un conto Paypal.

I soldi arrivano direttamente sul conto PayPal dell’amministratore, PayPal trattiene le sue commissioni.

Quando viene venduto un prodotto l’E-Commerce manda una email all’amministratore con tutti i dettagli dell’ordine.

Una volta spedito il prodotto, l’amministratore dovrà aggiornare lo stato dell’ordine dal panello Woocommerce -> Ordini da “in lavorazione” a “completato”. Nel pannello Ordini rimarrà lo storico delle vendite.

Il cliente dopo aver pagato su paypal potra cliccare torna al sito per effettuare nuovi acquisti. Apparirà il seguente messaggio:

Con questo articolo abbiamo visto come wordpress possa diventare un vero e propio sistema di ecommerce di alto livello, se avete opinioni o domande lasciatele nei commenti.

Stay Tuned!

,

Commenti

  1. Avatar Antonio ha detto:

    Ciao, una cortesia… ho installato il thema ” Mystile “, free e licenziato.. mi risulta tutto ok ma continuo a vedere la pagina del sito altervista e non quello del Thema scaricato, dove sbaglio ? ( uso altervista come piattaforma per esercitarmi ), ti ringrazio .

  2. Avatar Ricky ha detto:

    Ciao, mi serve un aiutino.
    Siccome non ho possibilità di gestire il magazzino, dovrei gestire gli ordini non permettendo subito il pagamento , ma solo dopo aver verificato che ho i prodotti per evitare eventualirimborsi (anche se la possibilità è remota).

    Mi sapresti aiutare ?

    • afmarchetti ha detto:

      Ciao Ricky, questo è un problema comune, il modo più semplice per arginare (ma non risolvere) il problema è inserire la metà dei prodotti disponibili come quantita disponibile online.
      Faccio un esempio se hai 10 magliette in negozio, ne metti 5 disponibili online.
      Quando le finisci (o in negozio/ o online) fai un check e aggiorni la quantità.

  3. Avatar alessandro ha detto:

    Ciao. Effettivamente woocommerce è un gran bel plugin per fare ecommerce. Tutti si sono buttati su magento e allo stesso modo molti miei clienti lo preferiscono per una questione più di moda. Sicuramente woocommerce di wordpress è molto più limitato ma per l’80% dei clienti potrebbe andare più che bene, senza contare che ha una parte seo che è straordinaria!

  4. Avatar antonello ha detto:

    Bene, tutto ok fino a quando inserisco il prodotto. Infatti non trovo il modo di inserire il prezzo!
    Sarà un problema della versione free? Devo acquistare quella a pagamento per poterlo usare?
    Grazie
    Antonello

  5. Avatar Angelo ha detto:

    Ciao,
    tra le mie ricerche, è capitata questa guida molto interessante.
    Però ho da fare un altra domanda e spero che riesci ad aiutarmi. Quando si mette in saldo un prodotto, viene visualizzato nellimmagine prodotto un tasto con scritto in offerte, che nella vetrina prodotti cade subito l’occhio, si può fare la stessa cosa con scritto “in partenza”? (non sono prodotti veri e propri ma corsi)
    grazie mille e ancora complimenti

  6. Avatar Daniele ha detto:

    Ciao Andrea, complimenti per l’articolo.
    Avrei bisogno di un plugin che mi permetta di aggiornare il prezzo di listino degli articoli.
    Esempio: ho bisogno di aumentare del 10% tutti i prezzi di una determinata marca.

    Esiste qualcosa a riguardo?
    Grazie
    Daniele

  7. Avatar Emiliano ha detto:

    buonasera,
    non rieco a inserire manualmente il numero della fattura, mi puoi aiutare?
    Quando genero la fattura c’è il numero dell’ordine e non quello della fattura messo da me!
    grazie.

  8. Avatar Andrea ha detto:

    Complimenti per la guida!
    Una domanda, fiscalmente come funziona? All’atto della vendita genera una fattura/ricevuta? Oppure le tasse si pagano sul conto paypal?

    In pratica cosa si deve fare per essere in regola fiscalmente?

    Grazie!!!
    Andrea

    • afmarchetti ha detto:

      Ciao Andrea, non sono un esperto per queste cose sempre meglio sentire il propio commercialista di fiducia.
      Detto questo dovrebbe essere che se vendi prodotti fisici e hai un registratore di cassa puoi battere uno scontrino e allegarlo al pacco della vendita (verifica con un esperto in materia fiscale prima di implementare questa soluzione).

  9. Avatar stefano ha detto:

    Ciao, sto realizzando un sito con WP 4.4.1 in locale (uso WAMP) ed ho installato l’ultima versione di woocommerce 2.5.0 ed ho il tema AVADA.
    Nonostante abbia messo tutte le impostazioni in Italiano (sia in WP che in WOOCommerce), ho aggiunto in wp-config.php la stringa define(‘WPLANG’, ‘it_IT’); ci sono ancora alcune parole che non vengono tradotte dall’inglese (sort by default/name/price, details, You Have 4 Items In Your Cart, etc) mentre altre parti sono perfettamente tradotte. Come posso fare? Grazie per l’aiuto.

  10. Avatar ory ha detto:

    Ciao,
    complimenti per il sito, ben fatto. Ho una domanda su woocommerce. Vorrei mettere in vendita delle foto, ma woocommerce prevede la spedizione di un file o cosa? Ho usato un altro plug in ma mi sembra molto basico (sell photo). Se il cliente finale paga, come minimo mi aspetto di spedirgli qualcosa via mail o che possa in qualche modo avere qualcosa in più. grazie, ory

  11. Avatar Gianni ha detto:

    Salve, spero che sia ancora attivo questo forum, avendo una profumeria, ho inserito degli articoli che nelle variazioni hanno 3 o 4 misure diverse ( es 30ml, 50ml, 100ml, 200ml ecc.) che il cliente poi sceglie…. solo che al momento dell’ordine a me non arriva ne le quantità scelte ne la variazione per cui non saprei cosa inviarci. Ci deve essere qualche opzione da attivare che non riesco a trovare puoi darmi qualche suggerimento??
    GRAZIE

  12. Avatar Valentina ha detto:

    Ciao,
    io avrei una domanda “opposta”. Ho gia da qualche anno un sito di e-commerce con Woo Commerce di WordPress e sono abbastanza soddisfatta. Ora vorrei aggiungere a questo sito anche un BLOG, una sezione dove scrivere articoli.
    Al di la poi di inserire un collegamento nel menu o in homepage…come lo creo? Semplicemente una pagina nuova o devo attivare un plug in, un widget o che so io?
    Grazie mille
    Valentina

  13. Avatar Ughetta ha detto:

    ciao Stefano, che tu sappia esiste la possibilità di stabilire un range di prezzo (minimo e massimo) da applicare solo per un singolo prodotto?
    non trovo estensioni ma magari mi puoi dare una salvata.
    io ce provo 🙂
    Grazie

  14. Avatar maria ha detto:

    Ciao sto costruendo il mio sito , è online, ma la pagina dello shop non è attiva…cosa sbaglio?

  15. Avatar alessia ha detto:

    ciao, avevo installato woocommerce e l’ho usato per un po si mesi, dopo l’ho disinstallato e ho cancellato anche la pagina per acquistare online che avevo messo nella home del sito. adesso che l’ho scaricato di nuovo, vedo sempre i prodotti vecchi ma non riesco a rimettere la pagina per gl acquisti nella home, come devo fare? grazie

    • afmarchetti ha detto:

      Ciao Alessia,
      devi impostare la pagina dello Shop come pagina iniziale di wordpress in Impostazioni –> Lettura 😉

Rispondi a Andrea Marchetti Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Share