Come personalizzare la pagina delle categorie WooCommerce in WordPress senza codifica

Stai pensando se dovresti modificare la pagina delle categorie di prodotti WooCommerce in Elementor?

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

Ma la domanda è: come personalizzare la pagina delle categorie di prodotti WooCommerce in WordPress?

Beh, sicuramente non dovrai scrivere alcun codice per personalizzare la pagina delle categorie di WooCommerce se segui la procedura mostrata in questo blog.

In questo articolo imparerai come personalizzare la pagina delle categorie WooCommerce senza alcuna codifica. Inoltre, puoi anche conoscere come creare diversi modelli di archivio personalizzati per ciascuna categoria individualmente. E anche modi per ottimizzare la tua pagina di archivio per aumentare il tasso di conversione.

Quindi, continua a leggere….

Perché personalizzare le pagine delle categorie WooCommerce

Secondo costruitoCon, 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.

By default, WooCommerce provides a functional but generic layout for your product archive and category pages. While this default setup gets your store online, it rarely does anything to help your business stand out or convert visitors into buyers.

Customizing your WooCommerce category pages allows you to transform standard product grids into high-converting, tailored landing pages. Here is why you should make the switch:

• Stand Out From Competitors: Break away from the generic, millions-of-stores look and build a unique design that matches your specific brand identity.
• Improve Shopper Navigation: Add multi-attribute filters, instant AJAX search bars, and clean breadcrumbs to help customers find products effortlessly.
• Boost Conversion Rates: Embed active buying triggers right on the product grid, such as “Quick View” buttons, variation swatches, and “Add to Wishlist” options.
• Increase Average Order Value: Strategically place promotional banners, cross-sells, or a mini floating cart to encourage shoppers to buy more in a single session.
• Rank Higher on Google: Optimize your pages for broad, high-intent keywords by easily adding unique SEO copy, proper heading structures, and custom metadata.
• Tailor Layouts by Product Type: Create different shopping experiences across your site, like a clean list view for digital downloads versus an image-heavy grid for apparel.
• Optimize for Mobile Traffic: Build mobile-first designs featuring thumb-friendly navigation and slide-out filter drawers for the majority of your shoppers.

Come personalizzare la pagina delle categorie di prodotti WooCommerce in 6 passaggi

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

Passaggio #1: installa il generatore di pagine Elementor e ShopEngine

To edit product category page of WooCommerce in Generatore di pagine Elementor using the process shown in this blog, you will need two WordPress plugins:

• Elementore: Scarica plugin
• ShopEngine: Scarica plugin
• ShopEngine Pro: Ottieni il plugin

ShopEngine is the complete WooCommerce solution for WordPress to build, customize, and optimize your online store including shop page, checkout page, and shopping cart, with 70+ widgets, 40+ templates, E 20+ advanced modules.

Nota: Puoi utilizzare il buono comunità20 per ottenere 20% OFF su ShopEngine Pro. Installa prima Elementor poiché ShopEngine dipende da questo generatore di pagine. Se hai bisogno di aiuto per attivare ShopEngine Pro, controlla il documentazione.

Passaggio #2: crea un modello di pagina di categoria WooCommerce personalizzato

Dopo aver installato e attivato tutti i plugin richiesti, devi creare un modello di categoria. Per creare un modello di pagina di categoria personalizzata WooCommerce,

• Navigare verso: ShopEngine ⇒ Modello di builder
• Fare clic su Aggiungi nuovo
• Fornire un nome modello
• Scegli Tipo come archivio dal menu a discesa
• Lasciare così com'è il campo Categoria applicabile è creare un modello comune per tutte le categorie
• Attiva l'opzione Imposta predefinito per sovrascrivere qualsiasi modello di pagina di categoria/archivio esistente
• Selezionare l'opzione vuota in Progettazione di esempio 
• Fai clic su Modifica con Elementor per iniziare a costruire il modello

Alternatively, you can also create a single WooCommerce page and then add the sections from the ready widget library of Shopengine.

