Una panoramica del nuovo plugin WooCommerce Blocks

Quando installi o aggiorni WooCommerce, include un nuovo plugin chiamato WooCommerce Blocks. Questo aggiunge nuovi blocchi all'editor di blocchi di WordPress che ti consentono di aggiungere prodotti WooCommerce alle tue pagine e ai tuoi post. In questo articolo, daremo un'occhiata ai blocchi WooCommerce e vedremo cosa possono fare.

Plugin per i blocchi di WooCommerce

WooCommerce Blocks è un nuovo add-on per WooCommerce che aggiunge 7 blocchi a Gutenberg:

1. Prodotto presentato
2. Prodotti selezionati a mano
3. Prodotti più venduti
4. Prodotti più votati
5. Prodotti più recenti
6. Prodotti in vendita
7. Prodotti per categoria

Ciascuno dei blocchi viene visualizzato all'interno di una griglia regolabile e può essere ordinato o filtrato. Le griglie consentono di specificare il numero di colonne nel layout. Puoi scegliere da 1 a 6 colonne regolando un dispositivo di scorrimento. Molti dei blocchi consentono anche di regolare il numero di righe. 4 è l'impostazione predefinita per tutti i blocchi con colonne o righe. Non include l'impaginazione, quindi il numero impostato è tutto ciò che verrà visualizzato.

I filtri consentono di scegliere le categorie. Alcuni includono una funzione di ordinamento, che consente di ordinare per novità, prezzo, valutazione, vendite, titolo o ordine del menu.

I blocchi includono anche la scheda Gutenberg Advanced standard con campi CSS personalizzati.

Attiva il Blocco Prodotti

Quando aggiorni o attivi WooCommerce vedrai il nuovo plug-in nell'elenco dei plug-in. Se non lo vedi qui puoi cercare i blocchi WooCommerce nella scheda Aggiungi nuovo sotto Plugin.

Puoi attivare il blocco nell'elenco dei plugin o facendo clic sul pulsante nella parte superiore della dashboard di WordPress.

Utilizzo dei blocchi WooCommerce

La nuova scheda chiamata WooCommerce viene aggiunta all'elenco dei blocchi disponibili all'interno dell'editor Gutenberg. All'interno di questa scheda c'è l'insieme di 7 blocchi WooCommerce. Ciascuno dei blocchi ha un'icona che corrisponde a ciò che fanno in modo che tu possa riconoscerli a colpo d'occhio.

Quando aggiungi i blocchi alla pagina, i simboli vengono visualizzati nella pagina in cui puoi fare clic per aggiungerli rapidamente.

Diamo un'occhiata a ciascun blocco.

Prodotto presentato

Prodotto in evidenza ti consente di scegliere un singolo prodotto dall'elenco da visualizzare. Puoi allineare il testo, modificare la sovrapposizione e modificare l'immagine. Ha anche il campo Classe CSS aggiuntiva.

Questo blocco ha la maggior parte delle personalizzazioni disponibili di tutti i blocchi WooCommerce. Imposta l'orientamento del testo con i pulsanti di testo in alto. Facendo clic su Modifica si aprono le personalizzazioni per l'overlay. Qui puoi scegliere il prodotto, mostrare la descrizione, mostrare il prezzo, scegliere il colore per l'overlay e impostarne l'opacità.

Puoi scegliere un colore da utilizzare oppure puoi scegliere un colore personalizzato facendo clic sul cerchio multicolore. Qui puoi inserire il codice esadecimale, il codice RGB o regolare il colore con il cursore e il selettore di colori. Mi piacciono le regolazioni della sovrapposizione. Per regolare il testo o il pulsante dovrai usare i CSS.

Prodotti selezionati a mano

Prodotti selezionati a mano ti consente di selezionare i prodotti che verranno visualizzati. Puoi cercarli dal blocco stesso o dalla colonna di destra. Imposta il numero di colonne da 1 a 6. Ordina per novità, prezzo, valutazione, vendite, titolo o ordine del menu.

La selezione dei prodotti li aggiunge al layout all'interno della griglia.

Prodotti più venduti

Best Selling Products non ti consente di scegliere nulla dal blocco, ma puoi comunque effettuare tutte le personalizzazioni nelle impostazioni a destra. Qui puoi selezionare il numero di colonne e righe (scegli da 1 a 6 per ciascuna), filtrare per categoria e regolare CSS.

In questo esempio, ho scelto 6 colonne, 2 righe e la categoria Abbigliamento.

