WooCommerce Blocks e il Nuovo Editor Gutenberg per E-Commerce

Se hai utilizzato WooCommerce negli ultimi anni, avrai sicuramente notato un cambiamento radicale nell’approccio alla costruzione delle pagine del tuo negozio online. L’era degli shortcode come [woocommerce_cart] e [woocommerce_checkout] sta lasciando il posto a una nuova generazione di strumenti: i WooCommerce Blocks. Integrati nativamente nell’editor Gutenberg di WordPress, questi blocchi offrono un controllo visuale senza precedenti sulla presentazione dei tuoi prodotti, sul carrello e sull’intero processo di checkout.

In questa guida completa esploreremo tutti i blocchi WooCommerce disponibili, confronteremo il vecchio approccio basato su shortcode con il nuovo sistema a blocchi, e vedremo come sfruttare al meglio queste funzionalità per creare pagine e-commerce professionali, performanti e completamente personalizzabili.

Cosa Sono i WooCommerce Blocks

I WooCommerce Blocks sono componenti visivi che si inseriscono direttamente nell’editor a blocchi di WordPress (Gutenberg). A differenza degli shortcode, che producono un output statico e richiedono parametri testuali, i blocchi offrono un’anteprima in tempo reale del risultato finale, con opzioni di configurazione accessibili tramite pannelli laterali intuitivi.

Quando WooCommerce viene installato su un sito WordPress moderno, registra automaticamente decine di blocchi specifici per l’e-commerce. Questi blocchi coprono ogni aspetto del negozio online: dalla presentazione dei prodotti ai filtri di ricerca, dal carrello al checkout, fino alla gestione dell’account cliente.

Tutti i Blocchi WooCommerce Disponibili

Vediamo nel dettaglio ogni blocco offerto da WooCommerce, suddiviso per categoria funzionale.

Blocchi per la Presentazione dei Prodotti

All Products (Tutti i Prodotti) è il blocco più versatile per mostrare il catalogo completo. Consente di visualizzare tutti i prodotti del negozio con una griglia personalizzabile: puoi scegliere il numero di colonne e righe, l’ordinamento predefinito (per popolarità, prezzo, data, valutazione) e persino personalizzare il layout interno di ogni scheda prodotto tramite un editor dedicato. A differenza del vecchio shortcode [products], questo blocco supporta l’impaginazione lato client senza ricaricare la pagina.

Product Grid (Griglia Prodotti) comprende in realtà diversi blocchi correlati: Best Sellers, Newest Products, Top Rated Products, On Sale Products e Hand-picked Products. Ognuno di questi blocchi genera una griglia filtrata automaticamente in base a criteri specifici. Il blocco Hand-picked Products è particolarmente utile perché permette di selezionare manualmente i prodotti da mostrare, ideale per landing page promozionali o sezioni curate della homepage.

Featured Product (Prodotto in Evidenza) crea un banner a tutta larghezza con immagine di sfondo, titolo, descrizione e pulsante di acquisto per un singolo prodotto. È perfetto per mettere in risalto un prodotto di punta, una novità o un’offerta speciale. Puoi regolare l’opacità dell’overlay, l’allineamento del testo e il colore dell’overlay direttamente dall’editor.

Featured Category (Categoria in Evidenza) funziona in modo analogo al Featured Product, ma per le categorie. Mostra l’immagine della categoria come sfondo con un pulsante che porta alla pagina di archivio corrispondente. È un blocco eccellente per guidare la navigazione dell’utente verso sezioni specifiche del catalogo.

Product Categories List (Lista Categorie Prodotto) genera un elenco o una griglia di tutte le categorie del negozio. Puoi scegliere tra visualizzazione a lista o a griglia, mostrare o nascondere le categorie vuote, visualizzare il conteggio dei prodotti e decidere se includere le sottocategorie in modo gerarchico.

Blocchi per la Ricerca e i Filtri

