Avete un listino prezzi sul vostro sito web? Questi prezzi potrebbero essere relativi a servizi come la cura del prato oppure potrebbero essere i prezzi di pacchetti software. Dal mondo tecnologico agli studi di yoga, la maggior parte delle aziende potrebbe utilizzare delle tabelle prezzi per rappresentare meglio ciò che offre. Il modo migliore è dare un’occhiata ai migliori plugin per tabelle prezzi di WordPress, quindi implementarne uno sul vostro sito web.

Ma Questo Fa Sorgere una Domanda, Perché è Così Importante Avere una Tabella Prezzi?

La risposta a questa domanda può sembrare ovvia (volete migliorare le conversioni, giusto?), ma è bello capire il perché di una tabella prezzi. Perché un plugin di tabelle prezzi è più efficace nel realizzare una vendita rispetto a un normale elenco di punti, a dei paragrafi o anche a un’immagine?

Avere una pagina dei prezzi elegante può mettere in rilievo i tuoi servizi e aumentare le conversioni. Dai un'occhiata a questi pratici plugin WordPress per tabelle prezzi. 🛒Click to Tweet

Che Cosa Cercare in un Plugin per Tabelle Prezzi di WordPress

Ora che conosciamo i vantaggi di un plugin per tabelle prezzi di WordPress, diamo un’occhiata ad alcune delle funzionalità che dovreste considerare:

Potremmo passare in rassegna decine di funzionalità utili per i prezzi, ma questo è essenziale per un buon inizio.

I migliori Plugin per Tabelle Prezzi di WordPress a Confronto (e Come Creare le Vostre Tabelle Personali)

  1. Responsive Pricing Table by WP Darko
  2. Go Pricing
  3. Pricing Tables WordPress Plugin – Easy Pricing Tables
  4. Pricing Table by Supsystic
  5. CSS3 Responsive WordPress Compare Pricing Tables
  6. ARPrice – Responsive WordPress Pricing Table Plugin
  7. WP Pricing Table Builder – Responsive Pricing Plans Plugin for WordPress
  8. Pricing Table – Price list, Price Table, Easy Pricing Table
  9. WRC Pricing Tables
  10. Come Costruire una Tabella Prezzi in WordPress Da Zero

Per quanto riguarda i plugin per tabelle dei prezzi e i siti WordPress, le opzioni non mancano. Alcuni dei migliori plugin possono essere utilizzati gratuitamente, mentre altri sono premium senza opzione gratuita. Detto questo, tutti i plugin qui sotto meritano un posto in questa lista, e alcuni di loro hanno caratteristiche uniche che li rendono perfetti per specifici settori o aziende.

1. Responsive Pricing Table by WP Darko

Il Responsive Pricing Table è uno dei plugin per la creazione di tabelle prezzi più ricchi di funzionalità e user-friendly. Fornisce un’eccellente versione gratuita senza limitazioni sul numero di piani o su come create le tabelle per i vostri siti web. È possibile, tuttavia, effettuare l’upgrade alla versione premium per accedere a funzioni più avanzate, come le skin e un “equalizzatore” per rendere tutte le colonne esattamente della stessa altezza.

Il plugin WordPress Responsive Pricing Table

Il plugin WordPress Responsive Pricing Table

Le tabelle dei prezzi possono essere completate con semplici campi e pulsanti di backend. Ad esempio, tra i campi predefiniti che potete utilizzare ci sono i prezzi, le descrizioni, i titoli dei piani e le icone. Alcuni dei pulsanti personalizzati consentono collegamenti a Stripe e PayPal, mentre le classi CSS personalizzate sono sicuramente di aiuto agli sviluppatori avanzati.

Costi

È disponibile un piano gratuito.

Potete acquistare il plugin premium per $19 su un sito o $49 per siti illimitati.

Gli sviluppatori di Darko vendono altri plugin, e ottenerli tutti al prezzo di $79. Questo potrebbe essere utile per alcune aziende.

Le Caratteristiche Che Rendono Responsive Pricing Table un’Ottima Scelta

2. Go Pricing

L’app Go Pricing non ha una versione gratuita, ma vanta migliaia di vendite e alcune ottime recensioni nel marketplace di CodeCanyon. Per non dire, poi, che ci vogliono solo $27 per ottenere uno dei migliori plugin per tabelle prezzi sul mercato.

