Come personalizzare la pagina della categoria WooCommerce (plugin e codifica)

Vuoi modificare le pagine delle tue categorie? In questa guida, ti mostreremo diversi metodi per personalizzare la pagina della categoria WooCommerce con e senza plug-in .

La pagina delle categorie è solitamente una delle pagine più trascurate e meno personalizzate in un negozio di eCommerce. Questo perché normalmente funge da ponte verso la gerarchia tra il prodotto e la pagina del negozio. Tuttavia, ci sono diversi scenari pratici in cui gli utenti fanno affidamento sulla pagina della categoria per cercare i prodotti, quindi ha senso modificarla e trarne il massimo.

Prima di dare un'occhiata ai diversi metodi per personalizzare la pagina delle categorie in WooCommerce, capiamo meglio i vantaggi di farlo.

Perché modificare la pagina della categoria WooCommerce?

La pagina della categoria mostra tutti i prodotti del tuo negozio WooCommerce inclusi in quella categoria . Anche se gli utenti normalmente cercano i prodotti utilizzando altre pagine, a volte i clienti trovano più facile cercare gli articoli dalla pagina della categoria. Ad esempio, se non sei sicuro del nome del prodotto ma ne conosci la categoria, probabilmente cercherai il prodotto utilizzando la pagina della categoria.

Inoltre, i tuoi clienti potrebbero rimanere sul tuo sito Web più a lungo se sono influenzati positivamente dalla pagina della categoria. Poiché queste pagine vengono solitamente trascurate, se le personalizzi, ti distinguerai e migliorerai l'esperienza del tuo cliente.

La buona notizia è che WooCommerce ti consente di personalizzare facilmente la pagina della tua categoria. La cattiva notizia è che le opzioni predefinite fornite da WooCommerce sono piuttosto limitate. Puoi modificare solo il nome, lo slug, la categoria principale, il testo della descrizione, il tipo di visualizzazione e la miniatura per ciascuna pagina di categoria.

Puoi anche modificare altri elementi con il personalizzatore del tema, ma se hai bisogno di portare la pagina della tua categoria a un livello completamente nuovo, hai bisogno di qualcos'altro.

Ecco perché in questa guida ti mostreremo diversi metodi per modificare la pagina della tua categoria in WooCommerce e aiutare i tuoi clienti a navigare più facilmente nel tuo sito.

Come personalizzare la pagina delle categorie di WooCommerce

Esistono diversi metodi per personalizzare facilmente la tua pagina di categoria WooCommerce in WordPress:

1. Con Divi
2. Utilizzo di un plug-in dedicato
3. Programmaticamente (codifica)

In questa sezione, esamineremo passo dopo passo ogni metodo, in modo da poter scegliere quello più adatto alle tue esigenze.

NOTA : Prima di iniziare, assicurati di aver impostato correttamente WooCommerce e di aver creato tutte le pagine necessarie.

1. Personalizza la pagina della categoria WooCommerce con Divi

Divi è uno dei temi WordPress più popolari e per una buona ragione. Viene fornito con molte funzionalità ed è completamente compatibile con WooCommerce, il che lo rende ideale per personalizzare le pagine delle tue categorie.

Questo tema viene fornito con un generatore di trascinamento della selezione integrato che ti consente di creare un modello di pagina di categoria personalizzato . In questo modo, puoi creare un modello per le pagine delle categorie e utilizzarlo per tutte nel tuo negozio WooCommerce.

Ciò che rende Divi così facile da usare è che puoi vedere tutte le modifiche apportate con il builder in tempo reale con l'anteprima dal vivo. Divi fornisce anche vari moduli per aggiungere facilmente molti elementi alle tue pagine, aiutandoti a risparmiare molto tempo durante la creazione o la modifica delle pagine delle tue categorie.

1.1. Installa e attiva Divi

Per iniziare a utilizzare Divi, devi prima installarlo e attivarlo. Puoi scaricare il file zip Divi dal loro sito Web ufficiale.