Product Search (Ricerca Prodotto) inserisce un campo di ricerca dedicato ai prodotti. A differenza del widget di ricerca standard di WordPress, questo blocco è ottimizzato per cercare esclusivamente tra i prodotti WooCommerce, migliorando la pertinenza dei risultati.

Active Filters (Filtri Attivi) mostra un riepilogo di tutti i filtri attualmente applicati dall’utente, con la possibilità di rimuoverli singolarmente o tutti insieme con un clic. È un elemento essenziale per l’usabilità: senza questo blocco, l’utente potrebbe non rendersi conto di avere filtri attivi che limitano i risultati.

Price Filter (Filtro Prezzo) aggiunge uno slider interattivo che permette ai visitatori di filtrare i prodotti per fascia di prezzo. L’intervallo si adatta automaticamente ai prezzi presenti nel catalogo e il filtro si applica in tempo reale senza ricaricare la pagina.

Attribute Filter (Filtro Attributo) consente di filtrare i prodotti in base agli attributi personalizzati come colore, taglia, materiale o qualsiasi altro attributo definito nel tuo negozio. Puoi scegliere tra visualizzazione a checkbox, dropdown o chip, e decidere se applicare la logica AND oppure OR tra i valori selezionati.

Stock Filter (Filtro Disponibilità) permette ai clienti di filtrare i prodotti in base allo stato di magazzino: disponibili, esauriti o in prenotazione. È particolarmente utile per negozi con cataloghi ampi dove alcuni prodotti potrebbero temporaneamente non essere disponibili.

Blocchi per Carrello e Checkout

Cart Block (Blocco Carrello) è il sostituto moderno dello shortcode [woocommerce_cart]. Approfondiremo il confronto nella sezione dedicata più avanti.

Checkout Block (Blocco Checkout) rimpiazza lo shortcode [woocommerce_checkout] con un’esperienza di pagamento completamente rinnovata. Anche questo merita una sezione dedicata.

Mini Cart (Mini Carrello) aggiunge un’icona carrello compatta con il conteggio degli articoli e il totale, che al clic apre un pannello laterale con il riepilogo del carrello. È pensato per essere inserito nell’header del sito e funziona perfettamente con i template FSE (Full Site Editing).

Cart Block vs [woocommerce_cart]: Il Confronto Completo

Lo shortcode [woocommerce_cart] ha servito bene WooCommerce per anni, ma il nuovo Cart Block rappresenta un salto qualitativo significativo. Ecco le differenze principali.

Con lo shortcode classico, la pagina del carrello era un blocco monolitico: non potevi modificare il layout, aggiungere elementi personalizzati tra le sezioni o cambiare l’ordine degli elementi. Il Cart Block, invece, è composto da inner blocks (blocchi interni) completamente riorganizzabili. Puoi spostare il riepilogo degli articoli, i totali, il campo coupon e il pulsante di checkout in qualsiasi posizione. Puoi persino aggiungere blocchi WordPress standard come paragrafi, immagini o avvisi tra le sezioni del carrello.

Il Cart Block supporta nativamente il calcolo delle spese di spedizione direttamente nella pagina del carrello, con un selettore del paese e del codice postale integrato. Con lo shortcode classico, questa funzionalità richiedeva configurazioni aggiuntive o plugin di terze parti.

Dal punto di vista delle prestazioni, il Cart Block utilizza l’API Store di WooCommerce (basata su REST API ottimizzate) per aggiornare i dati del carrello senza ricaricare l’intera pagina. Aggiungere un coupon, modificare le quantità o rimuovere un articolo avviene in modo fluido e istantaneo.

Checkout Block vs [woocommerce_checkout]: Estensibilità Senza Precedenti

Il Checkout Block è forse il cambiamento più significativo introdotto dai WooCommerce Blocks. Lo shortcode [woocommerce_checkout] generava un form di checkout rigido, personalizzabile solo tramite hook PHP (woocommerce_before_checkout_billing_form, woocommerce_after_order_notes, ecc.) e template override. Ogni modifica richiedeva codice e competenze di sviluppo.

