Salta al contenuto principale
13 minuti di lettura (2554 parole)

Guida Completa al Blocco WooCommerce

Guida-Completa-al-Blocco-WooCommerce

WooCommerce è uno dei plugin più popolari per la creazione di siti e-commerce su WordPress. WooCommerce Blocks è uno dei plugin in WooCommerce, progettato per semplificare la creazione di negozi online su WordPress. WooCommerce Blocks aiuta a creare pagine di negozio personalizzate, visualizzare i prodotti e aggiungere funzionalità e-commerce avanzate come il filtraggio e la ricerca dei prodotti – tutto senza scrivere una sola riga di codice. 

PUNTI CHIAVE DELL'ARTICOLO:
  • WooCommerce Blocks dà ai proprietari di negozi la possibilità di costruire e personalizzare facilmente i negozi online utilizzando una semplice interfaccia di drag-and-drop all'interno dell'editor di blocchi di WordPress—senza bisogno di programmazione.
  • Con WooCommerce Blocks, puoi aggiungere diverse funzionalità come griglie di prodotti, filtri, carrelli della spesa e esperienze di checkout personalizzate, migliorando la navigazione dei clienti e aumentando le vendite.
  • WooCommerce Blocks offre componenti moderni, ottimizzati per dispositivi mobili e ad alte prestazioni che migliorano l'esperienza utente e garantiscono la futura compatibilità del tuo sito e-commerce con opzioni di design flessibili.

Devi installare il plugin WordPress WooCommerce Blocks per utilizzare questi nuovi blocchi. Questo plugin è un terreno di prova per funzionalità sperimentali che potrebbero essere aggiunte al core di WooCommerce.

In questa guida pratica, discuteremo le funzionalità dei blocchi WooCommerce e come personalizzarli. 

Cos'è WooCommerce Block?

I blocchi di WooCommerce sono una collezione di blocchi integrati con l'editor di blocchi di WordPress (Gutenberg) che ti permettono di aggiungere facilmente varie funzionalità e caratteristiche di WooCommerce alle tue pagine e articoli.Senza scrivere codice, questi blocchi ti consentono di mostrare prodotti, categorie di prodotti, filtri di ricerca, carrelli della spesa, casse e altro.

In termini più semplici, i blocchi WooCommerce sono componenti pre-costruiti che puoi inserire nel tuo sito WordPress utilizzando l'editor di blocchi, fornendo un modo semplice per incorporare la funzionalità di e-commerce alimentata da WooCommerce. Questo fa parte del plugin core WooCommerce, quindi li ottieni automaticamente quando installi e attivi WooCommerce sul tuo sito WordPress.

Inoltre, si integrano perfettamente con l'editor di blocchi di WordPress, consentendoti di creare pagine di prodotto personalizzate, layout di categoria e esperienze di shopping utilizzando un'interfaccia drag-and-drop familiare. testo qui ...

Elenco delle funzionalità di WooCommerce Block

