Corso Ecommerce con WooCommerce

Personalizzare pagine prodotto e pagina shop

In questa lezione vediamo come puoi personalizzare la pagina shop utilizzando come tema Enfold, uno dei temi più venduti su Themeforest.

Vedremo come, attraverso il Layout Builder, potrai inserire uno slider di immagini esplicative, una griglia di prodotti ed altri elementi al posto della sidebar.

Entrando nelle impostazioni di WooCommerce, andremo a togliere la pagina nativa shop, e su Impostazioni > Permalink selezioneremo la voce shop base.

A questo punto potrai richiamare la pagina shop (che puoi nominare come desideri) e costruirla con il nuovo editor di Enfold, inserendo non solo una slider, ma anche un video e dei banner a tua scelta, per meglio visualizzare determinate promozioni.

Con Enfold ogni immagine può essere associata facilmente ad una scheda prodotto, in modo da ottimizzare la ricerca dell'utente sulla piattaforma. Potrai aggiungere anche altri elementi, come ulteriori aree widget, create sia da WooCommerce sia dal tema Enfold, in modo di implementare e personalizzare al massimo il tuo e-commerce.

Hai una domanda su questa lezione?

Accedi al video corso


  1. Giuseppe
    Giuseppe dice:

    Salve!

    Se vado su Webipedia – Video Corsi ed accedo ad uno qualsiasi dei corsi cliccando su mostra dettagli, entro nella pagina del corso.

    Da qui, sulla destra, appare subito il pulsante arancione ACCEDI OGGI che una volta cliccato inserisce automaticamente il corso nel carrello e mi reindirizza alla pagina del carrello.

    È possibile sapere come creare quel bottone? In particolare come far si che esso reindirizzi direttamente alla pagina carrello.

    Inoltre, come faccio ad aumentare la sua dimensione?

    Grazie,

    Giuseppe.

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Giuseppe,
      quel bottone è uno shortcode. Argomento spiegato nelle lezione precedente.

  2. Andrea
    Andrea dice:

    Ciao, qualche giorno fa vi avevo chiesto info sulla costruzione di un’area riservata differenziata per tipologia di utenti (privati e professionisti) nel mio sito di vendita videocorsi.
    Procedendo con il criterio che mi avete indicato sono arrivato a combinare 3 plugin: woocommerce, learndash e profile builder
    In questo modo in fase di registrazione l’utente può scegliere a quale categoria appartenere e in funzione di questo vede contenuti diversi e può accedere a videocorsi diversi che poi acquisterà e vedrà nella sua area riservata, sempre differenziata in funzione del suo profilo.
    Questi plugin hanno vari addon che permettono di fare tutto questo con molta facilità
    Grazie dunque di avermi indicato un criterio che mi ha permesso di lavorare in maniera molto fluida e personalizzata

    Rispondi
  3. Vittorio
    Vittorio dice:

    Ciao, vorrei sapere come cambiare i colori delle pagine cart, check out, my account ecc., ad esempio cambiare il colore dei pulsanti da rosa/viola (colore di base woocommerce). Tenete conto che io utilizzo il tema Divi.

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Vittorio,
      i colori e l’aspetto di WooCommerce non sono funzioni legate a WooCommerce. Infatti WooCommerce eredita la grafica dal tema.
      Molti temi poi, visto che WooCommerce è il plugin di e-commerce più famoso al mondo, hanno create delle personalizzazioni e moduli con funzionalità a lui dedicate.
      Quindi se vuoi controllare l’aspetto visivo di WooCommerce devi utilizzare gli strumenti che il tuo tema mette a disposizione. Di solito il colore degli elementi li trovi nella sezione chiamata Theme Option. Se anche cambiando i colori principali del tema non riesci a raggiungere quello che desideri, allora devi ricorrere alla personalizzazione tramite codice CSS.
      Ricordati che puoi sempre cercare se esiste un plugin che faccia quello che stai cercando. Per esempio vai in Google e cerca “woocommerce plugin color button”.
      Se invece costruisci le pagine (dei prodotti) tramite il builder del tema, allora non devi fare altro che appunto utilizzare le potenzialità del tuo builder.

      Buona giornata

  4. Franco
    Franco dice:

    Salve a tutti ragazzi, potete darmi qualche consiglio per creare una pagina delle taglie tipo quella del sito Lovable? Esiste qualche plug in particolare ? Grazie anticipatamente

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Franco,
      non ho mai visto un plugin identico e facendo una ricerca più approfondita ho visto anche che il sito che hai indicato non è fatto in WordPress, quindi è probabile che quel configuratore sia stato programmato ad hoc.

      A mio avviso puoi cercare WooCoomerce product customizer andando su Themeforest > Code.

      Se c’è qualcosa di simile lo trovi lì.

      Oppure puoi cercare qualche soluzione tra i plugin della Yith, una società italiana che puoi contattare direttamente per vedere se hanno una soluzione alle tue necessità.

      Buona giornata

  5. Valerio
    Valerio dice:

    Ciao Lorenzo, acquistando il corso HTML e CSS poi avrò le capacità di poter personalizzare woocommerce senza essere limitato ?

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Valerio,
      dipende da cosa intendi con il “senza essere limitato”. Con i CSS puoi per esempio modificare tutta una serie di proprietà di ogni elemento HTML: il testo, gli ingombri, colori ecc…
      Se invece per “senza essere limitato” intendi dare delle funzioni aggiuntive allora no. Li si tratta di riprogrammare parte di WooCommerce con personalizzazioni sul codice PHP e Javascript. Per esempio vuoi che nella pagina del prodotto ci sia visualizzato quanti utenti hanno guardato la pagina negli ultimi 2 minuti? Li non serve il CSS ma il PHP/Javascript.

      Detto questo, con i temi avanzati e i builder di layout, a livello visivo hai una libertà del 90%, non è poco.
      Se usi un tema free o un tema scadente, invece, ti consiglio di passare subito a un tema premium: i migliori temi WordPress.

      Nel caso volessi imparare PHP e Javascript, allora li ti aspetta tanto lavoro. È imparare una professione.

      Buona giornata

  6. Domenico
    Domenico dice:

    Ciao Lorenzo, avrei una domanda. Non riesco a usare alcuni plugin aggiunti come “info prodotto” e “info prodotto tab” che si trovano nel layout builder di Enfold quando provo aggiungo un nuovo prodotto. Sai Il perchè? Grazie tante

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Domenico,

      andando a logica deduco che non funzionano perché stai cercando di uitilizzarli in una pagina che non sia quella del prodotto.
      Info prodotto non ha settings in cui segnalare il prodotto di cui vuoi le info, pertanto le recupera se l’utente si trova sul prodotto (ma tu sei su un altra pagina).

      Buona giornata

    • Domenico
      Domenico dice:

      Mi trovo nella pagina “modifica prodotto” e in effetti mi permette di trascinare l’icona nel layout builder, ma non mi permette i parametri di “info prodotto” e info prodotto tab.
      Poi viene riportata questa dicitura: “Si prega di notare che l’Editor avanzato di Layout per i prodotti non funziona per tutte le estensioni di WooCommerce”

    • Lorenzo
      Lorenzo dice:

      Ciao Domenico,
      come ti dicevo nella risposta precedente, il modulo Info Prodotto non ha parametri, quindi è normale che non ci siano.
      Per quanto riguarda la dicutura, ti sta avvisando che il layout builder potrebbe non funzionare con eventuali estensioni di WooCommerce. Tu hai estensioni installate? Moduli aggiuntivi di WooCommerce come Vendors, Bundle ecc…

  7. Roberta Lisi
    Roberta Lisi dice:

    Salve
    vorrei chiedervi un consiglio
    Ho creato il mio shop ed ora devo inserire una sorta di differenziazione del prezzo di alcuni prodotti.
    Il mio shop venderà a 10 clienti, 7 di questi avranno un prezzo rispetto ad alcuni articoli che ho in vendita, i restanti 3 avranno un altro prezzo sempre su quegli articoli naturalmente.
    Che tipo di percorso dovrei fare per poter applicare questa distinzione di offerta economica?
    Non so se partire dalla registrazione (e vi chiedo come poterlo fare) o se dare l’attributo della variabile al prodotto (e anche in questo caso vorrei sapere come fare)
    Vi ringrazio per la preziosa risposta

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Roberta,
      il sistema più semplice che mi viene in mente per dare un prezzo differente solo a certi utenti è il coupon.
      Lo crei da WooCommerce > Codici Promozionali.

      Buona giornata

  8. Nadia
    Nadia dice:

    Ciao Lorenzo,
    grazie per le risposte. Alla prima domanda mi sono poi risposta da sola. Quella sul permalink riguardava la parte del corso in cui si vede che si possono fare le modifiche all’interno della pagina shop e che poi una volta salvate si vedono le relative modifiche, ecco, a me non si vedono. Quanto al problema di “Warning” generato da Enfold ora scrivo al supporto e vedo cosa mi dicono poi ti farò sapere. Purtroppo il sito in questione non è mio e l’hosting acquistato è Aruba, io ho SiteGround per i miei siti e vanno molto bene. Non ho mai creato siti e commerce e questo mi sta facendo diventare matta anche per colpa dell’hosting. Stamattina ho notato ad esempio che se vado sui singoli prodotti non visualizzo più le descrizioni. Sto cercando di capire perché, tu hai qualche idea? Grazie ancora e scusa per il tormento

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Nadia,
      bene per la prima domanda.

      Per la seconda, invece, ancora non capisco. Quindi cerco di chiarire due aspetti.

      La modifica del permalink serve solo ed esclusivamente per cambiare la base dell’URL che porta ai prodotti.
      Se hai il sito in italiano quello di default è /prodotto/.
      Se per esempio vendi solo magliette potresti modificarlo in /magliette/. In questo modo le pagine dei tuoi prodotti avrebbero URL del tipo /magliette/red-fashion/, /magliette/blu-style/ ecc…

      Invece, per quanto riguarda WooCommerce > Impostazioni > Prodotti > Visualizzazione > Pagina negozio, in questa impostazione dici a WooCommerce quale fra le pagine che hai creato deve essere quella del nogozio.

      Per la terza domanda No comment. Non puoi capire quando devo lavorare su quell’hosting i problemi che mi si presentano ogni volta.

      Buona giornata

  9. Nadia
    Nadia dice:

    Ciao, nella mia pagina shop in bacheca non ho niente di caricato, se vado a vedere l’anteprima mi da le categorie che ho creato in WooCommerce ma non i prodotti singoli, come mai? Inoltre, nonostante le modifiche che ho apportato nel permalink come da indicazioni nel corso, se vado a vedere l’anteprima avendo aggiornato la pagina vedo comunque sempre uguale. Inoltre se vado su una pagina di prodotto (visualizzando l’anteprima) vedo a sinistra dei testi “warning” che non capisco da dove siano generati perché non li trovo da nessuna parte. vi lascio il sito così magari capite meglio vedendo: xxxx

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Nadia,
      partiamo dalla prima domanda, quella che nella pagina shop ti si visualizzano le categorie.
      Quello che devi fare quando ti si presenta una difficoltà è imparare a cercare la soluzione nelle impostazioni di quello che stai utilizzando.
      Prendiamo questo caso, la pagina Shop. Dove troviamo le sue impostazioni? Lo abbiamo visto nell’arco del corso, ma non ricordarsi è lecito alla prima visione.
      Quindi prova a rientrare nelle impostazioni. Qui trovi diverse voci. Quale potrebbe essere quella inerente allo shop? I prodotti. Entri in prodotti e sfogli le diverse sotto voci e vedrai che in quella “Visualizzazione” hai i parametri per dire a WooCommerce cosa mostrare nella pagina shop.

      Purtroppo la seconda domanda, quella sui permalink, l’ho letta mille volte ma non riesco a capirla. Posso provare ad azzardare facendoti presente che le anteprime hanno un link loro particolare, diverso dal link finale della pagina o prodotto. Pertanto prova a vedere se l’effettiva URL del prodotto segue le indicazioni che gli hai dato.

      Per la domanda sul Warning hai ragione. Non è un errore, ma appunto una warning generata da Enfold.
      Come prima cosa ti chiedo con quale hosting sei, non con SiteGround giusto? Perché come puoi vedere anche tu vengono rivelati i percorsi interni del file in questione, che non è il massimo.
      Poi dopo, visto che è un problema di programmazione di Enfold, ti consiglio di mandare al loro supporto tutta la dicitura del warning.

      Fammi sapere,
      buona giornata

  10. Nadia
    Nadia dice:

    Ciao, se io vado su WooCommerce/Impostazioni/Prodotti non ho la voce “Archivio prodotti/pagina del negozio. Dove devo andare per trovarla?

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Nadia,
      vai in WooCommerce/Impostazioni/Prodotti e poi premi il link blu Visualizzazione (seconda voce).
      Hai la voce Pagina Negozio e tutte le altre.

      PS: i plugin cambiano ogni settimana, quindi devi abituarti a sfogliare le varie impostazioni quando avvengono questi cambiamenti.

      Buona giornata
      Lorenzo

  11. Nadia
    Nadia dice:

    Ciao, nel mio sito ho installato Flatsome ma non mi funziona l’ UX Builder e siccome ho una certa fretta nel rendere attivo il sito vorrei cambiare tema e passare ad Enfold che conosco anche meglio e già possiedo. Come posso procedere per cambiare tema? Perché ho provato ad installare il tema col file zip ma non me lo carica. Devo prima disinstallare Flatsome? ed inoltre, posso chiedere un rimborso sull’acquisto di questo tema dal momento che non posso utilizzarlo?
    Grazie

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Nadia,
      sul tuo sito WordPress puoi avere attivo un solo tema, ma puoi avere file di temi differenti caricati sul server.
      Per quanto riguarda il file zip sei sicura che sia quello giusto? Lo hai provato ad aprire per vedere se ci sono i file di Enfold o è il pacchetto con tutta la documentazione?
      Inoltre quale tipo di errore ti viene presentato?
      Per quanto riguarda il rimborso, tieni in considerazione che noi non facciamo parte di Themeforest o di altri marketplace, pertanto devi rivolgerti a loro o leggere i termini e condizioni dei relativi negozi.

      Buona giornata

  12. Stefano
    Stefano dice:

    Gentile Staff di Webipedia, come già riportato in chat ho un problema nella sezione “Cassa” del mio Shop Online realizzato con Woocommerce. Premetto che uso Enfold come tema specifico. In pratica, quando il cliente deve inserire i dati necessari per l’acquisto di un capo, si alternano voci in inglese a voci in Italiano. Per esempio il cliente troverà le voci: “Firs Name , Last name” alternate a “Indirizzo di spedizione” alternata a “Billing Address”. Non capisco a cosa sia dovuto dato che non ho MAI toccato il codice ne tantomeno utilizzato plugin o settaggi particolari. Non capisco cosa e come devo fare per modificare queste voci in modo da avere SOLO voci in italiano. Grazie in anticipo

    Rispondi
    • Lorenzo Novia
      Lorenzo Novia dice:

      Ciao Stefano, scusa mi era sfuggito il tuo messaggio.
      Come prima cosa hai WordPress in italiano? Lo controlli da Impostazioni > Generali > Lingua del sito.
      Se è in italiano allora può darsi che WooCommerce non ha preso le varie traduzioni.

      Controlla andando via FTP o tramite File Manager di avere il file di traduzione all’interno di questa directory: wp-content/languages/plugins.
      Dovresti avere dei file woocommerce-it_IT.mo

      Fammi sapere,
      buona giornata

    • Stefano
      Stefano dice:

      Ciao Lorenzo! Grazie per la risposta ma il problema persiste. Ho controllato sia la lingua impostata in WordPress e coincide con l’ Italiano. Inoltre ho controllato anche di avere i file woocommerce-it_IT.mo nella directory da te segnalata. Avevo scritto anche in chat per fornirvi proprio l’indirizzo dello shop del mio sito web in modo che voi poteste vedere cosa intendevo. Il fatto è che è come se fosse un MIX di italiano e inglese. Alcune voci sono segnalate in Italiano, altre in Inglese e non capisco assolutamente perchè

    • Lorenzo Novia
      Lorenzo Novia dice:

      Ciao Stefano, non ti preoccupare che risolviamo.
      Solitamente in casi come il tuo è perché non si ha, nella directory che ti ho indicato prima, i file .mo.
      Se invece, avendo già guardato mi confermi di averli, allora penso sia dovuto al tema, che ha modificato delle stringhe di WooCommerce, ma che non le ha tradotte.
      Quello che dovresti fare è, o mandare un ticket di supporto a quelli del tema, ma per un paio di frasi eviterei, o agire tu direttamente, andando a fare le traduzioni del file del tuo tema. Il file .po che devi aprire lo trovi in wp-content/languages/themes e poi il file .po del tuo tema. Lo apri con Poedit, fai la traduzione mancante ed esporti il nuovo .mo.

      Comunque è tutto spiegato e mostrato in questa lezione
      Tradurre Plugin e Temi con Poedit

      Buona giornata

  13. Domenico
    Domenico dice:

    ciao Lorenzo, vorrei creare un ecommerce di prodotti biologici a km 0, ma non a tutti.Cioè vorrei dare agli utenti delle username e password differenti in base a una precedente registrazione. Si può fare? GHrazie

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Domenico,
      non mi era mai capitata questa situazione.

      Potresti provare a disabilitare in Impostazioni > Generali la voce “chiunque può registrarsi”.
      Poi andare in WooCommerce > Impostazioni > Accounts e disabilitare le due voci alla riga Abilita Registrazione.

      Buona giornata

  14. Davide
    Davide dice:

    Penso che sarebbe utile che il corso si soffermasse in modo specifico anche sull’utilizzo di Woocommerce come vetrina di soli prodotti in affiliazione, per evidenziare le differenze di impostazioni di WP da applicare rispetto al caso dei prodotti per il negozio standard. Sarebbe possibile avere un esempio in merito?
    Grazie. Davide

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Davide,
      grazie per il tuo consiglio, ma devi sapere che i prodotti in affiliazione altro non sono che dei prodotti normali solo con un link che puntano al sito di chi stai promuovendo.

      WooCommerce prodotti in affiliazione o esterni

      Come vedi dal menu a tendina si chiamano anche “prodotti esterni”.
      Quello che devi fare è semplicemente inserire il tuo link di affiliazione per tale prodotto all’interno del campo URL del prodotto.

      In teoria per avere prodotti in affiliazione non ti serve nemmeno WooCommerce.
      WooCommerce torna utile quando, per esempio, oltre ai tuoi prodotti ne hai alcuni in affiliazione. Ma non è che l’utente paga sul tuo sito. Infatti il bottone “Acquista Prodotto” sarà collegato al tuo link di affiliazione e non aggiungerà nulla nel carrello.

      Certo, puoi avere anche un shop di soli prodotti di affiliazione, ma come dicevo prima saranno dei link che rimandano al sito del merchant.

      Se stai muovendo i tuoi primi passi nel mondo dell’affiliazione, allora ti suggerisco questo articolo dove spieghiamo varie cose importanti sull’affiliate marketing, appunto tra cui anche i link, i merchant ecc…

      Spero di averti chiarito il dubbio,
      buona giornata

Corso WordPress GRATUITO

INSERISCI NOME E MAIL PER ACCEDERE ALLE PRIME LEZIONI GRATUITAMENTE.

Zero spam. Garantito.

Corso Wordpress Gratis

Inizia il Corso di WordPress GRATIS!

Inserisci nome ed email per avere l'accesso gratuito alle prime lezioni del corso. Impara a costruire da solo il tuo sito web!

Ci sei quasi! Ti abbiamo mandato un'email per confermare il tuo indirizzo di posta.

Pin It on Pinterest