Go Pricing - WordPress Responsive Pricing Tables

Go Pricing – WordPress Responsive Pricing Tables

Cosa rende il plugin Go Pricing così speciale? Tanto per cominciare, ha dei piani tariffari incredibilmente eleganti, con colori moderni e un sacco di spazi bianchi che fanno in modo che non sembri ingombrante. Potete anche scegliere tra una vasta collezione di temi, alcuni dei quali sono realizzati solo per determinati settori. Ci piace anche il fatto che il plugin si integri con diversi page builder e abbia degli shortcode che fanno sì che nessuno debba essere un mago della programmazione per creare tabelle prezzi.

Costi

Un costo una tantum di $27 con l’opzione per l’estensione del supporto a un anno, per $8,25.

Le Caratteristiche Che Rendono Go Pricing un’Ottima Scelta

3. Pricing Tables WordPress Plugin – Easy Pricing Tables

Se siete interessati a tabelle prezzi e di confronto pulite e senza orpelli grafici, il plugin di WordPress Pricing Tables può essere la soluzione adatta a voi. È disponibile sia in versione gratuita che premium. Quest’ultima parte da $29 all’anno per un sito web e arriva a $99 all’anno per siti illimitati. Alcune delle funzionalità premium sono molto interessanti; tra queste un componente aggiuntivo WooCommerce e l’integrazione di Google Analytics.

Pricing Tables WordPress Plugin – Easy Pricing Tables

Pricing Tables WordPress Plugin – Easy Pricing Tables

Alcune delle altre integrazioni per le versioni premium includono Easy Digital Downloads, Stripe e un componente aggiuntivo Pricing Toggle. In più, potete iniziare la procedura di progettazione con 10 progetti preimpostati. Come accennato, questo è uno dei plugin più semplici, quindi ci sembra adatto a coloro che non vogliono elementi come animazioni e grafiche.

Costi

Il plugin core è gratuito.

Il plugin premium costa $29 all’anno per un sito, $59 all’anno per cinque siti e $99 all’anno per siti illimitati.

Le Caratteristiche Che Rendono Easy Pricing Tables un’Ottima Scelta

4. Pricing Table by Supsystic

Il team di sviluppo di Supsystic è noto per creare ogni sorta di plugin per gallerie fotografiche, popup, tabelle dati e altro. Ma diamo un’occhiata al plugin Pricing Table, che è offerto come soluzione gratuita con diverse funzionalità con cui divertirsi. Infatti, la versione gratuita del plugin offre template preimpostati, animazioni al passaggio del mouse e personalizzazione dei pulsanti. Potete anche importare ed esportare con facilità le informazioni delle vostre tabelle.

Pricing Table by Supsystic

Pricing Table by Supsystic

Ci piace anche il look del plugin premium, dato che parte da $39 per un sito e offre un ampio pacchetto di template premium e restrizioni di ruolo. Nel complesso, direi che questo è uno dei migliori plugin per tabelle prezzi, per quel che riguarda il core, cioè il plugin gratuito, e vi permette di sorvolare sulla versione a pagamento. Tuttavia, i template premium sono piuttosto interessanti e non costano molto.

Costi

Viene offerto un piano gratuito.

Potete effettuare un upgrade alla versione premium per un sito a $39. Oppure per cinque siti a $69. O, infine, a $149 per siti illimitati.

Le Caratteristiche Che Rendono Pricing Table by Supsystic un’Ottima Scelta

5. CSS3 Responsive WordPress Compare Pricing Tables

Al prezzo di $20, il plugin CSS3 Responsive pricing table è un acquisto dal valore incredibile. Viene venduto solo sul marketplace di CodeCanyon, ma è necessario tenere presente che non è disponibile alcuna versione gratuita. Detto questo, la maggior parte delle persone non si preoccuperà di pagare $20 per un plugin di gestione dei prezzi con un’alta valutazione e ottime recensioni. Nel complesso, il plugin ha alcuni bellissimi template per cominciare subito. È possibile modificare i colori e i caratteri, oltre a evidenziare alcuni dei migliori piani che avete.

CSS3 Responsive WordPress Compare Pricing Tables

CSS3 Responsive WordPress Compare Pricing Tables

