Hast Du eine Preisliste auf Deiner Website? Diese Preise können für Dienstleistungen wie Rasenpflege oder für Softwarepakete gelten. Von der Technikwelt bis hin zu Yoga-Studios könnten die meisten Unternehmen Preistabellen verwenden, um ihre Angebote besser darzustellen. Der beste Weg, dies zu tun, besteht darin, Dir die besten WordPress Preistabellen-Plugins anzusehen und diese dann auf Deiner Website zu implementieren.

Aber das wirft die Frage auf, warum es so wichtig ist, eine Preistabelle zu haben.

Die Antwort auf diese Frage mag offensichtlich erscheinen (Du möchtest die Conversions verbessern, oder?), Aber es ist schön, das Warum hinter der Preistabelle zu verstehen. Warum ist ein Preistabellen-Plugin für den Verkauf effektiver als eine normale Aufzählungsliste, ein Absatz oder sogar ein Bild?

Tweet: Wenn Du eine schlanke Preisseite hast, können Deine Services in den Vordergrund treten und die Conversions steigern. Schau Dir diese praktischen Plugins für die WordPress-Preistabelle an. 🛒Click to Tweet

Worauf Du bei einem WordPress Preistabellen-Plugin achten solltest

Nachdem wir nun die Vorteile eines WordPress-Plugins für Preistabellen kennen, werfen wir einen Blick auf einige der Funktionen, die Du Dir wünschen solltest:

Wir könnten Dutzende von Funktionen durchgehen, die in Preistabellen sinnvoll sind, aber dies ist ein guter Anfang mit dem Wesentlichen.

Die besten WordPress Preistabellen-Plugins im Vergleich (und wie Du Deine eigenen codierst)

  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. Erstellen einer Preistabelle in WordPress von Grund auf neu

Es gibt keinen Mangel an verfügbaren Optionen, wenn es um Preistabellen-Plugins und WordPress-Seiten geht. Einige der besten können kostenlos genutzt werden, während andere Premium und ohne kostenlose Optionen sind. Davon abgesehen verdienen alle unten aufgeführten Plugins einen Platz in dieser Liste, und einige von ihnen haben einzigartige Funktionen, die sich besonders für bestimmte Branchen oder Unternehmen eignen.

1. Responsive Pricing Table by WP Darko

Responsive Pricing Table ist eines der benutzerfreundlicheren Plugins mit zahlreichen Funktionen zum Erstellen von Preistabellen. Es bietet eine hervorragende kostenlose Version ohne Einschränkungen hinsichtlich der Anzahl der Pläne oder Tabellen, die Du für Deine Websites erstellen kannst. Du kannst jedoch auf die Premium-Version upgraden, um auf bessere Funktionen wie Skins und einen „Equalizer“ zuzugreifen, mit dem alle Spaltenhöhen exakt gleich sind.

Responsive Pricing Table WordPress Plugin

Responsive Pricing Table WordPress Plugin

Die von Dir erstellten Preistabellen werden mit einfachen Feldern und Backend-Schaltflächen vervollständigt. Zu den integrierten Feldern, die Du verwenden kannst, gehören beispielsweise Preise, Beschreibungen, Plantitel und Symbolfelder. Einige der benutzerdefinierten Schaltflächen ermöglichen Links zu Seiten wie Stripe und PayPal, während die benutzerdefinierten CSS-Klassen fortgeschrittenen Entwicklern sicherlich weiterhelfen.

Kosten

Ein kostenloser Plan ist verfügbar.

Du kannst das Premium-Plugin für 19 US-Dollar auf einer Website oder 49 US-Dollar für unbegrenzte Websites erwerben .

Die Darko-Entwickler verkaufen andere Plugins, sodass Du sie alle zum Preis von 79 US-Dollar erhalten kannst. Dies kann für einige Unternehmen nützlich sein.

Funktionen, die Responsive Pricing Table zu einer guten Wahl machen

2. Go Pricing

