WooCommerce su GeneratePress e GenerateBlocks: guida introduttiva passo dopo passo per creare uno shop leggero, ordinato e personalizzato

Creare un e-commerce con WordPress non significa per forza installare un tema pesante, un page builder enorme e dieci plugin solo per ottenere una pagina shop decente. Una delle combinazioni più pulite, leggere e flessibili oggi è questa: WooCommerce + GeneratePress + GenerateBlocks.

WooCommerce si occupa della parte commerciale: prodotti, carrello, checkout, spedizioni, pagamenti, ordini, email e gestione clienti. GeneratePress dà al sito una base grafica solida, veloce e ben strutturata. GenerateBlocks, invece, permette di costruire sezioni personalizzate nel blocco editor di WordPress senza appesantire il sito con un builder visuale troppo invasivo.

GeneratePress Premium include anche un modulo dedicato a WooCommerce che aggiunge opzioni di layout, colori e tipografia per gli elementi dello shop; per usarlo bisogna avere WooCommerce installato e attivo, poi attivare il modulo da Aspetto > GeneratePress e gestire molte impostazioni da Aspetto > Personalizza > Layout > WooCommerce.

L’obiettivo di questa guida è accompagnarti nella costruzione di uno shop WooCommerce pulito, leggibile, responsive e coerente con il resto del sito, usando GeneratePress come tema e GenerateBlocks per creare sezioni più curate: hero, griglie, call to action, blocchi informativi, landing page prodotto e contenuti di supporto alla vendita.

Perché usare WooCommerce con GeneratePress

WooCommerce è il plugin più usato per trasformare WordPress in un negozio online. La sua forza è che gestisce tutto il cuore dell’e-commerce: prodotti semplici, prodotti variabili, categorie, attributi, coupon, ordini, pagamenti, spedizioni, imposte e area cliente.

Il problema, però, non è quasi mai “installare WooCommerce”. Il vero problema è farlo convivere bene con il design del sito.

Molti e-commerce WordPress finiscono per avere questo aspetto:

• homepage molto curata;
• pagina shop generica;
• schede prodotto poco emozionali;
• carrello e checkout visivamente scollegati dal resto del sito;
• troppi plugin grafici installati solo per sistemare piccoli dettagli;
• performance che peggiorano con il tempo.

GeneratePress è utile proprio perché parte da una base essenziale. Non ti impone un design rigido, non carica mille effetti inutili e ti lascia costruire l’esperienza attorno al contenuto e al prodotto. GeneratePress Premium aggiunge moduli attivabili solo quando servono, mantenendo una logica modulare e orientata alle performance.

GenerateBlocks completa il quadro perché ti permette di creare sezioni personalizzate con blocchi come Container, Grid, Text e Button. La pagina ufficiale del plugin descrive il Container come base per organizzare sezioni e righe, il Grid come blocco per layout flessibili, il Text per testi e titoli, e il Button per call to action.

In pratica, WooCommerce gestisce il negozio. GeneratePress gestisce la struttura del sito. GenerateBlocks gestisce la parte editoriale e visuale delle pagine.

Prima di iniziare: cosa serve davvero

Per lavorare bene ti consiglio questa base:

1. WordPress installato correttamente
2. Tema GeneratePress
3. GeneratePress Premium, se vuoi usare le opzioni avanzate per WooCommerce
4. WooCommerce
5. GenerateBlocks
6. Un sistema di backup serio
7. Un ambiente di staging, almeno se il sito è già online

Tecnicamente puoi usare WooCommerce anche solo con la versione gratuita di GeneratePress, ma con la versione Premium hai più controllo su layout, carrello nel menu, colonne prodotto, pulsanti, immagini, spaziature e impostazioni dedicate allo shop.

GenerateBlocks, invece, ti serve soprattutto per costruire pagine più curate: homepage e-commerce, landing page, sezioni promozionali, blocchi “perché acquistare da noi”, banner di categoria, box assistenza, aree storytelling e contenuti SEO.

