Come personalizzare la pagina della categoria WooCommerce senza codifica

Pubblicato: 2022-05-22

Stai valutando se dovresti modificare la pagina della categoria del prodotto WooCommerce?

Bene, se lo sei, ti consiglio vivamente di farlo. Perché personalizzare la pagina Archivio WooCommerce e ottimizzarla può aumentare le tue vendite.

Ma la domanda è come personalizzare la pagina delle categorie di WooCommerce?

Bene, sicuramente non devi eseguire alcun codice per personalizzare la pagina della tua categoria se segui il processo mostrato in questo blog.

In questo articolo imparerai come personalizzare la pagina della categoria WooCommerce senza alcuna codifica . E anche modi in cui puoi ottimizzare la tua pagina di archivio per aumentare il tasso di conversione.

Quindi, continua a leggere….

I contenuti si nascondono
Perché personalizzare le pagine delle categorie WooCommerce
Come personalizzare la pagina della categoria WooCommerce in 6 passaggi
Passaggio 1: generatore di pagine Elemento Installr e ShopEngine
Passaggio 2: crea un modello di pagina di categoria
Passaggio 3: scegli un layout/struttura per la pagina della categoria WooCommerce
Passaggio 4: trascina e rilascia i widget ShopEngine e personalizza le impostazioni
Passaggio 5: personalizza le impostazioni di stile della pagina Archivio WooCommerce
Passaggio 6: aggiorna e visualizza in anteprima il modello di pagina della categoria personalizzata di WooCommerce
Bonus: 5 modi per ottimizzare la pagina della categoria WooCommerce per aumentare il tasso di conversione
Fornisci l'opzione di filtro del prodotto
Aggiungi l'opzione di confronto dei prodotti
Pulsante Lista dei desideri
Opzione di visualizzazione rapida
Ottimizzazione SEO in pagina
Parole finali

Perché personalizzare le pagine delle categorie WooCommerce

Secondo builtWith, WooCommerce è utilizzato da oltre il 29% per cento dei primi 1 milione di siti Web. Sebbene questa popolarità indichi la credibilità di WooCommerce come strumento di eCommerce, riflette anche che migliaia e migliaia di siti Web utilizzano lo stesso layout predefinito che WooCommerce ha da offrire.

WooCommerce
Utilizzo di WooCommerce tra i primi 1 milione di siti

E se pensi che l'utilizzo della pagina WooCommerce predefinita riduca solo al minimo le possibilità del tuo sito Web di distinguersi dalla massa, allora ti sbagli. Ci sono anche altri motivi che devi considerare. Per conoscere questi altri motivi, diamo un'occhiata alla pagina della categoria predefinita di WooCommerce con il tema ventidue ventidue di WordPress attivato.

Pagina della categoria WooCommerce predefinita
Pagina della categoria predefinita di WooCommerce

Se vedi, la pagina della categoria predefinita di WooCommerce ha un aspetto di base che non è molto attraente. Inoltre, non ha opzioni avanzate come cercare prodotti utilizzando nomi, filtrare prodotti in base a diversi attributi, ecc. Tutti questi sono importanti per garantire una buona esperienza utente sul tuo negozio online.

Inoltre, a chi non piace un sito di bell'aspetto, rilassante per gli occhi e facile da navigare?

Bene, la risposta è tutti! E passiamo alla sezione successiva in cui imparerai come personalizzare i modelli di pagina delle categorie di WooCommerce senza alcuna codifica.

Personalizza WooCommerce usando ShopEngine

Come personalizzare la pagina della categoria WooCommerce in 6 passaggi

Questo è un tutorial facile da seguire su come personalizzare le pagine delle categorie WooCommerce senza alcuna codifica. Seguendo questo processo, puoi scegliere il layout e il design della tua pagina di archivio WooCommerce in pochissimo tempo. Quindi iniziamo…

Passaggio 1: generatore di pagine Elemento Installr e ShopEngine

Per modificare la pagina della categoria di prodotto di WooCommerce utilizzando il processo mostrato in questo blog, avrai bisogno di due plugin per WordPress:

  • Generatore di pagine di Elementor
  • ShopEngine e ShopEngine Pro

ShopEngine è il builder WooCommerce definitivo per il generatore di pagine trascina e rilascia: Elementor. È un componente aggiuntivo per Elementor che viene fornito con un numero enorme di widget e moduli per semplificare la personalizzazione di WooCommerce.

Nota : puoi utilizzare il coupon community20 per ottenere uno SCONTO del 20% su ShopEngine Pro . Installa prima Elementor poiché ShopEngine dipende da questo generatore di pagine. Se hai bisogno di aiuto per attivare ShopEngine Pro, controlla la documentazione.

Usa "community20" per ottenere ShopEngine Pro con uno sconto del 20%.

