Magari ti è capitato che apri una pagina prodotto del tuo store, guardi il risultato… e ti viene da dire: “Ok, funziona. Ma non vende”.

Hai l’immagine messa lì, il prezzo che non spicca, le varianti (taglia/colore) che sembrano “appiccicate” sotto, le recensioni buttate in fondo e, soprattutto, quella sensazione fastidiosa di stare usando un layout preconfezionato che non combacia col tuo brand.

Ecco qua il problema: WooCommerce di base è solido, ma i suoi template standard sono spesso rigidi. Con Divi 5, però, hai un pezzo di soluzione molto concreto: i Moduli Prodotto WooCommerce. Sono moduli “pronti” da usare nel Visual Builder che ti permettono di personalizzare le pagine prodotto WooCommerce con Divi 5 (e anche le categorie/archivi) senza dover dipendere da template fissi o da codice.

In pratica: costruisci pagine prodotto e pagine categoria su misura (immagini, prezzo, varianti, recensioni, prodotti correlati…) e le gestisci visivamente, con un controllo del layout più moderno grazie a Flexbox (cioè un sistema di impaginazione che ti fa decidere come i blocchi si allineano, si distanziano e “scendono” su mobile, senza scrivere CSS).

Cosa sono i Moduli Prodotto WooCommerce?

I Moduli Prodotto WooCommerce sono elementi specifici dentro Divi 5 pensati per costruire e personalizzare:

• le pagine singolo prodotto (quelle dove l’utente decide se acquistare);
• le pagine categoria e in generale gli archivi prodotto.

Il punto forte è che puoi sostituire i template “rigidi” inclusi di default in WooCommerce con layout progettati da te, senza perdere le funzioni base del negozio (prezzi, disponibilità, varianti, recensioni, ecc.).

Con Divi 5 sono arrivati 17 moduli WooCommerce dedicati a prodotti e categorie, ottimizzati per la nuova architettura di Divi 5 (quindi più efficienti e pronti a reggere bene anche uno store che cresce). Tradotto: prestazioni migliori, più scalabilità e meno dipendenza da soluzioni “legacy” (cioè vecchie/ereditate dal passato).

In più, sono in arrivo altri 8 moduli legati a carrello e checkout, utili per personalizzare anche le fasi finali dell’acquisto.

Funzionalità chiave dei Moduli Prodotto WooCommerce di Divi 5

Ecco cosa cambia davvero quando inizi a usare i Moduli Prodotto WooCommerce in Divi 5.

Set completo di moduli

Il primo gruppo di Moduli Prodotto WooCommerce di Divi 5 copre praticamente ogni pezzo della pagina prodotto e delle pagine categoria. I moduli disponibili sono:

• Breadcrumb Woo (Percorso di navigazione): mostra il percorso (es. Home > Categoria > Prodotto) per aiutare l’utente a orientarsi.
• Avviso Woo: mostra messaggi di sistema come aggiornamenti del carrello, errori o conferme.
• Aggiungi al carrello prodotto Woo: visualizza il pulsante Aggiungi al carrello con controlli opzionali per la quantità.
• Descrizione prodotto Woo: mostra la descrizione principale estesa del prodotto.
• Galleria prodotto Woo: visualizza immagini aggiuntive del prodotto in griglia o slider (cioè una galleria scorrevole).
• Immagini prodotto Woo: mostra l’immagine principale o una galleria immagini.
• Informazioni prodotto Woo: mostra dettagli come peso, dimensioni o attributi.
• Meta prodotto Woo: mostra SKU (codice prodotto), categorie e tag.
• Prezzo prodotto Woo: mostra il prezzo, inclusi i prezzi scontati.
• Valutazione prodotto Woo: mostra la media delle stelle e il numero di recensioni.
• Recensioni prodotto Woo: permette di vedere e inviare recensioni.
• Disponibilità prodotto Woo: indica disponibilità e livello di scorte.
• Schede prodotto Woo: mostra le schede standard (descrizione, info aggiuntive, recensioni).
• Titolo prodotto Woo: mostra il nome del prodotto come titolo personalizzabile.
• Upsell prodotto Woo: promuove prodotti “di fascia superiore” per aumentare il valore medio dell’ordine.
• Prodotti Woo: crea griglie prodotto personalizzabili per pagine categoria.
• Prodotti correlati Woo: mostra prodotti correlati in base a categorie o tag.

