Menu Close

Creare un E-Commerce con WordPress e WooCommerce

By marchettidesign.com
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:

zoom

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 paginapage.php e rinominiamola in woocommerce.php. Apriamo la pagina con un editor di testo e sostituiamo il loop con:

1 <?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.

zoom

Settaggi

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

zoom

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.

zoom

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.

zoom

Struttura

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

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).

zoom

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.

Pubblichiamo il prodotto cliccando Pubblica.

zoom

Funzionamento

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

zoom

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.

zoom

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

zoom

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

zoom

Una volta spedito il prodotto, l’amministratore dovrà aggiornare lo stato dell’ordine dal panelloWoocommerce -> 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:

zoom

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!

Posted in News, Web Development

1 Comment

Leave a Reply

Your e-mail address will not be published. Required fields are marked *