(39) 0544/200334 Mobile (39) 331.296.2000 info@iowebart.it

Woocommerce e DIVI: personalizzare una scheda prodotto

by | 29/03/20 | DIVI e Woocommerce

Ciao a tutti
In questo post vi spiego come personalizzare una scheda prodotto creata con Woocommerce utilizzando DIVI.

N.B.: Il post è dedicato a tutti coloro che, conoscendo già i due prodotti, hanno la necessità di approfondire l’argomento personalizzazione. Non mi soffermerò quindi sulla loro installazione e configurazione.

MA ANDIAMO PER ORDINE

Per chi non lo sa, DIVI integra perfettamente WooCommerce che è uno dei plugin WordPress più conosciuti per la realizzazione di siti di e-commerce.
Woocommerce è una vera e propria piattaforma che permette di creare pagine per i prodotti, carrello e pagamento, pagamenti sicuri con carta di credito e metodi alternativi, opzioni di spedizione configurabili incluse tariffe fisse e addirittura la stampa etichette e si integra molto bene con Google AnalyticsMailChimp e Facebook, ma queste sono solo alcune delle principali caratteristiche di questo famoso plugin. Per maggiori informazioni vi consiglio di dare un’occhiata a questo link. DIVI della Elegant Themes  è conosciuto come une dei migliori page builder in circolazione. E’ più di un semplice tema per WordPress: è una piattaforma di costruzione di siti web che sostituisce l’editor di post standard con un editor visivo incredibilmente friendly. DIVI possiede una tonnellata di pacchetti e pagine pronte all’uso suddivisi per tipologia “merceologica” che permettono di personalizzare il proprio sito in modo veloce e semplice. E se volessimo passare ad un livello superiore con l’inserimento di codice ad hoc DIVI ci permette di farlo.
Detto questo possiamo passare allo step successivo.

DA DOVE COMINCIAMO?

1° PASSAGGIO: INSERIMENTO DI UN NUOVO PRODOTTO

Diamo per scontato che abbiate quindi già pronta un’installazione di WordPress sul vostro server sulla quale avete già installato Woocommerce. In caso non l’avete ancora fatto andate sulla dashboard di WP>PLUGIN>AGGIUNGI NUOVO digitare woocommerce e installare il plugin configurandolo poi all’uso. Passiamo a DIVI: bisognerà essere in possesso di una licenza per utilizzare DIVI. Il prodotto viene rilasciato, previo pagamento, con la formula di sottoscrizione annuale o a vita (lifetime). I costi sono a mio avviso assolutamente onesti, considerate la potenzialità dello strumento e soprattutto l’eccezionale servizio di assistenza che vi aiuta a risolvere eventuali problemi attraverso una chat in tempo reale. Vi lascio il link per accedere al sito della Elegant Themes.

ORA AVETE TUTTI GLI STRUMENTI…

Andiamo ad inserire un prodotto all’interno del nostro sito di e-commerce utilizzando Woocommerce. Dalla dashboard di WP selezioniamo Woocommerce>Prodotti>Aggiungi Nuovo

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Si aprirà una finestra come quella che vedete in basso Selezioniamo nuovamente  Aggiungi nuovo