Mettendoli insieme, hai tutto quello che serve per costruire pagine complete: dalla navigazione fino ai blocchi dinamici che mostrano i prodotti.

Libertà creativa (senza impazzire)

I Moduli Prodotto WooCommerce di Divi 5 ti tolgono i vincoli dei template standard di WooCommerce. In pratica puoi decidere tu:

• la struttura della pagina (due colonne, tre colonne, sezioni, ecc.);
• l’ordine dei blocchi (es. prezzo sopra le recensioni, CTA subito visibile, ecc.);
• lo stile (spaziature, colori, font, pulsanti) coerente col brand.

I moduli supportano i contenuti dinamici, cioè “pescano” automaticamente i dati dal prodotto WooCommerce. Quindi prezzo, disponibilità, descrizioni e immagini si aggiornano in tempo reale, prodotto per prodotto. Risultato: pagine più orientate alla conversione, senza plugin extra e senza dover scrivere codice.

Opzioni di personalizzazione nel Visual Builder

Ogni modulo ha molte impostazioni di design nel Visual Builder (l’editor visuale di Divi dove modifichi la pagina vedendo subito il risultato): tipografia, colori, spaziature, bordi, animazioni, pulsanti, badge sconto e così via.

Esempi pratici:

• impostare la Galleria prodotto Woo come slider o griglia;
• stilizzare il pulsante Aggiungi al carrello con colori e stato hover (cioè l’effetto quando ci passi sopra col mouse) coerenti col sito;
• allineare la Valutazione prodotto (stelle e testo) in modo pulito nel layout.

Queste impostazioni ti aiutano a creare pagine negozio uniformi e riconoscibili, senza perderti in aggiustamenti manuali pagina per pagina.

Template dinamici con Theme Builder

Il Theme Builder di Divi 5 (cioè l’area dove crei modelli riutilizzabili per parti del sito, come prodotti e categorie) ti permette di costruire un template globale che si applica automaticamente a tutti i prodotti o a tutte le categorie.

Il vantaggio, qui, è molto concreto: modifichi una volta sola e l’aggiornamento si riflette su tutto lo store. Coerenza grafica + manutenzione più veloce.

Loop Builder per contenuti WooCommerce dinamici

Il Loop Builder di Divi 5 è un altro modo per costruire layout WooCommerce dinamici. È uno strumento che ti fa creare liste/griglie dinamiche partendo da una query (cioè una selezione: “mostrami i prodotti di questa categoria”, “mostrami gli ultimi 8 prodotti”, ecc.).

Con il Loop Builder puoi costruire archivi e collezioni con più libertà (liste, layout personalizzati, caroselli) usando qualsiasi elemento Divi, non solo i moduli dedicati al singolo prodotto.

Regola pratica: per la pagina singolo prodotto usa i Moduli Prodotto WooCommerce; per collezioni, categorie e archivi valuta il Loop Builder.

Come usare i Moduli Prodotto WooCommerce di Divi 5

Sotto trovi un flusso concreto per creare una pagina prodotto con Theme Builder usando i nuovi moduli WooCommerce.

Crea un nuovo template nel Theme Builder

Vai in Divi > Theme Builder nella bacheca WordPress. Clicca + Aggiungi nuovo template.

Quando si apre la finestra, clicca Crea nuovo template.

Ora assegna il template ai prodotti: sotto Prodotti seleziona Tutti i prodotti.

Clicca Crea template.

Clicca Aggiungi corpo personalizzato per costruire il corpo della pagina prodotto.

Quando compare la finestra, scegli Crea corpo personalizzato.

Costruisci il template prodotto

Quando si apre il Theme Builder, puoi partire da zero, scegliere un layout pronto o usare l’AI. Qui scegliamo Costruisci da zero.

Clicca l’icona + verde per aggiungere una nuova riga.

Quando compaiono le opzioni, scegli la riga a due colonne. In Divi 5 le nuove righe usano Flexbox di default (quindi puoi gestire allineamenti e riordino dei blocchi in modo più intelligente, soprattutto su tablet e smartphone).