La maggior parte delle tabelle prezzi di questo elenco sono reattive, ma questa sembra particolarmente buona dopo i test sul mio telefono e sul mio tablet. Sembra anche che lo sviluppatore sia pronto nelle risposte e disposto a creare nuove funzionalità e a rilasciarle negli aggiornamenti. Ad esempio, nel momento in cui scrivo questo articolo, sto visualizzando tre major release di funzionalità, cioè colonne scorrevoli, modalità responsive e importazione ed esportazione di dati.

Costi

$20 per tutte le funzionalità.

Potete pagare $5,63 per estendere a un anno l’assistenza clienti. Non è offerto nessun plugin gratuito.

Le Caratteristiche Che Rendono CSS3 Pricing Tables Grids un’Ottima Scelta

6. ARPrice – Responsive WordPress Pricing Table Plugin

Anche il plugin ARPrice è in vendita sul sito di CodeCanyon, ma al prezzo di $23. Stiamo iniziando a notare che molte aziende e singoli individui cominciano ad essere più disposti a pagare questi prezzi così bassi per ottenere tutte le funzionalità di cui hanno bisogno, anziché lavorare con un plugin gratuito privo di funzionalità. Indipendentemente da questo, questo plugin per tabelle prezzi presenta alcuni dei migliori elementi visivi di questo elenco, in quanto supporta diversi tipi di media, come le immagini di sfondo e le icone.

ARPrice - WordPress Pricing Table Plugin

ARPrice – WordPress Pricing Table Plugin

Il designer di backend è un editor visuale che rivela esattamente come apparirà online la vostra tabella dei prezzi. Potete scegliere se i piani tariffari si basano su offerte annuali, mensili o su uno dei molti altri tipi di offerte disponibili. Avviate la procedura selezionando un template, quindi potete entrare e importare i dati, modificare gli effetti e scegliere i tipi di carattere. Nel complesso, il plugin ARPrice offre un’interfaccia utente molto bella con risultati ancora migliori nel frontend.

Costi

Una commissione unica di $23 con una commissione di $6,75 per estendere il supporto fino a un anno.

Le Caratteristiche Che Rendono ARPrice un’Ottima Scelta

7. WP Pricing Table Builder – Responsive Pricing Plans Plugin for WordPress

Ecco un altro plugin per tabelle prezzi premium con un prezzo interessante. WP Pricing Table Builder comprende circa 90 template di tabelle in cui affondare i denti. C’è anche un generatore di temi personalizzato e un builder drag-and-drop che offre una migliore esperienza di progettazione visiva.

WP Pricing Table Builder - Responsive Pricing Plans Plugin for WordPress

WP Pricing Table Builder – Responsive Pricing Plans Plugin for WordPress

Mi piace questo plugin perché non tenta di creare una libreria di template con centinaia di opzioni. Invece, gli sviluppatori si sono concentrati sulla qualità e hanno trascorso gran parte del tempo a rendere moderni e gradevoli tutti i template. Il generatore di colori dei temi è una funzionalità interessante che non sembra esserci in nessuno degli altri plugin. Vi consente di generare un tema di colore utilizzando un colore a vostra scelta. Pertanto, saprete almeno che il colore della vostra tabella prezzi sarà gradevole.

Costi

Il plugin costa $24.

Potete effettuare l’upgrade del supporto a 12 mesi per $7,13.

Le Caratteristiche Che Rendono WP Pricing Table Builder un’Ottima Scelta

8. Pricing Table – Price list, Price Table, Easy Pricing Table

Il plugin Pricing Table – Price List plugin è sviluppato dallo staff di A WP Life. È una soluzione un po’ più recente, ma con una buona reputazione. La versione gratuita dispone di ottime opzioni di personalizzazione, inclusi alcuni template forniti insieme al plugin. Sono disponibili anche animazioni e potete inserire elementi come icone e elenchi di caratteristiche. Potete inserire i pulsanti “Acquista ora” sugli elenchi e incorpora i tag per cose come “Hot” o “Popular”.

Le tue pagine lente stanno influenzando negativamente i numeri delle tue vendite? Allora approfitta dell’architettura ottimizzata per le performance di Kinsta per vendere di più. Dai un’occhiata ai nostri piani!