Il nuovo Checkout Block cambia completamente paradigma. L’intero processo di checkout è suddiviso in inner blocks indipendenti:

• Contact Information — email e opzione di creazione account
• Shipping Address — form indirizzo di spedizione
• Billing Address — form indirizzo di fatturazione (con opzione “uguale alla spedizione”)
• Shipping Methods — selezione del metodo di spedizione
• Payment Methods — gateway di pagamento disponibili
• Order Notes — note sull’ordine
• Order Summary — riepilogo degli articoli
• Order Totals — subtotale, spedizione, tasse, totale
• Terms and Conditions — checkbox termini e condizioni
• Place Order Button — pulsante di conferma ordine

Ogni inner block può essere spostato, rimosso o configurato individualmente. Vuoi che l’indirizzo di fatturazione appaia prima di quello di spedizione? Basta trascinarlo. Vuoi aggiungere un messaggio promozionale tra il riepilogo e il pulsante di pagamento? Inserisci un blocco paragrafo in quella posizione.

L’estensibilità per gli sviluppatori è altrettanto potente. WooCommerce offre un sistema di Checkout Extension API basato su JavaScript/React che permette ai plugin di registrare blocchi aggiuntivi in posizioni specifiche del checkout. I gateway di pagamento possono integrare i propri componenti React direttamente nel flusso di checkout, offrendo esperienze native come form di carta di credito inline o redirect intelligenti.

Creare Pagine Shop Personalizzate con i Blocchi

Una delle applicazioni più potenti dei WooCommerce Blocks è la creazione di pagine shop personalizzate che vanno oltre la semplice griglia di prodotti. Ecco alcuni esempi pratici.

Homepage E-Commerce

Puoi costruire una homepage accattivante combinando diversi blocchi: inizia con un Featured Product per il prodotto di punta, seguito da una riga di Featured Category per le categorie principali, poi un blocco On Sale Products per le offerte attive e infine un blocco Best Sellers per i prodotti più venduti. Il tutto senza scrivere una riga di codice e con anteprima visiva in tempo reale.

Landing Page Promozionale

Per una campagna promozionale, crea una pagina dedicata con un blocco Cover (blocco nativo WordPress) come hero section, seguito da Hand-picked Products con i prodotti in promozione, un blocco Price Filter per consentire la navigazione per fascia di prezzo e un blocco Featured Product in fondo per l’offerta principale.

Pagina Catalogo con Filtri Avanzati

Costruisci una pagina catalogo professionale affiancando una colonna di filtri (Price Filter + Attribute Filter per colore e taglia + Stock Filter + Active Filters) a una griglia All Products. Tutti i filtri lavorano in sincronia e aggiornano i risultati senza ricaricare la pagina.

Block Patterns per WooCommerce

WordPress 6.x ha introdotto i Block Patterns: layout predefiniti composti da combinazioni di blocchi pronti all’uso. WooCommerce include diversi pattern dedicati all’e-commerce che puoi inserire con un clic e poi personalizzare.

Tra i pattern più utili troviamo: Product Hero (hero section con prodotto in evidenza), Product Collection Banner (banner con griglia di prodotti curata), Discount Banner with Products (sezione promozionale con countdown e prodotti in offerta) e Social Media Follow (sezione social con link ai profili del negozio).

Puoi anche creare i tuoi pattern personalizzati. Componi un layout di blocchi WooCommerce che usi frequentemente, selezionali tutti nell’editor, clicca sui tre puntini e scegli “Crea pattern”. Il pattern sarà disponibile per tutte le pagine future, garantendo coerenza visiva in tutto il sito.

Vantaggi Prestazionali dei Blocchi

I WooCommerce Blocks non sono solo più belli e flessibili: sono anche più performanti degli shortcode. Ecco perché.

Rendering lato server ottimizzato. Gli shortcode vengono processati durante il rendering della pagina PHP, aggiungendo overhead a ogni caricamento. I blocchi, invece, generano HTML statico al momento del salvataggio della pagina, riducendo il lavoro del server. I blocchi dinamici (come All Products) utilizzano l’API Store che è ottimizzata con caching intelligente.