La logica corretta: non usare GenerateBlocks per fare tutto

Questo è un punto importante.

GenerateBlocks non deve sostituire WooCommerce. Non conviene costruire manualmente ogni card prodotto con Container, immagini e pulsanti se poi WooCommerce gestisce già catalogo, prezzo, disponibilità, pulsante acquista e aggiornamenti dinamici.

La divisione migliore è questa:

WooCommerce dovrebbe gestire:

• schede prodotto;
• prezzi;
• offerte;
• disponibilità;
• varianti;
• carrello;
• checkout;
• ordini;
• categorie prodotto;
• prodotti correlati;
• coupon;
• account cliente.

GeneratePress dovrebbe gestire:

• layout generale;
• header;
• footer;
• larghezza contenuto;
• sidebar;
• tipografia globale;
• colori globali;
• impostazioni shop;
• struttura delle pagine WooCommerce.

GenerateBlocks dovrebbe gestire:

• sezioni personalizzate;
• hero della homepage;
• landing page;
• blocchi editoriali;
• call to action;
• griglie informative;
• sezioni di fiducia;
• layout promozionali;
• contenuti SEO sopra o sotto le griglie prodotto.

Questa distinzione evita di creare un sito difficile da mantenere.

Step 1: installare WooCommerce e configurare le basi

Dopo aver installato WooCommerce, la prima cosa da fare è configurare le impostazioni essenziali.

Vai in:

WooCommerce > Impostazioni

Da qui controlla:

• indirizzo del negozio;
• valuta;
• paese di vendita;
• zone di spedizione;
• metodi di pagamento;
• email automatiche;
• imposte, se necessarie;
• pagine carrello, checkout, account e shop.

Non avere fretta di personalizzare subito la grafica. Prima bisogna far funzionare bene la struttura commerciale.

Un errore comune è partire dal design della pagina prodotto senza aver ancora definito spedizioni, pagamenti, categorie e attributi. È come arredare un negozio senza sapere cosa venderai, come lo consegnerai e quanto costerà.

Step 2: attivare il modulo WooCommerce di GeneratePress

Dopo aver installato GeneratePress Premium, vai in:

Aspetto > GeneratePress

Qui puoi attivare i moduli disponibili. Per WooCommerce devi attivare il modulo dedicato. Una volta attivo, molte impostazioni saranno disponibili nel Customizer, in particolare dentro:

Aspetto > Personalizza > Layout > WooCommerce

La documentazione GeneratePress indica proprio questa area come punto principale per gestire molte opzioni di layout WooCommerce.

Da qui puoi intervenire su aspetti come:

• layout dell’archivio prodotti;
• colonne nella pagina shop;
• elementi visibili nelle card prodotto;
• struttura della pagina prodotto singola;
• pulsanti;
• carrello;
• spaziature;
• comportamento di alcuni elementi dello shop.

Il vantaggio è che non devi partire subito con CSS personalizzato o override dei template WooCommerce. Prima conviene sfruttare le opzioni native.

Step 3: scegliere il layout dello shop

La pagina shop è una delle pagine più delicate di un e-commerce. Deve essere chiara, ordinata e veloce da consultare.

Per uno shop semplice, ti consiglio una struttura di questo tipo:

Titolo pagina
Breve testo introduttivo
Eventuale filtro o ordinamento
Griglia prodotti
Sezione vantaggi
Sezione assistenza / resi / spedizioni
CTA finale

Con GeneratePress puoi decidere se usare una pagina a larghezza contenuta o full width. Per molti e-commerce piccoli o medi, una larghezza contenuta funziona meglio perché migliora la leggibilità e mantiene più ordine visivo.

Per esempio:

• shop con pochi prodotti: 3 colonne desktop, 2 tablet, 1 mobile;
• shop moda/accessori: immagini grandi, card più ariose;
• shop tecnico: card più compatte, prezzo e dettagli ben visibili;
• shop artigianale: più spazio a storytelling, materiali, lavorazione e immagini.

