Come creare una tabella dei prodotti WooCommerce gratuitamente

Le persone creano un negozio di eCommerce nella speranza di vendere quanti più prodotti possibile. Ciò richiede molto lavoro da parte tua, dalla scelta della piattaforma giusta alla promozione del tuo negozio. La semplice creazione di un negozio non porterà automaticamente le vendite. Dovrai lavorare attivamente per ottimizzare i tuoi contenuti e il tuo funnel di acquisto.

Fortunatamente, le cose diventano relativamente più facili se utilizzi WooCommerce per creare il tuo negozio eCommerce su WordPress. Questo plugin ha un grande ecosistema di plugin di supporto per svolgere tutti i tipi di attività. In questo tutorial impareremo come aggiungere gratuitamente una tabella di prodotti WooCommerce al nostro negozio.

Vantaggi di una tabella prodotti

Diciamo che hai un grande negozio di eCommerce che vende molti prodotti. Alcuni di questi prodotti verranno probabilmente utilizzati per svolgere la stessa attività, ma hanno specifiche diverse, ad esempio per chi cerca un laptop per un uso quotidiano occasionale. La creazione di una tabella prodotti in uno scenario del genere fornirà molti vantaggi a te e ai tuoi utenti.

Confronti facili

Quando si confrontano prodotti simili, i tuoi utenti vorranno solo guardare le differenze nelle loro specifiche principali. Una tabella dei prodotti che elenca tutte queste differenze e somiglianze farà risparmiare loro molto tempo speso a passare da una scheda all’altra.

Ridurre i dubbi dei clienti

Un altro vantaggio delle tabelle dei prodotti è che hanno il potenziale per aumentare le vendite. Questo sostanzialmente si riduce a offrire agli utenti più opzioni se hanno dubbi sull’acquisto di un prodotto. Ci sono state alcune volte in cui non ero del tutto sicuro di acquistare un prodotto perché mi mancava qualcosa. Tuttavia, una tabella dei prodotti alla fine che mostrava i prodotti correlati con le caratteristiche esatte di cui avevo bisogno mi ha aiutato a prendere immediatamente una decisione di acquisto.

Sono sicuro che ti sei imbattuto nelle tabelle dei prodotti durante lo shopping. È ora di aggiungerne uno al tuo negozio ora!

Opzioni per l’aggiunta di una tabella prodotti

Le tabelle dei prodotti hanno uno scopo importante e sono utilizzate da molte persone. Di conseguenza, ci sono molti plug-in per tabelle di prodotti gratuiti ea pagamento che puoi installare sul tuo sito web. I plugin gratuiti di solito sono sufficienti se non hai bisogno di un grande set di funzionalità e puoi eseguire tu stesso la risoluzione dei problemi di base. Tuttavia, i plug-in premium ti daranno più funzionalità e hanno anche maggiori probabilità di fornire un supporto migliore e aggiornamenti regolari. Puoi dare un’occhiata ai plugin per tabelle dei prodotti WooCommerce più venduti su CodeCanyon per alcuni esempi.

Poiché questo post riguarda i plug-in gratuiti, utilizzeremo il plug-in WooCommerce Product Table Lite dalla directory dei plug-in di WordPress. È completamente gratuito, più votato e viene fornito con un discreto set di funzionalità.

Andare avanti. Installa e attiva il plugin. Vedrai una voce di menu etichettata Tabelle dei prodotti nella dashboard di amministrazione di WordPress.

Creazione di una tabella prodotti WooCommerce

Puoi navigare verso Tabelle dei prodotti > Aggiungi nuova tabella dal menu della dashboard di amministrazione per creare una nuova tabella prodotti. Il plug-in viene fornito con due modelli preimpostati per creare rapidamente una tabella e un’opzione vuota per creare tutto da zero.

