Una guida all'utilizzo dei blocchi Gutenberg per il tuo negozio WooCommerce

L'introduzione dell'editor Gutenberg in WordPress ha contribuito in larga misura a rimodellare l'identità di WordPress. Dall'essere un sistema di gestione dei contenuti di base con funzionalità per aggiungere media e, opzionalmente, plug-in per varie esigenze, ora è anche un editor WYSIWYG ricco e incentrato sui media e un generatore di pagine Web, senza compromettere la flessibilità sempre offerta. In effetti, i blocchi forniti da Gutenberg aumentano la flessibilità per creare pagine nel modo desiderato.

Il miglior vantaggio che Gutenberg offre rispetto all'editor precedente (chiamato anche editor TinyMCE) è che elimina la necessità di sapere come programmare o la necessità di comprendere la struttura di WordPress per sapere come aggiungere più funzionalità al tuo sito Web WordPress o WooCommerce negozio. Se, tuttavia, sei più a tuo agio con il vecchio editor di WordPress, puoi sempre installare questo plugin gratuito noto come Editor classico dai contributori di WordPress che ti dà la possibilità di disabilitare completamente Gutenberg o passare avanti e indietro tra il vecchio editor e Gutenberg . Gutenberg offre anche un blocco Editor classico per consentire agli utenti di utilizzare le funzionalità dell'editor classico all'interno di Gutenberg! Suona troppo bello per essere vero? Entriamo in questo post o meglio in una guida all'utilizzo dei blocchi Gutenberg per il tuo negozio WooCommerce!

È possibile accedere ai blocchi di Gutenberg tramite qualsiasi pagina di WordPress. Quando aggiungi una nuova pagina o modifichi una pagina esistente all'interno di WordPress, puoi vedere un simbolo "+" mentre passi con il mouse nell'area del contenuto in alto a sinistra dello schermo.

Esistono diversi tipi di blocchi che Gutenberg fornisce per diversi usi:

Sebbene i blocchi possano essere utilizzati per creare una varietà di pagine, come amministratore di WooCommerce o gestore del negozio, vorresti concentrarti maggiormente sulla pagina Home o Shop. Quindi, ai fini di questo tutorial, creiamo una home page per il tuo negozio progettata per aumentare le tue vendite! Utilizzeremo maggiormente i blocchi WooCommerce per questo. Questi blocchi facevano parte in precedenza di un plug-in di funzionalità di Automattic e sono stati uniti in WooCommerce versione 3.5.

I blocchi WooCommerce contengono diverse funzionalità o "blocchi" principalmente relativi alla visualizzazione dei prodotti sulla tua pagina, che puoi utilizzare per costruire il tuo negozio. Di seguito è riportato l'elenco dei blocchi disponibili sotto i blocchi WooCommerce:

• Prodotti per Categoria
• Prodotti più recenti
• Prodotto presentato
• I prodotti più venduti
• Prodotti in vendita
• Prodotti selezionati
• Prodotti più votati
• Prodotti per attributo

Iniziamo con l'aggiunta di un prodotto in evidenza nella parte superiore della nostra home page. Questo può essere qualsiasi prodotto che desideri mettere in evidenza per i tuoi utenti/pubblici.

Abbiamo aggiunto un prodotto noto come "Store Membership". Non appena un prodotto viene aggiunto, ne vengono visualizzati l'immagine, la descrizione e il prezzo. Puoi scegliere di nasconderli usando le opzioni sulla barra laterale destra. Viene aggiunto anche un pulsante "Acquista ora"; il colore, il testo e l'URL a cui punta sono tutti attributi modificabili.

L'Overlay Color è una funzionalità interessante che ti consente di impostare il colore e l'opacità dell'immagine del prodotto che hai scelto come prodotto in evidenza in questo caso:

Puoi anche aggiungere una classe CSS a questa immagine. Allo stesso modo, il pulsante Acquista ora può anche essere modificato:

Successivamente, aggiungiamo alcuni nuovi arrivi e best-seller del negozio, in modo che sia i visitatori nuovi che quelli di ritorno abbiano qualcosa da portare via da questa pagina.

Per questo, aggiungeremo prima un blocco noto come Intestazione che si trova in Blocchi comuni:

Una volta aggiunta un'intestazione appropriata come "Nuovi Arrivi", possiamo andare avanti e aggiungere il rispettivo blocco per lo stesso. Per entrambi i nostri scopi, utilizzeremo i blocchi WooCommerce noti come prodotti più venduti e prodotti più recenti . Questi blocchi possono essere trovati di nuovo sotto i blocchi WooCommerce. Aggiungiamo il blocco Prodotti più recenti .

Puoi vedere che il blocco Prodotti più recenti richiama i prodotti aggiunti più di recente dal tuo negozio WooCommerce. Puoi scegliere di visualizzare tutti i prodotti che desideri per questo blocco impostando il numero di righe e colonne da visualizzare, nonché filtrare i prodotti per categoria utilizzando le opzioni nella barra laterale di destra:

In questo modo, abbiamo aggiunto un'altra riga dopo la riga Prodotto in evidenza per i nuovi arrivi:

Successivamente, aggiungiamo i prodotti più venduti in modo simile (dopo aver aggiunto il relativo blocco di intestazione):

Ora che abbiamo creato queste righe per i visitatori nuovi e ricorrenti, aggiungiamo anche una riga che mostra i prodotti in vendita per attirare più vendite. Lo faremo utilizzando nuovamente il blocco In vendita in Blocchi WooCommerce (dopo aver utilizzato il blocco Intestazione per aggiungere un'intestazione):

Ci sono molti altri blocchi che puoi aggiungere sotto i blocchi WooCommerce in base alle tue esigenze. Aggiungiamo ora tutti i prodotti alla pagina Shop. Per questo, puoi scegliere il blocco Prodotti per categoria .

Molte volte, troverai tutti questi blocchi anche nella categoria di blocchi più utilizzati , ma ai fini di questo tutorial, abbiamo selezionato quei blocchi dalla categoria in cui sono stati assegnati. Puoi collegare tutte le intestazioni alle rispettive pagine, come la pagina Saldi, la pagina Best Seller ecc. per consentire ai clienti di visualizzare l'elenco completo dei prodotti in quella sezione.

Nella nostra pagina Negozio/Home, possiamo aggiungere un pulsante che dice Sfoglia negozio, che si collegherà alla pagina Negozio.

Per aggiungere un pulsante, dobbiamo scegliere tra il blocco Elementi layout.

Collegheremo questo pulsante alla pagina Shop.

Allo stesso modo, puoi creare pulsanti sotto tutti gli altri blocchi che abbiamo creato come il blocco "Best Sellers", il blocco "In vendita" ecc. e creare pagine separate per tutti questi e collegare i pulsanti alle rispettive pagine.

Per creare pagine separate per tipi di prodotti separati (best seller o prodotti in vendita), puoi utilizzare codici brevi che visualizzeranno questo tipo specifico di prodotti nelle rispettive pagine. In questo post, abbiamo parlato di come visualizzare diverse categorie di prodotti sulla home page (o su qualsiasi pagina) utilizzando vari shortcode.

Ecco come appare la nostra pagina alla fine:

Ora, fai clic su Personalizza (sul front-end, dopo aver visualizzato in anteprima la tua pagina) per renderla la tua prima pagina e sei a posto! Ecco com'è facile creare attraenti prime pagine per il tuo negozio WooCommerce usando Gutenberg. Esplora e sperimenta i vari blocchi che Gutenberg ha da offrire per utilizzare al massimo le sue caratteristiche!