Quindi, vai alla dashboard di WordPress e vai su Aspetto> Temi > Aggiungi nuovo .

Premi Carica tema e scegli il file Divi .zip scaricato di recente da caricare sul tuo sito. Una volta caricato, fai clic su Installa ora per installare il tema e attivarlo una volta completata l'installazione.

L'attivazione del tema Divi installerà automaticamente anche il builder Divi che è il generatore di pagine integrato che utilizzeremo per personalizzare le pagine delle categorie.

1.2. Crea un modello di pagina di categoria personalizzato

Per iniziare a creare un modello di pagina di categoria personalizzato, devi andare su Divi > Theme Builder e premere Aggiungi nuovo modello .

Quindi, seleziona la casella per Tutte le pagine delle categorie di prodotti in Pagine di archivio e fai clic su Crea modello .

Successivamente, seleziona Aggiungi corpo personalizzato sul nuovo modello che hai appena aggiunto. Dal momento che stiamo creando un modello completamente nuovo con Divi, seleziona anche l'opzione Crea corpo personalizzato .

Vedrai 3 diverse opzioni lì:

• Costruisci il tuo modello da zero
• Usa uno dei modelli della libreria Divi e usalo ulteriormente per personalizzare la tua pagina di categoria WooCommerce
• Clona una pagina esistente e usala come modello per tutte le pagine delle categorie di prodotti

Puoi scegliere una delle opzioni più adatte a te. Per questo tutorial, selezioneremo Crea da zero, quindi premiamo il pulsante Inizia costruzione .

Verrai reindirizzato al layout della pagina Categoria da dove utilizzerai Divi Builder per creare il tuo modello.

Per iniziare a costruire il tuo modello, devi selezionare la struttura. In Nuova riga , seleziona il tipo di riga che desideri per le pagine delle categorie. Puoi aggiungere più righe e colonne. Avrai bisogno di almeno 2 righe per l'intestazione e il corpo della pagina della categoria, ma puoi anche avere più colonne se desideri aggiungere una barra laterale al corpo della pagina della categoria.

Dopo aver selezionato il numero di righe e colonne, dovrai aggiungere i moduli Divi per personalizzare ulteriormente il layout della pagina della categoria.

1.3. Intestazione della pagina di categoria

Per l'intestazione della pagina della categoria, è necessario aggiungere il titolo della pagina e il breadcrumb per le pagine della categoria.

Per aggiungere il titolo del post, fai clic sull'icona ' + ' nella riga, cerca Titolo del post nella barra di ricerca e selezionalo.

Vedrai le diverse opzioni del titolo del post. Puoi aggiungere la meta e l'immagine in primo piano, ma non le useremo per questo tutorial, quindi disabiliteremo le opzioni Mostra meta e Mostra immagine in primo piano nella sezione Elementi .

Vale la pena notare che non è necessario aggiungere alcun titolo qui poiché mostrerà automaticamente il titolo del post dinamico quando visualizzi l'anteprima del sito web. Inoltre, dalla scheda Progettazione , puoi modificare il colore di sfondo e i caratteri dell'intestazione.

Ci sono anche alcune opzioni avanzate per aggiungere ID CSS, classi, CSS personalizzati, effetti di scorrimento e altro. Dopo aver apportato tutte le modifiche necessarie, fare clic sull'icona " tick " per salvare le modifiche.

1.3.1 – Aggiungi modulo breadcrumb

Avrai anche bisogno di un modulo breadcrumb per una navigazione aggiuntiva nelle pagine delle categorie, quindi fai nuovamente clic sull'icona ' + ' per aggiungere un nuovo modulo e cerca " Woo Breadcrumb ".

Quindi, seleziona l'opzione Questo prodotto nella sezione Prodotto nella scheda Contenuto . Questo aggiungerà il titolo dinamico per la categoria di prodotto che i tuoi clienti vogliono vedere.

Ancora una volta, apporta le modifiche necessarie utilizzando le schede Design e Avanzate e, infine, fai clic sull'icona "segno di spunta" per salvare le modifiche.

1.4. Corpo pagina categoria