Il layout non deve essere bello “in astratto”. Deve aiutare l’utente a capire cosa vendi, perché dovrebbe fidarsi e quale prodotto scegliere.

Step 4: organizzare bene categorie e attributi

Prima ancora di pensare alla grafica, lavora sulla struttura.

In WooCommerce, le categorie prodotto servono a organizzare il catalogo in macro-aree. Gli attributi servono invece a descrivere caratteristiche trasversali dei prodotti.

Esempio per un negozio di abbigliamento:

Categorie:

• Borse
• Scarpe
• Accessori
• Abbigliamento
• Nuovi arrivi
• Saldi

Attributi:

• Colore
• Taglia
• Materiale
• Stagione
• Brand
• Modello

Esempio per un negozio di arredamento:

Categorie:

• Cucine
• Tavoli
• Sedie
• Madie
• Illuminazione

Attributi:

• Materiale
• Finitura
• Colore
• Dimensione
• Stile
• Ambiente

Questa distinzione è importante anche per la SEO. Una categoria può diventare una pagina di atterraggio interessante da posizionare su Google. Un attributo, invece, spesso serve più alla navigazione e al filtro interno.

Step 5: creare una homepage e-commerce con GenerateBlocks

La homepage di un e-commerce non dovrebbe essere solo una vetrina casuale di prodotti.

Dovrebbe rispondere a tre domande:

1. Cosa vendi?
2. Perché dovrei fidarmi?
3. Dove devo cliccare adesso?

Con GenerateBlocks puoi costruire una homepage molto ordinata usando pochi blocchi.

Una struttura efficace potrebbe essere questa:

Hero principale
Categorie in evidenza
Prodotti selezionati
Sezione vantaggi
Sezione storytelling
Recensioni o prove sociali
CTA finale

Esempio di hero

Con GenerateBlocks puoi creare una hero composta da:

• Container principale;
• Grid a due colonne;
• colonna sinistra con titolo, testo e pulsanti;
• colonna destra con immagine prodotto o immagine lifestyle.

Esempio di copy:

Arreda la tua casa con prodotti scelti per durare

Scopri una selezione di articoli pensati per rendere ogni ambiente più accogliente, funzionale e personale.

[Scopri lo shop] [Guarda le novità]

Questa sezione non deve spiegare tutto. Deve orientare l’utente.

Il titolo deve essere chiaro, il testo deve creare contesto e il pulsante principale deve portare allo shop o alla categoria più importante.

Step 6: usare i blocchi prodotto di WooCommerce dentro pagine costruite con GenerateBlocks

Per mostrare prodotti dentro una pagina personalizzata puoi combinare GenerateBlocks e blocchi WooCommerce.

Per esempio, puoi creare una sezione con GenerateBlocks e poi inserire al suo interno un blocco WooCommerce dedicato ai prodotti.

WooCommerce ha introdotto il blocco Product Collection, pensato per mostrare e personalizzare archivi o raccolte di prodotti, oltre che per creare raccomandazioni prodotto. La documentazione WooCommerce lo descrive come blocco utile per visualizzare e personalizzare archivi di prodotti e collezioni.

Una struttura pratica potrebbe essere:

Container GenerateBlocks
    Headline: Nuovi arrivi
    Text: Una selezione aggiornata degli ultimi prodotti disponibili.
    Product Collection Block WooCommerce
    Button: Vedi tutti i prodotti

Questa combinazione è molto utile perché GenerateBlocks cura il layout della sezione, mentre WooCommerce gestisce i prodotti dinamici.

WooCommerce ha inoltre indicato il Product Collection Block come nuovo riferimento per il sistema di griglie prodotto, con l’introduzione in WooCommerce 9.5 di equivalenti basati su Product Collection al posto di alcuni vecchi product grid block “soft-deprecated”.

