Come personalizzare la pagina del negozio WooCommerce (senza codice)

Cerchi un modo per personalizzare la pagina del negozio WooCommerce? In questa guida dettagliata imparerai tre metodi 100% senza codice per personalizzare la pagina del negozio del tuo negozio.

La pagina del negozio del tuo negozio, chiamata anche pagina del catalogo, è la pagina che elenca più prodotti. Potrebbero essere tutti i tuoi prodotti (sulla pagina del negozio "principale") o prodotti con una categoria o un tag di prodotto specifico.

In termini più tecnici, è il design dell'archivio per il tipo di post Prodotti in un negozio WooCommerce.

Poiché la tua pagina del negozio è ciò che aiuta i visitatori a navigare e scoprire i tuoi prodotti, è importante farlo bene. Questo post ti insegnerà come!

Di seguito, imparerai tre diversi modi per personalizzare la pagina del negozio WooCommerce senza codice , utilizzando il nostro tema Botiga come esempio:

• Opzioni integrate nel Customizer del tema nativo di WordPress
• L'editor di blocchi nativo di WordPress
• Il plug-in del generatore di pagine Elementor (questo metodo ti consentirà di utilizzare la versione gratuita di Elementor)

Nota : se non hai ancora creato il tuo negozio WooCommerce, puoi consultare la nostra guida su come creare un negozio WooCommerce. Una volta che hai un negozio funzionante, torna qui per iniziare a personalizzare la pagina del negozio!

Una rapida introduzione alla personalizzazione della pagina del negozio WooCommerce

Se desideri personalizzare completamente la pagina del tuo negozio WooCommerce, ti consigliamo di scegliere un tema WooCommerce creato per darti flessibilità.

Mentre i principi generali che apprendi in questo tutorial possono essere applicati a qualsiasi tema WooCommerce, useremo il tema Botiga per alcuni motivi:

• Include opzioni dettagliate nel Customizer di WordPress per consentirti di personalizzare la pagina del negozio senza dover progettare tutto da zero.
• Se vuoi progettare tutto da zero, Botiga Pro ha una funzione integrata che ti consente di personalizzare tutto utilizzando l'editor di blocchi nativo di WordPress o la versione gratuita di Elementor.

Oltre alle sue numerose opzioni di personalizzazione, Botiga è anche uno dei temi WooCommerce più veloci, quindi preparerà il tuo negozio al successo anche in altre aree.

Detto questo, troverai comunque utile questo tutorial se utilizzi un tema WooCommerce diverso.

Ad esempio, la maggior parte dei temi WooCommerce ti offre almeno alcune opzioni nel Customizer.

Allo stesso modo, il metodo Elementor generale che presentiamo funzionerà con qualsiasi tema. L'unica differenza è che dovrai acquistare Elementor Pro se non stai utilizzando Botiga, mentre Botiga ti consente di fare tutto utilizzando la versione gratuita di Elementor.

Se vuoi saperne di più su Botiga, puoi andare alla pagina del tema Botiga.

Metodo 1 – Personalizzazione della pagina del negozio con il Customizer di WordPress

Per la maggior parte delle persone, il modo più semplice per modificare la pagina del negozio WooCommerce è utilizzare le opzioni del tema nel Customizer di WordPress.

Con Botiga, ottieni una gamma dettagliata di opzioni per aiutarti a personalizzare il layout, lo stile e il contenuto della pagina del negozio del tuo negozio.

Un tema diverso potrebbe non offrire altrettante opzioni, ma dovresti riuscire a trovarne almeno alcune nel Customizer.

Ecco come utilizzare le opzioni del tema Botiga per personalizzare la pagina del negozio WooCommerce.

1. Scegli cosa visualizzare sulla pagina del tuo negozio

Per dare il via alle cose, ti consigliamo di scegliere quali contenuti visualizzare sulla pagina del tuo negozio. L'impostazione predefinita è visualizzare solo i prodotti, ma Botiga ti offre anche la possibilità di mostrare anche le categorie.

Per accedere a queste impostazioni, apri il Customizer di WordPress andando su Aspetto → Personalizza nella dashboard di WordPress.

