Har du en lista över priser på din webbplats? Dessa priser kan vara för tjänster som trädgårdsarbete för programpaket. Från teknikvärlden till yogastudios kan de flesta företag använda pristabeller för bättre representation av vad de erbjuder. Det bästa sättet att göra detta är genom att titta på de bästa WordPresspluginsen för Pristabeller och sedan införliva en på din webbplats.

Men det väcker frågan, varför är en pristabell så viktig att ha?

Svaret på denna fråga kan tyckas uppenbart (du vill förbättra konverteringar, eller hur?) men det är alltid bra att förstå anledningen bakom pristabellen. Varför är en pristabellsplugin effektivare när det gäller en försäljning än en vanlig punktlista, stycke, eller ens en bild?

Att ha en snygg prissida kan göra att dina tjänster sticker ut och öka konverteringar. Kolla in dessa praktiska WordPressplugin för pristabeller. 🛒Click to Tweet

Vad du ska leta efter i ett WordPressplugin för pristabeller

Nu när vi vet fördelarna med ett WordPressplugin för pristabeller, låt oss ta en titt på några av de funktioner som du leta efter.

Vi skulle kunna gå igenom dussintals funktioner som är bra för pristabeller men det här är en bra start för det väsentliga.

De bästa WordPresspluginsen för Pristabeller Jämförda (och hur du kodar din egen)

  1. Responsive Pricing Table av WP Darko
  2. Go Pricing
  3. Pricing Tables WordPress Plugin – Easy Pricing Tables
  4. Pricing Table av Supsystic
  5. CSS3 Responsive WordPress Compare Pricing Tables
  6. ARPrice – Responsivt WordPressplugin för Pristabeller
  7. WP Pricing Table Builder — Responsivt WordPressplugin för Pristabeller
  8. Pricing Table – Price list, Price Table, Easy Pricing Table
  9. WRC Pricing Tables
  10. Hur man bygger en pristabell i WordPress från grunden

Det finns ingen brist på tillgängliga alternativ när det gäller pristabellplugins och WordPresswebbplatser. Några av de bästa kan användas gratis, medan andra är premium utan några gratisalternativ. Med detta sagt, förtjänar alla plugin nedan en plats på denna lista, och några av dem har unika funktioner som är bra för vissa specifika branscher eller företag.

1. Responsive Pricing Table by WP Darko

Responsive Pricing Table är en av de mer användarvänliga, funktionsspäckade pluginsen för att skapa pristabeller. Det finns en utmärkt gratisversion utan begränsningar på hur många planer du inkluderar eller hur många tabeller du gör för dina webbplatser. Du kan dock uppgradera till premiumversionen för tillgång till bättre funktioner som skins och en ”equalizer” för att göra alla kolumnhöjder exakt likadana.

Responsive Pricing Table WordPress Plugin

Responsive Pricing Table WordPress Plugin

Pristabellerna du bygger är färdiga med enkla fält och backend-knappar. Till exempel: några av de inbyggda fält du kan använda inkluderar prissättning, beskrivningar, plantitlar och ikonlådor. Några av de anpassade knapparna möjliggör länkar till platser som Stripe och PayPal, medan de anpassade CSS-klasserna säkert kommer vara till hjälp för avancerade utvecklare.

Kostnad

En gratisplan är tillgänglig.

Du kan få premiumpluginet för $19 på en webbplats eller $49 för obegränsade platser.

Darkoutvecklarna säljer andra plugins, så att du kan få dem alla till priset av $79. Detta kan vara användbart för vissa företag.

Funktioner som gör Responsive Pricing Table ett bra val

2. Go Pricing

Go Pricing-appen har inte en gratis version, men den har tusentals försäljningar och flera bra recensioner på CodeCanyon marketplace. Dessutom, det kostar bara $27 att få en av de bästa pristabellplugins på marknaden.

Go Pricing - WordPress Responsive Pricing Tables

Go Pricing – WordPress Responsive Pricing Tables