Passa il mouse sopra il Tavola regolare sezione e vedrai a Uso pulsante. Fare clic su di esso per creare una nuova tabella prodotti. Questo ti mostrerà una sezione che dice che la tua tabella dei prodotti è stata creata. Riceverai anche uno shortcode simile a [product_table id="111"] che puoi utilizzare per mostrare la tabella dei prodotti in qualsiasi punto del tuo sito web. Questo ti mostrerà una tabella dei prodotti simile all’immagine qui sotto.

Ricorda che l’immagine sopra si basa solo sui valori predefiniti. Puoi cambiare molte cose in queste tabelle semplicemente configurando alcune opzioni. Tieni inoltre presente che nell’angolo in alto a destra è presente un menu a discesa per scegliere come ordinare i prodotti mostrati nella tabella. Gli articoli sono ordinati in base al prezzo (dal più basso al più alto) per impostazione predefinita.

L’elenco dei prodotti proviene da uno dei nostri tutorial precedenti in cui abbiamo imparato a personalizzare gratuitamente una pagina di prodotto WooCommerce. Puoi vedere che sono per lo più giocattoli ma c’è una felpa con cappuccio in fondo all’elenco. Apporteremo ora diverse modifiche alla nostra tabella.

Personalizzazione della tabella dei prodotti

Puoi andare a Tabelle dei prodotti > Tabelle dei prodotti dal menu di navigazione della dashboard per visualizzare un elenco di tutte le tabelle che abbiamo creato. Abbiamo creato solo una singola tabella da Tavola regolare preimpostato. Pertanto, vedremo solo una tabella denominata Tavola regolare. Fare clic sul nome per modificare la tabella. Ora rinomina la tabella in Tavolo giocattolo.

Il plug-in ti dà la possibilità di utilizzare codici brevi e la propria interfaccia per specificare cosa dovrebbe essere incluso nelle tabelle e come si comporta.

Inizieremo apportando alcune modifiche al Domanda scheda. La nostra tabella mostrerà solo giocattoli e nessun capo di abbigliamento, quindi ha senso impostare la categoria su only Giocattoli. Questa è la categoria principale principale, ma puoi anche scegliere una delle sottocategorie se hai molti prodotti o vuoi essere più specifico sul tipo di prodotti mostrati.

Inoltre imposteremo il numero massimo di prodotti su cinque e consentiremo l’impaginazione nascondendo gli articoli esauriti. L’ordine viene mantenuto impostato sul valore predefinito di Prezzo: da basso ad alto.

Aggiunta e rimozione di colonne

Ci dirigeremo verso il Colonne scheda ora. Ci dà le opzioni per specificare quali colonne o quali informazioni vengono mostrate su diverse larghezze dello schermo. C’è un lungo elenco di opzioni qui.

Vedrai il Colonne per laptop in cima. Queste sono sei colonne diverse qui che verranno mostrate su grandi schermi. Per impostazione predefinita, il plug-in mostra un’immagine del prodotto, il suo nome, descrizione, prezzo, quantità e un Aggiungi al carrello pulsante. Puoi rimuovere eventuali colonne esistenti o aggiungerne altre tue. Ci libereremo del Descrizione colonna facendo clic sul pulsante a croce. Puoi anche modificare la posizione delle colonne o duplicarle facendo clic su uno di questi pulsanti.

Clicca sul + Aggiungi colonna pulsante per aggiungere una nuova colonna per le valutazioni dei prodotti. Il primo testo di valutazione accanto all’icona del laptop è inteso come identificatore per te. Il secondo Giudizi testo specificato sotto il Intestazione scheda viene mostrata ai tuoi spettatori. Può anche essere un altro HTML personalizzato anziché testo normale. Ad esempio, potresti mostrare un’icona insieme a del testo nell’intestazione.

Il Design la scheda ti consente di impostare una serie di opzioni di stile come il colore del testo, il colore di sfondo, il riempimento o l’allineamento del testo. Ho impostato il colore del carattere per l’intestazione e le valutazioni effettive rgb(19, 138, 98) come esempio.