Andiamo a personalizzare la scheda prodotto nel modo indicato dall’immagine

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Questa che vedete è una personalizzazione minima del prodotto, poiché è possibile aggiungere tante altre definizioni riguardanti per esempio: la disponibilità del prodotto, i dati riguardanti le modalità di spedizione, gli articoli collegati al prodotto (ad esempio gli accessori), gli attributi del prodotto (colore, misura ecc.) e funzioni avanzate dove per esempio inserire comunicazioni facoltative al cliente dopo l’acquisto del prodotto. Abbiamo anche la possibilità di mettere in evidenza specifici prodotti per poterli visualizzare magari in prima pagina (prodotti specifici o prodotti in offerta) Per fare questo basta solo andare su Woocommerce>Prodotto>Tutti i prodotti> e selezionare sotto il prodotto interessato la voce >Modifica rapida.
Selezioniamo la voce > in Evidenza e vedremo che la stellina si riempirà. Ciò vuol dire che adesso il prodotto è in evidenza

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Dovremo poi inserire le immagini del prodotto in questione, quindi andremo a selezionare la voce > Immagine del prodotto e qui inseriremo l’immagine in evidenza.
Inseriremo poi ulteriori foto nella > Galleria prodotto

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Non dimentichiamo inoltre di assegnare una categoria specifica al prodotto sennò non lo vedremo visualizzato.
In caso non avessimo creato una categoria potremmo farlo cliccando su > Aggiungi nuova categoria nella colonna a destra della dashboard della scheda prodotto

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Ecco come sarà il risultato

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Dopo aver seguito le istruzioni su come inserire un prodotto su Woocommerce possiamo passare alla fase successiva.

COME PERSONALIZZARE LA SCHEDA PRODOTTO UTILIZZANDO DIVI THEME BUILDER E PAGE BUILDER

Dopo aver creato la scheda prodotto potremo personalizzarlo ulteriormente utilizzando il page builder DIVI ed anche il suo Themes builder.
Il Themes Builder è uno strumento formidabile che ci permette di  personalizzare tutti i template del nostro sito e potremmo prendere il controllo di ogni elemento delle pagine che andremo a costruire: dagli header, body e footer, oppure creare  template personalizzati e assegnarli automaticamente a ogni pagina, archivio e/o post type.

Per quali elementi di una pagina possiamo utilizzare il Theme builder?

  • Home page e tutte le pagine del sito
  • Header & footer
  • Articoli del blog secondo categoria o tag
  • Pagine di categoria, tag, autore e tutti gli archivi di WordPress in generale
  • Pagina dei risultati di ricerca
  • Pagina 404
  • Custom post type

Per poter avere a disposizione una pagina prodotto personalizzabile con DIVI dovrò creare:

  • Un modello di pagina che avrà valore “globale” per tutte le schede di prodotto.
  • Una sezione della scheda prodotto salvata nella libreria DIVI del nostro sito

Cominciamo subito dalla Dashboard di WP e andiamo a selezionare Divi > Generatore di temi 

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

e in questa nuova finestra cliccherò su >Aggiungi nuovo modello

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

e nella finestra successiva andremo ad assegnare il modello che stiamo creando ad una determinata categoria di pagine. Nel nostro caso selezioneremo >Tutti i prodotti

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Fatto questo e dopo aver cliccato su > Crea modello avremo a assegnato questo nuovo modello a tutte le schede prodotto del nostro sito. Ma questa è solo la prima parte del lavoro perché ora andremo a creare un corpo personalizzato della nostra pagina.
Andremo su > Aggiungi corpo personalizzato. 

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

ed inizieremo a costruire una nuova pagina cliccando su > Build from scratch

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Si aprirà la seguente finestra dove andremo ad inserire una Nuova riga

 

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Ci verrà chiesto di inserire un nuovo modulo che noi sceglieremo selezionando fra i vari moduli  >Pubblica contenuto proprio come se dovessimo pubblicare un vero e proprio post

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Ed ecco la nostra pagina modello assegnata ai prodotti del nostro sito. In pratica in questa visualizzazione vedremo come si mostreranno i nostri contenuti. Da qui inoltre, potremo personalizzare la formattazione del testo, il colore dello sfondo e tutto quello che noi riteniamo vada cambiato dal punto di vista dello stile.

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Questo è possibile farlo selezionando > Impostazioni del modulo

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

 

E selezionando il pulsante > Design nella parte viola della finestra tra Contenuti e Avanzate potrete modificare i vari aspetti dello stile. Qui sotto modifichiamo il Testo del sottotitolo

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Qui invece modifichiamo il Testo

 

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Qui invece modifichiamo il colore e il corpo del testo link

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Usciamo dalla nostra pagina e clicchiamo su >Salva cambiamenti

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

 

