Come personalizzare il tuo negozio online con i blocchi WooCommerce

Il Gutenberg Block Editor rende WordPress ancora più accessibile per i proprietari di siti di qualsiasi livello di abilità, consentendoti di creare pagine complesse trascinando e rilasciando blocchi di contenuto. Con i blocchi WooCommerce, puoi selezionare e visualizzare prodotti, categorie, filtri e altro praticamente ovunque sul tuo sito, senza bisogno di utilizzare codici brevi o modificare righe di codice!

Diamo un'occhiata ai blocchi WooCommerce disponibili e impariamo come usarli.

Prima di iniziare, aggiorna WordPress e WooCommerce all'ultima versione. Nota: le demo per questo post sono state create con il tema Storefront ma dovrebbero funzionare con qualsiasi tema adatto a WooCommerce di tua scelta.

Conosci WooCommerce Blocks

Puoi posizionare Blocchi WooCommerce ovunque sia abilitato l'Editor blocchi: post, pagine e tipi di post personalizzati. Inizia andando alla pagina o al post che desideri modificare, quindi fai clic sull'icona Aggiungi blocco (che assomiglia a un simbolo "più") nell'angolo in alto a sinistra.

Si aprirà un menu di tutti i blocchi disponibili. Espandi la scheda WooCommerce per visualizzare i blocchi specifici del tuo negozio online.

Suggerimento per professionisti: puoi anche aggiungere rapidamente blocchi al contenuto usando la scorciatoia da tastiera `/`. Ad esempio, puoi visualizzare i blocchi WooCommerce disponibili digitando `/woocommerce`.

Fare clic su un blocco lo aggiunge alla tua pagina e fa apparire una gamma di opzioni, che cambia a seconda del blocco che hai selezionato.

Blocchi di prodotti

I blocchi prodotto ti consentono di visualizzare i prodotti all'interno della pagina e pubblicare contenuti. Questo è un ottimo modo per collegare i prodotti consigliati all'interno di un post del blog, visualizzare i tuoi ultimi prodotti su una pagina di destinazione o creare una pagina del negozio personalizzata. Esistono diversi blocchi di prodotti che soddisfano un'esigenza specifica e sono spiegati più dettagliatamente di seguito:

Blocco prodotto in primo piano

Si tratta di un blocco completamente personalizzabile che mette in evidenza un singolo prodotto. Puoi visualizzare il titolo e il prezzo di un prodotto e aggiungere un pulsante per incoraggiare gli acquisti. Ci sono anche molte impostazioni per l'overlay, tra cui:

• Colore di sovrapposizione
• Opacità di sfondo
• Punto focale dell'immagine
• Posizionamento in background

Aggiungi un blocco prodotto in primo piano a una pagina di destinazione per attirare l'attenzione dei tuoi clienti e fungere da invito all'azione, oppure incorporalo direttamente in un post del blog come collegamento visivo al prodotto. Le opzioni sono infinite!

Blocco di tutti i prodotti

Il blocco Tutti i prodotti mostra tutti i tuoi prodotti. Questo è utile se desideri inserire altri contenuti (testo, immagini, video, ecc.) sopra o sotto i prodotti ed è un ottimo modo per creare un catalogo visivo. Include le seguenti opzioni:

• Impostazioni di Layout:
  • Numero di colonne e righe: personalizza il layout della griglia del prodotto
  • Allinea pulsanti: imposta i pulsanti in modo che rientrino immediatamente sotto il contenuto o allineali
• Le impostazioni del contenuto:
  • Mostra il menu a discesa di ordinamento: mostra o nascondi un menu a discesa con le opzioni di ordinamento
  • Ordina prodotti per: scegli l'ordine predefinito per i prodotti in base a prezzo, valutazioni, novità o vendite
  • Modifica le informazioni visualizzate per i prodotti: rimuovi recensioni, aggiungi un badge di vendita, includi una descrizione e altro ancora

Blocchi filtro

Combina i blocchi filtro con il blocco Tutti i prodotti per consentire ai visitatori del sito di restringere la ricerca dei prodotti. Quando gli acquirenti selezionano un filtro, i prodotti si aggiornano automaticamente per soddisfare i loro criteri, senza ricaricare la pagina. Sono disponibili tre blocchi di filtri:

• Filtra per attributi, come colore o taglia
• Filtra per prezzo minimo e massimo
• Mostra i filtri attivi e selezionati

L'esempio seguente utilizza tutti e tre i blocchi:

Combinando questi blocchi, puoi creare una pagina del negozio accattivante e facile da navigare in pochi minuti.

Blocco prodotti selezionati a mano

Il Blocco prodotti selezionati a mano ti consente di selezionare manualmente i prodotti che desideri visualizzare. Se scrivi un post sul blog intitolato "Idee regalo per l'anniversario", potresti visualizzare prodotti specifici che si adattano meglio a quell'argomento direttamente all'interno del post.

Dopo aver aggiunto il blocco, seleziona prodotti specifici da un elenco o cerca quello esatto che stai cercando.