Vad gör Go Pricing-pluginet så speciellt? Till att börja med har den otroligt snygga prisplaner med moderna färger och massor av vitområden så att det inte ser rörigt ut. Du kan också välja mellan en stor samling teman, varav några är gjorda bara för vissa branscher. Vi älskar också att pluginet integreras med flera sidbyggare och har kortkoder för att säkerställa att ingen måste vara en kodningstrollkarl för att skapa pristabeller.

Kostnad

En engångsavgift på $27 med möjlighet att förlänga support till ett år för $8,25.

Funktioner som gör Go Pricing ett bra val

3. Pricing Tables WordPress Plugin – Easy Pricing Tables

Om du är intresserad av ren jämförelse- och pristabeller utan onödiga finesser, är Pricing Tables WordPress Plugin ett bra alternativ för dig. Den kommer i både gratis och premiumversioner, med början på $29 per år för en webbplats och går upp till $99 per år för obegränsade webbplatser. Några av premiumfunktionerna börjar bli riktigt coola, inklusive ett WooCommerce-tillägg och Google Analytics-integration.

Pricing Tables WordPress Plugin – Easy Pricing Tables

Pricing Tables WordPress Plugin – Easy Pricing Tables

Några av de andra integrationerna för premiumversionerna inkluderar Easy Digital Downloads, Stripe och ett Pricing Toggle-tillägg. Dessutom kan du förvänta dig att starta designprocessen med 10 förinställda designer. Som redan nämnts är detta en av de enklare pristabellpluginsen, så vi gillar det för dem som inte vill ha element som animationer och grafik.

Kostnad

Kärnpluginet är gratis.

Premiumpluginet kostar $29 per år för en webbplats, $59 per år för fem platser, och $99 per år för obegränsade platser.

Funktioner som gör Easy Pricing Tables ett bra val

4. Pricing Table av Supsystic

Supsystic-utvecklingsteamet är känt för att göra alla typer av plugins för fotogallerier, popups, datatabeller och mer. Men vi tar en titt på Pricing Table Plugin, som erbjuds som en gratislösning med en hel del funktioner för dig att leka med. Den kostnadsfria versionen av pluginet har funktioner för förinställda mallar, svävningsanimationer och knappanpassningar. Du kan även importera och exportera din tabellinformation med lätthet.

Pricing Table av Supsystic

Pricing Table av Supsystic

Vi gillar också premiumpluginet eftersom det börjar på $39 för en webbplats och du får ett stort paket premiummallar och rollbegränsningar. Sammantaget skulle jag hävda att detta är ett av de bästa pristabellpluginsen när det gäller att använda det kostnadsfria kärnpluginet och helt skippa den betalda versionen. Men premiummallarna är ganska coola och de kostar dig inte så mycket.

Kostnad

En gratisplan erbjuds.

Uppgradera till premium för $39 på en webbplats. Eller $69 för stöd på fem platser. Eller $149 på obegränsade platser.

Funktioner som gör Pricing Table av Supsystic ett bra val

5. CSS3 Responsive WordPress Compare Pricing Tables

Till priset av $20 ger CSS3 Responsive pricing table-pluginet ett otroligt värde för pengarna. Det säljs bara på CodeCanyon marketplace, men du bör komma ihåg att ingen gratisversion är tillgänglig. Med detta sagt, kommer de flesta människor inte ha några problem med att betala $20 för ett högt rankat och välrecenserat prissättningsplugin. Sammantaget har pluginet några vackra mallar för dig att komma igång. Du kan ändra runt färger och teckensnitt, samtidigt som du belyser några av de bästa planerna du erbjuder.

CSS3 Responsive WordPress Compare Pricing Tables

CSS3 Responsive WordPress Compare Pricing Tables

De flesta av pristabellerna på den här listan är responsiva men den här ser särskilt bra ut efter testning på min telefon och surfplatta. Det verkar också som om utvecklaren är lyhörd och villig att skapa nya funktioner och släppa dem som uppdateringar. Till exempel, vid skrivande stund ser jag för närvarande tre stora funktionsuppdateringar – de glidande kolumnerna, responsivt läge och dataimport och export.

Kostnad