Lazy loading nativo. I blocchi prodotto supportano il lazy loading delle immagini integrato in WordPress, caricando le immagini solo quando entrano nel viewport dell’utente. Questo migliora significativamente il Largest Contentful Paint (LCP) e i Core Web Vitals.

JavaScript modulare. Mentre gli shortcode caricano tutti gli script WooCommerce frontend in ogni pagina, i blocchi utilizzano un sistema di code splitting che carica solo il JavaScript necessario per i blocchi effettivamente presenti nella pagina. Una pagina con un solo blocco Featured Product caricherà molto meno JavaScript rispetto a una pagina basata su shortcode.

Prefetch intelligente. I blocchi Carrello e Checkout implementano il prefetch delle risorse necessarie: quando l’utente aggiunge un prodotto al carrello, il browser inizia a scaricare in background gli script del checkout, rendendo la transizione quasi istantanea.

Migrazione dagli Shortcode ai Blocchi

Se il tuo negozio WooCommerce utilizza ancora gli shortcode classici, la migrazione ai blocchi è consigliata ma va affrontata con attenzione. Ecco una strategia passo-passo.

Fase 1: Inventario. Identifica tutte le pagine che utilizzano shortcode WooCommerce. Le più comuni sono la pagina Carrello ([woocommerce_cart]), la pagina Checkout ([woocommerce_checkout]), la pagina Account ([woocommerce_my_account]) e eventuali pagine con [products] o [product_page].

Fase 2: Test in staging. Non effettuare mai la migrazione direttamente in produzione. Crea un ambiente di staging, converti le pagine e testa ogni flusso: aggiunta al carrello, applicazione coupon, checkout con diversi metodi di pagamento, creazione account, ordini con spedizione.

Fase 3: Carrello e Checkout. WooCommerce stesso ti inviterà a convertire le pagine Carrello e Checkout ai blocchi tramite un avviso nella dashboard. Il processo è semiautomatico: apri la pagina, rimuovi lo shortcode e inserisci il blocco corrispondente. Verifica che tutti i gateway di pagamento funzionino con il nuovo Checkout Block, perché alcuni gateway meno recenti potrebbero non supportare ancora l’interfaccia React.

Fase 4: Pagine prodotto. Sostituisci gli shortcode [products] con i blocchi appropriati (All Products, Best Sellers, ecc.). Questa fase è generalmente priva di rischi poiché riguarda solo la presentazione.

Fase 5: Verifica plugin. Alcuni plugin WooCommerce aggiungono funzionalità al checkout tramite hook PHP che funzionano solo con lo shortcode classico. Verifica che tutti i tuoi plugin siano compatibili con i blocchi Checkout e Cart. Plugin come campi personalizzati al checkout, upsell nel carrello o modifiche al layout potrebbero necessitare di aggiornamenti.

Considerazioni sulla Compatibilità

È importante sapere che il blocco [woocommerce_my_account] non ha ancora un equivalente completo in formato blocco. La pagina Account continua a funzionare con lo shortcode classico, anche se WooCommerce sta lavorando a una versione a blocchi.

Inoltre, se utilizzi un page builder come Elementor o Divi, i WooCommerce Blocks potrebbero non integrarsi perfettamente con l’editor del page builder. In questo caso, continua a utilizzare i widget WooCommerce del tuo page builder per le pagine costruite con esso, e riserva i blocchi per le pagine gestite con l’editor nativo.

I WooCommerce Blocks rappresentano il futuro dell’e-commerce su WordPress. La combinazione di flessibilità visiva, prestazioni ottimizzate e estensibilità moderna li rende la scelta migliore per qualsiasi nuovo progetto e un aggiornamento consigliato per i negozi esistenti.

Se desideri assistenza nella migrazione del tuo negozio WooCommerce ai blocchi o nella creazione di un e-commerce moderno con le ultime funzionalità, contattaci per una consulenza personalizzata oppure scopri il nostro servizio di realizzazione e-commerce.