Die Go Pricing-App hat keine kostenlose Version, bietet jedoch Tausende von Verkäufen und einige großartige Rezensionen auf dem CodeCanyon-Marktplatz. Ganz zu schweigen davon, dass es nur 27 US-Dollar kostet, um eines der besten Plugins für Preistabellen auf dem Markt zu erhalten.

Go Pricing - WordPress Responsive Pricing-Tabellen

Go Pricing – WordPress Responsive Pricing-Tabellen

Was macht das Go Pricing Plugin so besonders? Zu Beginn hat es unglaublich schlanke Preispläne mit modernen Farben und vielen Leerzeichen, damit es nicht überladen aussieht. Du kannst auch aus einer großen Sammlung von Themes auswählen, von denen einige nur für bestimmte Branchen bestimmt sind. Wir lieben es auch, dass das Plugin in mehrere Page Builder integriert ist und über Shortcodes verfügt, die sicherstellen, dass niemand ein Programmierer sein muss, um Preistabellen zu erstellen.

Kosten

Eine einmalige Gebühr von 27 Dollar mit der Option, den Support für 8,25 USD auf ein Jahr zu verlängern.

Funktionen, die Go Pricing zu einer guten Wahl machen

3. Pricing Tables WordPress Plugin – Easy Pricing Tables

Wenn Du an sauberen Vergleichs- und Preistabellen ohne Schnickschnack interessiert bist, ist das Pricing Tables WordPress Plugin eine gute Wahl. Es ist sowohl als kostenlose als auch als Premium-Version erhältlich und kostet für eine Website 29 USD pro Jahr und für unbegrenzte Websites bis zu 99 USD pro Jahr. Einige der Premium-Funktionen, darunter das WooCommerce-Add-On und die Google Analytics-Integration, werden langsam richtig begehrt.

Pricing Tables WordPress Plugin - Easy Pricing Tables

Pricing Tables WordPress Plugin – Easy Pricing Tables

Einige der anderen Integrationen für die Premium-Versionen umfassen Easy Digital Downloads, Stripe und ein Pricing Toggle-Add-On. Darüber hinaus kannst Du damit rechnen, den Entwurfsprozess mit 10 voreingestellten Entwürfen zu starten. Wie bereits erwähnt, ist dies eines der einfacheren Plugins für Preistabellen. Wir empfehlen es daher für diejenigen, die keine Elemente wie Animationen und Grafiken möchten.

Kosten

Das Core Plugin ist kostenlos.

Das Premium-Plugin kostet 29 US-Dollar pro Jahr für eine Site, 59 US-Dollar pro Jahr für fünf Sites und 99 US-Dollar pro Jahr für unbegrenzte Sites.

Funktionen, die Easy Pricing Tables zu einer guten Wahl machen

4. Pricing Table by Supsystic

Das Supsystic-Entwicklungsteam ist dafür bekannt, dass es alle möglichen Plugins für Fotogalerien, Popups, Datentabellen und mehr erstellt. Wir werfen jedoch einen Blick auf das Pricing Table Plugin, das als kostenlose Lösung mit einer Reihe von Funktionen angeboten wird, mit denen Du herumspielen kannst. Die kostenlose Version des Plugins bietet Funktionen für voreingestellte Vorlagen, Hover-Animationen und Schaltflächenanpassungen. Du kannst sogar Deine Tabelleninformationen problemlos importieren und exportieren.

Pricing Table by Supsystic

Pricing Table by Supsystic

Das Premium-Plugin gefällt uns auch, da es für eine Website ab 39 US-Dollar erhältlich ist und Du eine große Menge an Premium-Vorlagen und Rollenrestriktionen erhältst. Insgesamt würde ich argumentieren, dass dies eines der besten Preistabellen-Plugins für die Verwendung des kostenlosen Core-Plugins und das Auslassen der kostenpflichtigen Version ist. Die Premium-Vorlagen sind jedoch auch ziemlich cool und kosten Dich nicht so viel.

Kosten

