Har du en liste over priser på din hjemmeside? Disse priser kan være for tjenester som plænepleje eller de kan være til softwarepakker. Fra tech verden til yoga centre, kunne de fleste virksomheder bruge pristabeller for bedre repræsentation af, hvad de tilbyder. Den vigtigste måde at gøre dette på er at se på de bedste WordPress pristabel plugins og derefter implementere en på din hjemmeside.

Men det begærer spørgsmålet, hvorfor er det så vigtigt at have en pristabel?

Svaret på dette spørgsmål kan virke indlysende (du vil forbedre konverteringer, ikke?), Men det er rart at forstå det hvorfor, der er bag pristabellen. Hvorfor er et pristabel plugin mere effektivt til at lave et salg end en almindelig punktliste, afsnit eller endda et billede?

At have priser med et slankt udseende på din side, kan gøre dine tjenester til at springe i øjnene og øge konverteringer. Tjek disse handy WordPress pristabel plugins. 🛒Click to Tweet

Hvad skal man se efter i et WordPress pristabel plugin

Nu hvor vi kender fordelene ved et WordPress pristabel plugin, lad os tage et kig på nogle af de funktioner, du skal have:

Vi kunne gennemgå dusinvis af funktioner, der giver mening om pristabeller, men det er en god start med det væsentlige.

De bedste WordPress pristabel plugins sammenlignet (og hvordan du koder dit EGET)

  1. Responsive Pricing Table af WP Darko
  2. Go Pricing
  3. Pricing Tables WordPress Plugin – Easy Pricing Tables
  4. Pricing Table af 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. Hvordan man opbygger et pristabell i WordPress fra bunden

Der er ingen mangel på tilgængelige muligheder, når det drejer sig om pristabel plugins og WordPress-websteder. Nogle af de bedste kan bruges gratis, mens andre er premium uden nogen gratis muligheder. Når det er sagt, fortjener alle nedenstående plugins en plads på denne liste, og nogle af dem har unikke funktioner, der passer til nogle bestemte brancher eller virksomheder.

1. Responsive Pricing Table af WP Darko

Responsive Pricing Tabel er et af de mere brugervenlige plugins, pakket med muligheder, til at lave pristabeller. Det giver en fremragende gratis version uden begrænsninger på, hvor mange planer du indeholder, eller hvo rmange tabeller du laver til dine hjemmesider. Du kan dog opgradere til premium versionen for at få adgang til bedre funktioner som skind og en “udjævner” for at gøre alle kolonnehøjder nøjagtigt ens.

Responsive Pricing Table WordPress Plugin

Responsive Pricing Table WordPress Plugin

De pristabeller, du opbygger, er færdige med enkelt felter og backend-knapper. For eksempel kan nogle af de indbyggede felter du bruger, udnytte priser, beskrivelser, plan titler og ikonbokse. Nogle af de brugerdefinerede knapper giver mulighed for links til steder som Stripe og PayPal, mens de tilpassede CSS-klasser helt sikkert hjælper avancerede udviklere.

Pris

En gratis plan er tilgængelig.

Du kan få et premium-plugin til 19 USD på et websted eller 49 USD for ubegrænsede websteder.

Darko Developers sælger andre plugins, så du kan få dem alle til en pris på 79 USD. Dette kan være nyttigt for nogle virksomheder.

Funktioner, der gør Responsive Pricing Table et godt valg

2. Go Pricing

Go Pricing-appen har ikke en gratis version, men den kan prale af tusindvis af salg og nogle gode anmeldelser på CodeCanyon-markedet. For ikke at nævne, er det kun koster 27 USD at få et af de bedste pristabeller på markedet.

Go Pricing - WordPress Responsive Pricing Tables

Go Pricing – WordPress Responsive Pricing Tables

Hvad laver Go Pricing pluginet så specielt? Til at begynde med, har det utroligt slanke prisplaner med moderne farver og masser af hvide rum, så det ikke ser så rodet ud i. Du kan også vælge mellem en stor samling af temaer, hvoraf nogle er lavet kun for bestemte brancher. Vi elsker også, at pluginet integreres med flere sidebyggere og har kortkoder for at sikre, at ingen skal være et kodende geni for at lave pristabeller.