$20 för alla funktioner.

Du kan betala $5,63 att förlänga din kundsupport till ett år. Inget gratisplugin erbjuds.

Funktioner som gör CSS3 Pricing Tables Grids ett bra val

6. ARPrice – Responsivt WordPressplugin för Pristabeller

ARPrice-pluginet säljs också på CodeCanyon-webbplatsen, men till priset av $23. Vi börjar märka att det kan vara bättre för många företag och individer att betala dessa superlåga priser för att få alla funktioner de behöver–i motsats till att arbeta med ett gratisplugin som saknar viss funktionalitet. Oavsett, detta Pristabellsplugin har några av de bästa visuella element på denna lista, eftersom det stöder flera typer av medieobjekt, såsom bakgrundsbilder och ikoner.

ARPrice – WordPressplugin för Pristabeller

ARPrice – WordPressplugin för Pristabeller

Backend-designern är en visuell redaktör som visar exakt hur din pristabell kommer att se ut online. Du kan sedan välja om dina prisplaner är baserade på årliga, månatliga eller många andra tidsperioder tillgängliga. Du startar processen genom att välja en mall, sedan kan du gå in och importera data, ändra runt effekter, och välja teckensnitt.  Sammantaget erbjuder ARPrice ett vackert användargränssnitt med ännu bättre frontend-resultat.

Kostnad

En engångsavgift på $23 med en avgift på $6,75 för att förlänga support i upp till ett år.

Funktioner som gör ARPrice ett bra val

7. WP Pricing Table Builder – Responsivt WordPressplugin för Pristabeller

Här är ett annat premiumplugin för pristabeller med ett bra pris. WP Pricing Table Builder levereras med runt 90 tabellmallar för dig att sänka tänderna i. Det finns också en anpassad temagenerator och en dra-och-släpp-byggare för den ultimata visuella designupplevelsen.

WP Pricing Table Builder — Responsivt WordPressplugin för Pristabeller

WP Pricing Table Builder — Responsivt WordPressplugin för Pristabeller

Jag gillar detta plugin eftersom det inte försöker skapa ett mallbibliotek med 100-tals alternativ. Istället kan du märka att utvecklarna har fokuserat på kvalitet och tillbringade bra med tid på att göra alla mallar så moderna och vackra som möjligt. Temafärgsgenerator är en intressant funktion som inte verkar finnas hos något av de andra pluginsen. Det låter dig skapa ett färgtema med en valfri färg. Därför vet du åtminstone att färgen på din pristabell kommer att se bra ut.

Kostnad

Pluginet kostar $24.

Uppgradera till 12 månaders support för $7,13.

Funktioner som gör WP Pricing Table Builder ett bra val

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

Pricing Table – Price List-pluginet kommer från teamet på A WP Life. Det är en något nyare, men väl respekterad lösning. Gratisversionen har vackra alternativ för anpassningar, inklusive några mallar som följer med pluginet. Animationer tillhandahålls, och du kan infoga objekt som ikoner och funktionslistor. Placera Köp nu-knappar på listorna och införliva taggar för saker som ”Nya” eller ”Populära” objekt.

Påverkar dina långsamma sidor negativt dina försäljningssiffror? Dra nytta av Kinsta prestandaoptimerade arkitektur och sälj mer! Kolla in våra hostingplaner

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

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

Premiumversionen av denna plugin ger dig alla samma funktioner, tillsammans med ytterligare 19 mallar. Det kostar bara $9,99, så om du hittar en mall som passar ditt varumärke, välj detta.

Kostnad

Gratis och $9,99 för premiumversionen.

Funktioner som gör Pricing Table ett bra val

9. WRC Pricing Tables

WRC Pricing Tables-pluginet tillhandahålls som ett gratisplugin, men du har valet att uppgradera för $10. Premiumversionen är lite mer avancerad, med över 500 extra mallar, en PayPal-integration och prisväxlar för att växla mellan saker som månatliga och årliga planer. En handfull andra funktioner kommer med premiumplanen, så det är definitivt värt att överväga eftersom priset är så lågt.