In parole semplici: per le nuove sezioni prodotto, conviene ragionare sempre più in ottica Product Collection Block, invece di affidarsi a vecchi blocchi griglia prodotto destinati a essere progressivamente meno centrali.

Step 7: costruire una sezione “categorie in evidenza”

Una delle sezioni più utili in homepage è quella dedicata alle categorie.

Esempio:

Scopri le nostre categorie

Borse
Modelli versatili per tutti i giorni.

Accessori
Dettagli che completano il tuo stile.

Nuovi arrivi
Le ultime novità appena inserite nello shop.

Con GenerateBlocks puoi realizzarla così:

1. aggiungi un Container;
2. inserisci un titolo con il blocco Text o Headline;
3. aggiungi una Grid a 3 colonne;
4. in ogni colonna inserisci immagine, titolo, testo e bottone;
5. collega ogni bottone alla relativa categoria WooCommerce.

Dal punto di vista UX, questa sezione funziona molto bene perché evita di buttare subito l’utente dentro una griglia di prodotti senza contesto.

Le categorie in evidenza sono una specie di “segnaletica interna” dello shop.

Step 8: personalizzare la scheda prodotto

La pagina prodotto è il punto in cui l’utente decide se comprare o abbandonare.

Una buona scheda prodotto dovrebbe avere:

• titolo chiaro;
• immagini di qualità;
• prezzo ben visibile;
• descrizione sintetica;
• descrizione lunga più approfondita;
• informazioni su spedizione e resi;
• materiali o caratteristiche tecniche;
• disponibilità;
• recensioni, se presenti;
• prodotti correlati;
• call to action evidente.

Con GeneratePress puoi gestire parte del layout della scheda prodotto tramite il modulo WooCommerce. Prima di aggiungere codice, verifica sempre cosa puoi fare dal Customizer.

Un’impostazione pulita per una scheda prodotto potrebbe essere:

Colonna sinistra: immagini prodotto
Colonna destra: titolo, prezzo, breve descrizione, varianti, pulsante acquista
Sotto: descrizione completa, dettagli tecnici, spedizioni, FAQ prodotto
In fondo: prodotti correlati

La cosa importante è non riempire la parte alta della pagina con troppe informazioni.

La prima schermata deve far capire:

• che prodotto è;
• quanto costa;
• perché è interessante;
• come si acquista.

Il resto può stare più in basso.

Step 9: aggiungere sezioni informative sotto la scheda prodotto

Qui GenerateBlocks diventa molto utile.

In molti e-commerce, la pagina prodotto si limita alle informazioni standard di WooCommerce. Ma puoi migliorare molto la percezione del prodotto aggiungendo sezioni editoriali.

Esempio per un prodotto artigianale:

Perché sceglierlo

Questo prodotto è pensato per chi cerca un equilibrio tra estetica, praticità e durata. I materiali sono selezionati con attenzione e ogni dettaglio è progettato per integrarsi facilmente in ambienti diversi.

Esempio di sezione a 3 colonne:

Materiali selezionati
Descrizione breve del materiale.

Spedizione sicura
Imballaggio curato e tracciamento dell’ordine.

Assistenza prima e dopo l’acquisto
Supporto per dubbi, misure e informazioni.

Puoi creare questa sezione con GenerateBlocks usando:

• Container;
• Grid a 3 colonne;
• icone SVG leggere;
• titoli brevi;
• testi sintetici.

Il consiglio è di usare sempre testi reali e specifici. Evita frasi generiche tipo “qualità garantita” se non spieghi in cosa consiste questa qualità.

Step 10: creare landing page prodotto o categoria

Una pagina categoria WooCommerce può posizionarsi su Google, ma spesso è troppo “catalogo” e poco “contenuto”.

Per questo puoi creare pagine landing personalizzate con GenerateBlocks, collegate poi alle categorie WooCommerce.

Esempio:

/borse-da-lavoro/

Questa pagina potrebbe contenere:

Hero SEO
Introduzione alla categoria
Vantaggi principali
Blocco prodotti WooCommerce
Guida alla scelta
FAQ
CTA finale

Il vantaggio è che puoi lavorare meglio sul contenuto, sull’intento di ricerca e sulla persuasione.

Esempio di struttura:

H1: Borse da lavoro eleganti e funzionali

Introduzione:
Scegliere una borsa da lavoro non significa solo trovare un accessorio capiente. Significa trovare un prodotto comodo, resistente e coerente con il proprio stile quotidiano.

Sezione:
Come scegliere la borsa da lavoro giusta

Griglia prodotti:
Prodotti della categoria “Borse da lavoro”

FAQ:
Quanto deve essere grande una borsa da lavoro?
Quali materiali sono più resistenti?
Meglio una borsa rigida o morbida?

In questo modo non stai creando solo una pagina vetrina. Stai creando una pagina utile, più completa e più facile da comprendere per l’utente.

Step 11: curare carrello e checkout

Molti e-commerce lavorano tantissimo sulla homepage e pochissimo sul checkout.

È un errore enorme.

Il checkout è il punto in cui l’utente ha già deciso di comprare, ma può ancora cambiare idea.

Le cause più comuni di abbandono sono:

• pagina troppo confusa;
• costi poco chiari;
• metodi di pagamento poco visibili;
• richiesta di troppi dati;
• assenza di rassicurazioni;
• problemi su mobile;
• pulsanti poco evidenti;
• errori o messaggi poco comprensibili.

Con GeneratePress puoi mantenere il layout del checkout pulito. Con WooCommerce puoi gestire campi, pagamenti e spedizioni. Con GenerateBlocks puoi eventualmente creare sezioni informative prima o dopo il checkout, ma senza esagerare.

Nel checkout conviene essere essenziali.

Esempio di microcopy utile:

Pagamento sicuro
I tuoi dati vengono gestiti in modo protetto.

Spedizione tracciata
Riceverai aggiornamenti sullo stato del tuo ordine.

Hai bisogno di aiuto?
Contattaci prima di completare l’acquisto.

Evita invece banner troppo aggressivi, slider, pop-up e distrazioni. Nel checkout l’obiettivo è far completare l’ordine.

Step 12: lavorare sulla versione mobile

Un e-commerce va progettato prima di tutto pensando al mobile.

Su smartphone l’utente deve riuscire a:

• leggere bene il titolo prodotto;
• vedere chiaramente le immagini;
• capire prezzo e disponibilità;
• selezionare varianti senza fatica;
• premere il pulsante “Aggiungi al carrello”;
• tornare facilmente allo shop;
• completare il checkout senza zoomare.

Quando lavori con GenerateBlocks, controlla sempre le impostazioni responsive di ogni sezione.

Per esempio, una griglia a 3 colonne desktop dovrebbe diventare:

Desktop: 3 colonne
Tablet: 2 colonne
Mobile: 1 colonna

Le sezioni promozionali con immagine e testo affiancati dovrebbero diventare verticali su mobile:

Desktop:
[Testo] [Immagine]

Mobile:
[Immagine]
[Testo]

Oppure, se il testo è più importante dell’immagine:

Mobile:
[Testo]
[Immagine]

Da web designer, qui il consiglio è molto pratico: non limitarti a “vedere se si adatta”. Prova davvero il flusso di acquisto da mobile.

Apri il sito da smartphone e fai queste azioni:

1. entra in homepage;
2. vai in una categoria;
3. apri un prodotto;
4. scegli una variante;
5. aggiungi al carrello;
6. vai al checkout;
7. compila i campi;
8. controlla se qualcosa crea attrito.

Se in uno di questi passaggi ti viene voglia di dire “sì, ma l’utente capisce”, probabilmente c’è qualcosa da migliorare.