Dopo aver completato la modifica dell'intestazione, puoi passare al corpo della pagina della categoria. Se non hai ancora inserito una riga, clicca sull'icona verde “ + ” e seleziona il tipo di riga che vuoi aggiungere. Successivamente, dovrai aggiungere qui il modulo negozio perché contiene tutti i prodotti per il tuo negozio.

Premi l'icona “ + ” nella riga e cerca il modulo Shop .

Una volta cliccato, sarai in grado di configurare le opzioni per i tuoi prodotti nella pagina della categoria.

Nella scheda Contenuto , puoi modificare tutti gli elementi per la pagina della tua categoria. Assicurati di abilitare Usa pagina corrente per visualizzare i prodotti della categoria di prodotti specifica che i tuoi clienti selezionano sul tuo negozio online.

Ora tutto ciò che devi fare è modificare gli altri elementi di visualizzazione della pagina. Ad esempio, puoi aggiungere il numero di colonne o prodotti da mostrare per pagina e impaginazione da qui. Inoltre, puoi anche modificare i caratteri del prodotto e i testi dei prezzi e molto altro dalle schede Design e Avanzate . Dopo aver apportato tutte le modifiche necessarie, premere l'icona " tick " per salvare le modifiche.

Puoi aggiungere più righe o personalizzare le aree del piè di pagina con Divi Builder, ricordati solo di salvare il corpo del modello di pagina in basso a destra dello schermo una volta che hai fatto tutto.

Dopo aver salvato le modifiche, chiudi Divi Builder e verrai reindirizzato alla dashboard di Theme Builder. Fai clic su Salva modifiche anche qui per salvare le modifiche al tuo modello.

Ora quando visualizzi in anteprima la pagina della categoria di qualsiasi categoria di prodotto, sarai in grado di vedere tutte le modifiche.

2. Personalizza la pagina della categoria WooCommerce utilizzando un plug-in

Se non usi Divi e non vuoi sostituire il tuo tema attuale, l'opzione migliore per modificare la pagina della categoria WooCommerce sarebbe quella di utilizzare un plugin WordPress dedicato.

Per questo tutorial, utilizzeremo il plug-in Editor di categorie in quanto è gratuito, facile da usare e ti consente di personalizzare le pagine delle categorie in pochi clic. Questo strumento si concentra principalmente sull'area della descrizione delle pagine delle categorie e ti fornisce un editor per essa. In questo modo puoi modificare la descrizione delle categorie di prodotti per visualizzarle nelle pagine delle categorie.

Per iniziare a utilizzare questo plugin, nella dashboard di WordPress vai su Plugin > Aggiungi nuovo . Quindi, cerca Editor di categorie , fai clic su Installa ora e quindi attiva il plug-in.

Puoi anche installarlo manualmente scaricando il plugin direttamente dal repository di WordPress. Se vuoi saperne di più su questo processo, puoi dare un'occhiata alla nostra guida su come installare manualmente un plugin.

Dopo aver attivato Editor di categoria, vai su Prodotti > Categorie e premi Modifica sulla categoria di cui vuoi personalizzare la descrizione.

Qui vedrai che è stato aggiunto un editor di testo all'area della descrizione in cui puoi modificare il carattere del testo, i titoli, gli elenchi e l'allineamento. Inoltre, puoi aggiungere immagini di categoria e utilizzare la scheda Testo per personalizzare la descrizione della categoria con un po' di codice.

Dopo aver apportato tutte le modifiche necessarie, premere Aggiorna e visualizzare in anteprima le modifiche sulle pagine delle categorie.

È così che puoi personalizzare le tue pagine di categoria WooCommerce con un plug-in. Tuttavia, se desideri più opzioni di personalizzazione e hai capacità di codifica, puoi codificare la tua soluzione. Diamo un'occhiata a come farlo.

3. Personalizza la pagina della categoria WooCommerce in modo programmatico

Se non usi Divi e non desideri installare strumenti di terze parti, la codifica della tua soluzione è un'opzione eccellente. Il vantaggio principale della modifica della pagina delle categorie a livello di codice è che offre maggiore flessibilità.