Dopo aver compreso cosa sia WooCommerce block, discuteremo ora ogni funzione fornita una per una:

  • All Product: Displays all store products in a grid format.
  • Filtri di prodotto attivi: Visualizza i filtri di prodotto attivi in forma di elenco o come chip (simili a pulsanti).
  • Tutte le recensioni: Visualizza tutte le recensioni dei prodotti.
  • Prodotto più venduto: Visualizza i prodotti più venduti in un formato a griglia.
  • Pagamento: Visualizza un modulo che consente ai clienti di completare i loro ordini.
  • Carrello: Visualizza il carrello della spesa.
  • Categoria in evidenza: Evidenzia categorie di prodotti specifiche insieme a pulsanti di invito all'azione.
  • Prodotto in evidenza: Visualizza i prodotti in evidenza selezionati.
  • Filtra per prezzo: Visualizza un intervallo di prezzo che i clienti possono utilizzare per filtrare i prodotti. Puoi anche abilitare un intervallo di prezzo modificabile facendo clic su un pulsante o sul testo qui.
  • Filtra per disponibilità:Consente di filtrare i prodotti in base allo stato di disponibilità. Questa funzione fornisce opzioni per visualizzare prodotti disponibili, non disponibili o in fase di riordino.
  • Filtra per valutazione: Consente ai clienti di filtrare i prodotti in base alle valutazioni.
  • Filtra per attributo: Filtra i prodotti in base alla dimensione o al colore.
  • Prodotti selezionati:Visualizza prodotti selezionati in un formato a griglia, consentendoti di scegliere quali prodotti visualizzare specificamente.
  • Mini carrello: Fornisce una vista breve del carrello degli acquisti.
  • Prodotti più recenti: Mostra i prodotti più recenti disposti in un formato a griglia. Possono essere personalizzati aggiungendo/rimuovendo elementi come titolo, prezzo, valutazione e pulsante di acquisto.
  • Prodotti in offerta: Visualizza prodotti attualmente in offerta in un formato a griglia e può essere personalizzato aggiungendo/rimuovendo elementi come titolo, prezzo, valutazione e pulsante di acquisto.
  • Ricerca prodotto: Aggiunge una barra di ricerca per facilitare ai clienti la ricerca di prodotti.
  • Prodotti per tag: Visualizza prodotti con tag/etichette specifiche in un formato a griglia.
  • Prodotti per attributo: Visualizza prodotti con attributi specifici (colore, dimensione, ecc.) in un formato a griglia.
  • Prodotti per categoria: Visualizza i prodotti in base alle categorie in un formato a griglia.
  • Recensioni per prodotto: Visualizza le recensioni raggruppate per prodotto.
  • Recensioni per categoria: Visualizza le recensioni dei prodotti per categorie specifiche.
  • Prodotto singolo: Visualizza una vista dettagliata per un singolo prodotto.
  • Prodotti con la valutazione più alta: Visualizza i prodotti con le valutazioni più alte in un formato a griglia.

Come utilizzare il blocco griglia prodotti in WooCommerce

Oltre a scoprire le funzionalità disponibili nei blocchi WooCommerce, proviamo a utilizzare o aggiungere una griglia di prodotti in WooCommerce. Assicurati di aver installato il plugin dei blocchi WooCommerce sul tuo sito web. Ecco come aggiungerlo:

1. Apri la pagina o il post dove desideri visualizzare la griglia del prodotto, quindi inserisci il titolo "Prodotto".

2. Nella navigazione di sinistra, clicca sul pulsante (+) > scorri verso il basso fino alla sezione WooCommerce > seleziona "griglia prodotti".

Immagine di origine: Kinsta.com

3. Successivamente, per configurare il blocco, vai al pannello di destra.

Immagine di origine: Kinsta.com

In questo pannello, puoi regolare diverse cose, tra cui:

  • Impostazioni di layout: Puoi personalizzare il numero di righe e colonne visualizzate nella griglia dei prodotti. Ad esempio, impostando entrambi su 2 per una visualizzazione bilanciata.
  • Impostazioni di contenuto: È possibile visualizzare un menu a discesa per l'ordinamento dei prodotti. Questa funzione consente ai clienti di ordinare i prodotti in base alle loro preferenze. È possibile disabilitarla se non è necessaria.
  • Stile avanzato: È possibile aggiungere classi CSS per personalizzare l'aspetto.
4. Quindi, puoi anteprima la pagina prima di pubblicarla definitivamente.
Immagine di origine: Kinsta.com

Come aggiungere prodotti in evidenza alla tua pagina

Il blocco Prodotto in evidenza ti consente di mostrare prodotti specifici nella tua pagina o articolo. Con questo blocco, puoi selezionare prodotti, personalizzare il loro aspetto e posizionarli nel tuo contenuto per attirare i visitatori verso gli articoli che desideri promuovere.

Per aggiungere il blocco del prodotto in evidenza, segui questi passaggi:

1. Apri la pagina o il post dove vuoi aggiungerlo. Ad esempio, se lo colloci sopra la griglia dei prodotti, crea spazio in quell'area e clicca sul pulsante "+" che appare.

Immagine di origine: Kinsta.com

2. Seleziona il pulsante "+" sulla barra degli strumenti del blocco per aprire l'elenco dei blocchi, quindi cerca e seleziona "Prodotto in evidenza".

Immagine di origine: Kinsta.com

