Come creare una bella pagina del negozio WooCommerce (in 5 passaggi)

Cerchi il modo più semplice per personalizzare la pagina del negozio di WooCommerce?

WordPress offre un'ampia varietà di blocchi per aiutarti a creare siti Web professionali. Se usi WooCommerce, hai anche accesso a blocchi WooCommerce dedicati che puoi utilizzare per il tuo negozio online.

Pertanto, ti starai chiedendo come utilizzare questi elementi per creare una pagina del negozio WooCommerce che guida le conversioni.

Fortunatamente, il processo è molto semplice. Utilizzando questi blocchi, WooCommerce ti consente di visualizzare i tuoi prodotti in diversi modi. Inoltre, puoi aggiungere filtri e funzioni di ricerca per consentire agli utenti di navigare più facilmente nel tuo negozio.

In questo articolo, ti mostreremo come creare una bellissima pagina del negozio WooCommerce usando i blocchi . Puoi seguire le nostre linee guida e scegliere quali blocchi vuoi utilizzare, a seconda delle tue esigenze. Iniziamo!

Sommario:

1. Posiziona il blocco Tutti i prodotti
2. Aggiungi i blocchi Prodotto in evidenza e/o Prodotti selezionati con cura
3. Abilita la ricerca del prodotto nella pagina del negozio
4. Usa i blocchi della categoria in primo piano
5. Aggiungi un'opzione per filtrare i prodotti in base al prezzo

Come personalizzare la pagina del negozio WooCommerce con i blocchi

Per iniziare, ti consigliamo di aprire l'editor per la pagina Negozio del tuo negozio. Quindi, segui queste istruzioni per personalizzarne il contenuto.

1. Posiziona il blocco Tutti i prodotti

Le pagine del negozio sono disponibili in tutte le forme e dimensioni. In un negozio online, questa pagina in genere mostra tutti i prodotti che hai in vendita. Gli utenti possono fare clic sui singoli articoli per aprire le rispettive pagine dei prodotti o aggiungerli direttamente al carrello (se il negozio lo consente):

Con WordPress e WooCommerce, hai il pieno controllo su quali elementi includere nella pagina del tuo negozio. L'aspetto grafico di questa pagina dipenderà dal tema che stai utilizzando e da come lo configuri.

WooCommerce imposta automaticamente una pagina del negozio quando inizi a utilizzare il plug-in, così puoi andare avanti e controllare che aspetto ha il tuo. Quando sei pronto per modificarlo, vai su Pagine e trova l'opzione Negozio .

Apri questa pagina nell'Editor blocchi e dovresti vedere qualcosa del genere:

Per impostazione predefinita, la pagina Negozio include il blocco Tutti i prodotti e un'intestazione. Se non vedi questo blocco, puoi aggiungerlo alla pagina facendo clic sul segno più (+) e selezionandolo dall'elenco delle opzioni:

Il blocco Tutti i prodotti mostra una griglia che contiene tutti i prodotti del tuo negozio, ordinati dal nuovo al vecchio. Per modificare l'ordine di visualizzazione dei tuoi prodotti, fai clic sul blocco e vai al pannello delle impostazioni a destra. Quindi, vai alla sezione Impostazioni contenuto e seleziona la tua preferenza dal menu Ordina prodotti per :

Nel frattempo, in Impostazioni layout , puoi scegliere il numero di colonne e righe che desideri visualizzare nella griglia del prodotto. Sentiti libero di esplorare le altre opzioni disponibili con questo blocco.

2. Aggiungi i blocchi Prodotto in evidenza e/o Prodotti selezionati con cura

Molte pagine del negozio mettono in evidenza prodotti specifici. Si tratta in genere di articoli su cui i proprietari dei negozi vogliono attirare l'attenzione, come stock nuovi o scontati o prodotti aggiunti di recente. WooCommerce viene fornito con un blocco Prodotto in evidenza che ti consente di mostrare qualsiasi articolo nel tuo negozio.

Una volta posizionato questo blocco sulla tua pagina, dovrai selezionare il prodotto che desideri mettere in evidenza e fare clic su Fine :

Quindi, WooCommerce mostrerà l'immagine del prodotto, il nome, il prezzo, la descrizione e un invito all'azione (CTA). Il blocco dovrebbe assomigliare a questo:

È quindi possibile personalizzare questo blocco a proprio piacimento. Ad esempio, potresti cambiare l'immagine e modificare il pulsante CTA.

Lo svantaggio dell'aggiunta del blocco Prodotto in evidenza alla pagina del tuo negozio WooCommerce è che può distrarre gli utenti dal resto dei tuoi prodotti. Per contrastare questo, suggeriamo di utilizzare le colonne per visualizzare più prodotti in evidenza affiancati:

Un'alternativa al blocco Prodotti in evidenza è l'opzione Prodotti selezionati a mano . Questo blocco consente di scegliere più prodotti e di visualizzarli uno accanto all'altro. Utilizza lo stesso stile del blocco Tutti i prodotti :

