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?

  • En pristabell möjliggör en snygg outline och jämförelse av dina tjänster eller paket.
  • De viktigaste funktionerna visas i en pristabell. rensar ut det onödiga och lämnar det till en annan sida.
  • Pristabellen har tydliga call-to-action-knappar för att visa människor hur de går vidare med köpet.
  • De flesta pristabeller använder paket/plannamn som gör det mycket lättare för kunderna att förstå.
  • Du kan lägga tonvikten på vissa ord, planer eller funktioner genom att använda större teckensnitt eller grafik.
  • Det är mycket mer intressant att läsa en grafikbaserad pristabell än en med endast text i den.
  • Du kan förbättra konverteringar med brådska (dvs. ”tiden är nästan slut för ett bra erbjudande”) eller gratisprover.
  • Pristabeller tar upp en minimal mängd utrymme på webbsidan, så att du kan lägga till ytterligare information, som en FAQ eller en chattlåda för dina säljare.

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.

  • Gratis och premium alternativ – mitt ideala Pristabellplugin ger dig en vanlig tabell för att dina prisalternativ ska se bra ut. Därefter bör premiumversionen med extra funktioner inte vara superdyr.
  • Integrationer med de bästa sidbyggarna – några av sidbyggarna kommer även med sina egna pristabeller. Några av de mer populära sidbyggarna inkluderar Divi Builder, Elementor och WPBakery.
  • Skins eller teman för att lansera pristabeller inom några sekunder. Vi gillar också att se anpassningsverktyg för färger, teckensnitt och ikoner.
  • En inställning för att visa märken på vissa planer, som för ”bästa värde” eller ”mest populära” planer.
  • Flera valutaalternativ för användning över hela världen.
  • Stöd för stora, anpassningsbara knappar på varje prisplan.
  • En dra och släpp-byggare skulle vara utmärkt också.
  • Vi gillar också att se tillgång till CSS och HTML, eftersom mer avancerade utvecklare vill ha komplexa finjusteringsmöjligheter.

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

  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. Pricing Table – Price list, Price Table, Easy Pricing Table
  8. WRC Pricing Tables

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

  • Den kostnadsfria planen ger dig nödvändiga verktyg för ett brett utbud av småföretag, eftersom du får obegränsat antal tabeller och planer.
  • Premiumprissättningen är ganska låg också.
  • Skinsen ser moderna och mycket anpassningsbara ut direkt, med massor av knappar och teckensnitt att justera.
  • Ikoner och andra visuella element är tillgängliga.
  • Du kan inkludera så många funktioner du vill för dina prisplaner.
  • Call-to-action-knapparna kan länka till tredjeparts-betalningssystem som PayPal.
  • Ett brett utbud av valutatecken finns tillgängliga för att nå ut till olika länder.
  • Du kan visa ett märke för rekommenderade planer.
  • Återkommande planer (per månad eller år) kan visas med speciella inställningar.

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

  • Varje del av din pristabell är uppdelad i dess egen sektion i en visuell redaktör. Detta inkluderar rubrik-, kropps- och knappområdet.
  • Du får över 250 demotabeller när du köper pluginet. Detta bör göra det möjligt för de flesta företag att ta en mall och starta en prissättningssida på några minuter.
  • Dra och släpp-element är tillgängliga med sidbyggare-integrationer. Go Pricing fungerar bra med Builder Beaver, Elementor, och WPBakery.
  • Byggprocessen för pristabeller är enkel för alla erfarenhetsnivåer. Pluginet har ett bra backend-gränssnitt, med alternativ för kortkoder, import och inställningar.
  • Inkludera animationer för att göra dina pristabeller mer tilltalande.
  • Använd över 2000 teckensnittsikoner för att göra dina tabeller ännu mer visuellt tilltalande.
  • En anpassad CSS-modul tillhandahålls för dem som vill gå utöver basfunktionerna.
  • Lägg till unika funktioner som medieelement, PayPal-knappar och Google Maps.

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

  • Pristabellsdesignerna är rena och enkla, vilket skapar ett modernt utseende utan onödiga effekter.
  • Du kan justera färgerna och andra delar av nästan varje objekt på pristabellen. Detta inkluderar kolumner, knappar och teckensnitt.
  • Alla pristabeller är konstruerade med en enkel lista över visuella fält i backenden. Installationen är formaterad precis hur pristabellen kommer att se ut på frontenden.
  • Du kan ange att en eller flera planer ges mer utrymme och belyses mer än de andra.
  • Du kan dra och släppa kolumnerna för att ordna om dem.
  • En anpassad CSS-modul tillhandahålls för mer avancerade anpassningar på dina pristabeller.
  • Även den kostnadsfria versionen stöder ett obegränsat antal pristabellrader.
  • Några av premiumversionerna har bra integrationer för saker som WooCommerce, Google Analytics och Stripe.

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

  • Pricing Table plugin från Supsystic är närmast den mest kompletta pristabellslösningen i gratisversionen. Den enda uppgraderingen du får i premiumpluginet är några bättre mallar.
  • Alla pristabeller ser vackra ut, med responsiva element och starka färger.
  • Mallarna i gratisversionen är bra, och premiummallarna är fantastiska.
  • Välj att ha en knapp som visar människor specialerbjudanden – som för att betala för ett år i förväg eller för att köpa idag.
  • Belys några av dina planer lite extra med visuella ikoner.
  • Använd verktyg som kortkoder, färgsliders och visuellt byggande för att säkerställa att du inte rör en enda rad med kod under skapelseprocessen.
  • Pluginet har svävningsanimationer för att göra dina planer mer tilltalande för besökarna.
  • Bilder och videor stöds också så att du kan visa upp vissa funktioner eller delar av ditt företag.
  • En dra-och-släpp-byggare finns i backenden på din WordPress-panel.

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

  • Priset är ett av de bästa vi har sett för de funktioner du får i prissättningspluginet.
  • Den stora samlingen av anpassningsverktyg möjliggör tusentals unika pristabeller. Detta inkluderar 20 färgversioner, 60 band, 42 korsikoner och två tabellstilar.
  • Skapa ett obegränsat antal rader och kolumner.
  • Utnyttja CSS och HTML-moduler för extra anpassning.
  • Du får alternativ för att justera bredden och höjden på alla kolumner och rader.
  • Multisite-kompatibilitet.
  • Kortkoder som hjälper dig att implementera dina pristabeller var som helst på dina webbplatser.
  • Verktyg för dataimportering och export så att du kan flytta dina data till en annan tabell eller importera från ett kalkylblad.
  • Ikonstöd för att inkludera visuella element som kryssrutor och X.
  • Animationer och mediastöd för att lägga till mer grafik och göra att dina planer sticker ut.

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

  • Det är ganska överkomligt för ett premiumplugin.
  • Mer än 300 pristabellmallar finns att ladda ner med pluginet.
  • Anpassningsverktygen är utmärkta, med obegränsade färgalternativ, fullt responsiva mallar, en prisväxlingsknapp och över 3000 ikoner.
  • Animeringseffekterna kommer absolut att hjälpa till att göra dina pristabeller mer tilltalande.
  • Det finns en CSS-modul och CSS-guidesystem för avancerade anpassningar.
  • Du får några unika integrationer med andra program från tredje part som Google Maps.
  • Mallredigeraren i realtid ger ett vackert visuellt gränssnitt för att justera objekt som kolumner, rubriker och bakgrunder.
  • Det finns en extra ”team showcase”-funktion, som i princip tar samma kolumnformat och låter dig dela information om dina medarbetare på webbplatsen.
  • WordPresspluginet för Pristabeller är kompatibelt med de mest populära sidbyggare som Elementor, Gutenberg, och WPBakery.

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

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

  • Du får alla bra funktioner i gratisversionen. Den enda anledningen för uppgradering är om du vill ha en viss mall som inte finns i gratispluginet.
  • En handfull snygga pristabellmallar ingår i gratisversionen. Du kan också uppgradera för ca 20 fler.
  • Alla tabeller som följer med pluginet anses vara helt responsiva.
  • Med ikoner kan du skapa mer visuellt tilltalande tabeller.
  • Kortkoder hjälp dig att placera dina tabeller var som helst på din webbplats.
  • Pristabeller kan läggas till och tas bort från din webbplats med ett klick på en knapp.
  • Anpassningsalternativen inkluderar obegränsade färger, knappfärger, rubrikfärger och mer.
  • Anpassad CSS-styling kan göras i instrumentpanelen.
  • Designområdet är inte en helt visuell byggare, men det är inställt med flera kolumner för att simulera hur tabellerna kommer att se ut.

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

  • WRC Pricing Tables-pluginet har utmärkta funktioner i gratisversionen, med en fullständig premiumlösning för endast $10 (en engångsavgift).
  • Pluginet ger kortkoder för när du behöver placera dina pristabeller var som helst på din WordPresswebbplats. Till exempel kan en kortkod tekniskt skrivas in på vilken sida, post eller till och med potentiellt vilken widget som helst.
  • Font Awseome-ikoner lägger till lite extra visuella finesser till din design.
  • Pluginet stöder också Google Fonts.
  • PayPal-knappintegrationen säkerställer att du kan ta betalt från dina kunder.
  • En hel del mallar kommer tillsammans med pluginet.
  • Du kan lägga till ett obegränsat antal rader och kolumner och samtidigt duplicera pristabeller och spara dem till längre fram.
  • Avancerade utvecklare har en chans att förbättra sina tabeller med anpassad CSS.

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.

Hur din prislista bör se ut när allt är klart.
Hur din prislista bör se ut när allt är klart.

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!

Matteo Duò Kinsta

Innehållschef på Kinsta och innehållsmarknadsförings-konsult för WordPress plugin-utvecklare. Ta kontakt med Matteo på X.