Scorri fino a vedere l’opzione Moduli Prodotto Woo. Una volta aperta, trovi 17 moduli Woo per Divi 5 e 8 moduli legacy (cioè ereditati da Divi 4).

Aggiungi il modulo Immagini prodotto Woo

Seleziona il modulo Immagini prodotto Woo e inseriscilo nella prima colonna.

Nel campo Prodotto della scheda Contenuto è selezionato di default Questo articolo. Se vuoi costruire il template usando un prodotto esistente (utile per l’anteprima), selezionalo dal menu a tendina. Poi, prima di salvare definitivamente, rimetti Questo articolo così il template funziona per tutti i prodotti.

Apri il menu a tendina Elementi per vedere le impostazioni. Qui decidi cosa mostrare: immagine in evidenza, immagini galleria e badge sconto.

Nella scheda Design, apri il menu Immagine: puoi forzare la larghezza piena, aggiungere bordo e ombra, regolare spaziature o applicare filtri.

Puoi anche stilizzare il Badge sconto (la classica etichetta “In saldo”) con colore di sfondo, testo, bordi e altro.

Aggiungi il modulo Titolo prodotto Woo

Nella seconda colonna, clicca Moduli Prodotto Woo e seleziona il modulo Titolo prodotto Woo.

Nel campo Prodotto della scheda Contenuto, puoi scegliere un prodotto dal menu a tendina per vedere l’anteprima nel template.

Poi vai nella scheda Design e apri Testo titolo: qui imposti font e stile dell’intestazione.

Aggiungi il modulo Prezzo prodotto Woo

Sotto il titolo, aggiungi un nuovo modulo e seleziona Prezzo prodotto Woo.

Nella scheda Design puoi personalizzare ogni parte del prezzo: testo, testo “in saldo”, nuovo prezzo e altro.

Aggiungi il modulo Valutazione prodotto Woo

Ora aggiungi il modulo Valutazione prodotto Woo sotto il modulo prezzo.

Nella scheda Contenuto, sotto Elementi, puoi mostrare o nascondere le stelle e il conteggio delle recensioni.

Nella scheda Design, il menu Layout ti consente di scegliere come visualizzare le stelle: in linea o in colonna.

Puoi anche gestire colore, dimensione e spaziatura delle stelle, oltre allo stile del testo della valutazione.

Aggiungi il modulo Descrizione prodotto Woo

Sotto la valutazione, aggiungi il modulo Descrizione prodotto Woo. Nella scheda Contenuto scegli quale descrizione mostrare (descrizione estesa o descrizione breve).

Nella scheda Design puoi stilizzare testo e tipografia: peso, stile, allineamento, colore, dimensione e altro.

Aggiungi il modulo Aggiungi al carrello prodotto Woo

Ora inserisci il modulo Aggiungi al carrello prodotto Woo. È quello che consente al cliente di aggiungere il prodotto al carrello e selezionare eventuali varianti (taglia, colore, ecc.).

Nella scheda Contenuto, i toggle Elementi ti permettono di mostrare o nascondere quantità e disponibilità.

Nota veloce: per vedere la quantità disponibile, nel prodotto WooCommerce devi attivare la gestione magazzino (cioè l’opzione che traccia quante unità hai a stock).

Nella scheda Design puoi personalizzare etichette, testo, menu a tendina (per le varianti) e pulsante, così da allinearli al tuo stile.

Puoi continuare aggiungendo, ad esempio, il modulo Meta prodotto Woo per mostrare SKU e categorie.

Puoi anche inserire il modulo Schede prodotto Woo per visualizzare descrizione, recensioni e informazioni aggiuntive.

Per aumentare le possibilità di vendita, aggiungi i Prodotti correlati nel template: aiuta gli utenti a scoprire alternative e articoli complementari.

Salvare il template

Quando hai finito di aggiungere e sistemare i moduli, salva cliccando Salva in alto a destra nel Theme Builder.

Poi clicca Esci per tornare alla schermata del Theme Builder.

Nella dashboard del Theme Builder, clicca Salva modifiche per applicare il template a tutti i prodotti.

Come vedi, creare un template prodotto con i Moduli Prodotto WooCommerce di Divi 5 è abbastanza lineare. Anche senza usare tutti i moduli, puoi costruire pagine prodotto e categorie più complete e più ingaggianti rispetto ai layout standard.

