Personalizzare pagine prodotto e pagina shop

In questa lezione utilizzeremo le conoscenze appreso nel video precedente per personalizzare le pagine “uniche” di WooCommerce e quelle dei singoli prodotti.

Utilizzeremo pertanto il builder e gli shortcode, ma non solo.

Se ben ti ricordi ho anticipato che alcuni temi premium danno un “trattamento speciale” a WooCommerce, pertanto molti di loro, nel momento in cui avrai WooCommerce attivo sul tuo sito, ti metteranno a disposizione nuovi moduli all’interno Builder.

Con questi elementi non possiamo fare altro che dare spazio alla fantasia. Procediamo.

Come prima cosa dobbiamo sapere quali sono gli shortcode che WooCommerce ci mette a disposizione.

Da buona norma, la prima cosa da fare è andare su Google e cercare “woocommerce shortcode”... ed ecco che in un secondo abbiamo trovato la pagina con tutti gli shortcode a disposizione.

Con un po' di pratica riuscirai a riconoscerli, potrai utilizzarli nelle posizioni più strategiche e personalizzare a 360 gradi il tuo progetto.

Come dicevo però gli shortcode sono un’arma in più che può essere utilizzata nel caso il tuo tema non offra soluzioni semplici e intelligenti come i layout builder.

Visto che spesso e volentieri offrono possibilità di personalizzazione maggiore, direi di partire proprio da questi ultimi e proviamo a costruire una pagina di vendita completamente personalizzata.

Per questa lezione lavoreremo sempre con il tema Enfold, ma come abbiamo detto ogni tema ha i suoi moduli quindi individua quelli messi a disposizione dal tuo e inizia a fare dei test per vedere che risultato generano.

Procediamo creando una pagina nuova che chiamo negozio.

Ora attivo l’editor avanzato di layout che, come spiegato nel corso di dei temi avanzati, offre diversi moduli suddivisi in questo caso dagli elementi di layout, quelli di contenuto, i media e i plugin aggiuntivi.

Supponiamo di voler inserire uno slider in cima alla pagina, quindi vado su elementi media e seleziono easy slider.

Poi apro il pannello delle opzioni, e inserisco immagine e testi.

In questa fase procedo velecomente perchè ci serve solo per dare un minimo di grafica alla pagina, se poi vorrai creare slider più complessi ti rimando alla visione del corso slider animati.

Una volta completato possiamo subito vedere un’anteprima della pagina, in cui chiaramente è presente solo lo slider.

Ora Inserisco un modulo per aggiungere un titolo in modo da dividere le sezioni.

Passiamo finalmente a vedere quali moduli ci mette a disposizione enfold per mostrare i prodotti dello shop.

In questo caso abbiamo slider prodotto, griglia di prodotti e lista prodotti.

Ci sono anche altri moduli ma che sono disabilitati perchè, come si può leggere dal tooltip, si possono utilizzare solo nelle pagine del singolo prodotto.

Visto che stiamo facendo delle prove, inseriamo il primo della lista.

Apriamo anche qui il pannello delle opzioni e vediamo quali voci come lo possiamo personalizzare.

Per prima cosa ci chiede che tipo di voci vogliamo recuperare.

Come vedi non sono altro che le categorie dei prodotti inseriti in WooCommerce.

Io scelgo la categoria uomo, poi ci chiede in quante colonne vogliamo suddividere la sezione, io lascio 3.

Più sotto ci chiede quante voci devono essere recuperate, e anche in questo caso lascio 9 come valore di base.

Poi troviamo una voce per la visibilità dei prodotti con cui possiamo decidere se mostrare o meno i prodotti esauriti, io lascio la prima voce che fa riferimento alle opzioni che abbiamo inserito nelle impostazioni generali.

Andiamo avanti e controlliamo l’offset che è utile, in caso si utilizzino più moduli che recuperano i prodotti, per fare in modo che non ci siano doppioni nella pagina.

Io quindi sceglo di non permettere articoli duplicati.

Infine questo modulo di enfold ci fa scegliere come recuperare gli articoli, in ordine alfabetico, dall’ultimo inserito e così via.

Anche in questo caso la scelta è solamente tua.

Fatto questo andiamo a salvare la pagina e guardiamo di nuovo l’anterpima.