2° PASSAGGIO : PERSONALIZZARE CON DIVI PAGE BUILDER LA SCHEDA PRODOTTO.

A questo punto dopo avere trattato il nostro prodotto in modo che compaia all’interno della nostra categoria abbiamo la possibilità di aggiungere o sostituire, in base alle nostre esigenze, diversi moduli Woocommerce integrati nel page builder di DIVI.

Vediamo l’esempio:

Andiamo sotto la voce  Woocommerce  e selezioniamo  Prodotti >Tutti i prodotti > selezioniamo il prodotto che vogliamo modificare e poi clicchiamo sulla voce > Modifica. Una volta aperta la scheda di modifica vedremo comparire questo tipo di schermata che mostra la visualizzazione in back-end del nostro prodotto. Scegliete per praticità o se siete alle prime armi con DIVI la voce > Costruisci sul front-end

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

 

Fatto questo ci comparirà la finestra successiva dove potremo effettuare tutte le modifiche alla nostra scheda prodotto: potremmo, per esempio, modificare il colore dello sfondo della pagina, quello della sezione o della riga, oppure aggiungere altri moduli Woocommerce personalizzando ulteriormente le informazioni del prodotto.

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Andiamo ad aggiungere un nuovo modulo, sotto le immagini del prodotto, dove visualizzare i Prodotti correlati.
Per fare ciò selezioniamo il modulo immagini e poi dove compare il simbolo “+” Aggiungi nuovo modulo – andiamo a selezionare  > Woo prodotto correlato – come dall’esempio delle immagini sottostanti

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

 

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194


N.B.: I Prodotti correlati sono quei prodotti che hanno un collegamento con il prodotto principale (in questo caso abbiamo un trapano come prodotto collegato alle punte da trapano) e li possiamo inserire all’interno della scheda prodotto Woocommerce come da immagine qui sotto (in Up-sell se volete proporre un prodotto in aggiunta o Cross-sell nel caso di accessori collegati al prodotto principale)

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194


Una volta selezionato il modulo potremo modificarne ogni aspetto sia nella parte Contenuti che in quella denominata Design come mostrano le immagini riportate in basso

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Alla fine il risultato della nostra personalizzazione sarà questo che vediamo rappresentato qui sotto

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

ULTIMO STEP: RENDERE GLOBALE LA STRUTTURA DELLA SCHEDA PRODOTTO 

A questo punto abbiamo completato la personalizzazione della nostra scheda e per fare in modo che ogni nuovo prodotto inserito erediti la struttura che abbiamo costruito con DIVI.
Ci manca solo un passaggio.
Andiamo nel front-end della scheda prodotto costruita con DIVI seguendo il percorso dalla dashboard di WP > Woocommerce >Prodotti > Tutti i prodotti> Modifica > Costruisci sul front-end e selezioniamo la sezione all’interno della quale sono contenuti i moduli della scheda prodotto…

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

e aggiungiamo infine questo nuovo layout alla libreria come “Modello scheda prodotto” come descritto nell’immagine sottostante.

  • https://www.facebook.com/iowebart
  • https://www.linkedin.com/in/giovanni-romano-459a1b194

Ora abbiamo un modello di scheda che si replicherà ogni volta che inseriremo un nuovo prodotto.

 

 

Mi auguro che questo guida possa esservi di aiuto.
In caso vogliate approfondire l’argomento non esitate a contattarmi.
lasciatemi pure un commento se credete.
A presto con un nuovo post.
Giovanni

 

 

Ciao
Mi Chiamo Giovanni.
Sono graphic e web designer.
mi interesso di grafica,web e tecnologie
informatiche da diversi anni.
Ho collaborato con enti di formazione
come docente per il web e la grafica.
Ho maturato esperienze anche nel campo
della post-produzione video e audio.
Amo la fotografia e la musica
Scrivo post per condividere le mie esperienze professionali
Contatti: info@iowebart.it

0 Comments

Share This
× Ciao, sono Joe. Come ti posso aiutare?