WRC Pricing Tables

WRC Pricing Tables

Gratispluginet är bra för att bygga enkla pristabeller, och du kan skapa ett obegränsat antal rader och kolumner. All design görs med hjälp av en dra-och-släpp-redaktör. En av de saker vi gillar mest om WRC Pricing Tables-pluginet är att du kan använda en färgväljare, som i huvudsak tar din färg och genererar en slumpmässig tabelldesign åt dig.

Kostnad

Gratis. $10 för premium.

Funktioner som gör WRC Pricing Tables ett bra val

Vilket är det bästa WordPresspluginet för Pristabeller för dig?

De plugins som anges ovan är alla redo att testas. Men jag kan också göra det lite lättare för dig med några ytterligare rekommendationer.

Alla andra Pristabellplugins på denna lista har sina fördelar också. Men det här är de som jag gillar mest.

Men vad händer om du inte är intresserad av att använda ett plugin och vill koda din egen pristabell?

Så här gör du det!

Hur man bygger en pristabell i WordPress från början

Att bygga en pristabell från grunden görs med HTML-kod som ger oss strukturen för vår tabell och sedan stylar vi den CSS.

För att komma igång, logga in på din WordPresswebbplats, navigera till instrumentpanelen och klicka på Sidor → Lägg till ny. Du kan också lägga till koden till en redan befintlig sida där du vill att dina pristabeller ska visas.

När WordPress-redigeraren laddas, byt till textläget och klistra in följande kod:

<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 är ganska enkel: först skapar vi en div för att hålla vår pristabellkod och göra det enkelt att styla med CSS. Sedan, eftersom vi skapar tre tabeller, är var och en av dem insvept i en tredjedels kolumn. Den sista delen är själva tabellen med extra klasser för en rubrik och prispunkt som gör att de sticker ut från resten av tabellen.

Innan du klickar på Publicera eller uppdatera, se till att ersätta texten mellan [pre]<li> och </li>[/pre] taggarna med din egen text och att lägga till länken till din betalningslösning efter href delen av länken.

När du har ersatt all information, gå vidare och klicka på Publicera om du har skapat en ny sida eller Uppdatera om du har lagt till tabellen på en befintlig sida.

Om du tittar på din sida nu, kommer du att märka pristabellen ser mycket enkel och tråkig ut. Låt oss lägga till lite styling till den.

Om du använder ett barntema bör du lägga till följande kod i ditt barntemas stilmall, eller till den anpassade CSS-redigeraren.

Den första delen av koden kommer att se till att vår Pristabell visas i kolumner och om du vill eller behöver visa mer än tre tabeller, kan dessa klasser enkelt låta dig ersätta 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 andra delen av koden lägger till den faktiska stylingen till tabellen.

/* ## 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 lade till lite enkel grundläggande styling för pristabellerna och formaterade rubriken och priset annorlunda för att få dem att sticka ut. Vi lade också till en boxskugga runt mittentabellen för att markera det specifika paketet. Slutligen lade vi till några mediefrågor för att se till att tabellerna är lyhörda.

När du har klistrat in båda CSS-kodavsnitten, fortsätt och klicka på Uppdatera fil. Ta en titt på din sida och se till att allt visas som du vill ha det.

När du har klistrat in båda CSS-kodavsnitten, fortsätt och klicka på Uppdatera fil. Ta en titt på din sida och se till att allt visas som du vill ha det.

När du har klistrat in båda CSS-kodavsnitten, fortsätt och klicka på Uppdatera fil. Ta en titt på din sida och se till att allt visas som du vill ha det.

Om du har några frågor om prissättning tabeller, eller om du har några förslag för andra, låt oss veta i kommentarerna!


Om du tyckte om den här artikeln, då kommer du att älska Kinsta´s hosting-plattform. Effektivisera din hemsida och få support dygnet runt från vårt rutinerade team på WordPress. Vår Google Cloud-drivna infrastruktur fokuserar på auto-skalning, prestanda och säkerhet. Lås oss visa dig skillnaden med Kinsta! Kolla in våra paket