Anche se non sei uno sviluppatore esperto, WooCommerce ti fornisce diversi shortcode e attributi shortcode per aiutarti con il processo. Se non hai familiarità con gli shortcode, dai un'occhiata a questa guida per capire meglio come usarli.

Con questi codici brevi, puoi visualizzare le categorie di prodotti in qualsiasi pagina:

• [ product_category ] – mostra una categoria di prodotto specifica
• [ product_categories ] – mostra tutte le categorie di prodotti del tuo negozio

Puoi usarli insieme agli attributi delle categorie di prodotti per modificare il modo in cui visualizzano le categorie di prodotti. Ad esempio, se desideri visualizzare le categorie di prodotti di primo livello e nascondere le sottocategorie, puoi utilizzare il seguente shortcode:

[ product_categories number="0" parent="0" ]

Sarai in grado di vedere le categorie di primo livello una volta visualizzata l'anteprima della pagina.

Inoltre, puoi anche utilizzare vari frammenti di codice per modificare la pagina della tua categoria in WooCommerce. Uno degli esempi più comuni è creare una categoria personalizzata.

Prima di mostrarti come farlo, assicurati di eseguire il backup del tuo sito Web WordPress e di utilizzare un tema figlio. Cambieremo alcuni file del tema principale, quindi se qualcosa va storto potresti danneggiare il tuo sito. Ecco perché è sempre consigliabile disporre di una versione di backup che è possibile ripristinare per evitare problemi.

Crea un titolo di pagina di categoria personalizzato

Per creare un titolo di pagina di categoria personalizzato utilizzando uno snippet di codice, devi andare su Aspetto > Editor di temi e aggiungere il seguente snippet di codice al file functions.php del tuo tema figlio.

 add_filter( 'woocommerce_page_title', 'QL_customize_woocommerce_page_title', 10, 1 );
function QL_customize_woocommerce_page_title( $page_title) {
 // Custom title for the product category 't-shirts'
 if ( is_product_category('t-shirts') ) { $page_title = 'Something';
 }
 // Custom title for the product category 'hoodies'
 elseif ( is_product_category('hoodies') ) {
 $page_title = 'Something else'; }
 return $page_title;
}

Per ulteriori informazioni sullo snippet, dai un'occhiata a questo sito.

In questo modo puoi visualizzare un titolo personalizzato invece del titolo della categoria predefinito nella pagina della categoria.

Cambia lo sfondo della pagina della categoria di prodotti

Allo stesso modo, puoi anche cambiare lo sfondo della pagina della tua categoria di prodotto utilizzando frammenti di codice. Basta incollare di nuovo il seguente frammento di codice nel file funtions.php .

 if (is_product_category()){ add_action( 'wp_head' , function () { ?> <style> .woocommerce.post-type-archive-product { background-image:none !important; } .woocommerce.single-product { background-image:none !important; } </style> <?php }); }

Il codice controlla se l'elemento è una categoria di prodotto e cambia il colore dello sfondo. Per ulteriori informazioni, controlla questo sito.

Questi sono solo alcuni esempi, ma c'è molto di più che puoi fare. Sentiti libero di prendere questo snippet come base e aggiungere il tuo codice personalizzato per personalizzare la pagina della categoria nel tuo negozio.

Bonus: aggiungi la visualizzazione rapida alle pagine delle categorie

Un'altra opzione interessante per personalizzare la tua pagina di categoria WooCommerce è aggiungere anche una funzione di visualizzazione rapida. Una visualizzazione rapida consentirà ai tuoi clienti di visualizzare i dettagli del prodotto nella rispettiva pagina della categoria senza dover aprire la pagina del prodotto effettiva. Ciò fornirà agli acquirenti un'esperienza utente migliore durante la navigazione nel tuo negozio online.