Passaggio 2: crea un modello di pagina di categoria

Dopo aver installato e attivato tutti i plug-in richiesti, è necessario creare un modello di categoria. Per creare un modello di pagina di categoria personalizzata WooCommerce,

  • Vai a: ShopEngine ⇒ Modello Builders
  • Fare clic su Aggiungi nuovo
  • Fornisci un nome modello
  • Scegli Tipo come archivio dal menu a discesa
  • Attiva l'opzione Imposta default per sovrascrivere qualsiasi modello esistente di Categoria/Pagina di archivio
  • Seleziona l'opzione vuota in Design di esempio
  • Fai clic su Modifica con Elementor per iniziare a creare il modello
crea un modello di categoria WooCommerce
Crea un modello di pagina di categoria WooCommerce vuoto

Nota : ho scelto l'opzione vuota perché in questo blog mostrerò come creare una pagina di categoria personalizzata da zero. ShopEngine offre più modelli di pagina di categoria WooCommerce predefiniti. Se vuoi utilizzare un modello pre-costruito, scegli quello che ti piace, quindi vai al passaggio 5. (i passaggi 3 e 4 sono obbligatori se vuoi creare da zero)

Passaggio 3: scegli un layout/struttura per la pagina della categoria WooCommerce

Una volta che sei in modalità editor, devi scegliere una struttura per la tua pagina di categoria WooCommerce.

Userò 3 diversi tipi di layout per tre diverse sezioni per creare una pagina di archivio personalizzata. Puoi fare lo stesso come mostrato nel blog o scegliere il layout che ti piace.

Per scegliere una struttura, fai clic sull'icona "+" , quindi passa con il mouse sul layout che ti piace, quindi fai clic su di esso.

seleziona una struttura per la pagina della categoria personalizzata
Scegli una struttura

Nota : puoi ripetere la stessa procedura per scegliere layout diversi.

Correlati: come personalizzare la pagina del prodotto WooCommerce

Passaggio 4: trascina e rilascia i widget ShopEngine e personalizza le impostazioni

ShopEngine fornisce oltre 8 widget dedicati per creare pagine di archivio WooCommerce personalizzate. Questi widget di pagina di categoria sono

  • Descrizione archivio
  • Prodotti d'archivio
  • Titolo archivio
  • Conteggio risultati archivio
  • Modalità di visualizzazione archivio
  • Ordina per filtro
  • Filtro prodotti per pagina
  • Elenco prodotti
  • Filtri prodotto

Userò alcuni di questi. Puoi scegliere di usarli tutti. Ma prima, devi assicurarti che tutti i widget siano attivati ​​e disponibili per l'uso.

Puoi attivare/abilitare i widget da ShopEngine ⇒ Widget . Qui attiva tutti i widget o quelli che intendi utilizzare e infine clicca sul pulsante Salva modifiche per aggiornare lo stato .

Abilita tutti i widget della pagina della categoria ShopEngine
Abilita tutti i widget della pagina della categoria ShopEngine

Sceglierò un layout a una colonna e trascinerò i widget Ricerca avanzata e Conteggio risultati archivio.

trascina e rilascia il widget di ricerca e conteggio dei risultati per la pagina della categoria wooCommerce
Trascina e rilascia i widget Ricerca avanzata e Conteggio risultati archivio

È possibile selezionare il widget e personalizzare le relative impostazioni. Ad esempio, se fai clic sul widget Ricerca avanzata, nel pannello di sinistra, ottieni opzioni come Colonna prodotti, Mostra categoria nel risultato della ricerca, Mostra menu a discesa categoria, Testo per tutte le categorie, Icona di ricerca, ecc.

Personalizza il widget di ricerca avanzata di WooCommerce
Personalizza il widget di ricerca avanzata di WooCommerce

Ora, per la sezione successiva, utilizzerò i passaggi descritti nel passaggio 3 per inserire un nuovo layout di due colonne. Quindi trascina e rilascia i widget Filtri prodotto e Archivia prodotti.

trascina e rilascia i filtri dei prodotti e i widget dei prodotti di archivio personalizzano la pagina dell'archivio di WooCommerce
Seleziona una nuova struttura Elementor

Nota: il filtro del prodotto è disponibile solo con ShopEngine Pro . Quindi, assicurati di aver installato e attivato ShopEngine Pro.

Acquista subito ShopEngine Pro

Puoi personalizzare le opzioni relative ai filtri come Filtro prezzo, Filtro valutazione, Filtro colore, Filtro categoria, ecc. Inoltre, puoi personalizzare le opzioni relative al layout come Modalità visualizzazione filtro, Attiva pulsante di commutazione contenitore, Colonne (per riga), ecc. Se lo desideri, puoi anche aggiungere un elenco di attributi personalizzato.

