Articles

Come creare un design di pagina di categoria WooCommerce personalizzato

Stai cercando un’alternativa al design di pagina di categoria WooCommerce predefinito nel tuo tema WordPress? Creare un design personalizzato per le tue categorie di prodotti WooCommerce ti permette di offrire un’esperienza di acquisto ottimizzata, che può avere un effetto positivo sulla linea di fondo del tuo negozio.

Con il plugin giusto, creare il tuo layout di pagina di categoria WooCommerce personalizzato non deve essere difficile. Questo è ciò che vi mostreremo in questo post. Copriamo come creare un layout personalizzato basato su tabelle per le vostre categorie WooCommerce. Questo vi permette di controllare esattamente quali informazioni vengono visualizzate e come gli acquirenti interagiranno con i vostri prodotti.

Ecco un esempio di ciò che costruirete in questo post:

A WooCommerce category page with a table layout

Iniziamo con alcuni dei vantaggi di questo approccio tabellare. Poi, entreremo in una guida passo dopo passo su come farlo nel vostro negozio WooCommerce con il plugin WooCommerce Product Table.

I vantaggi di usare un layout a tabella per le vostre pagine di categoria

Mentre il design esatto della pagina di categoria del vostro negozio eCommerce dipende dal vostro tema WordPress, la maggior parte delle pagine di categoria dei temi hanno un aspetto simile a questo:

How most themes handle archive pages

Questo layout va bene per alcune situazioni, ma limita il numero di prodotti che potete visualizzare. Limita anche la quantità di informazioni che puoi fornire su ogni prodotto (anche se l’aggiunta di pulsanti di visualizzazione rapida dei prodotti è un modo per mitigare questo problema).

Woo Multistore ha scritto sull’importanza di progettare la pagina della categoria di WooCommerce in modo da aumentare le conversioni. Un layout a tabella ti aiuta a superare le carenze visualizzando più prodotti e informazioni in un layout compatto che finisce per utilizzare meno spazio, oltre ad aggiungere funzioni di navigazione extra come la ricerca e il filtraggio.

Questo significa che puoi avere più prodotti/dettagli dei tuoi prodotti davanti agli occhi degli acquirenti, il che assicura che possano vedere tutto il tuo catalogo e aumenta le possibilità che facciano un acquisto.

Vedrai anche i benefici SEO con i motori di ricerca perché puoi mostrare più contenuti personalizzati su una pagina completamente personalizzata (o anche sulle landing page). Questo ti permette di mostrare i prodotti che sono rilevanti, e poi aggiungere anche del testo contestuale. Tutto questo dovrebbe essere ricompensato con un posizionamento più alto.

Sebbene questo tipo di layout possa beneficiare tutti i tipi di negozio eCommerce, è particolarmente utile per:

  • Negozi all’ingrosso
  • File digitali (video, file audio, ebook, ecc.)
  • Ristoranti
  • Cataloghi di prodotti
  • …molti altri!

Come creare una pagina di categoria WooCommerce personalizzata con WooCommerce Product Table

Un altro vantaggio dell’utilizzo di un layout a tabella per il design della vostra pagina di categoria WooCommerce è che potete impostare tutto senza bisogno di particolari conoscenze tecniche.

Per fare questo, userete il plugin WooCommerce Product Table. Questo plugin elenca i vostri prodotti WooCommerce in un layout di tabella flessibile che voi controllate, insieme alla possibilità di aggiungere filtri, caselle di ricerca, paginazione e altro ancora.

Potete anche utilizzare il plugin per visualizzare solo i prodotti di specifiche categorie o sottocategorie. WooCommerce Product Table fornisce due modi per farlo:

  1. È possibile attivare centralmente il layout della tabella dei prodotti su tutte le pagine delle categorie di prodotti. (Ideale se vuoi personalizzare tutte le tue pagine di categoria di prodotto.)
  2. In alternativa, puoi usare uno shortcode per creare manualmente le tue pagine di categoria di WooCommerce. (Ad esempio, se si desidera utilizzare la tabella per elencare i prodotti solo da categorie specifiche.)

Di seguito, vi mostreremo come impostare la tabella dei prodotti di WooCommerce per ottenere entrambe le opzioni.

Configurare la tabella dei prodotti di WooCommerce