Entrambi i blocchi Prodotti in evidenza e Prodotti selezionati a mano soddisfano scopi simili. Idealmente, sceglierai una delle due opzioni in modo da non sopraffare i visitatori con troppi articoli in primo piano. Ti consigliamo inoltre di posizionare questi blocchi nella parte superiore della pagina, in modo che gli utenti non possano perderli.

3. Abilita la ricerca del prodotto nella pagina del negozio

Se hai un negozio con un ampio catalogo di prodotti, dovrai offrire una funzione di ricerca. In questo modo, gli utenti possono cercare qualsiasi articolo specifico che avevano in mente, senza dover sfogliare l'intero negozio.

Quando aggiungi un blocco di ricerca alla pagina del tuo negozio, ti consigliamo di cercare l'opzione Product Search , non il blocco di ricerca predefinito di WordPress. Product Search limiterà i risultati ai prodotti WooCommerce, mentre l'altro blocco di ricerca includerà tutte le altre pagine del tuo sito.

Ecco come appare la funzione di ricerca di WooCommerce:

Tieni presente che il blocco Product Search non funziona all'interno dell'editor, quindi dovrai testarlo sul front-end. Inoltre, il blocco non offre la funzionalità di completamento automatico, quindi gli utenti dovranno digitare una query completa e caricare una nuova pagina per vedere i risultati.

4. Utilizzare i blocchi della categoria in primo piano

Oltre a indirizzare gli utenti verso prodotti selezionati con cura, potresti anche voler evidenziare categorie di prodotti specifiche. Ciò può essere particolarmente utile se vendi diversi tipi di prodotti, poiché consentirà agli utenti di cercare articoli in un reparto specifico.

Inizia aggiungendo il blocco Categoria in evidenza alla pagina del tuo negozio WooCommerce. Quindi, seleziona la categoria di prodotto che desideri evidenziare e fai clic su Fine :

Ecco come apparirà il blocco Categoria in evidenza :

Il blocco ti consente di cambiare il colore dello sfondo e del testo, ma non offre molte opzioni di personalizzazione aggiuntive. Inoltre, poiché il blocco occupa molto spazio, consigliamo di affiancare più categorie in evidenza utilizzando le colonne:

Poiché il blocco Categoria prodotto in evidenza è molto semplice, ti consigliamo di esaminare plug-in come Otter Blocks per un'ulteriore personalizzazione.

Con Otter Blocks, puoi modificare i blocchi WooCommerce aggiungendo animazioni e altre impostazioni di visibilità:

Inoltre, Otter Blocks aggiunge una varietà di nuovi blocchi che puoi utilizzare nel tuo negozio online. Questi includono opzioni come i pop-up (che sono perfetti per raccogliere le iscrizioni via e-mail) e le recensioni dei prodotti.

5. Aggiungi un'opzione per filtrare i prodotti in base al prezzo

Finora, il tuo negozio ha una barra di ricerca, prodotti selezionati personalmente, categorie in primo piano e l'intero catalogo di prodotti. Tutto ciò che ti manca è un modo per gli utenti di filtrare i prodotti.

Il blocco Filtra prodotti per prezzo consente ai clienti di fare proprio questo. Il blocco mostra un dispositivo di scorrimento che consente ai clienti di impostare i prezzi minimo e massimo per i prodotti che desiderano vedere:

I valori dei prezzi non sono modificabili: dipendono dai prezzi dei tuoi prodotti. I visitatori possono digitare i valori che desiderano o utilizzare il dispositivo di scorrimento per modificarli.

Quando apporti modifiche al dispositivo di scorrimento del prezzo, il blocco Tutti i prodotti si aggiornerà per mostrare i prodotti che soddisfano i criteri. Ciò accade senza che gli utenti debbano ricaricare la pagina.

Per quanto riguarda il posizionamento, ti consigliamo di aggiungere il blocco Filtra prodotti per prezzo sopra il tuo catalogo prodotti. In questo modo, gli utenti lo vedranno mentre scorrono verso il basso la pagina.

Puoi anche consentire agli utenti di filtrare i prodotti per taglia, colore e altre caratteristiche. Il blocco Filtra prodotti per attributo ti consente di sfogliare i prodotti che soddisfano un attributo scelto, in base alle opzioni disponibili nel tuo negozio.

E questo è praticamente tutto! Al termine, assicurati di salvare le modifiche e la tua nuova pagina del negozio inizierà a funzionare immediatamente.

Configura oggi la tua pagina del negozio WooCommerce

Il tuo obiettivo finale è creare una pagina che massimizzi le conversioni offrendo agli utenti tutte le opzioni che stanno cercando in un layout e un ordine sensato.

Dopo aver impostato la pagina del tuo negozio WooCommerce, puoi rivolgere la tua attenzione alle pagine dei singoli prodotti. A tal fine, assicurati di consultare la nostra guida su come ottimizzare la pagina del prodotto WooCommerce.

Hai domande su come creare una pagina negozio WooCommerce usando i blocchi? Fatecelo sapere nella sezione commenti qui sotto!