Quindi, seleziona Generale sotto WooCommerce :

Ora, utilizza il menu a discesa Visualizzazione pagina negozio per scegliere se mostrare solo i prodotti, solo le categorie o entrambi.

Puoi anche effettuare una scelta simile per le tue pagine di archivio di categoria utilizzando il menu a discesa Visualizzazione categoria . In questo caso, scegli se visualizzare le sottocategorie.

2. Apri le impostazioni della pagina del negozio nel Customizer di WordPress

Quindi, torna all'elenco del menu principale nel Customizer e seleziona le opzioni Catalogo prodotti per personalizzare in modo più completo la pagina del tuo negozio.

Ora vedrai una serie di opzioni nella barra laterale, divise in due schede: Generale e Stile :

• Generale : controlla il layout e il contenuto degli elementi sulla pagina del tuo negozio.
• Stile : regola il design degli elementi sulla pagina del tuo negozio, ad esempio cambiando colori/caratteri o aggiungendo bordi.

3. Personalizza il layout generale

Per iniziare, espandi le impostazioni del layout per regolare il layout generale della pagina del tuo negozio.

Innanzitutto, ti consigliamo di scegliere il tipo di layout, che offre tre opzioni generali:

• Griglia
• Elenco
• Opere murarie

Puoi anche controllare le opzioni di layout generali, come il numero di righe e colonne da utilizzare.

Al di sotto di questo, puoi scegliere quale stile di intestazione utilizzare nella tua pagina del negozio e quale contenuto includere nell'intestazione, ad esempio se mostrare o meno le categorie di prodotti.

Più in basso nel menu Personalizzatore, ottieni le opzioni per controllare il layout della barra laterale, gli elementi della pagina e l'impaginazione:

• Layout barra laterale : puoi aggiungere una barra laterale verticale o orizzontale. Puoi quindi controllare il contenuto della barra laterale utilizzando i widget. Questo può essere davvero ottimo per aggiungere filtri di prodotto per aiutare i visitatori a sfogliare i tuoi prodotti.
• Elementi della pagina : puoi mostrare/nascondere diversi elementi sulla pagina.
• Impaginazione : puoi utilizzare l'impaginazione normale, lo scorrimento infinito o un pulsante "Carica altro" basato su Ajax che carica nuovi prodotti senza ricaricare la pagina.

4. Personalizza la Scheda Prodotto

Successivamente, puoi aprire la sezione Scheda prodotto per personalizzare il modo in cui i singoli prodotti vengono visualizzati nella pagina del negozio.

Innanzitutto, puoi scegliere diversi layout delle carte e posizionamenti dei pulsanti di aggiunta al carrello.

Ad esempio, nello screenshot qui sotto, puoi vedere che abbiamo spostato il pulsante Aggiungi al carrello sopra l'immagine del prodotto nell'angolo in basso a sinistra.

Più in basso nelle impostazioni, puoi fare alcune altre scelte importanti:

• Personalizza o disabilita il comportamento di visualizzazione rapida del prodotto.
• Abilita/disabilita elementi di contenuto specifici, ad esempio se mostrare o meno il conteggio delle recensioni sulla pagina del negozio.
• Regola l'allineamento e la spaziatura.

5. Personalizza tag e categorie di vendita

Successivamente, puoi espandere le sezioni Tag di vendita e Categorie per configurare quelle aree della pagina del tuo negozio.

Le impostazioni del tag di vendita ti consentono di controllare il posizionamento e il testo del badge di vendita. C'è anche un'opzione per mostrare invece la percentuale di vendita, che inserirà dinamicamente lo sconto corretto per ogni prodotto.

Le impostazioni delle categorie ti consentono di controllare il layout delle schede delle categorie se hai scelto di visualizzare le categorie nel passaggio 1 di questa guida:

6. Regola le opzioni di stile secondo necessità

Una volta che sei soddisfatto del layout e del contenuto della pagina del tuo negozio, puoi passare alla scheda Stile per regolare lo stile di tutto secondo necessità.

Ancora una volta, è qui che puoi cambiare i colori, regolare i caratteri, aggiungere bordi e così via.

