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 Rossella ha detto:

    Ciao,
    l’articolo è redatto in maniera molto chiara e comprensibile. Premetto che non sono un’informatica però ho provato a sviluppare un e-commerce con wordpress e woocommerce, purtroppo non riesco a risolvere un problema. Al momento della conclusione degli acquisti non mi arriva per mail il modulo dell’ordine compilato.
    Da cosa dipende? cosa può mancare nella configurazione di woocomerce visto che credo di aver attivato tutte le funzioni?
    Grazie per le risposte. Rossella

  2. Avatar Giovanni ha detto:

    Ciao Andrea,
    sto creando un sito di e-commerce con WooCommerce.
    Sono a buon punto della realizzazione ma ho un problema.
    La mia piattaforma si propone di gestire diverse attività di Food TakeAway,le quali hanno tutte una diversa tipologia di prodotto(rosticcerie,pizzerie,pasticcerie…ecc).
    In pratica il mio è un sito di e-commerce che propone il servizio di scelta del prodotto online,quindi come canale di vendita,ma che non vende merce propria.
    Tutte le attività che ho caricato sul sito offrono il servizio di consegna a domicilio…ma il problema è che non tutte consegnano in tutta la città,bensì solo in determinate zone!
    Il mio problema principale è questo: non riesco a fare in modo che il cliente che vuole ordinare,inserendo l’indirizzo di consegna dove vuole ricevere il prodotto,riesca a trovare il locale che consegna nella sua zona.
    In pratica avrei bisogno di un modulo il quale,ricevendo come input un indirizzo di consegna,vada ad interrogare una lista o meglio ancora una mappa,e mi restituisca come risultato la lista di attività che sono disposte a consegnare il prodotto in quell’area.
    Sapresti indicarmi se esiste già un plugin che opera in questo modo,o come poter fare in modo da trovare qualcosa che possa essere quantomeno simile e modificabile?
    Ti ringrazio,attendo tua risposta 🙂

  3. Avatar Michele ha detto:

    Ciao Andrea,
    io ho installato il plugin “WooCommerce – excelling eCommerce”, tutto è andato bene, ma ti chiedo una gentilezza, io devo usarlo sul sito della mia associazione di volontariato, ed in pratica devo vendere i biglietti di una lotteria, e sono divisi in serie e numeri del tipo A0000001 in ordine crescente, quale plug posso usare per questo tipo di vendita e che mi conteggi un range di biglietti in automatico senza che sto li ad inserirli manualmente alla fine di ogni blocchetto, spero di essere stato chiaro.
    Grazie anticipatamente
    Michele.

  4. Avatar Niccolo' ha detto:

    ciao Andrea,
    complimenti per il sito e per le tue guide! vorrei chiederti se e’ possibile utilizzare questo plugin con la funzione multisite di wordpress per creare degli ecommerce a se stanti ma con stesso database per avere un inventario aggiornato. I siti devono avere domini diversi e non collegati, ma alcuni prodotti uguali in modo da aggiornare costantemente il database con l’inventario. grazie in anticipo.
    Niccolo’

    • Andrea Marchetti ha detto:

      Caio Niccolò, in teoria wooocommerce dovrebbe funzionare come qualsiasi altro plug-in installato su un multisito, dovrebbe creare una copia delle tabelle nel database (un doppione del sito) l’unica cosa condivisa sarebbero i temi..

  5. Avatar Giuseppe ha detto:

    Ciao a tutti. Grazie per la guida, ora molte cose mi sono più chiare.
    Ora ho solo un problema. Il mio cliente spedisce sia in Italia che in Europa e applica la seguente struttura:

    ITALIA
    – costo 5,00€
    – costo per ogni articolo aggiuntivo 1,00€
    – massimo spese di spedizione 10,00€

    EUROPA
    – costo 8,00€
    – costo per ogni articolo aggiuntivo 2,00€
    – massimo spese di spedizione 30,00€

    In WooCommerce non ho trovato il modo di specificare i costi aggiuntivi a prodotto (a partire dal secondo) e nemmeno un tetto massimo per le spese di spedizione.

    Qualcuno mi può essere di aiuto?

  6. Avatar piero ha detto:

    complimenti per l’articolo. Chiaro e preciso. Passo immediatamente all’azione . Grazie

  7. Avatar Massimo ha detto:

    Prima di tutto complimenti!!
    conoscete un plug in che si possa collegare al corriere SDA per la stampa automatica delle Lettere di Vettura con i dati inseriti dal cliente al momento dell’ordine? (SDA ha un suo format con codice a barre)
    2) nel caso in cui il cliente inserisce la partita iva, esiste un plug in che mi tiene una numerazione a parte di fattura in ordine progressivo differente da quella degli ordini standard?

  8. Avatar MIchele ha detto:

    Davvero un’ottima guida, probabilmente la più utile che ho trovato fin ora. Posso aggiungere poco a parte l’invito a ottimizzare sempre al massimo il codice per avere la migliore resa possibile in termini di apertura di pagina e dall’altro lato, scegliere un server solido che garantisca (soprattutto a un e-commerce) buone prestazioni per sicurezza e affidabilità.

  9. Avatar Emanuele ha detto:

    Ciao,
    Avrei bisogno di sapere se è possibile non utilizzare alcun metodo di pagamento od utilizzarne di posticipati tipo ricevuta bancaria ma potendo comunque completare l’ordine con l’invio dell’email al cliente ed al venditore del pdf riepilogativo dell’ordine stesso.

    Ciao e grazie per il tuo eventuale aiuto…

  10. Avatar tonino sulis ha detto:

    Buongiorno , ciao a tutti ho un problema che forse è capitato ada alcuni di voi : dopo ala registrazione ed aver messo il prodotto nel carrello , nonostante non abbia completato il pagamento mi viene inviata la fattura .
    C’è il modo di ovviare a questo? grazie buon lavoro!

  11. Avatar Pino Munnia ha detto:

    Salve e grazie per il lavoro che svolgi,
    ho appena installato il plugin GestPay STARTER. Nel modulo di configurazione mi viene richiesto: «Perfavore, inserisci il tuo shopLogin fornito da GestPay»
    Dove lo posso trovare?
    Senza questo ovvio parametro mi da errore 1008 :-((

  12. Avatar damiano ha detto:

    buongiorno, ho installato il plugin ma ho un piccolo problema, spero tu possa aiutarmi a risolverlo. Dunque, sto aggiungendo degli articoli di prova (profumi), il punto è che una volta fatto “aggiungi prodotto” questo va direttamente nella sezione “shop”, creata automaticamente. Invece io vorrei suddividere i prodotti in sottosezioni che ho creato (profumi uomo e profumi donna). In sostanza, aggiungendo un prodotto, mi viene messo tutto in “shop”. Come posso risolvere? grazie mille

    • afmarchetti ha detto:

      Ciao Damiano, crea le sottosezioni utilizzando la tassonomia categoria prodotto, poi richiama la categoria prodotto che ti serve nel codice utilizzando lo shorcode di woocomerce per esempio: [product_category category=”accessories”]

  13. Avatar Maurizio ha detto:

    Ciao
    è possibile impostare le spese di spedizione gratis per un minimo d’ordine di 150€ ma con peso inferiore a 25 kg? grazie mille!!!

  14. Avatar roberto ha detto:

    Ciao.
    nella parte bassa della pagina iniziale e poi anche nelle pagine dei prodotti mi appare un modulo di ricerca e un link a checkout, i miei ordini etc… E’ possibile nascondere queste voci ?

    • afmarchetti ha detto:

      Caio Roberto, utlizza firebug ispeziona il codice trova la classe css dell’elemento che vuoi nascondere e poi applica un display:none nello stile 😉

  15. Avatar Lisa ha detto:

    Ciao,
    grazie per l’articolo, non sono molto pratica di Word Press e ho “ereditato” un sito WP con commercio elettronico che però non usa WooCommerce. Avrei necessità di gestire i prezzi e sconti per categorie e la gestione che c’è adesso non lo permette. Ho visto che c’è WooCommercePriceDiscount che farebbe al caso mio ma dovrei prima installare WooCommerce. Il mio dubbio è questo: installando WooCommerce, tutti gli articoli e ordini che ho già nel database andrebbero persi? Dovrei ricaricare tutto?
    Grazie

Lascia un commento

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

Share