Ora sotto allo slider c’è il titolo e il nostro slider prodotti a 3 colonne.

Io avevo scelto di recuperare 9 articoli, ma in questo caso, visto che ce ne solo sono 5 nella categoria, ci sarà per forza di cose uno spazio vuoto.

In questo esempio vogliamo fare anche a meno della sidebar, quindi possiamo andare a disabilitarla dal pannello laterale delle impostazioni.

Ecco che la nostra pagina di vendita sta prendendo forma.

Andiamo avanti e vediamo cosa possiamo fare con gli altri moduli.

Per movimentare un pò la pagina ora andiamo ad inserire due colonne.

Nella prima inseriamo una griglia di prodotti e questa volta seleziono solo la categoria Business da donna.

Le altre opzioni come vedi sono molti simili a quelle dello slider, a seconda del tuo tema dovrai solo esplorarle e fare qualche tentativo per capire quale funziona meglio nel tuo progetto.

Nella seconda colonna a questo punto inserisco il terzo modulo e scelgo un’altra categoria.

Dopo aver fatto le mie impostazioni posso inserire anche qui i il modulo dei titoli e andare a personalizzarli.

Aggiorniamo la pagina e vediamo che tipo di immagine abbiamo ottenuto.

Il concetto è quello di offrire all’utente una buona esperienza sulle tue pagine di vendita in modo che siano sempre varie e che non annoiono durante la navigazione.

Poi è chiaro che andando a lavorarci ancora meglio con gli strumenti dei layout avanzati puoi continuare a personalizzare questa pagina fino a renderla più attraente.

Nel mio caso ho aggiunto qualche colore, qualche separatore e qualche elemento grafico.

Vediamo ora come possiamo inserire uno shortcode in questa pagina.

Decidiamo per esempio di enfatizzare uno dei cappelli che abbiamo dello shop.

Per dare importanza al prodotto inserisco una nuova sezione colorata, suddivido anche questa in due colonne e inizio a comporla inserendo un titolo, e un testo di descrizione.

Sulla destra metto metta grande l’immagine del prodotto che ci interessa.

Dopo averli personalizzati inserisco anche l’immagine del prodotto.

Ora voglio fare in modo che ci sia un tasto per l’acquisto diretto di questo cappello.

Vado sulla documentazione e copio lo shortcode relativo add to cart.

Come vedi è dotato di variabile id, perchè si deve identificare esattament eil prodotto che deve finire nel carrello.

Andiamo quindi a controllare nella lista dei prodotti qual’è l’ID che mi interessa.

Nel mio caso è il 258.

Ora posso inserire il modulo codice di blocco o anche un semplice modulo di testo e incollare lo shortcode con id 258.

Aggiorniamo nuovamente la pagina ed ecco apparire il nostro tasto.

Onestamente non sta benissimo con questo colore, ma nella pagina degli shortcode abbiamo visto che ci sono anche altri parametri che possiamo andare a ritoccare, come ad esempio lo stile.

Possiamo infatti usare le nozioni apprese nel corso html e css e personalizzare al meglio il nostro tasto.

Io cambio lo spessore del bordo, il colore e aumento il padding interno.

Ecco il nostro shortcode inserito e personalizzato.

Chiaramente questo è solo un esempio di pagina, e ribadisco nuovamente che ogni tema ha i suoi moduli che devi imparare in prima persona a conoscere e a sfruttare al meglio.

La stessa logica la possiamo utilizzare per modificare le pagine dei prodotti singoli.

Ecco ad esempio una pagina prodotto costruita utilizzando il builder di layout.

Grazie agli strumenti dei temi avanzati come vedi puoi realizzare pagine anche molto complesse.

In questo caso possiamo riempire lo spazio bianco con le informazioni del prodotto e con il tasto per l’acquisto.

Visto che siamo nella pagina singola infatti possiamo utilizzare anche gli altri moduli come info prodotto tab e il pulsante di acquisto.

Al termine della pagina abbiamo già inserito quello per i prodotti correlati.

Ora sta a te lavorare sul tuo progetto per rendere le pagine del tuo shop perfette per il tuoi pubblico e per i tuoi prodotti.

Spero che questa lezione ti sia stata utile e ci vediamo nella usccessiva.