Ein kostenloser Plan wird angeboten.

Upgrade auf Premium für 39 US-Dollar an einem Standort. Oder 69 US-Dollar für Support auf fünf Websites. Oder 149 US-Dollar auf unbegrenzten Websites.

Funktionen, die Pricing Table zu einer guten Wahl machen

5. CSS3 Responsive WordPress Compare Pricing Tables

Bei einem Preis von 20 US-Dollar ist das CSS3 Responsive Pricing Table-Plugin ein unglaubliches Schnäppchen. Es wird nur auf dem CodeCanyon-Marktplatz verkauft. Beachte jedoch, dass keine kostenlose Version verfügbar ist. Davon abgesehen werden sich die wenigsten Menschen darüber ärgern, 20 US-Dollar für ein hoch bewertetes und geprüftes Pricing-Plugin zu zahlen. Insgesamt hat das Plugin einige schöne Vorlagen, mit denen Du beginnen kannst. Du kannst Farben und Schriftarten ändern und gleichzeitig einige der besten Pläne hervorheben, die Du anbietest.

CSS3 Responsive WordPress Compare Pricing Tables

CSS3 Responsive WordPress Compare Pricing Tables

Die meisten Preistabellen in dieser Liste sind responsiv, aber diese sieht besonders gut aus, nachdem ich sie auf meinem Telefon und Tablet getestet habe. Es sieht auch so aus, als ob der Entwickler reagiert und bereit ist, neue Funktionen zu erstellen und diese als Updates freizugeben. Zum Zeitpunkt dieses Artikels sehe ich zum Beispiel derzeit drei wichtige Feature-Releases – das der verschiebbaren Spalten, den responsiven Modus und das Importieren und Exportieren von Daten.

Kosten

20 $ für alle Funktionen.

Du kannst 5,63 US-Dollar bezahlen, um Deinen Kundensupport auf ein Jahr zu verlängern. Es wird kein kostenloses Plugin angeboten.

Funktionen, die CSS3 Responsive WordPress Compare Pricing Tables zu einer guten Wahl machen

6. ARPrice – Responsive WordPress Pricing Table Plugin

Das ARPrice-Plugin wird auch auf der CodeCanyon-Website zum Preis von 23 US-Dollar verkauft. Wir beginnen zu bemerken, dass viele Unternehmen und Einzelpersonen besser dran sind, diese supergünstigen Preise zu zahlen, um alle Funktionen zu erhalten, die sie benötigen, als mit einem kostenlosen Plugin zu arbeiten, dem einige Funktionen fehlen. Unabhängig davon bietet dieses Preistabellen-Plugin einige der besten Grafiken in dieser Liste, da es verschiedene Arten von Medienelementen unterstützt, wie z. B. Hintergrundbilder und Symbole.

ARPrice – WordPress Pricing Table Plugin

ARPrice – WordPress Pricing Table Plugin

Der Backend-Designer ist ein visueller Editor, der genau anzeigt, wie Deine Preistabelle online aussehen wird. Du kannst dann auswählen, ob Deine Preispläne auf jährlichen, monatlichen oder den vielen anderen verfügbaren Zeitangeboten basieren. Du startest den Vorgang, indem Du eine Vorlage auswählst. Anschließend kannst Du Daten importieren, Effekte ändern und Deine Schriftarten auswählen. Insgesamt bietet das ARPrice-Plugin eine schöne Benutzeroberfläche mit noch besseren Frontend-Ergebnissen.

Kosten

Eine einmalige Gebühr von 23 USD mit einer Gebühr von 6,75 USD für die Verlängerung Deines Supports um bis zu ein Jahr.

Funktionen, die ARPrice zu einer guten Wahl machen

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

Hier ist ein weiteres Premium Preistabellen-Plugin mit einem soliden Preis. Der WP Pricing Table Builder enthält rund 90 Tabellenvorlagen, in die Du Dich einarbeiten kannst. Es gibt auch einen benutzerdefinierten Themes-Generator und einen Drag-and-Drop-Generator für das ultimative visuelle Gestaltungserlebnis.