Una volta installato e attivato il plugin WooCommerce Product Table, è necessario configurare le impostazioni predefinite.

Questo ti permette di controllare quali informazioni vengono visualizzate nella tua tabella prodotti e come tutto funziona, come ad esempio se visualizzare o meno alcuni attributi del prodotto o come funzionerà la funzionalità di aggiunta al carrello.

Per iniziare, vai su WooCommerce → Impostazioni → Prodotti → Tabelle prodotti per accedere alle impostazioni del plugin di categoria.

Va bene esaminare tutte le impostazioni disponibili e scegliere quelle che si adattano alla tua situazione unica. Tuttavia, ci limiteremo a coprire le basi che sono essenziali per progettare la tua pagina di categoria WooCommerce.

Prima di tutto, trova l’impostazione Colonne sotto la sezione Contenuto della tabella. Qui è dove controllerai quali informazioni appaiono nella tua tabella. Oltre a visualizzare le informazioni principali sul prodotto, puoi anche visualizzare gli attributi del prodotto, i campi personalizzati e altro ancora.

Puoi trovare un elenco completo delle opzioni delle colonne qui, ma questa configurazione è una buona versione di base che funzionerà per la maggior parte dei negozi:

image, name, description, price, buy

Configuring WooCommerce Product Table columns

Più in basso, troverai la sezione colonna Aggiungi al carrello, che ti permette di controllare i pulsanti Aggiungi al carrello.

Per attirare gli acquisti in massa, puoi aggiungere delle caselle di controllo che permettono agli acquirenti di aggiungere più prodotti al loro carrello. Oppure, puoi anche solo aggiungere un pulsante di aggiunta al carrello separato per ogni prodotto (o entrambi!):

Configuring WooCommerce Product Table add to cart

Una volta che hai finito, assicurati di salvare le modifiche.

Una volta configurate le impostazioni del prodotto, hai due modi per creare le tue categorie WooCommerce. Le vedremo dopo.

2a. Abilita le tabelle dei prodotti su tutte le pagine delle categorie

WooCommerce Product Table ha un’opzione per aggiungere automaticamente il layout della tabella dei prodotti a tutte le pagine delle categorie. Questa è l’opzione più semplice e ci vuole solo un secondo per impostarla.

Nella pagina delle impostazioni del plugin, spunta semplicemente la casella ‘Product category archives’:

WooCommerce add product table to shop and category pages

Questo abiliterà globalmente il layout a tabella per tutte le categorie, sostituendo il layout predefinito fornito con il tuo tema.

Scopri di più su questo metodo.

2b. Usa un codice breve per creare il tuo design di pagina di categoria WooCommerce

Puoi anche usare un codice breve per elencare i prodotti WooCommerce per categoria. Questa opzione è perfetta se non vuoi usare il layout della tabella dei prodotti su TUTTE le tue categorie.

Semplicemente aggiungi lo shortcode del plugin a una normale pagina di WordPress, e specifica quali categorie vuoi elencare i prodotti. Ripetete il processo tutte le volte che volete – una volta per ogni categoria.

Con questo metodo, state essenzialmente creando una nuova pagina di categoria di prodotto WooCommerce per ogni categoria di prodotto che volete visualizzare, piuttosto che riprogettare la pagina di categoria WooCommerce globalmente.

Potete continuare a usare le vostre pagine di categoria esistenti insieme al vostro nuovo layout di tabella. Oppure, puoi semplicemente sostituire i link ad ogni pagina di categoria di prodotto esistente con le tue nuove pagine di categoria alimentate da tabelle. (Suggerimento: se non stai più utilizzando le pagine di categoria incorporate, reindirizzale a quelle nuove dove stai utilizzando le tabelle dei prodotti.)

Per iniziare, vai su Pages → Add New per creare una pagina WordPress di base. Poi, aggiungi lo shortcode [product_table] alla pagina. Puoi anche aggiungere un titolo di categoria usando il normale campo titolo.

Add the shortcode to your category page

Di default, lo shortcode mostrerà tutti i tuoi prodotti WooCommerce.

Tuttavia, puoi usare il parametro shortcode categoria per filtrare i prodotti di specifiche categorie e/o sottocategorie. È anche possibile combinare più categorie, o creare condizioni come un prodotto che deve essere in più categorie o sottocategorie per essere visualizzato.