Pris

Et engangsgebyr på 27 USD med mulighed for at udvide support til et år for 8.25 USD.

Funktioner, der gør Go Pricing et godt valg

3. Pricing Tables WordPress Plugin – Easy Pricing Tables

Hvis du er interesseret i rene sammenlignings- og pristabeller uden for mange avancerede funktioner, ser Pricing Table WordPress Plugin ud som en solid løsning for dig. Den kommer i både gratis og premium versioner, starter fra 29 USD pr år for en hjemmeside og går op til 99 USD om året for ubegrænsede websteder. Nogle af premium funktionerne begynder at blive rigtig cool, herunder en WooCommerce-tilføjelse og integration med Google Analytics.

WordPress Pristabel plugin – Easy Pricing Tables

WordPress Pristabel plugin – Easy Pricing Tables

Nogle af de andre integrationer til premium-versionerne omfatter Easy Digital Downloads, Stripe og en prissætning Toggle add-on. Desuden kan du forvente at starte designprocessen med 10 forudindstillede designs. Som nævnt er dette et af de enklere pristabel plugins, så vi finder det ideelt til dem, der ikke ønsker elementer som animationer og grafik.

Pris

Kernenpluginet er gratis.

Premium-plugin er 29 USD pr. år for et websted, 59 USD pr. år for fem websteder og 99 USD om året for ubegrænsede websteder.

Funktioner, der gør Easy Pricing Tables et godt valg

4. Pricing Table af Supsystic

Supsystic Development Team er kendt for at lave alle mulige plugins til fotogallerier, popups, datatabeller og meget mere. Men vi tager et kig på pristabel pluginet, som tilbydes som en gratis løsning med et par funktioner til at lege med. Faktisk har den gratis version af pluginet, funktioner til forudindstillede skabeloner, hover animationer og knap tilpasninger. Du kan endda importere og eksportere dine tabeloplysninger med lethed.

Pricing Table af Supsystic

Pricing Table af Supsystic

Vi kan også lide premium-pluginets udseende, da det starter med at koste 39 USD for et websted, og du modtager en stor pakke premium templates og rollebegrænsninger. Alt i alt vil jeg hævde, at dette er et af de bedste pristabel plugins til at bruge kernen, gratis plugin og for at springe ud på den betalte version. Om ikke andet, er premium skabeloner dog temmelig cool, og de koster dig ikke så meget.

Pris

En gratis plan tilbydes.

Opgrader til præmie for 39 USD på et websted. Eller 69 USD for support på fem websteder. Eller 149 USD på ubegrænsede websteder.

Funktioner, der gør Pricing Table fra Supsystic til et godt valg

5. CSS3 Responsive WordPress Sammenligning af pristabeller

Til prisen på 20 USD er CSS3 Responsive pricing table plugin en utrolig værdi. Den sælges kun på CodeCanyon markedspladsen, men du skal huske på, at der ikke er nogen gratis version tilgængelig. Når det er sagt, vil de fleste mennesker ikke glemme ideen om, at betale 20 USD for et højt vurderet og gennemgået pristabels plugin. Samlet set har pluginet nogle smukke skabeloner, så du kan komme i gang. Du kan ændre farver og skrifttyper, samtidig med at du fremhæver nogle af de bedste planer, du tilbyder.

CSS3 Responsive WordPress sammenlign af pristabeller

CSS3 Responsive WordPress sammenlign af pristabeller

De fleste af pristabellerne på denne liste er responsive, men denne ser godt ud efter testning på min telefon og tablet. Det ser ud til at udvikleren er responsiv og villig til at oprette nye funktioner og frigive dem som opdateringer. For eksempel ser jeg i øjeblikket på tre vigtige funktion-udgivelser, nemlig i glidende kolonner, responsiv tilstand og dataimport- og eksport.

Pris

20 USD for alle funktioner.