Step 13: esempio di CSS leggero per migliorare le card prodotto

Prima di aggiungere CSS, usa sempre le opzioni native di GeneratePress e WooCommerce. Però qualche ritocco leggero può essere utile per rendere le card prodotto più ordinate.

Esempio:

/* Card prodotto WooCommerce più pulite */
.woocommerce ul.products li.product {
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    background: #ffffff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
}

/* Immagini prodotto più morbide */
.woocommerce ul.products li.product img {
    border-radius: 14px;
    margin-bottom: 16px;
}

/* Titolo prodotto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 18px;
    line-height: 1.35;
    margin-bottom: 8px;
}

/* Prezzo */
.woocommerce ul.products li.product .price {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 14px;
}

/* Pulsante */
.woocommerce ul.products li.product .button {
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 500;
}

Questo CSS è volutamente semplice. Non stravolge WooCommerce, ma migliora la percezione delle card.

Naturalmente colori, bordi e raggi vanno adattati al tuo brand.

Step 14: esempio di sezione “vantaggi” con GenerateBlocks

Una sezione molto utile per uno shop è quella dei vantaggi.

Esempio contenuto:

Perché acquistare da noi

Spedizione tracciata
Segui il tuo ordine dal momento della partenza fino alla consegna.

Pagamenti sicuri
Scegli il metodo di pagamento più comodo per te.

Assistenza reale
Hai un dubbio prima dell’acquisto? Ti aiutiamo a scegliere.

Questa sezione può stare:

• in homepage;
• sotto la griglia prodotti;
• nelle landing page;
• nella scheda prodotto;
• prima del footer;
• nella pagina carrello.

Con GenerateBlocks puoi realizzarla con:

Container principale
    Titolo sezione
    Testo introduttivo
    Grid 3 colonne
        Container vantaggio 1
        Container vantaggio 2
        Container vantaggio 3

Il punto non è solo estetico. Questa sezione serve a ridurre dubbi e obiezioni.

Quando una persona compra online, soprattutto da un sito che non conosce, si chiede:

• posso fidarmi?
• quando arriva il prodotto?
• se ho problemi cosa succede?
• posso pagare in sicurezza?
• il prodotto è davvero come in foto?

Le sezioni informative devono rispondere a queste domande prima che diventino motivi di abbandono.

Step 15: usare Query Loop e contenuti editoriali

GenerateBlocks include strumenti utili per mostrare contenuti dinamici. La documentazione descrive il Query Loop come un blocco che permette di mostrare post in base a parametri, in modo simile a un loop PHP ma senza scrivere codice.

Nel contesto WooCommerce, questo può essere molto interessante per collegare blog e shop.

Esempio:

Prodotto: scarpe da trekking

Articoli collegati:
- Come scegliere le scarpe da trekking
- Differenza tra suola rigida e morbida
- Come pulire le scarpe dopo un’escursione

Oppure:

Categoria: arredamento cucina

Articoli collegati:
- Come scegliere il tavolo giusto per una cucina piccola
- Idee per arredare una cucina moderna
- Materiali facili da pulire per la zona pranzo

Questo approccio aiuta sia l’utente sia la SEO.

Il blog non resta separato dallo shop. Diventa parte del percorso di acquisto.

Step 16: migliorare la SEO delle categorie prodotto

Le categorie WooCommerce non dovrebbero essere lasciate vuote.

Una buona categoria dovrebbe avere:

• titolo chiaro;
• testo introduttivo;
• griglia prodotti;
• testo di approfondimento;
• eventuali FAQ;
• link interni verso categorie correlate;
• meta title e meta description curati;
• immagini ottimizzate.

Esempio per una categoria:

H1: Borse eleganti da donna

Introduzione:
Scopri una selezione di borse eleganti pensate per accompagnarti al lavoro, nel tempo libero e nelle occasioni speciali. Modelli versatili, materiali curati e dettagli progettati per completare ogni look.