Per aggiungere una funzione di visualizzazione rapida alla pagina delle categorie, utilizzeremo il plug-in WooCommerce Direct Checkout . È uno dei migliori plug-in di pagamento per WooCommerce che viene fornito con molte funzionalità per aiutarti ad aumentare i tassi di conversione e le vendite.

Anche se questo è un plug-in freemium, per aggiungere una visualizzazione rapida alle pagine delle categorie è necessario installare sia la versione gratuita che uno dei piani premium. Quindi, per prima cosa, vai su questa pagina per installare e attivare WooCommerce Direct Checkout.

Dopo aver installato e attivato il plug-in, vai su WooCommerce > Pagamento diretto > Archivi nella dashboard di WordPress. Attiva l'opzione Aggiungi pulsante di visualizzazione rapida selezionando Sì dal menu a discesa e quindi salva le modifiche.

Se controlli il tuo sito dal front-end, vedrai che c'è un nuovo pulsante che appare proprio accanto al pulsante " Acquista ora/Aggiungi al carrello ". Ad esempio, per coloro che utilizzano il tema Storefront, il pulsante si presenta così.

Quando fai clic sul pulsante di visualizzazione rapida, si aprirà un pop-up con tutte le informazioni più importanti sul prodotto come titolo, prezzo, descrizione e così via. In questo modo, i clienti possono aggiungere direttamente i prodotti al carrello senza dover aprire la pagina del prodotto.

È possibile personalizzare ulteriormente il pulsante di visualizzazione rapida e il pop-up. Per ulteriori informazioni su come farlo, consulta la nostra guida su come aggiungere una visualizzazione rapida in WooCommerce.

Consigli per rinnovare la tua pagina di categoria

Come accennato in precedenza, il design generale e l'interfaccia delle pagine delle tue categorie sono molto importanti per far crescere il tuo negozio online. È una pagina molto utile dove puoi confrontare diversi prodotti della stessa categoria prima di acquistarli.

Una pagina di categoria ben progettata può aiutarti a mantenere i tuoi clienti più a lungo nel tuo negozio online. Migliore è l'esperienza che hanno nel tuo negozio, più è probabile che acquistino e diventino clienti fedeli.

Per assicurarti di ottenere il massimo dalle tue pagine di categoria e di distinguerti dalla concorrenza, questi sono alcuni consigli per portarli al livello successivo.

1. Aggiungi immagini di prodotti di grandi dimensioni

Quando si tratta di shopping online, un'immagine vale più di mille parole. Gli acquirenti vogliono vedere immagini grandi e chiare dei prodotti a cui sono interessati prima di dover andare alla pagina del prodotto.

Tuttavia, questo non significa che dovresti usare immagini di prodotti estremamente grandi per la pagina della categoria. Le immagini molto grandi tendono ad essere più pesanti e rallentano il tuo sito, quindi trova un buon equilibrio tra immagini grandi e velocità del sito.

Ad esempio, puoi utilizzare una pagina di categoria a 3 colonne con una dimensione dell'immagine di 300-400 pixel . Questo dovrebbe essere adeguato per mostrare i dettagli del prodotto richiesti su un monitor o dispositivo mobile di dimensioni medie.

Puoi vedere un buon esempio nelle pagine delle categorie di Nike, che è uno dei marchi di abbigliamento sportivo più famosi. Nike utilizza immagini chiare e di grandi dimensioni adeguate per un'immagine in miniatura del prodotto.

Inoltre, tieni presente che oggigiorno lo shopping online è ampiamente effettuato su dispositivi mobili. Assicurati di testare le pagine delle tue categorie sia su desktop che su dispositivi mobili, in modo che le dimensioni e il design siano appropriati per ogni dimensione dello schermo.

2. Usa immagini di intestazione accattivanti

Sappiamo tutti che le prime impressioni contano e ancora di più quando si tratta di shopping online. Quando un cliente apre una pagina di categoria, la prima cosa che nota è l'intestazione della pagina. Ecco perché dovresti assicurarti di utilizzare intestazioni interessanti per ogni categoria.