Du kan betale 5,63 USD for at udvide din kundesupport til et år. Ingen gratis plugin tilbydes.

Funktioner, der gør CSS3 Pricing Table Grids til et godt valg

6. ARPrice – Responsive WordPress Pricing Tabel Plugin

ARPrice-pluginet sælger også på CodeCanyons websted, men til en pris på 23mUSD. Vi begynder at lægge mærke til, at mange virksomheder og enkeltpersoner kan være bedre at betale disse super lave priser for at få alle de funktioner, de har brug for – i modsætning til at arbejde med et gratis plugins, der mangler nogle funktioner. Uanset om dette pristabel plugin indeholder nogle af de bedste billeder på denne liste, da det understøtter flere typer medieelementer, såsom baggrundsbilleder og ikoner.

ARPrice - WordPress pristabel plugin

ARPrice – WordPress pristabel plugin

Backend designeren er en visuel editor, der afslører præcis, hvordan din pristabel vil se ud online. Du kan derefter vælge, om dine prisplaner er baseret på årlige, månedlige eller de mange andre tidspunkter, der er tilgængelige. Du starter processen ved at vælge en skabelon, så du kan gå ind og importere data, ændre effekter og vælge dine skrifttyper. Samlet set tilbyder ARPrice-plugin en smuk brugergrænseflade med endnu bedre frontend-resultater.

Pris

Engangsgebyr på 23 USD med en gebyr på 6,75 USD for at forlænge din støtte i op til et år.

Funktioner, der gør ARPrice til et godt valg

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

Her er en anden premium pristabel plugin med en solid pris. WP Pricing Table Builder leveres med omkring 90 tabelskabeloner til at synke dine hænder ned i. Der er også en brugerdefineret tema generator og en drag-and-drop bygger til den ultimative visuelle designoplevelse.

WP Pricing Table Builder - Responsive prisplan til WordPress

WP Pricing Table Builder – Responsive prisplan til WordPress

Jeg kan godt lide denne plugin, fordi den ikke forsøger at oprette et template bibliotek med 100’er af muligheder. I stedet kan du se, at udviklerne har fokuseret på kvalitet og brugt en god tid, hvilket gør alle skabeloner så moderne og smukke som muligt. Temaets farvegenerator er en interessant funktion, der ikke synes at være i nogen af ​​de andre plugins. Det giver dig mulighed for at generere et farvetema ved hjælp af en farve efter eget valg. Derfor ved du i det mindste, at farven på din pristabel vil se godt ud.

Pris

Pluginnet går for 24 USD.

Opgrader til 12 måneders support for 7.13 USD.

Funktioner, der gør WP Pricing Table Builder til et godt valg

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

Pricing Table – Price List plugin kommer fra folkene på A WP Life. Det er en noget nyere, men velovervejet løsning. Den gratis version har smukke muligheder for tilpasninger, herunder nogle få skabeloner, der følger med pluginet. Animationer leveres, og du kan indsætte emner som ikoner og funktionslister. Placer Køb nu knapper på listerne og lav tags til ting som “Hot” eller “Populære” elementer.

Påvirker dine langsomme sider dit salgstal negativt? Udnyt Kinstas ydeevneoptimerede arkitektur og sælg mere! Tjek vores hosting planer

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

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

Premium-versionen af ​​deTTe plugin giver dig alle de samme funktioner, sammen med yderligere 19 skabeloner. Det koster kun 9,99 USD, så hvis du finder en skabelon, der passer til dit brand, skal du gå efter det.

Pris

Gratis og 9,99 USD for premium versionen.

Funktioner, der gør pristabellen til et godt valg

9. WRC Pricing Tables

WRC Pricing Tables pluginet leveres som et gratis plugin, men du har mulighed for at opgradere til 10 USD. Premium-versionen er lidt mere avanceret, med over 500 ekstra skabeloner, en PayPal-integration og prissætning skifter til at skifte mellem ting som månedlige og årlige planer. En håndfuld andre funktioner leveres med premiumplanen, så det er absolut værd at overveje, da prisen er så lav.

WRC Pricing Tables

WRC Pricing Tables