Pricing Table – Price list, Price Table, Easy Pricing Table

Pricing Table – Price list, Price Table, Easy Pricing Table

La versione premium di questo plugin vi offre tutte le stesse funzionalità, oltre a 19 ulteriori template. Sono solo $9,99, quindi se trovate un template adatto al vostro brand, acquistatelo.

Costi

Gratuito e a $9,99 per la versione premium.

Le Caratteristiche Che Rendono Pricing Table un’Ottima Scelta

9. WRC Pricing Tables

Il plugin WRC Pricing Tables è distribuito come plugin gratuito, ma avete la possibilità di effettuare l’upgrade a soli $10. La versione premium è un po’ più avanzata, con oltre 500 template extra, un’integrazione con PayPal e pulsanti di selezione dei prezzi per cose come il passaggio da piani mensili ad annuali. Con il piano premium viene fornita una manciata di altre funzionalità, quindi vale sicuramente la pena tenerlo in considerazione visto il prezzo basso.

WRC Pricing Tables

WRC Pricing Tables

Il plugin gratuito è ottimo per la creazione di tabelle prezzi semplici ed è possibile creare un numero illimitato di righe e colonne. Tutto il design è effettuato con l’aiuto di un editor drag-and-drop. Una delle cose che ci piace di più del plugin WRC Pricing Tables è che potete utilizzare un color picker, che essenzialmente prende il vostro colore e genera un design a caso per voi.

Costi

Gratuito. $10 per la versione premium.

Le Caratteristiche Che Rendono WRC Pricing Tables un’Ottima Scelta

Quale, tra i Migliori Plugin per Tabelle Prezzi di WordPress, è il Più Adatto a Voi?

I plugin elencati sopra sono tutti pronti per essere testati. Però posso rendervi le cose un po’ più facili con alcuni altri consigli.

Ma tutti i plugin per tabella dei prezzi presenti in questo elenco hanno i loro vantaggi. Tuttavia, questi sono quelli che tendo a preferire.

Ma cosa succede se non siete interessati a utilizzare un plugin e vorreste creare la vostra tabella prezzi?

Ecco come fare!

Come Costruire una Tabella Prezzi in WordPress Da Zero

Per costruire una tabella prezzi da zero è necessario utilizzare il codice HTML che ci darà la struttura della tabella, e poi creare lo stile con CSS.

Per iniziare, accedete al vostro sito WordPress, andate alla dashboard e fate clic su Pagine → Aggiungi pagina. Potete anche aggiungere il codice a una pagina già esistente in cui desiderate visualizzare le tabelle prezzi.

Una volta caricato l’editor di WordPress, passate alla modalità testo e incolla il seguente codice:

<div class="pricing-table">
<div class="one-third first">
<ul>
       <li class="header">Basic</li>
       <li class="grey-blue">$ 9.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
              <li>List Item #4</li>
              <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a>
</div>
<div class="middle one-third">
<ul> 
       <li class="header-blue">Pro</li>
       <li class="light-blue">$ 99.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
               <li>List Item #4</li>
               <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a> 
</div>
<div class="one-third">
<ul>
       <li class="header">Business</li>
       <li class="grey-blue">$ 199.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
               <li>List Item #4</li>
               <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a> 
</div>
</div>

Il codice è piuttosto semplice: in primo luogo, creiamo un div per contenere il nostro codice della tabella prezzi e semplificare la formattazione con i CSS. Quindi, dal momento che stiamo creando tre tabelle, ciascuna di esse è racchiusa in una colonna di un terzo. L’ultima parte è la tabella stessa, con l’aggiunta di classi per un header e un punto per il prezzo che le farà risaltare dal resto della tabella.

Prima di fare clic su Pubblica o Aggiorna, assicuratevi di sostituire il testo tra i tag [pre]<li> and </li>[/pre] con il vostro testo e di aggiungere il link al modulo di pagamento dopo la parte href del link.

Dopo aver sostituito tutte le informazioni, andate avanti e fate clic su Pubblica, se avete creato una nuova pagina, o Aggiorna se avete aggiunto la tabella a una pagina esistente.

Se guardate la vostra pagina adesso, noterete che la tabella prezzi sembra molto semplice. Aggiungiamo un po’ di stile.