Per esempio, per filtrare i prodotti dalla categoria “sedia”, è possibile utilizzare il seguente shortcode:

[product_table category="chair"]

Se si desidera aggiungere un’immagine della categoria o il nome della categoria, è anche possibile farlo sopra lo shortcode utilizzando il normale editor WordPress.

Una volta pubblicata la pagina, dovreste vedere il design della vostra nuova pagina di categoria WooCommerce:

A WooCommerce category page with a table layout

Per creare pagine per ulteriori categorie WooCommerce, ripetete il processo per ogni categoria o sottocategoria di prodotto che volete visualizzare.

WooCommerce Product Table
Un plugin facile da usare per elencare prenotazioni e appuntamenti di WooCommerce in un layout tabellare front-end.

Rendi le tue categorie WooCommerce più ricercabili con i filtri

Se vuoi aggiungere più strumenti di ricerca e filtro alle tue categorie WooCommerce, hai due opzioni:

  1. Puoi aggiungere opzioni di ricerca, ordinamento e filtro tramite le impostazioni della tabella prodotti WooCommerce. Questi appariranno sopra o sotto la tabella dei prodotti.
  2. WooCommerce Product Table include widget che puoi usare per aggiungere filtri alla tua barra laterale.

Puoi scegliere il tuo metodo preferito, oppure va benissimo usare entrambi gli approcci allo stesso tempo. Questo permetterà ai vostri acquirenti di scegliere il loro metodo preferito.

Per aggiungere opzioni di ricerca, ordinamento e filtro direttamente al layout della tabella, andate su WooCommerce → Impostazioni → Prodotti → Tabelle prodotti. Poi, scorri fino alla sezione Controlli tabella e configura le opzioni secondo le tue preferenze:

Table filters

Puoi saperne di più in questo articolo di aiuto.

Per utilizzare i widget di filtro, puoi andare in Aspetto → Widget. Lì troverai quattro nuovi widget con il prefisso “Product Table:”. Puoi aggiungere tutti i widget o scegliere solo i filtri specifici che vuoi includere:

Filter widgets

Ecco un esempio di come potrebbero apparire entrambi i set di filtri:

Example of WooCommerce category filters

Come creare una pagina di categoria WooCommerce personalizzata con il codice

Se sai come muoverti con PHP, HTML e CSS, è anche possibile creare una pagina di categoria WooCommerce personalizzata usando il codice, senza un plugin WooCommerce.

Vorrete lavorare con il file archive-product.php nel vostro tema o tema figlio. Puoi anche usare questo stesso approccio per modificare le pagine dei singoli prodotti attraverso il file single-product o altre parti del tuo storefront.

Purtroppo, poiché dovrai modificare direttamente il codice nei file template del tuo tema per fare ogni cambiamento, questo metodo non è accessibile ai non sviluppatori. Si consiglia di contattare Codeable se avete bisogno di aiuto o di attenersi al più semplice metodo di layout di tabella di cui sopra.

Crea il tuo design di pagina di categoria WooCommerce personalizzato oggi stesso!

Creare un design di pagina di categoria WooCommerce personalizzato ti permette di utilizzare un modo più adatto agli acquirenti per visualizzare i tuoi prodotti.

Utilizzando un layout di pagina di categoria basato su tabella, sei in grado di visualizzare più prodotti, insieme a più dettagli su ogni prodotto.

Puoi anche aggiungere molte utili opzioni di ricerca e filtro per aiutare i tuoi acquirenti a trovare i prodotti.

Collegando più efficacemente gli acquirenti con i prodotti a cui sono interessati, puoi vendere più prodotti e aumentare le entrate del tuo negozio.

Per usare un design a tabella per le tue categorie WooCommerce, puoi usare il plugin WooCommerce Product Table. L’installazione è facile e non avrete bisogno di particolari conoscenze tecniche per essere operativi come se voleste modificare direttamente il file template del vostro archivio.

WooCommerce Product Table
Un plugin facile da usare per elencare prenotazioni e appuntamenti WooCommerce in un layout a tabella front-end.

Inizia oggi e crea un modo più efficace per gli acquirenti di sfogliare le categorie di prodotti nel tuo negozio WooCommerce.