Sezione prodotti:
Griglia WooCommerce

Approfondimento:
Come scegliere la borsa elegante più adatta

FAQ:
Quale colore scegliere?
Che differenza c’è tra borsa a mano e tracolla?
Come conservare una borsa elegante?

Qui GenerateBlocks può aiutarti soprattutto se decidi di costruire pagine landing personalizzate collegate alle categorie. Per le categorie native WooCommerce, invece, conviene valutare bene quanto vuoi personalizzare tramite tema, blocchi o eventuali hook.

Step 17: attenzione alle performance

WooCommerce aggiunge complessità al sito. È normale.

Per questo la combinazione con GeneratePress e GenerateBlocks è interessante: parti da una base leggera e aggiungi solo quello che serve.

Alcune buone pratiche:

• evita slider pesanti in homepage;
• comprimi le immagini prodotto;
• usa immagini coerenti per dimensioni e proporzioni;
• limita plugin superflui;
• evita page builder multipli;
• non caricare font inutili;
• controlla gli script di marketing;
• testa il checkout dopo ogni ottimizzazione;
• non rimuovere script WooCommerce a caso;
• usa cache e ottimizzazioni con cautela sulle pagine carrello, checkout e account.

Un sito e-commerce non deve solo avere un buon punteggio nei test. Deve funzionare correttamente durante l’acquisto.

Meglio un sito leggermente meno “perfetto” nei numeri, ma stabile, chiaro e affidabile, rispetto a un sito iper-ottimizzato che rompe carrello o checkout.

Step 18: immagini prodotto e coerenza visiva

Uno shop può avere il miglior tema del mondo, ma se le immagini prodotto sono incoerenti sembrerà comunque poco professionale.

Cerca di mantenere:

• stessa proporzione immagini;
• sfondo coerente;
• luce simile;
• inquadrature simili;
• dettagli visibili;
• immagini lifestyle, se utili;
• immagini tecniche, se necessarie.

Per esempio, in un sito moda puoi usare:

Prima immagine: prodotto su sfondo pulito
Seconda immagine: prodotto indossato
Terza immagine: dettaglio materiale
Quarta immagine: variante colore

In un sito arredamento:

Prima immagine: prodotto ambientato
Seconda immagine: prodotto isolato
Terza immagine: dettaglio finitura
Quarta immagine: dimensioni o schema tecnico

GeneratePress e GenerateBlocks possono aiutarti a impaginare bene, ma la qualità percepita dello shop dipende tantissimo dalle immagini.

Step 19: esempi di sezioni utili per uno shop WooCommerce

Sezione “Nuovi arrivi”

Scopri gli ultimi prodotti inseriti nel catalogo: una selezione aggiornata di articoli pensati per chi cerca novità, stile e funzionalità.

[Griglia prodotti nuovi]

[Vedi tutte le novità]

Sezione “Best seller”

I più scelti dai nostri clienti

Una selezione dei prodotti più acquistati e apprezzati, ideale se vuoi andare sul sicuro.

[Griglia prodotti in evidenza]

[Scopri i più venduti]

Sezione “Guida alla scelta”

Non sai quale prodotto scegliere?

Abbiamo preparato una guida semplice per aiutarti a confrontare modelli, materiali e caratteristiche prima dell’acquisto.

[Leggi la guida]

Sezione “Assistenza”

Hai bisogno di un consiglio?

Scrivici prima di ordinare: ti aiutiamo a scegliere il prodotto più adatto alle tue esigenze.

[Contattaci]

Queste sezioni possono essere costruite facilmente con GenerateBlocks e collegate alle pagine WooCommerce.

Step 20: quando usare una pagina personalizzata e quando usare una pagina WooCommerce

Questa distinzione è fondamentale.

Usa le pagine native WooCommerce per:

• shop principale;
• categoria prodotto;
• tag prodotto;
• scheda prodotto;
• carrello;
• checkout;
• account cliente.