Se state utilizzando un child theme, come dovreste, aggiungete il seguente codice al foglio di stile del child theme o all’editor CSS personalizzato.

La prima parte del codice assicurerà che la nostra tabella prezzi venga visualizzata in colonne e, se desiderate o avete bisogno di visualizzare più di tre tabelle, queste classi vi consentiranno di sostituirle facilmente:

/* ## Column Classes
--------------------------------------------- */
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
width: 48.717948717948715%;
}

.one-third,
.two-sixths {
width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
width: 65.81196581196582%;
}

.one-fourth {
width: 23.076923076923077%;
}
.three-fourths {
width: 74.35897435897436%;
}
.one-sixth {
width: 14.52991452991453%;
}
.five-sixths {
width: 82.90598290598291%;

}
.first {
clear: both;
margin-left: 0;
}

La seconda parte del codice ci darà lo stile effettivo delle tabelle.

/* ## Pricing Table
 --------------------------------------------- */

.pricing-table {
 line-height: 1;
 }
 li.header {
 background-color: #2f79a9;
 color: #fff !important;
 font-size: 25px;
 border-bottom: 1px solid #2f79a9 !important;
 margin-bottom: 0 !important;
 }
 li.grey-blue {
 background-color: #569dcc;
 color: #fff !important;
 font-size: 20px;
 }

li.header-blue {
 background-color: #00b9eb;
 color: #fff !important;
 border-bottom: 1px solid #00b9eb !important;
 font-size: 25px;
 margin-bottom: 0 !important;
 }
 li.light-blue {
 background-color: #72dffd;
 color: #fff !important;
 font-size: 20px;
 }

.middle {
 box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
 }
 .pricing-table .one-third {
 background-color: #fff;
 margin: 20px 5px;
 padding: 40px;
 width: 32.33%;
 }

.pricing-table .one-third:nth-child(3n+1),
 .pricing-table .one-third:nth-child(3n+2),
 .pricing-table .one-third:nth-child(3n) {
 border: 1px solid #ddd;
 }

.pricing-table .one-third ul {
 margin: 0;
 }

.pricing-table ul li {
 border-bottom: 1px solid #ddd;
 color: #333;
 margin-bottom: 10px;
 padding: 10px;
 text-align: center;
 list-style-type: none;
 }

.pricing-table a.pricing-button {
 background-color: #00b9eb;
 border: 3px solid #00b9eb;
 color: #fff;
 display: block;
 text-align: center;
 padding: 16px 24px;
 }

.pricing-table a.pricing-button:hover {
 background-color: #000;
 border: 3px solid #000;
 color: #fff;
 }

/* Pricing Table - Media Queries for Mobile Devices
 --------------------------------------------- */

@media only screen and (max-width: 1140px) {
 .pricing-table .one-third {
 width: 32%;
 }
 }

@media only screen and (max-width: 800px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 568px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 480px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 420px) {
 .pricing-table .one-third {
 width: 100%;
 margin: 20px 0;
 }
 }

Abbiamo aggiunto uno stile semplice ed essenziale per le tabelle prezzi e abbiamo stilizzato l’intestazione e il prezzo in modo diverso per far sì che risaltino. Abbiamo anche aggiunto un box shadow attorno alla tabella centrale per evidenziare quel pacchetto specifico. Infine, abbiamo aggiunto alcune media query per far sì che le tabelle siano reattive.

L'aspetto che dovrebbe avere la vostra tabella prezzi quando tutto è stato detto e fatto

L’aspetto che dovrebbe avere la vostra tabella prezzi quando tutto è stato detto e fatto

Dopo aver incollato entrambi i blocchi CSS, andate avanti e fate clic su Aggiorna file. Ora date un’occhiata alla vostra pagina e accertatevi che tutto sia come lo volete.

Se avete domande sulle tabelle prezzi o se avete suggerimenti da dare ad altri, scriveteci tutto nei commenti!


Se ti è piaciuto questo articolo, allora apprezzerai la piattaforma di hosting WordPress di Kinsta. Metti il turbo al tuo sito web e ricevi supporto 24×7 dal nostro team di veterani di WordPress. La nostra infrastruttura potenziata da Google Cloud è centrata su scaling automatico, performance e sicurezza. Permettici di mostrarti la differenza di Kinsta! Scopri i nostri piani