WooCommerce Blocks aiuta a creare pagine del negozio personalizzate, a mettere in evidenza i prodotti e ad aggiungere funzionalità avanzate di ecommerce come filtri e ricerche, il tutto senza scrivere una sola riga di codice.
Molti blocchi vengono forniti di default con WooCommerce, ma alcuni nuovi blocchi no. Potete però utilizzare questi nuovi blocchi nel vostro negozio WooCommerce installando il plugin WooCommerce Blocks WordPress. Questo plugin è un terreno di prova per le offerte sperimentali e le potenziali aggiunte future ai blocchi WooCommerce di base.
Integrare WooCommerce Blocks in WordPress è semplice con Kinsta; infatti, potrete includere WooCommerce durante il processo di configurazione selezionando una casella. Questa integrazione facilita la creazione di un negozio online rendendola rapida e semplice.
Questa guida pratica spiega come aggiungere le funzionalità di WooCommerce al proprio sito WordPress utilizzando WooCommerce Blocks.
Prerequisiti
Per seguire questa guida, è necessario avere:
- WooCommerce installato e attivato nella bacheca di WordPress
- Dimestichezza con WordPress
Se non avete già un sito WordPress, potete creare un sito WordPress con la dashboard di Kinsta o tramite DevKinsta in locale. Una volta creato il sito, importate questi prodotti di esempio nel vostro negozio WooCommerce.
WooCommerce Blocks
L’editor di blocchi predefinito di WordPress, introdotto con la versione 5.0, è l’editor Gutenberg. Ha sostituito l’editor classico con un sistema a blocchi, consentendo agli utenti di creare e personalizzare contenuti visivamente accattivanti senza dover avere conoscenze approfondite di codifica.
WooCommerce Blocks si integra perfettamente con l’intuitiva interfaccia drag-and-drop dell’editor Gutenberg, offrendo una serie di blocchi dedicati alla visualizzazione dei prodotti, alla gestione del carrello, ai processi di pagamento e altro ancora.
Questa integrazione permette di sfruttare appieno la flessibilità e la semplicità dell’editor di blocchi, adattando al contempo il vostro sito WordPress per ottenere prestazioni ecommerce ottimali.
Per utilizzare i blocchi WooCommerce, aprite o create una pagina o un post. Cliccate sul pulsante + nella barra in alto per visualizzare tutti i blocchi, quindi andate alla sezione WOOCOMMERCE. Ecco una breve panoramica dei diversi blocchi:
- Product Search: aggiunge una barra di ricerca per una rapida ricerca dei prodotti da parte dei clienti.
- All Products: mostra tutti i prodotti del negozio in una griglia.
- All Reviews: elenca tutte le recensioni dei prodotti.
- Classic Checkout: mostra il classico shortcode per il checkout.
- Classic Cart: mostra il classico shortcode del carrello.
- Customer Account: abilita le funzionalità di login e logout del cliente.
- Featured Category : mette in evidenza una categoria di prodotti e una call-to-action (CTA) per incoraggiare le risposte immediate.
- Featured Product: evidenzia un prodotto o una variante e una CTA.
- Active Filters: mostra i filtri attualmente attivi.
- Filter by Price: mostra una fascia di prezzo che i clienti possono utilizzare per filtrare i prodotti.
- Filter by Stock: permette di filtrare i prodotti in base allo stato delle giacenze.
- Filter by Attribute: filtra i prodotti in base ad attributi come la taglia o il colore.
- Filter by Rating: permette ai clienti di filtrare i prodotti in base alla loro valutazione.
- Hand-Picked Products: mostra una selezione di prodotti scelti a mano in una griglia.
- Mini Cart: fornisce un pulsante per la visualizzazione rapida del carrello.
- Store Notices: mostra le notifiche per i clienti generate da WooCommerce o da altre estensioni.
- Best Selling Products: mostra una griglia con i prodotti più venduti del negozio.
- Products Categories List: mostra tutte le categorie di prodotti come un elenco o un menu a tendina.
- Products by Category: mostra una griglia di prodotti delle categorie selezionate.
- Product Collection (Beta): mostra i prodotti di una determinata collezione.
- Newest Products: mostra i prodotti più recenti in una griglia.
- On Sale Products: mostra gli articoli in vendita in una griglia.
- Products by Tag: mostra i prodotti con il tag selezionato in una griglia.
- Top Rated Products: mostra i prodotti con recensioni più alte in una griglia.
- Products by Attribute: mostra i prodotti con gli attributi selezionati in una griglia.
- Reviews by Category: mostra le recensioni dei prodotti delle categorie specificate.
- Reviews by Product: mostra le recensioni organizzate per prodotto.
- Single Product: mostra un singolo prodotto.
- Cart: mostra il carrello.
- Checkout: mostra il modulo che permette ai clienti di inviare gli ordini.
Ora sapete cosa rappresenta ogni blocco. Utilizzeremo alcuni di questi blocchi per creare un’esperienza di e-commerce.
Utilizzare il blocco Product Grid in WooCommerce
Il blocco Product Grid, o griglia prodotti, è uno strumento versatile per mostrare i prodotti del vostro negozio in un formato organizzato e a griglia sul vostro sito WordPress. Ecco come aggiungere e personalizzare un blocco griglia prodotti:
- Andate alla pagina o al post in cui volete mostrare i prodotti. Assegnate un titolo come “Products” o “Prodotti”.
- Cliccate sul pulsante + nella barra di navigazione superiore per visualizzare tutti i blocchi. Scorrete fino alla sezione WOOCOMMERCE e selezionate All Products. Questa azione mostra i vostri prodotti in un layout a griglia sulla pagina.
Utilizzo del blocco All Products di WooCommerce per visualizzare i prodotti in una griglia. - Per configurare questo blocco, utilizzate il pannello delle impostazioni del blocco sul lato destro. Potete accedere alle impostazioni cliccando sull’icona Impostazioni (la seconda icona più a destra nella barra di navigazione superiore).
Pannello delle impostazioni per regolare il blocco All Products. Qui potete personalizzare il layout, il contenuto e lo stile della griglia:
- Layout Settings: permette di regolare il numero di righe e colonne. Ad esempio, impostate entrambi su 2 per ottenere un aspetto equilibrato.
- Content Settings: decidete se includere un menu a tendina di ordinamento per i clienti. Questa funzione permette ai clienti di ordinare i prodotti in un ordine prestabilito. Se preferite, potete disabilitarla.
- Advanced Styling: se necessario, potete aggiungere delle classi CSS per uno stile più sofisticato.
- Visualizzate l’anteprima della pagina una volta finalizzate le configurazioni per assicurarvi che tutto appaia come previsto. Poi, cliccate sul pulsante Pubblica. Questo passaggio permette di rendere la pagina accessibile pubblicamente, privatamente o con protezione tramite password, in base alle vostre preferenze.
La pagina aggiornata dei Prodotti mostra i prodotti in una griglia 2 per 2 con una barra di navigazione.
Aggiungere un blocco Featured Product a una pagina o a un post
Il blocco Featured Product permette di mettere in evidenza un prodotto in una pagina o in un vostro post. Potete selezionare un prodotto, personalizzarne le impostazioni di visualizzazione e aggiungerlo al vostro contenuto per attirare l’attenzione su un particolare articolo che volete mettere in evidenza.
Seguite questi passaggi per aggiungere un blocco Featured Product:
- Iniziate navigando verso la pagina o il post in cui volete inserire il prodotto. Immaginate di stare progettando una griglia di prodotti e di voler posizionare il prodotto in evidenza in alto. Create uno spazio in quella posizione e noterete un pulsante + sulla sinistra.
In alternativa, se avete un blocco esistente vicino al punto desiderato, cliccate sui tre punti verticali per far apparire un menu. Potete scegliere se aggiungerlo prima, Add before, o dopo, Add after.
Aggiunta del blocco Featured Product prima del blocco All Products. - Selezionate il pulsante + nella barra di navigazione superiore per visualizzare tutti i blocchi e cercate Featured Product.
Selezionare un prodotto come prodotto in primo piano con il blocco Featured Product. - Scegliete il prodotto che volete mettere in evidenza. Poi, cliccate su Done.
- Per dare al blocco Featured Product un aspetto unico, cliccate su Settings. Dal pannello delle impostazioni del blocco, potrete:
- Decidere se mostrare la descrizione e il prezzo del prodotto.
- Configurare la visualizzazione dei media (immagini e video).
- Specificare il testo alt per l’immagine del prodotto.
- Scegliere il colore di sovrapposizione del blocco.
- Regolare l’opacità del blocco.
Regolazione delle impostazioni del blocco Featured Product. - Dopo aver effettuato tutte le regolazioni necessarie, potete pubblicare la pagina o aggiornarla se è già attiva. In questo modo potrete vedere il blocco in azione e assicurarvi che abbia l’aspetto che desiderate.
Anteprima della pagina prodotti aggiornata che mostra il berretto in evidenza sopra la griglia dei prodotti.
Utilizzare i blocchi filtro in WooCommerce
I blocchi filtro consentono ai clienti di affinare la ricerca dei prodotti in base a criteri specifici, aiutandoli a trovare rapidamente i prodotti che corrispondono alle loro preferenze o esigenze.
- Andate alla pagina o al post in cui volete aggiungere i blocchi. Questa guida utilizza la stessa pagina Products dei passi precedenti.
- Scegliete dove aggiungere i filtri.
- Cliccate sul pulsante + nella barra di navigazione superiore per visualizzare tutti i blocchi. Scorrete verso il basso fino alla sezione WOOCOMMERCE e troverete un’opzione di filtro per prezzo, giacenza, attributo e valutazione. Ad esempio, scegliete Filter by Price per filtrare per prezzo.
Aggiunta del blocco Filter by Price
Selezionando questo blocco, potete visualizzare una barra di prezzi che permette agli utenti di filtrare i prodotti che appaiono nella pagina in base alla fascia di prezzo desiderata. Potete personalizzare le impostazioni del blocco nel pannello di destra in base alle vostre esigenze.
Aggiunta del blocco Filter by Attribute
Potete anche utilizzare il blocco Filter by Attribute.
Potete scegliere un attributo specifico, come ad esempio il Colore, e poi configurare le impostazioni di conseguenza. Ad esempio, potete attivare la funzione Display product count per mostrare il numero di prodotti disponibili in ciascun colore.
Potete quindi visualizzare la pagina live e testare la funzionalità dei pulsanti di filtro.
Seguendo questi passaggi, potrete offrire ai vostri clienti un’esperienza d’acquisto senza interruzioni, consentendo loro di affinare facilmente la ricerca dei prodotti in base a vari criteri, migliorando la loro soddisfazione e aiutandoli a trovare i prodotti desiderati.
Pagine del carrello e del checkout
Le funzionalità del carrello e del checkout del vostro negozio web devono essere intuitive e perfettamente funzionanti per garantire un’esperienza d’acquisto fluida. Per garantire un’eccellente esperienza al cliente è necessario gestire in modo efficace gli articoli del carrello e facilitare il processo di checkout.
WooCommerce crea le pagine del carrello e del checkout in modo predefinito utilizzando i blocchi appropriati. I clienti possono aggiungere prodotti al carrello e accedervi attraverso la barra di navigazione.
Dopo aver confermato il contenuto del carrello, il cliente può fare clic sul pulsante Procedi al Checkout, compilare i dati necessari ed effettuare l’ordine.
Come creare una pagina del negozio personalizzata
Ora che abbiamo imparato a utilizzare alcuni blocchi di WooCommerce, il passo successivo consiste nel combinarli per creare una pagina del negozio personalizzata e facile da usare con i seguenti blocchi:
- Product Search
- Filter by Price
- Product Categories
- Featured Product
- All Products
Per creare questo layout personalizzato del negozio, create una nuova pagina e seguite questi passaggi.
- Inserite “Shop” o “Negozio” come titolo della pagina.
La pagina del Negozio in modalità di modifica. - Utilizzando gli stessi passaggi di prima per aggiungere un blocco, aggiungete il blocco Product Search. Non applicate alcuna configurazione.
Aggiunta del blocco Product Search. - Aggiungete il blocco Product Categories List.
Aggiungere il blocco Product Categories List. Nella pagina di impostazione del blocco, impostate DISPLAY STYLE su Dropdown.
Regolazione delle impostazioni del blocco Product Categories List. - Successivamente, aggiungete il blocco Filter by Price. Non configurate nulla per questo blocco.
- Aggiungete il blocco Featured Product e selezionate il prodotto da visualizzare. Applicate le stesse configurazioni del blocco Featured Product che abbiamo realizzato in precedenza.
La pagina del negozio mostra il prodotto cappello con alcune impostazioni per il prodotto in primo piano. - Aggiungete il blocco All Products.
Aggiunta del blocco All Products. Per quanto riguarda le impostazioni di questo blocco, impostate i valori COLUMNS e ROWS su 2 e deselezionate la voce Show Sorting Dropdown.
Regolare le impostazioni del blocco All Products. - Pubblicate la pagina e controllate il risultato.
Anteprima della pagina del negozio. 
Anteprima della pagina del Negozio.
Come monitorare e analizzare le prestazioni dei blocchi
I solidi strumenti di Kinsta monitorano e analizzano le prestazioni delle pagine che utilizzano i blocchi WooCommerce.
Strumento APM di Kinsta
Lo strumento APM (Application Performance Monitoring) di Kinsta permette di monitorare le prestazioni delle pagine che contengono i blocchi WooCommerce. Cattura informazioni con data e ora sui processi PHP, sulle query del database MySQL e su altre metriche cruciali, consentendo di monitorare e analizzare le transazioni facilitate da WooCommerce.
Ad esempio, potete analizzare la durata e la frequenza delle interazioni e i potenziali colli di bottiglia associati a queste pagine. Grazie a queste informazioni, potrete risolvere con precisione i problemi e ottimizzare le prestazioni.
Lo strumento di analisi di Kinsta
Valutare l’impatto dei blocchi WooCommerce sul coinvolgimento degli utenti e sulle vendite richiede un approccio multiforme. Gli strumenti di analisi completi di Kinsta giocano un ruolo fondamentale in questo senso. L’utilizzo delle funzioni di analisi di WordPress all’interno della dashboard di MyKinsta offre preziose informazioni su diverse metriche di performance che influenzano direttamente l’esperienza degli utenti e, di conseguenza, le vendite.
- La sezione Risorse della dashboard di MyKinsta tiene traccia delle visite totali del vostro sito, dello spazio su disco e dell’utilizzo della larghezza di banda. Fornisce una panoramica quantitativa del traffico del sito e dell’utilizzo delle risorse.
- La sezione Prestazioni include metriche come il tempo medio di risposta di PHP + MySQL e l’utilizzo di AJAX. Queste statistiche aiutano a monitorare la reattività e l’interattività delle pagine che utilizzano i blocchi WooCommerce.
- La sezione Risposta fornisce la suddivisione dei codici di risposta e l’analisi degli errori, aiutandovi a comprendere meglio le interazioni degli utenti e i potenziali ostacoli che possono incontrare.
- Le sezione Geo & IP, Utilizzo CDN e Cache permettono di monitorare le informazioni geografiche, l’utilizzo della rete di distribuzione dei contenuti (CDN) e l’efficienza della cache. Queste informazioni vi aiutano a perfezionare il vostro sito in base al comportamento degli utenti, alla loro posizione e ai dati sulle prestazioni.
Monitorando attentamente queste analisi, potete identificare i potenziali colli di bottiglia e ottimizzare le vostre pagine utilizzando WooCommerce Blocks per garantire un’esperienza utente fluida e coinvolgente.
Potete leggere la nostra guida definitiva sui 18 modi per velocizzare un negozio WooCommerce per scoprire altri suggerimenti. La velocità è fondamentale per i negozi online, poiché i siti che si caricano lentamente causano frustrazione negli utenti e, di conseguenza, perdita di profitto.
Riepilogo
Questa guida ha esplorato le funzionalità di WooCommerce Blocks, dall’aggiunta di griglie di prodotti e prodotti in primo piano all’implementazione di potenti blocchi di filtri. Ha inoltre illustrato l’importanza dei box del carrello e del checkout, elementi fondamentali per guidare i clienti in un’esperienza di acquisto ottimale.
La combinazione strategica dei vari blocchi di WooCommerce permette di creare un layout intuitivo e visivamente accattivante. Il processo prevede un’attenta selezione, configurazione e disposizione dei blocchi per soddisfare le funzionalità specifiche e le preferenze dei clienti.
Scegliere il servizio di hosting WordPress di Kinsta migliora notevolmente le prestazioni e l’affidabilità dei vostri siti WooCommerce. Grazie alle configurazioni ottimizzate dei server, alle solide misure di sicurezza e alla scalabilità senza soluzione di continuità, Kinsta garantisce che il vostro negozio online operi al massimo dell’efficienza.
Se utilizzate i blocchi WooCommerce per la visualizzazione dei prodotti, i filtri o le funzionalità del carrello, l’infrastruttura di hosting di Kinsta offre la velocità e la stabilità necessarie per offrire un’esperienza di acquisto eccezionale ai vostri clienti.
Avete già avuto modo di utilizzare i blocchi di WooCommerce? Se sì, qual è il vostro blocco preferito e quale nuovo blocco vorreste vedere aggiunto? Condividete ciò che pensate con noi nella sezione commenti.
Lascia un commento