WP Pricing Table Builder - Responsive Pricing Plans Plugin for WordPress

WP Pricing Table Builder – Responsive Pricing Plans Plugin for WordPress

Ich mag dieses Plugin, weil es nicht versucht, eine Vorlagenbibliothek mit Hunderten von Optionen zu erstellen. Stattdessen kannst Du feststellen, dass sich die Entwickler auf Qualität konzentriert haben und viel Zeit darauf verwendet haben, alle Vorlagen so modern und schön wie möglich zu gestalten. Der Theme Color Generator ist eine interessante Funktion, die in keinem der anderen Plugins enthalten zu sein scheint. Hiermit kannst Du ein Color Theme mit einer Farbe Deiner Wahl erstellen. So kannst Du sicherstellen, dass die Farbe Deiner Preistabelle gut aussehen wird.

Kosten

Das Plugin kostet 24 Dollar.

Upgrade auf 12 Monate Support für 7,13 USD.

Funktionen, die WP Pricing Table Builder zu einer guten Wahl machen

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

Das Pricing Table – Price List Plugin stammt von A WP Life. Es ist eine etwas neuere, aber angesehene Lösung. Die kostenlose Version bietet schöne Optionen für Anpassungen, einschließlich einiger Vorlagen, die mit dem Plugin geliefert werden. Es werden Animationen bereitgestellt, und Du kannst Elemente wie Symbole und Funktionslisten einfügen. Platziere die Schaltflächen „Jetzt kaufen“ in den Listen und füge Tags für Elemente wie „Heiß“ oder „Beliebt“ hinzu.

Haben Sie mit Ausfallzeiten und WordPress-Problemen zu kämpfen? Kinsta ist die Hosting-Lösung, die Ihnen Zeit spart! Sieh dir unsere Features an
Pricing Table – Price list, Price Table, Easy Pricing Table

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

Die Premium-Version dieses Plugins bietet dieselben Funktionen sowie 19 zusätzliche Vorlagen. Es kostet nur 9,99 US-Dollar. Wenn Du also eine Vorlage findest, die zu Deiner Marke passt, greife zu.

Kosten

Kostenlos und 9,99 USD für die Premium-Version.

Funktionen, die Pricing Table zu einer guten Wahl machen

9. WRC Pricing Tables

Das Plugin WRC Pricing Tables wird als kostenloses Plugin zur Verfügung gestellt. Du hast jedoch die Wahl, ein Upgrade für 10 US-Dollar durchzuführen. Die Premium-Version ist etwas weiter fortgeschritten, mit über 500 zusätzlichen Vorlagen, einer PayPal-Integration und Preisoptionen für den Wechsel zwischen Monats- und Jahresplänen. Eine Handvoll anderer Funktionen sind im Premium-Paket enthalten, daher ist es auf jeden Fall eine Überlegung wert, da der Preis so niedrig ist.

WRC Pricing Tables

WRC Pricing Tables

Das kostenlose Plugin eignet sich hervorragend zum Erstellen einfacher Preistabellen, und Du kannst eine unbegrenzte Anzahl von Zeilen und Spalten erstellen. Das gesamte Design wird mit Hilfe eines Drag-and-Drop-Editors erstellt. Eines der Dinge, die uns am WRC Pricing Tables-Plugin am besten gefallen, ist, dass Du einen Farbwähler verwenden kannst, der im Wesentlichen Deine Farbe aufnimmt und ein zufälliges Tabellendesign für Dich generiert.

Kosten

Kostenlos. 10 USD für Premium.

Funktionen, die WRC Pricing Table zu einer guten Wahl machen

Welches ist das beste WordPress Preistabellen-Plugin für Dich?

The plugins listed above are all ready for you to test. However, I can also make it a bit easier for you with some additional recommendations.

Alle anderen Preistabellen-Plugins in dieser Liste haben ebenfalls ihre Vorteile. Dies sind jedoch die, die mir am meisten Spaß machen.