Nota: Ho scelto l'opzione vuota perché in questo blog mostrerò come farlo creare una pagina di categoria personalizzata da zero. ShopEngine ne offre molteplici modello di pagina di categoria WooCommerce precostruito. Se vuoi usare a modello predefinito, scegli quello che ti piace, quindi vai al passaggio 5. (i passaggi 3 e 4 sono obbligatori se vuoi costruire da zero)

Step #3: Choose a layout/structure for the custom WooCommerce category page

Once you are in the editor mode, you need to choose a structure for your custom WooCommerce category page.

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

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

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

Imparentato: Come personalizzare la pagina 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 della pagina di categoria sono

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

Ne userò alcuni. Puoi scegliere di utilizzarli tutti per modificare la pagina delle categorie di prodotti Elementor WooCommerce. 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 utilizzerai e infine fare clic sul pulsante “Salva modifiche” per aggiornare lo stato.

Sceglierò a layout a una colonna E 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 nei risultati della ricerca, Mostra menu a discesa delle categorie, Testo per tutte le categorie, Icona di ricerca, ecc.

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.

Nota: IL Il widget filtro prodotto è disponibile solo con ShopEngine Pro. Quindi, assicurati di aver installato e attivato ShopEngine Pro.

È possibile personalizzare le opzioni relative al filtro come Filtro prezzo, Filtro valutazione, Filtro colore, Filtro categoria, ecc. Inoltre, è possibile personalizzare le opzioni relative al layout come Modalità di visualizzazione filtro, Abilita pulsante di attivazione/disattivazione contenitore, Colonne (per riga), ecc. Se lo desideri, puoi anche aggiungere un elenco di attributi personalizzati.

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

Or, you can also add a carrello galleggiante option to encourage the users buy more from you. Adding a mini cart can be a good option too.

Imparentato: Come personalizzare la pagina del mio account WooCommerce

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

Una volta impostati i layout 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 sul 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, dell'icona di ricerca/stile del testo, dello stile della categoria, dello stile del prodotto, del pulsante Altri prodotti e del carattere globale. 

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

Filtri prodotto: Puoi trovare opzioni per definire lo stile della sezione dei filtri prodotto in diverse categorie come Stili comuni, Filtro prezzo/Cursore intervallo, Filtro valutazione e Filtro categoria.

Archivio Prodotti: È possibile personalizzare le impostazioni dello stile del prodotto in archivio personalizzando le opzioni fornite in sezioni come Contenitore prodotto, Immagine prodotto, Categorie prodotto, Titolo prodotto, Prezzo prodotto, Tag fuori tag, Pulsante Aggiungi al carrello, Valutazione, Vendita flash e Impaginazione.

Imparentato: Come personalizzare la pagina del carrello di WooCommerce

Passaggio #6: aggiorna e visualizza l'anteprima del modello di pagina della categoria personalizzata WooCommerce

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

Ora, questo era il processo di creazione di una pagina di categoria personalizzata per il tuo negozio WooCommerce. Ma che ne dici di creare un design diverso per ogni categoria del tuo negozio? Bene, puoi farlo anche con ShopEngine. Per conoscere maggiori dettagli, passare alla sezione successiva.

Come creare una pagina di archivio WooCommerce personalizzata per ciascuna categoria separatamente?

Puoi creare un design completamente diverso per ogni categoria o solo per una categoria specifica del tuo negozio WooCommerce. Per questo, il processo rimane praticamente lo stesso di mostrato sopra. Ma in passo 2, Crea un modello di pagina di categoria, Voi non è possibile lasciare vuoto il campo Categoria applicabile.

Devi selezionare la categoria nel campo Categoria applicabile per il quale desideri applicare il modello di progettazione che stai creando. Ad esempio, se desideri creare un design che dovrebbe essere applicabile solo alla categoria Musica, nel campo Categoria applicabile scegli Musica. 

Il resto dei passaggi sarà lo stesso della creazione di un modello di categoria generale mostrato nel file sezione sopra.

Nota:  Quando crei un modello di archivio per una categoria specifica, lo farà si applicano solo a quella pagina di categoria e non al resto delle pagine di categoria.
Per il resto delle categorie è necessario creare un modello di categoria diverso con il campo “Categoria applicabile” vuoto per tutte le categorie o uno diverso per ciascuna di esse. Altrimenti, il resto delle categorie avrà il modello di archivio WooCommerce predefinito o il modello offerto dal tema attivato.