Det gratis plugin er fantastisk til konstruktion af enkle pristabeller, og du kan oprette et ubegrænset antal rækker og kolonner. Alt design er lavet ved hjælp af en træk-og-slip-editor. En af de ting, vi kan lide mest ved WRC Pricing Tables plugin er, at du kan bruge en farvevælger, som i det væsentlige tager din farve og genererer et tilfældigt tabel design til dig.

Pris

Gratis. 10 USD for premium.

Funktioner, der gør WRC Pricing Table til et godt valg

Hvilket er det bedste WordPress pristabel plugin til dig?

De ovennævnte plugins er alle klar til test. Men jeg kan også gøre det lidt lettere for dig med nogle yderligere anbefalinger.

Alle de øvrige pristabeller på denne liste har også deres fordele. Men disse er dem, jeg plejer at nyde mest.

Men hvad nu hvis du ikke er interesseret i at bruge et plugin og gerne vil kode dit eget prisbord?

Sådan gør du det!

Sådan opbygger du en pristabel i WordPress fra bunden

Opbygning af en prissætningstabel fra bunden sker med HTML-kode, som giver os strukturen til vores tabel og derefter styler den med CSS.

For at komme i gang skal du logge ind på dit WordPress-websted, navigere til instrumentbrættet og klikke på Sider → Tilføj nyt. Du kan også føje koden til en allerede eksisterende side, hvor du vil have dine pristabeller vist.

Når WordPress-editoren er indlæst, skift til teksttilstand og indsæt følgende kode:

<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>

Koden er ret simpel: For det første opretter vi en div for at holde vores pristabel-kode og gøre det nemt at style dem med CSS. Derefter, siden vi opretter tre tabeller, er hver af dem pakket ind i en tredjedel kolonne. Den sidste del er selve tabellen, med tilføjede klasser for et header og prispunkt, som får dem til at skille sig ud fra resten af ​​bordet.

Før du klikker på Udgiv eller opdater, skal du sørge for at erstatte teksten mellem [pre] <li> og </ li> [/ pre] tags med din egen og for at føje linket til din betalingsformular efter href-delen af ​​linket .

Når du har erstattet alle oplysninger, skal du gå videre og klikke på Udgiv, hvis du oprettede en ny side eller Opdater, hvis du tilføjede tabellen til en eksisterende side.

Hvis du kigger på din side nu, vil du se, at prissætningstabellen ser meget ren ud. Lad os tilføje nogle styling til det.

Hvis du bruger et child theme som du skal tilføje følgende kode til dit dit child themes stylesheet eller til Custom CSS editoren.

Den første del af koden sørger for, at vores prissætningstabel vises i kolonner, og hvis du vil eller skal vise mere end tre tabeller, vil disse klasser tillade dig nemt at erstatte dem:

/* ## 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;
}

Den anden del af koden vil give den faktiske styling til tabellerne.

/* ## 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;
 }
 }

Vi tilføjede nogle enkle, grundlæggende styling til pristabellerne og stylede overskriften og prisen anderledes for at få dem til at skille sig ud. Vi tilføjede også en boks-skygge omkring midten af tabellen for at fremhæve den specifikke pakke. Endelig tilføjede vi nogle medieforespørgsler for at sikre, at tabellen er responsive.

Hvordan din pristabel vil se ud, når alt er gjort.

Hvordan din pristabel vil se ud, når alt er gjort.

Når du har indsat begge CSS-uddrag, skal du gå videre og klikke på Opdater Fil. Se nu på din side og sørg for, at alt vises, sådan som du vil have det.

Hvis du har spørgsmål om prissætningstabeller, eller hvis du har forslag til andre, så lad os vide i kommentarerne!


Hvis du godt kunne lide denne artikel, så vil du elske Kinstas WordPress hostingplatform. Boost dit website og få 24/7 support fra vores WordPress-ekspertteam. Vores Google Cloud-drevne infrastruktur fokuserer på automatisk skalering, ydeevne og sikkerhed. Lad os vise dig Kinsta-forskellen! Tjek vores planer