3. Scegli i prodotti che desideri evidenziare, quindi clicca "Fatto".
4. Per personalizzare l'aspetto del blocco, clicca su "Impostazioni". Nel pannello delle impostazioni, puoi regolare diverse cose tra cui:

  • Mostra o nascondi la descrizione e il prezzo del prodotto.
  • Configura la visualizzazione dei media (immagine e video).
  • Aggiungi testo alternativo per le immagini del prodotto.
  • Seleziona il colore di sovrapposizione del blocco.
  • Regola l'opacità del blocco.
Immagine di origine: Kinsta.com

5. Dopo aver regolato, puoi pubblicare o aggiornare la pagina per vedere il blocco del prodotto in evidenza visualizzato.

Immagine di origine: Kinsta.com

Come aggiungere blocchi di filtro in WooCommerce

Il blocco Filtro WooCommerce rende facile per i clienti trovare prodotti che corrispondono ai loro criteri di ricerca. Fornendo opzioni di filtro, i clienti possono rapidamente restringere i risultati di ricerca ai prodotti rilevanti per loro.

Per aggiungere il blocco filtro, segui questi passaggi:

  1. Apri la pagina o il post dove desideri posizionare il blocco filtro.
  2. Determinare la posizione desiderata per posizionare il blocco filtro.
  3. On the block editor toolbar, click the "+" button and search for WooCommerce filter options such as Price Filter, Stock Filter, Attribute Filter, and Rating Filter.

Ora, discutiamo ogni tipo di filtro disponibile. 

Aggiunta del filtro per prezzo

Il blocco del filtro dei prezzi del prodotto consente di aggiungere una funzione di filtro che consente agli utenti di selezionare la fascia di prezzo desiderata. L'intervallo di prezzo può essere visualizzato come pulsanti modificabili o testo normale. È possibile aggiungere pulsanti se lo si desidera e regolare il livello di intestazione.

Immagine di origine: Kinsta.com

Aggiungere filtro per attributo

Il blocco filtro attributo prodotto consente agli utenti di filtrare i prodotti in base ad attributi come colore e dimensione. È possibile scegliere gli attributi che si desidera utilizzare dall'elenco disponibile. La sua visualizzazione può essere sotto forma di elenco o menu a discesa. È anche possibile configurare il tipo di query per essere AND o OR. Altre funzionalità includono la visualizzazione del numero di prodotti, la selezione del livello di titolo, l'aggiunta di pulsanti e la scelta del filtro.

Immagine di origine: Kinsta.com

Aggiunta del filtro per magazzino

Il blocco del filtro prodotti per stato di magazzino consente agli utenti di visualizzare i prodotti in base al loro stato di disponibilità. Possono visualizzare prodotti disponibili (in magazzino), fuori magazzino (esauriti) o in ordine di backorder. È inoltre possibile configurarlo per visualizzare il numero di prodotti, selezionare il livello di intestazione e aggiungere pulsanti. Questo blocco può essere utilizzato con altri blocchi WooCommerce, come Tutti i prodotti. Sfortunatamente, questo blocco non fornisce un'anteprima quando viene aggiunto alla pagina.

Immagine di origine: Elegantthemes.com

Blocchi carrello e cassa

Il blocco del carrello degli acquisti aggiunge una visualizzazione del carrello alla tua pagina. È possibile includere un calcolatore dei costi di spedizione, selezionare un link per il pulsante di checkout e impostare una visualizzazione in modalità scura. Questo blocco fornisce anche una notifica che consente di impostare la pagina come pagina predefinita del carrello in WooCommerce. È incluso anche un link per fornire feedback.

Immagine di origine: Elegantthemes.com

Nel frattempo, il blocco di checkout fornisce un modulo di checkout per il tuo carrello degli acquisti. Sarai informato che questa pagina può essere impostata come pagina di checkout predefinita nelle impostazioni di WooCommerce. C'è anche un'opzione per la visualizzazione in modalità scura. Questo blocco è composto da diversi elementi che puoi personalizzare individualmente. Sfortunatamente, questo blocco non fornisce un'anteprima una volta aggiunto alla pagina.

Immagine di origine: Elegantthemes.com

Come personalizzare la pagina del negozio su WooCommerce

Dopo aver imparato a utilizzare vari WooCommerce Blocks, puoi combinarne diversi per creare una pagina del negozio personalizzata facile da usare. Per creare questo layout specifico della pagina del negozio, segui questi passaggi.

1. Crea una nuova pagina e chiamala "Negozio".