Non è necessario modificare nulla qui. Ma se vuoi apportare alcune modifiche, è una buona area da esplorare.

7. Esplora altre opzioni di personalizzazione

Oltre all'area dedicata al catalogo prodotti nel Customizer, Botiga offre anche alcune altre opzioni che potrebbero influire sulla pagina del tuo negozio.

Ad esempio, puoi regolare il colore dei pulsanti Aggiungi al carrello e Visualizzazione rapida (così come tutti gli altri pulsanti sul tuo sito) aprendo le impostazioni dei pulsanti .

Se c'è un dettaglio specifico che desideri modificare, vale la pena esplorare queste altre opzioni. Ma se ti piace già l'aspetto della pagina del tuo negozio, non c'è bisogno di scavare più a fondo.

8. Pubblica il layout della pagina del tuo negozio

Una volta che sei soddisfatto dell'aspetto della pagina del tuo negozio, tutto ciò che devi fare è fare clic sul pulsante Pubblica per pubblicarlo nel tuo negozio.

Metodo 2: personalizzazione della pagina del negozio con l'editor a blocchi di WordPress

Per la maggior parte dei negozi, le opzioni di personalizzazione integrate di Botiga offrono una flessibilità sufficiente quando si tratta di creare una pagina del negozio personalizzata in WooCommerce.

Tuttavia, potresti avere alcune situazioni in cui desideri creare un design veramente personalizzato da zero.

Per aiutarti a raggiungere questo obiettivo senza codice, puoi utilizzare la funzione Templates Builder in Botiga Pro per personalizzare la pagina del negozio utilizzando l'editor di blocchi nativo di WordPress o Elementor (anche la versione gratuita).

In questa sezione, ti mostreremo come funziona con l'editor di blocchi. Quindi, ti mostreremo come funziona con Elementor nella prossima sezione. Se sai già che vuoi utilizzare Elementor, fai clic su questo collegamento per passare a quella sezione.

1. Abilita il modulo Botiga Pro Template Builder

Per abilitare il generatore di modelli, vai su Aspetto → Dashboard del tema → Funzionalità del tema .

Quindi, scorri verso il basso e abilita il modulo Templates Builder .

Avrai bisogno di Botiga Pro per attivare questo modulo — se non lo hai già, puoi acquistarlo cliccando qui.

2. Crea un nuovo layout della pagina del negozio

Successivamente, vai su Aspetto → Modelli Botiga → Aggiungi modello per creare un nuovo modello di pagina del negozio.

Nell'interfaccia del modello, assegnagli un nome (ad es. "Pagina del negozio") e scegli Catalogo del negozio come tipo di modello.

3. Progetta la pagina del tuo negozio utilizzando i blocchi

Ora puoi utilizzare l'editor per progettare il layout della pagina del tuo negozio utilizzando i blocchi.

Puoi utilizzare uno qualsiasi dei blocchi WordPress esistenti (o blocchi di altri plugin).

Botiga aggiunge anche una serie di propri blocchi WooCommerce per importanti contenuti dinamici come i dettagli dell'archivio del negozio e i dettagli del prodotto.

Per elencare effettivamente determinati tipi di prodotti, puoi utilizzare il blocco Product Query .

All'inizio, l'aggiunta del blocco Product Query mostrerà una griglia dei tuoi prodotti.

È quindi possibile utilizzare le impostazioni del blocco per filtrare diversi tipi di prodotti, personalizzare il layout, modificare la scheda del prodotto, modificare gli stili e altro ancora.

Per uno sguardo più dettagliato, guarda anche questo video:

4. Pubblica il tuo modello

Una volta che sei soddisfatto del design della pagina del tuo negozio, tutto ciò che devi fare è fare clic sul pulsante Pubblica .

Quando apri la pagina del negozio del tuo negozio sul frontend, dovresti vedere il tuo modello di pagina del negozio personalizzato.

Metodo 3: personalizzazione della pagina del negozio con il plug-in Elementor

Se preferisci utilizzare Elementor invece dell'editor di blocchi, puoi anche seguire un approccio simile per personalizzare la pagina del negozio WooCommerce.