Personalizza il widget Filtri di prodotto
Personalizza il widget Filtri di prodotto

Puoi modificare le impostazioni del layout dei prodotti Archivia dall'opzione layout WooCommerce. Per maggiori dettagli su come modificare l'opzione di layout, puoi controllare questo documento. Inoltre, puoi personalizzare le impostazioni dei contenuti come badge di vendita flash, mostra categorie, mostra valutazione descrizione, ecc. Puoi anche scegliere un'icona di impaginazione personalizzata e un ordine personalizzato del pulsante CTA come Aggiungi al carrello, Aggiungi alla lista dei desideri, Visualizzazione rapida, ecc. .

Personalizza il widget Prodotti di archivio

Correlati: Come personalizzare la pagina del mio account WooCommerce

Passaggio 5: personalizza le impostazioni di stile della pagina Archivio WooCommerce

Una volta impostati i layout personalizzati e i widget personalizzati, è il momento di cambiarne l'aspetto modificando le impostazioni di stile di questi widget. Per modificare le impostazioni di stile è necessario cliccare sul widget e nel pannello andare alla scheda Stile per accedere a tutte le impostazioni di stile. Diamo un'occhiata all'opzione di stile per i widget utilizzati in questo tutorial:

Ricerca avanzata: puoi personalizzare varie opzioni del modulo di ricerca, icona di ricerca/stile testo, stile categoria, stile prodotto, pulsante Altri prodotti e carattere globale.

Modifica le impostazioni di stile del widget di ricerca avanzata
Modifica le impostazioni di stile del widget di ricerca avanzata

Conteggio risultati archivio: puoi personalizzare le opzioni di allineamento, colore e tipografia.

widget di conteggio dei risultati di elementsKit
Modifica le impostazioni di stile del widget Conteggio risultati archivio

Filtri del prodotto: puoi trovare opzioni per definire lo stile della sezione dei filtri del prodotto in diverse categorie come Stili comuni, Filtro prezzo/Intervallo di scorrimento, Filtro valutazione e Filtro categoria.

Impostazioni dello stile del filtro del prodotto Impostazioni dello stile
Personalizza le opzioni di stile del widget Filtro prodotto

Archivia prodotti: puoi personalizzare l'impostazione dello stile del prodotto in archivio personalizzando le opzioni fornite in sezioni come Contenitore del prodotto, Immagine del prodotto, Categorie di prodotto, Titolo del prodotto, Prezzo del prodotto, Etichetta di sconto, Pulsante Aggiungi al carrello, Valutazione, Vendita flash e Impaginazione.

Archivia le impostazioni dello stile del prodotto
Personalizza lo stile del widget Prodotti di archivio

Correlati: come personalizzare la pagina del carrello di WooCommerce

Passaggio 6: aggiorna e visualizza in anteprima il modello di pagina della categoria personalizzata di WooCommerce

Dopo aver terminato la personalizzazione dello stile, fare clic sul pulsante Aggiorna per salvare. Ora puoi fare clic sul pulsante di anteprima per vedere l'anteprima o visitare manualmente qualsiasi pagina di categoria e dovresti vedere che il nuovo modello è attivato come l'anteprima di seguito:

Personalizza l'anteprima della pagina delle categorie
Pagina di categoria WooCommerce personalizzata utilizzando ShopEngine
Personalizza WooCommerce usando ShopEngine

Bonus: 5 modi per ottimizzare la pagina della categoria WooCommerce per aumentare il tasso di conversione

Ecco alcuni suggerimenti utili che puoi seguire per ottimizzare la tua pagina di archivio WooCommerce per aumentare il tasso di conversione:

Fornisci l'opzione di filtro del prodotto

aggiungi filtri di prodotto per aumentare la conversione
Filtro prodotto nella pagina della categoria WooCommerce

La tua pagina di categoria per impostazione predefinita mostra tutti i prodotti di quella categoria. Ma di solito, le persone cercano un prodotto di un certo colore o dimensione o qualsiasi altro attributo.

Pertanto, dovresti fornire le opzioni per filtrare e restringere il numero di prodotti di una categoria in base al loro attributo preferito. In questo modo, le persone possono trovare facilmente i loro prodotti e questo ti aiuterà ad aumentare le tue vendite.

Aggiungi l'opzione di confronto dei prodotti

Opzione di confronto prodotti su WooCommerce

L'aggiunta di un'opzione di confronto dei prodotti al tuo WooCommerce aiuterà i consumatori a confrontare prodotti di un tipo simile. Questa opzione è necessaria soprattutto se offri prodotti digitali come cellulari, orologi, ecc.

L'opzione di confronto dei prodotti aiuterà i clienti a prendere una decisione più velocemente. E questo ti aiuterà a raggiungere rapidamente il tuo obiettivo di aumentare le vendite.