Immagine di origine: Kinsta.com

2. Aggiungi il blocco di ricerca prodotto.

Immagine di origine: Kinsta.com

3. Aggiungi il blocco Elenco Categorie Prodotti

Immagine di origine: Kinsta.com

Quindi, imposta lo stile di visualizzazione sul menu a discesa.

Immagine di origine: Kinsta.com

4. Aggiungi il blocco Filtro Prezzo.
5. Aggiungi il blocco Prodotti in evidenza e seleziona i prodotti che desideri evidenziare. Configura secondo le tue esigenze.

Immagine di origine: Kinsta.com

6. Aggiungi il blocco Tutti i prodotti.

Immagine di origine: Kinsta.com

Imposta il numero di colonne e righe su 2 e disattiva l'opzione di ordinamento a discesa.

Immagine di origine: Kinsta.com

7. Infine, pubblica la pagina per vedere il layout finale della pagina del negozio che hai creato.

Immagine di origine: Kinsta.com

Cerchi una potente soluzione di gestione dei file per i siti web dei clienti?

WP File Download è la risposta. Con funzionalità avanzate come categorie di file, restrizioni di accesso e interfaccia utente intuitiva.
Sorprendi i tuoi clienti con un'organizzazione dei file di alta qualità!

OTTIENI IL PLUGIN ADESSO

Crea il tuo negozio online con WooCommerce Block e vendi i tuoi prodotti

Dopo aver creato con successo una pagina del negozio personalizzata con i Blocchi WooCommerce, ora puoi iniziare a vendere i tuoi prodotti fisici e digitali. Soprattutto per i prodotti digitali, è fondamentale aggiungere un plugin di download file come WP File Download Addon.

Questo plugin ti consente di vendere prodotti di download digitali in WooCommerce. L'Addon WP File Download rende facile la gestione dei file e delle categorie di file per i prodotti digitali WooCommerce. Puoi creare rapidamente molti prodotti di download digitali associati a uno o più file.

Inoltre, questo plugin si integra con Dropbox, Google Drive, Microsoft OneDrive e la funzione Social Locker . Puoi fornire file da questi servizi cloud come download digitali WooCommerce con accesso altamente limitato tramite connettori API cloud.

Con l'addon WP File Download , la vendita di prodotti digitali nel tuo negozio online WooCommerce è diventata più accessibile ed efficiente. Dopo aver costruito il tuo negozio con i blocchi WooCommerce, questo plugin completa perfettamente la vendita dei tuoi contenuti digitali.

Chiamata a tutti i webmaster!

Migliora i siti web dei tuoi clienti con WP File Download. Crea repository di file sicuri e personalizzabili, consentendo ai clienti di accedere e gestire facilmente i loro file.
Aggiorna i tuoi servizi di web design oggi!

OTTIENI IL PLUGIN ADESSO

Conclusione

WooCommerce Blocks è un plugin che ti consente di costruire un negozio online completo in WordPress senza scrivere codice. Con vari blocchi, come griglie di prodotti, filtri e visualizzazioni di prodotti in evidenza, puoi facilmente creare un'esperienza di shopping coinvolgente e facile da usare. La familiare interfaccia di trascinamento rende lo sviluppo di un negozio online più veloce e più efficiente.

Dopo aver creato il tuo negozio online, il passo successivo è vendere prodotti fisici e digitali. Puoi utilizzare il plugin WP File Download Addon per vendere prodotti digitali con WooCommerce, come eBook, software o contenuti multimediali.

WP File Download L'addon è disponibile a partire da $49 all'anno ed è stato utilizzato da oltre 60.000 membri. Quindi, cosa state aspettando? Unisciti a noi per una vendita migliore di prodotti digitali!

Rimani Informato

Quando ti iscrivi al blog, ti invieremo un'e-mail quando ci saranno nuovi aggiornamenti sul sito in modo che tu non li perda.

Articoli correlati

 

Commenti

Nessun commento ancora. Sii il primo a inviare un commento
Già registrato? Accedi qui
mercoledì, 04 marzo 2026

Immagine Captcha

An Error Occurred: Whoops, looks like something went wrong.

Sorry, there was a problem we could not recover from.

The server returned a "500 - Whoops, looks like something went wrong."

Help me resolve this