Usa pagine personalizzate con GenerateBlocks per:

• homepage;
• landing promozionali;
• pagine stagionali;
• guide all’acquisto;
• pagine brand;
• pagine “idee regalo”;
• pagine “nuovi arrivi” curate editorialmente;
• pagine SEO molto specifiche.

Esempio:

Pagina WooCommerce:
 /categoria-prodotto/borse/

Pagina landing personalizzata:
 /borse-eleganti-da-donna/

La prima è più catalogo.
La seconda è più contenuto, racconto e conversione.

Possono convivere benissimo.

Errori da evitare

Installare troppi plugin grafici

Se stai usando GeneratePress e GenerateBlocks, non serve installare un plugin diverso per ogni sezione: slider, card, griglie, bottoni, icone, banner, colonne, testimonial.

Ogni plugin aggiunge CSS, JavaScript, manutenzione e possibili conflitti.

Personalizzare subito con codice

Prima controlla sempre:

• impostazioni WooCommerce;
• impostazioni GeneratePress;
• Customizer;
• blocchi nativi;
• GenerateBlocks.

Il codice arriva dopo, quando hai davvero bisogno di qualcosa che non puoi ottenere diversamente.

Creare pagine prodotto troppo lunghe ma inutili

Una pagina prodotto lunga non è automaticamente migliore.

Deve essere utile.

Meglio una pagina ordinata con informazioni concrete che una pagina piena di sezioni decorative.

Nascondere informazioni importanti

Spedizione, resi, tempi di consegna e metodi di pagamento devono essere facili da trovare.

Se l’utente deve cercarli troppo, si fida meno.

Pensare solo alla homepage

In un e-commerce molte persone arrivano direttamente da Google, social o ads su una categoria o su una scheda prodotto.

Ogni pagina importante deve funzionare anche da sola.

Workflow consigliato per costruire uno shop con GeneratePress e GenerateBlocks

Un buon metodo di lavoro potrebbe essere questo:

1. Installa WordPress
2. Installa GeneratePress
3. Installa GeneratePress Premium
4. Installa WooCommerce
5. Configura pagamenti, spedizioni e pagine base
6. Attiva il modulo WooCommerce di GeneratePress
7. Imposta layout globale, colori e tipografia
8. Crea categorie prodotto ordinate
9. Inserisci prodotti con immagini coerenti
10. Configura pagina shop e schede prodotto
11. Costruisci homepage con GenerateBlocks
12. Crea sezioni informative e CTA
13. Ottimizza mobile
14. Controlla carrello e checkout
15. Cura SEO di categorie e prodotti
16. Testa acquisto, email e conferma ordine
17. Ottimizza performance
18. Pubblica

Questo ordine evita molti problemi.

Prima struttura.
Poi contenuti.
Poi design.
Poi ottimizzazione.

Conclusione

Gestire WooCommerce con GeneratePress e GenerateBlocks significa lavorare in modo pulito: WooCommerce fa il negozio, GeneratePress dà solidità al tema, GenerateBlocks permette di costruire pagine e sezioni personalizzate senza appesantire inutilmente il sito.

La forza di questa combinazione non è creare effetti speciali. È creare un e-commerce ordinato, veloce, leggibile e facile da mantenere.

Per uno shop efficace non basta mettere online dei prodotti. Bisogna costruire un percorso: homepage chiara, categorie ordinate, schede prodotto complete, checkout semplice, testi rassicuranti, immagini coerenti e sezioni pensate per guidare l’utente.

GeneratePress e GenerateBlocks ti danno una base molto buona per farlo, soprattutto se vuoi evitare un sito troppo dipendente da page builder pesanti o plugin superflui.

Il punto vero è progettare ogni pagina con una domanda in testa: questa sezione aiuta davvero l’utente a capire, scegliere o acquistare?

Se la risposta è sì, quella sezione ha senso.
Se la risposta è no, probabilmente è solo rumore visivo.