Pulsante Lista dei desideri

personalizza la lista dei desideri della pagina dell'archivio woocommerce
Pulsante Wishlist nella pagina della categoria

Wishlist offre la possibilità di aggiungere prodotti al carrello per un acquisto successivo. Alcune persone non trovano la lista dei desideri così efficace quando si tratta di conversione. Ma onestamente, è molto efficace.

Perché le persone di solito aggiungono prodotti alla loro lista dei desideri quando il prodotto gli piace davvero ma per qualche motivo non possono acquistarlo subito. Ma ciò non significa che quella persona non acquisterà i prodotti in seguito.

Nella maggior parte dei casi, le persone tendono ad acquistare prodotti che hanno aggiunto alla loro lista dei desideri. Quindi, aggiungi un'opzione alla lista dei desideri nella tua pagina della categoria WooCommerce.

Opzione di visualizzazione rapida

visualizzazione rapida aggiunta per aumentare il tasso di conversione della pagina di categoria modello di pagina di categoria personalizzata woocommerce
Opzione di visualizzazione rapida nella pagina Archivio WooCommerce

L'aggiunta di un pulsante di visualizzazione rapida garantisce un'esperienza utente eccezionale poiché le persone non devono visitare pagine separate per conoscere un prodotto. Utilizzando questa opzione di visualizzazione rapida, il tuo cliente può rimanere nella pagina della categoria e conoscere i dettagli sui prodotti con un solo clic.

Se le persone devono andare alla pagina di un prodotto per visualizzarlo, possono lasciare il tuo sito senza acquistare il prodotto nel caso non gli piaccia. Tuttavia, se fornisci l'opzione di visualizzazione rapida in modo che i clienti possano controllare più prodotti rimanendo sulla stessa pagina, migliorerà l'esperienza di acquisto. E di conseguenza, ti aiuterà ad aumentare le vendite del tuo negozio.

Ottimizzazione SEO in pagina

SEO in pagina

Le pagine delle categorie sono l'indicatore della gerarchia delle pagine sul tuo sito web. Quindi, l'ottimizzazione della pagina della tua categoria per i motori di ricerca non dovrebbe mai essere trascurata. Perché, mentre vuoi che la tua home e la pagina del prodotto si classifichino, anche la tua pagina di categoria, se classificata, può portarti molto traffico.

Più traffico ottieni sul tuo sito web aumenterà le tue possibilità di ottenere più conversioni. Quindi, assicurati di aggiungere metadati SEO adeguati, ottimizzare i collegamenti interni ed esterni, ottimizzare l'URL, ecc. Puoi chiedere aiuto a plug-in SEO come Rankmath, Yoast SEO ecc.

Pensi che tutti i punti sembrino validi, ma avrò bisogno di più plugin per aggiungere queste opzioni al mio sito per aumentare la conversione?

Beh, non hai niente di cui preoccuparti. Poiché ShopEngine oltre ad essere un favoloso personalizzatore WooCommerce con abbondanza di widget WooCommerce, fornisce anche oltre 13 moduli come Wishlist, Quick checkout, Confronto prodotti, ecc.

Inoltre, puoi personalizzare il tuo negozio WooCommerce completo con questo plugin. utilizzando questo editor di categorie, puoi modificare tutte le tue pagine WooCommerce; dalla pagina del negozio alla pagina di ringraziamento. Guarda il video per conoscere le vaste funzionalità che ShopEngine ha da offrire.

ShopEngine: l'ultimo WooCommerce Builder

Altri blog relativi a WooCommerce:

Come aggiungere campi personalizzati avanzati alla pagina di pagamento di WooCommerce.
I migliori plugin per il carrello degli acquisti per WooCoomerce
Come risolvere l'errore del carrello vuoto di WooCommerce

Parole finali

Una pagina di categoria è una pagina essenziale sia per i tuoi clienti che per il motore di ricerca. E personalizzare e ottimizzare le pagine delle tue categorie può solo aiutarti a ottenere più successo nella tua attività di eCommerce.

La cosa buona è che ora sai come personalizzare la pagina della categoria WooCommerce e come ottimizzare la pagina per raddoppiare il tasso di conversione.

Puoi sfruttare il builder WooCommerce più completo disponibile sul mercato chiamato ShopEngine per ottimizzare la pagina delle categorie del tuo eStore. E puoi ottenere il suo plug-in WooCommerce a tutto tondo con uno SCONTO del 20% ora! Per acquistare ShopEngine Pro al 20% in meno usa il codice coupon community20 .

Quindi, affrettiamoci e unisciti subito alla comunità degli amanti di WooCommerce!

Inizia a personalizzare WooCommerce con ShopEngine