Uno dei modi migliori per creare un'intestazione attraente è aggiungere un'immagine di intestazione. Tieni presente il design generale del tuo sito e abbina l'immagine dell'intestazione alla combinazione di colori generale del tuo negozio online.

Ad esempio, puoi trovare immagini di intestazione in molti negozi online orientati alla moda come MAC Cosmetics.

Come puoi vedere, MAC utilizza un modo molto creativo per visualizzare l'immagine dell'intestazione. L'immagine dell'intestazione della categoria è costituita dalla sua immagine e corrisponde anche alla combinazione di colori scuri con i menu dell'intestazione.

3. Mantieni sempre visibili le briciole di pane

I breadcrumb sono uno degli elementi più utili per assicurarsi che i visitatori del tuo sito web siano nel posto giusto. Le breadcrumb aiutano anche gli utenti a navigare nel tuo sito, il che li aiuta a trovare ciò che stanno cercando più velocemente e migliora la loro esperienza di acquisto.

Durante la navigazione dei prodotti, a volte i clienti fanno clic su cose diverse e potrebbero perdersi nel tuo negozio. Avendo i breadcrumb sempre visibili, gli utenti possono vedere immediatamente dove si trovano e tornare facilmente alla categoria desiderata.

Alcuni siti preferiscono mostrare le categorie nella barra laterale, ma la maggior parte dei negozi online utilizza il percorso di navigazione perché è più facile per i clienti tornare al punto in cui si trovavano prima.

La visualizzazione dei breadcrumb non sarà un problema se hai seguito il tutorial sopra con Divi. Se utilizzi un tema diverso, dai un'occhiata a questa guida per scoprire come aggiungere e visualizzare i breadcrumb in ogni pagina.

4. Verificare se i Prodotti sono nelle Categorie corrette

Anche se questo sembra ovvio, possono verificarsi errori quando si aggiungono prodotti manualmente. Quindi questo punto è più un promemoria che una raccomandazione.

Esegui controlli di routine per assicurarti che tutti i prodotti siano assegnati alle categorie corrette e non siano confusi. Non è necessario controllarlo ogni giorno, ma è importante farlo una volta ogni tanto. Puoi anche verificare la presenza di errori di ortografia su prodotti, categorie e descrizioni.

Eventuali errori sui prodotti o sulle loro categorie potrebbero influenzare l'impressione dei visitatori del tuo sito web. Cosa penseresti se navigassi in un negozio online e trovassi dei jeans nella categoria laptop? Fare i controlli di tanto in tanto non richiede molto tempo e ti aiuterà a mantenere tutto organizzato.

Se vuoi migliorare ancora di più il tuo negozio eCommerce, dai un'occhiata ai nostri consigli WooCommerce per ottimizzare il tuo negozio online.

Conclusione

Tutto sommato, la pagina della tua categoria gioca un ruolo importante nel tuo negozio. Per distinguerti dalla concorrenza, dovresti personalizzare la tua pagina di categoria WooCommerce e trarne il massimo. Allo stesso modo, puoi anche modificare il tuo negozio, prodotto, il mio account e la pagina di pagamento per rinnovare l'intero negozio mentre ci sei.

Per concludere, abbiamo discusso di diversi metodi per modificare la pagina della categoria:

• Con Divi
• Utilizzo di un plug-in dedicato
• Programmaticamente

Ci auguriamo che questa guida sia stata utile e che tu possa modificare facilmente le pagine delle tue categorie. Inoltre, ti abbiamo anche fornito un suggerimento bonus per aggiungere una visualizzazione rapida del prodotto nella pagina della tua categoria.

Infine, abbiamo anche visto alcuni consigli per migliorare la tua pagina di categoria e aumentare i tuoi tassi di conversione utilizzando immagini migliori e rendendo i breadcrumb sempre visibili.

Se questo tutorial è stato utile, ti consigliamo di dare un'occhiata anche ai seguenti tutorial:

• Come nascondere e rimuovere il pulsante Aggiungi al carrello in WooCommerce
• Personalizza la pagina del carrello WooCommerce
• Come aggiungere commissioni al checkout di WooCommerce