Il Modello di cella la scheda determina il contenuto che verrà mostrato agli utenti in diverse righe di prodotto. Non tutti i nostri prodotti avranno valutazioni fornite dagli utenti. Impostiamo il valore del campo su Nessuna valutazione in quel caso. Alleghiamo anche il nostro wc-pdt-rating classe alle valutazioni in modo da poter applicare regole CSS personalizzate. Anche le colonne vengono riordinate in modo che le valutazioni dei prodotti siano ora accanto ai loro nomi.

Aggiunta di filtri alla tabella dei prodotti

La tabella dei prodotti predefinita è costituita da un menu a discesa nell’angolo in alto a destra che offre agli utenti la possibilità di ordinare prodotti diversi in base a una serie di criteri come nome, prezzo e valutazione dell’utente.

Ora aggiungeremo una serie di altri filtri alla tabella in modo che gli utenti possano scegliere di visualizzare solo i prodotti di una sottocategoria specifica o all’interno di una determinata fascia di prezzo. Puoi aggiungere questi filtri in una riga di intestazione o nella barra laterale sinistra. Ho deciso di metterli nella seconda fila del nostro tavolo nel mio caso.

Clicca il + Aggiungi elemento pulsante nella seconda riga di intestazione e quindi selezionare Filtro di categoria. Tutte le opzioni predefinite vanno bene in questo caso, ma puoi giocarci per aggiungere una classe CSS personalizzata o uno stile agli elementi. Puoi anche abilitare l’opzione per consentire agli utenti di selezionare solo una singola categoria, se lo desideri.

Ora fai clic su + Aggiungi elemento ancora per aggiungere a Filtro prezzo. Modifica le opzioni del filtro per riflettere le fasce di prezzo più rappresentative dei prodotti che stai visualizzando. In questo caso, ho suddiviso le fasce di prezzo in tre segmenti: fino a $ 7, $ 7 a $ 15 e oltre $ 15. Clicca sul Salva le impostazioni pulsante una volta che hai finito.

La tua tabella dei prezzi dovrebbe apparire come la seguente immagine a questo punto.

Aggiunta del proprio stile

Sebbene il plug-in stesso sia dotato di molte opzioni di stile integrate per elementi diversi, potrebbero non coprire sempre tutto ciò di cui hai bisogno. Puoi passare al Stile scheda in tal caso e aggiungi tu stesso un sacco di regole CSS.

Tavolo prodotti WC non ci espone direttamente tutti i selettori di elementi, ma ci fornisce dei segnaposto per indirizzare tali elementi. Ad esempio, puoi applicare lo stile alla riga di intestazione utilizzando [heading_row] come tuo selezionatore. Puoi anche usare il tuo set di selettori. Ecco il CSS che ho applicato alla nostra tabella prodotti.

[heading_row] {
     text-transform: uppercase;
     color: #333;
     border-top: 1px solid black;
}
 [heading_cell] {
     background: #ddd;
}
 body .wcpt-table a.wcpt-button, body .wcpt-table a.wcpt-link_button {
     font-weight: bold;
     border-radius: 0;
}
 body .wcpt-table a.wcpt-button:hover, body .wcpt-table a.wcpt-link_button:hover {
     background: yellowgreen;
}

La tabella ora appare come l’immagine seguente. Passare il mouse sopra i pulsanti del carrello li trasformerà da arancione a verde.

Pensieri finali

In questo tutorial, abbiamo esaminato i vantaggi dell’utilizzo delle tabelle dei prodotti WooCommerce, alcune diverse opzioni per aggiungere tabelle dei prodotti al tuo sito Web e come crearle e personalizzarle. Il plug-in WooCommerce Product Table che ho usato in questo tutorial viene fornito con un discreto set di funzionalità per soddisfare tutti i tuoi requisiti di base, ma per funzionalità e interfaccia utente più avanzate, dai un’occhiata ai plug-in WooCommerce più venduti su CodeCanyon per alcuni esempi.