Normalmente, avresti bisogno di Elementor Pro per personalizzare la pagina del negozio del tuo negozio. Tuttavia, con Botiga Pro, puoi personalizzare completamente la pagina del tuo negozio utilizzando la versione gratuita di Elementor.

Sei in grado di raggiungere questo obiettivo perché Botiga Pro aggiunge i propri widget Elementor personalizzati per consentirti di configurare la pagina del tuo negozio.

Detto questo, Botiga Pro è ancora pienamente compatibile con Elementor Pro. Quindi, se hai già una licenza Elementor Pro, puoi comunque beneficiare di tutte le funzionalità di progettazione extra che aggiunge.

Ecco come modificare la pagina del negozio WooCommerce con Elementor e Botiga.

1. Abilita il modulo Botiga Pro Template Builder

Per abilitare il generatore di modelli, vai su Aspetto → Dashboard del tema → Funzionalità del tema .

Quindi, scorri verso il basso e abilita il modulo Templates Builder .

Avrai bisogno di Botiga Pro per attivare questo modulo — se non lo hai già, puoi acquistarlo cliccando qui.

2. Crea un nuovo layout della pagina del negozio e avvia Elementor

Successivamente, vai su Aspetto → Modelli Botiga → Aggiungi modello per creare un nuovo modello di pagina del negozio.

Nell'interfaccia del modello:

1. Assegnagli un nome interno, ad esempio "Pagina del negozio".
2. Scegli Catalogo del negozio come tipo di modello.
3. Fai clic sul pulsante Salva bozza per salvarlo nel database (questo è utile per l'utilizzo di Elementor).

Dopo averlo fatto, puoi fare clic sul pulsante Modifica con Elementor per avviare l'interfaccia di Elementor.

3. Usa i widget Botiga per creare il design della tua pagina del negozio

Ora puoi utilizzare la normale interfaccia di Elementor per progettare la pagina del tuo negozio.

Per aiutarti a impostare il design con la versione gratuita di Elementor, Botiga aggiunge una serie di propri widget nella sezione Botiga WooCommerce .

Per la pagina del negozio, il widget più importante è il widget Product Query , che ti consente di visualizzare un elenco di alcuni/tutti i tuoi prodotti.

Ci sono anche altri widget utili, come il titolo dell'archivio , la descrizione dell'archivio e altri widget etichettati come archivio.

Nelle impostazioni del widget Product Query , puoi scegliere quali prodotti visualizzare, personalizzare il layout, modificare la scheda del prodotto e altro ancora.

Puoi anche sfruttare tutto lo stile normale e le opzioni avanzate offerte da Elementor.

Oltre a utilizzare i widget Botiga WooCommerce per progettare la pagina del tuo negozio, sei anche libero di utilizzare qualsiasi altro widget di Elementor, inclusi i widget di componenti aggiuntivi di Elementor di terze parti.

4. Pubblica la pagina del tuo negozio

Una volta che sei soddisfatto del design della pagina del tuo negozio, fai clic sul pulsante Pubblica in Elementor per renderlo attivo.

Una volta pubblicato, puoi aprire la pagina del tuo negozio sul frontend e dovresti vedere il design personalizzato che hai creato con Elementor.

Conclusione: crea una pagina del negozio WooCommerce personalizzata oggi

Questo conclude la nostra guida su come personalizzare la pagina del negozio WooCommerce senza bisogno di alcun codice.

Per la maggior parte delle persone, le opzioni integrate di Botiga nel Customizer offrono già una flessibilità sufficiente per creare una pagina del negozio WooCommerce personalizzata.

Se desideri un controllo ancora maggiore, la funzione Template Builder in Botiga Pro ti consente di personalizzare completamente ogni parte della pagina del tuo negozio utilizzando l'editor di blocchi nativo di WordPress o Elementor (anche la versione gratuita).

Se non stai già utilizzando Botiga, valuta la possibilità di passare a Botiga oggi per poter accedere a tutte queste opzioni di personalizzazione, oltre a molto altro ancora!

Hai ancora domande su come personalizzare la pagina del negozio WooCommerce? Fateci sapere nei commenti.