Le opzioni per il blocco Prodotti selezionati con cura includono:

• Numero di colonne: scegli fino a sei
• Allinea pulsanti: imposta i pulsanti in modo che rientrino immediatamente sotto il contenuto o allineali
• Mostra o nascondi:
  • Titolo del prodotto
  • Prezzo del prodotto
  • Valutazione del prodotto
  • Pulsante Aggiungi al carrello

Prodotti per Categoria Blocco

Questo blocco ti consente di visualizzare i prodotti di una categoria specifica o di più categorie. Questo è perfetto per pagine di destinazione mirate o pagine di categoria che richiedono contenuti aggiuntivi. Le impostazioni includono:

• Categoria prodotto: seleziona la categoria o le categorie da visualizzare
• Numero di colonne e righe: personalizza il layout della griglia del prodotto
• Allinea pulsanti: consentono ai pulsanti di seguire immediatamente il contenuto o di allinearli verticalmente
• Mostra o nascondi:
  • Titolo del prodotto
  • Prezzo del prodotto
  • Valutazione del prodotto
  • Pulsante Aggiungi al carrello
• Ordinato da:
  • Novità
  • Prezzo
  • Valutazione
  • I saldi
  • Ordine del menu

L'esempio seguente ha una riga e cinque colonne della categoria "musica":

Blocchi di prodotti aggiuntivi

Ci sono alcuni blocchi di prodotto aggiuntivi che funzionano in modo molto simile a quelli sopra menzionati:

• Prodotti per tag: mostra i prodotti in base ai tag
• Prodotti per attributo: mostra i prodotti in base agli attributi
• Prodotti più votati: mostra i prodotti con le migliori recensioni
• Prodotti in saldo: mostra i prodotti scontati
• Prodotti più venduti: mostra i tuoi prodotti più venduti

Rivedi i blocchi

Il 63% dei clienti ha maggiori probabilità di acquistare un prodotto da un sito con recensioni. I blocchi di recensione possono aiutarti a evidenziare le recensioni dei clienti sul tuo sito per fornire prove sociali e incoraggiare le vendite a seconda delle tue esigenze.

Blocco di tutte le recensioni

Questo è il blocco di cui hai bisogno se desideri visualizzare tutte le recensioni dei tuoi prodotti contemporaneamente. Puoi utilizzare questo blocco per evidenziare le recensioni sulla home page, metterle in evidenza su una pagina di destinazione o creare una pagina specifica per le testimonianze. Le opzioni includono:

• Mostra o nascondi:
  • Titolo del prodotto
  • Valutazione del prodotto
  • Nome del revisore
  • Immagine: immagine del prodotto o gravatar del revisore
  • Data della recensione
  • Rivedi il contenuto
• Ordina per: offre agli utenti la possibilità di ordinare le recensioni per:
  • Piu recente
  • Valutazione più alta
  • Voto più basso
• Numero iniziale di recensioni: il numero di recensioni da visualizzare
• Carica di più: consente di caricare più recensioni

Recensioni per blocchi di prodotti e categorie

Questi blocchi forniscono le stesse opzioni del Blocco Tutte le recensioni, ma ti consentono di selezionare un prodotto o una categoria specifici. Sono un ottimo modo per incorporare le recensioni nei post o nelle pagine del blog. Promuovere il lancio di un nuovo album? Mostra le prime cinque recensioni per quell'album specifico. Scrivere un post sul blog su una specifica categoria di prodotti? Mostra tutte le recensioni per quella categoria. Questo è un modo efficace per coinvolgere i visitatori del sito e dimostrare che i tuoi prodotti sono affidabili.

Blocco ricerca prodotti

Quando i potenziali clienti visitano il tuo sito, dovrebbero essere in grado di trovare subito ciò che stanno cercando. Se vogliono acquistare un prodotto specifico, l'ultima cosa che vuoi è che debbano navigare pagina dopo pagina di articoli non correlati.

Il Blocco ricerca prodotti fornisce un semplice modulo di ricerca specifico per i prodotti. Aggiungilo in un punto visibile sul tuo sito, nella parte superiore o nella barra laterale del tuo negozio e nelle pagine delle categorie, e consenti agli acquirenti di cercare esattamente ciò che vogliono.

Ottieni il massimo dal tuo negozio online con WooCommerce Blocks

Porta il tuo marketing dei contenuti a un livello superiore aggiungendo prodotti direttamente a pagine di destinazione, post di blog e altri tipi di media. Gli utenti possono effettuare acquisti relativi ai contenuti a cui sono interessati senza alcuna navigazione aggiuntiva.

L'editor blocchi offre agli utenti un'enorme quantità di flessibilità e controllo sul layout e sul design del proprio negozio online. Se combinato con i nostri Blocchi WooCommerce, puoi creare una vetrina davvero personalizzata, aggiungendo di tutto, da prodotti e categorie a filtri e recensioni praticamente ovunque tu abbia bisogno!

Rimani aggiornato sugli ultimi blocchi per WooCommerce