Esempi pratici (step by step) per usare meglio i Moduli Prodotto WooCommerce

Qui sotto trovi 3 casi reali tipici. Roba da “vita vera”: freelance, piccoli ecommerce, aziende con cataloghi grandi. Tutto senza mettersi a sviluppare.

Esempio 1: freelance che vende un servizio “a pacchetti” (prodotto semplice)

Scenario: sei un freelance (consulente, designer, fotografo) e vendi un pacchetto “Start / Pro / Premium” come prodotto semplice WooCommerce.

Obiettivo: una pagina pulita, con focus su valore e CTA (chiamata all’azione).

• Colonna sinistra: Immagini prodotto Woo (anche una sola immagine, ma grande e ben leggibile).
• Colonna destra: Titolo prodotto Woo + Prezzo prodotto Woo + Valutazione prodotto Woo (se usi recensioni) + Descrizione prodotto Woo (usa la descrizione breve per non allungare troppo).
• Sotto: Aggiungi al carrello prodotto Woo con stile pulsante ben visibile.
• Extra: aggiungi Meta prodotto Woo solo se davvero utile (es. categoria “Consulenze”).

Esempio 2: piccolo ecommerce di nicchia (varianti e disponibilità)

Scenario: micro-ecommerce artigianale (ceramiche, skincare, stampe) con prodotti a varianti e disponibilità che cambia spesso.

Obiettivo: ridurre i dubbi prima dell’acquisto e rendere chiarissime varianti e stock.

• Inserisci Aggiungi al carrello prodotto Woo e abilita la visualizzazione della quantità.
• Nel prodotto WooCommerce attiva la gestione magazzino così il modulo può mostrare la disponibilità (utile per edizioni limitate o artigianato).
• Vicino al prezzo, aggiungi Disponibilità prodotto Woo per rendere immediato “Disponibile / Esaurito”.
• Sotto, usa Schede prodotto Woo per separare bene: descrizione, info tecniche, recensioni.

Esempio 3: agenzia/PMI con molti prodotti (standardizzazione veloce)

Scenario: agenzia o PMI con catalogo ampio: tante schede prodotto, tante categorie, più persone che mettono mano ai contenuti.

Obiettivo: un template unico, coerente e facile da mantenere.

• Nel Theme Builder assegna il template a Tutti i prodotti.
• Costruisci una struttura base: immagini a sinistra, info a destra, schede sotto.
• Inserisci in fondo Prodotti correlati Woo e/o Upsell prodotto Woo per aumentare il valore medio dell’ordine.
• Se vuoi una pagina categoria più “editoriale”, usa il Loop Builder (per creare griglie dinamiche personalizzate) e mantieni i Moduli Prodotto WooCommerce per il singolo prodotto.

Cosa aspettarsi dall’integrazione WooCommerce in Divi 5

La parte dedicata a carrello e checkout dovrebbe completarsi con l’arrivo degli altri moduli specifici. Quando saranno disponibili, avrai più controllo anche sulle pagine più delicate del funnel (carrello e pagamento), dove spesso si perdono conversioni per layout confusi o poco chiari.

Intanto Divi 5 sta portando anche strumenti utili per l’ecommerce, come:

• un modulo per caroselli di gruppo (utile per slider prodotto);
• il modulo Lottie (animazioni leggere: se usate con criterio, non per “fare scena”);
• un sistema Flexbox più potente per gestire layout moderni.

Conclusioni

I Moduli Prodotto WooCommerce di Divi 5 ti permettono di creare pagine prodotto e pagine categoria su misura, dinamiche e coerenti col tuo brand, senza dipendere dai template standard di WooCommerce.

La strada più sensata è questa:

• crei un template nel Theme Builder;
• imposti una struttura base chiara (immagini, info, CTA, schede);
• poi affini guardando cosa aiuta davvero l’utente a scegliere e acquistare (non solo cosa “è bello”).

Se ti incastri su impostazioni, logiche di template o strategia delle pagine (cosa mostrare, in che ordine, con che priorità), ha senso confrontarsi con uno sviluppatore Divi di fiducia: spesso bastano pochi aggiustamenti “giusti” per alzare qualità e conversioni.

Questo articolo è stato tradotto e riscritto partendo da questo articolo su Elegant Themes