Aber was ist, wenn Du kein Plugin verwenden möchtest und Deine eigene Preistabelle erstellen möchtest?

So geht’s!

Erstellen einer Preistabelle in WordPress von Grund auf neu

Das Erstellen einer Preistabelle von Grund auf erfolgt mit HTML-Code, der uns die Struktur für unsere Tabelle gibt, und dann wird sie mit CSS formatiert.

Melde Dich zunächst auf Deiner WordPress-Website an, navigiere zum Dashboard und klicke auf Pages → Add New. Du kannst den Code auch zu einer bereits vorhandenen Seite hinzufügen, auf der Deine Preistabellen angezeigt werden sollen.

Wechsle nach dem Laden des WordPress-Editors in den Textmodus und füge den folgenden Code ein:

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

Der Code ist ziemlich einfach: Zuerst erstellen wir ein div, um unseren Preistabellen-Code zu speichern und es einfach zu machen, ihn mit CSS zu gestalten. Da wir dann drei Tabellen erstellen, wird jede von ihnen in eine Drittel-Spalte eingeschlossen. Der letzte Teil ist die Tabelle selbst, mit zusätzlichen Klassen für einen Header und einen Preis, die sie vom Rest der Tabelle abheben.

Ersetze vor dem Klicken auf Publish oder Update den Text zwischen den Tags [pre] <li> und </ li> [/ pre] durch Deinen eigenen und füge den Link nach dem href-Teil des Links zu Deinem Zahlungsformular hinzu.

Wenn Du alle Informationen ersetzt hast, klicke auf Publish, wenn Du eine neue Seite erstellt hast, oder auf Update, wenn Du die Tabelle zu einer vorhandenen Seite hinzugefügt hast.

Wenn Du Dir Deine Seite jetzt ansiehst, wirst Du feststellen, dass die Preistabelle sehr einfach aussieht. Lass uns etwas Styling hinzufügen.

Wenn Du ein untergeordnetes Theme verwendest, solltest Du dem Stylesheet Deines untergeordneten Themes oder dem benutzerdefinierten CSS-Editor den folgenden Code hinzufügen.

Der erste Teil des Codes stellt sicher, dass unsere Preistabelle in Spalten angezeigt wird. Wenn Du mehr als drei Tabellen anzeigen möchtest oder musst, kannst Du diese dank dieser Klassen problemlos ersetzen:

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

Der zweite Teil des Codes gibt den Tabellen das eigentliche Styling.

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

Wir haben den Preistabellen ein einfaches, grundlegendes Design hinzugefügt und die Überschrift und den Preis unterschiedlich gestaltet, um sie hervorzuheben. Wir haben auch einen Box-Schatten um die mittlere Tabelle hinzugefügt, um dieses spezielle Paket hervorzuheben. Schließlich haben wir einige Medienabfragen hinzugefügt, um sicherzustellen, dass die Tabellen reagieren.

Wie Deine Preistabelle aussehen sollte, wenn alles gesagt und getan ist.

Wie Deine Preistabelle aussehen sollte, wenn alles gesagt und getan ist.

Nachdem Du beide CSS-Snippets eingefügt hast, klicke auf Update File. Schau Dir jetzt Deine Seite an und stelle sicher, dass alles so angezeigt wird, wie Du es möchtest.

Wenn Du Fragen zu Preistabellen oder Vorschläge für andere Personen hast, lass es uns in den Kommentaren wissen!


Wenn Dir dieser Artikel gefallen hat, dann wirst du Kinsta’s WordPress Hosting-Plattform lieben. Beschleunige deine Webseite und erhalte 24/7 Support von unserem erfahrenen WordPress-Team. Unsere Google Cloud basierte Infrastruktur konzentriert sich auf die Bereiche Auto-Scaling, Performance und Sicherheit. Lass uns dir den Kinsta-Unterschied zeigen! Schau Dir hier unsere Pakete an