Ecco un'anteprima della diversa pagina di categoria WooCommerce con un design diverso creato con ShopEngine:

Nota: L'opzione per creare modelli/design diversi per diverse categorie del tuo sito WooCommerce è disponibile solo nella versione Pro di ShopEngine.

Bonus: 5 modi per ottimizzare la pagina delle categorie WooCommerce per aumentare il tasso di conversione 

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

Fornire l'opzione di filtro del prodotto

La pagina della tua categoria per impostazione predefinita mostra tutti i prodotti di quella categoria. Ma di solito, le persone cercano un prodotto di un certo colore, taglia o qualsiasi altra caratteristica.

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 potranno trovare facilmente i loro prodotti e questo ti aiuterà a farlo aumentare le tue vendite.

Controlla anche Come aggiungere il cambio valuta al sito WooCommerce in 5 passaggi

Aggiungi l'opzione di confronto dei prodotti

Aggiunta di un Confronto prodotti L'opzione per il tuo WooCommerce aiuterà i consumatori a confrontare prodotti di 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ù rapidamente. E questo ti aiuterà a raggiungere rapidamente il tuo obiettivo di aumentare le vendite.

Pulsante lista dei desideri

Lista dei desideri offre la possibilità di aggiungere prodotti al carrello per un successivo acquisto. Alcune persone non trovano la Wishlist 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 i prodotti che hanno aggiunto alla loro lista dei desideri. Quindi, aggiungi un'opzione della lista dei desideri nella pagina della categoria WooCommerce.

Opzione Visualizzazione rapida

Aggiunta di un occhiata veloce Il pulsante garantisce un'ottima esperienza utente 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 dei prodotti con un solo clic.

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

Ottimizzazione SEO on-page

Category pages are the indicator of page hierarchy on your website. So, optimizing your category page for search engines should never be neglected. Because, while you want your home and product page to rank, your category page if ranked can also bring you a lot of traffic.

The more traffic you get on your website will increase your chance that you will get more conversions. So, make sure you add proper SEO metadata, optimize internal and external linking, optimize the URL, etc. You can take help from AI SEO plugins like Ottieni Genie.

For better conversion, try to create a custom checkout page for your WooCommerce store.

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 nulla di cui preoccuparti. Perché ShopEngine oltre ad essere un favoloso personalizzatore WooCommerce con abbondanza di Widget WooCommerce, prevede inoltre 13+ moduli come Lista dei desideri, Pagamento rapido, 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; dal pagina del negozio A pagina di ringraziamento. Guarda il video per conoscere le vaste funzionalità che ShopEngine ha da offrire.

Domande frequenti

Altri blog relativi a WooCommerce:

👉 Come aggiungere un campo di pagamento personalizzato avanzato WooCommerce
👉 I migliori plugin per il carrello degli acquisti per WooCoomerce
👉 Come risolvere l'errore del carrello vuoto di WooCommerce
👉 Come aggiungere WooCommerce Multi Step Checkout

Parole finali sulla pagina di categoria WooCommerce personalizzata

Una pagina di categoria è una pagina essenziale sia per i tuoi clienti che per i motori di ricerca. Personalizzare e ottimizzare le pagine delle tue categorie può solo aiutarti a ottenere più successo nella tua attività di e-commerce. 

La cosa buona è che ora sai come personalizzare la pagina delle categorie WooCommerce in WordPress e come ottimizzare la pagina per raddoppiare il tasso di conversione. Oltre a ciò, ora sai come creare pagine di categorie WooCommerce personalizzate per ciascuna categoria separatamente.

Puoi sfruttare il builder WooCommerce più completo disponibile sul mercato denominato ShopEngine per ottimizzare la pagina delle categorie del tuo eStore. E puoi ottenere subito il suo plugin WooCommerce tuttofare su 20% OFF!

🔔 🔔 Per acquistare ShopEngine Pro a 20% a un prezzo inferiore utilizzare il codice coupon comunità20.

Quindi affrettiamoci e uniamoci subito alla community degli amanti di WooCommerce!