Prodotti più votati

I prodotti più votati aggiungono anche i prodotti mentre selezioni il blocco. Le impostazioni consentono di includere il layout standard per 1-6 colonne e righe, filtrare per categoria e CSS. Questo mostra le impostazioni predefinite.

Prodotti più recenti

I prodotti più recenti aggiungono automaticamente anche i prodotti mentre selezioni il blocco. Le impostazioni includono il layout standard, il filtro di categoria e il CSS. In questo esempio, ho scelto 5 colonne e 3 righe. Ho lasciato il filtro di categoria predefinito, che include ogni categoria.

Prodotti in vendita

Prodotti in saldo carica automaticamente tutti i prodotti in saldo. Include anche le opzioni di layout per colonne e righe, il filtro del prodotto e CSS. Questo aggiunge un'opzione Ordina per in modo da poter ordinare per novità, prezzo, valutazione, vendite, titolo o ordine del menu. In questo esempio, ho impostato le colonne su 2 e le righe su 4. Ho lasciato la categoria del prodotto al valore predefinito.

Prodotti per categoria

Prodotti per categoria ti consente di scegliere le categorie all'interno del blocco e include un selettore per aiutare a perfezionare le scelte. Per il mio esempio, aveva solo un'opzione (qualsiasi categoria selezionata). Include anche le opzioni di layout, la selezione della categoria, l'ordine per e le impostazioni CSS.

In questo esempio, ho selezionato le mie categorie, ho impostato le colonne su 4, le righe su 2 e ho ordinato i prodotti in ordine alfabetico.

Pagine di esempio con blocchi WooCommerce

Ecco uno sguardo a ciascun blocco sul front-end. Ho aggiunto un'etichetta per identificarli. Ho impostato ognuno su un numero diverso di colonne, ma hanno tutte 1 riga per evitare che l'immagine sfugga di mano. Potresti facilmente creare una pagina del negozio per ogni categoria utilizzando questi blocchi.

Ad esempio, ho creato una pagina solo per mostrare gli accessori. Ho aggiunto un'immagine di copertina e un titolo e ho impostato il blocco Prodotti per categoria per mostrare 3 colonne e 6 righe.

Crea una pagina pulita con un bel design e, ovviamente, mostra solo i prodotti per la categoria accessori. Questo può essere utilizzato per creare tutti i tipi di pagine di prodotto.

Ecco un breve CTA che aggiunge un blocco selezionato manualmente e un blocco di testo in una doppia colonna.

La pagina è semplice, ma è funzionale.

Per questa pagina, ho aggiunto i prodotti più venduti all'interno di un layout di post di blog. L'ho impostato su 4 colonne e 1 riga e ho selezionato Abbigliamento come categoria.

Il post sembra fantastico. Prima di pubblicare, probabilmente aggiungerei un po' di spazio, un'etichetta per i prodotti e magari aggiungerei un po' di imbottitura al testo, ma è facile vedere il potenziale.

Per questo, ho aggiunto un layout a due colonne e ho aggiunto un blocco di testo e il blocco Best Selling Products con 2 colonne e 2 righe.

Pensieri finali

WooCommerce Blocks è un plugin interessante. I blocchi sono semplici da usare e forniscono alcuni utili strumenti di categoria, layout e filtro. Mi piacciono i dispositivi di scorrimento del layout di colonne e righe. Se vuoi apportare modifiche al loro testo, pulsanti, sovrapposizioni al passaggio del mouse, ecc. Dovrai usare CSS, ma almeno CSS personalizzato è un'opzione. I blocchi sono ottimi per creare pagine di vendita o aggiungere prodotti all'interno dei tuoi contenuti.

Mi piacerebbe vedere alcune più funzionalità di stile (soprattutto per i pulsanti, il testo e gli overlay al passaggio del mouse). Continuavo a voler personalizzare come avrei fatto con Divi (penso che Divi mi abbia viziato). Include i campi della classe CSS che aiuteranno coloro che usano i CSS. Anche senza molte personalizzazioni, mi è piaciuto usare i blocchi. Se desideri includere i prodotti WooCommerce all'interno delle tue pagine e dei tuoi post Gutenberg, vale la pena provare WooCommerce Blocks.

Vogliamo sentire da voi. Hai provato i blocchi WooCommerce? Fateci sapere la vostra esperienza nei commenti.

Immagine in primo piano tramite Jomic / shutterstock.com