Avez-vous une liste de prix sur votre site ? Ces prix peuvent s’appliquer à des services comme l’entretien des pelouses ou à des logiciels. Du monde de la technologie aux studios de yoga, la plupart des compagnies pourraient utiliser des tableaux de prix pour une meilleure représentation de ce qu’elles offrent. La principale façon d’y parvenir est de regarder les meilleurs plugins de tableau de prix WordPress, puis d’en implémenter un sur votre site.

Mais cela soulève la question suivante : pourquoi est-il si important d’avoir un tableau de prix ?

La réponse à cette question peut sembler évidente (vous voulez améliorer les conversions, n’est-ce pas ?), mais il est agréable de comprendre les raisons qui se cachent derrière le tableau des prix. Pourquoi une extension de tableau de prix est-elle plus efficace pour faire une vente qu’une liste à puces, un paragraphe ou même une image ?

Avoir une page de prix à l’allure élégante peut faire exploser vos services et augmenter le nombre de conversions. Jetez un coup d’œil à ces plugins pratiques de tableaux de prix WordPress. 🛒Click to Tweet

Ce qu’il faut rechercher dans un plugin de tableau de prix WordPress

Maintenant que nous connaissons les avantages d’une extension de tableau de prix WordPress, jetons un coup d’œil à certaines des fonctionnalités que vous devriez vouloir :

Nous pourrions passer en revue des douzaines de caractéristiques qui ont du sens sur les tableaux de prix, mais ceci est un bon début avec l’essentiel.

Les meilleurs plugins WordPress de tableaux de prix comparées (et comment coder le votre)

  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. Comment construire un tableau de prix dans WordPress à partir de zéro

Il n’y a pas de pénurie d’options disponibles lorsqu’il s’agit de fixer le prix des plugins de table et des sites WordPress. Certains des meilleurs peuvent être utilisés gratuitement, tandis que d’autres sont premium sans aucune option gratuite. Cela dit, toutes les extensions ci-dessous méritent une place sur cette liste, et certaines d’entre elles ont des caractéristiques uniques qui sont excellentes pour certaines industries ou des entreprises spécifiques.

1. Responsive Pricing Table by WP Darko

Responsive Pricing Table est l’une des extensions les plus conviviale et riche en fonctionnalités pour la création de tableaux de prix. Elle fournit une excellente version gratuite, sans aucune limitation quant au nombre de forfaits que vous incluez ou au nombre de tableaux que vous créez pour vos sites. Vous pouvez toutefois passer à la version payante pour accéder à de meilleures fonctionnalités telles que des habillages et un « égaliseur » pour que toutes les hauteurs de colonnes soient exactement les mêmes.

Extension WordPress Responsive Pricing Table

Extension WordPress Responsive Pricing Table

Les tableaux de prix que vous construisez sont complétés avec des champs simples et des boutons d’administration. Par exemple, certains des champs intégrés que vous pouvez utiliser incluent les prix, les descriptions, les titres des forfaits et les boîtes d’icônes. Certains des boutons personnalisés permettent des liens vers des sites comme Stripe et PayPal, tandis que les classes CSS personnalisées sont sûres d’aider les développeurs avancés.

Coût

Une formule gratuite est disponible.

Vous pouvez obtenir l’extension payante pour 19$ pour un site ou 49$ pour un nombre illimité de sites.

Les développeurs Darko vendent d’autres extensions, vous pouvez donc les obtenir toutes pour le prix de 79$. Cela pourrait être utile pour certaines entreprises.

Fonctionnalités qui font de Go Pricing un bon choix

2. Go Pricing

L’application Go Pricing n’a pas de version gratuite, mais elle compte des milliers de ventes et d’excellentes critiques sur la place de marché CodeCanyon. Sans compter qu’il ne vous en coûtera que 27$ pour obtenir l’une des meilleures extensions de tableau de prix sur le marché.

Go Pricing – Tableaux de prix responsives WordPress

Go Pricing – Tableaux de prix responsives WordPress

Qu’est-ce qui rend l’extension Go Pricing si spéciale ? Pour commencer, elle a des formules de prix incroyablement élégantes avec des couleurs modernes et beaucoup d’espaces blancs pour ne pas avoir l’air encombré. Vous pouvez également choisir parmi une vaste collection de thèmes, dont certains sont conçus uniquement pour certaines industries. Nous adorons aussi le fait que l’extension s’intègre avec plusieurs constructeurs de pages et possède des codes courts pour s’assurer que personne n’a besoin d’être un génie du code pour faire des tableaux de prix.

Coût

Des frais uniques de 27$, avec la possibilité de prolonger le support jusqu’à un an pour 8,25$.

Fonctionnalités qui font de Pricing un bon choix

3. Extension de tableau de prix WordPress – Easy Pricing Tables

Si vous êtes intéressé par des tableaux de comparaison et de prix clairs sans les artifices esthétiques, l’extension WordPress Easy Pricing Tables semble être une solide option pour vous. Elle est disponible en version gratuite et payante, à partir de 29$ par an pour un site et jusqu’à 99$ par an pour un nombre illimité de sites. Certaines des fonctionnalités payantes commencent à devenir vraiment cool, y compris un module WooCommerce et l’intégration de Google Analytics.

Extension WordPress de tableaux de prix – Easy Pricing Tables

Extension WordPress de tableaux de prix – Easy Pricing Tables

Parmi les autres intégrations pour les versions payantes, citons Easy Digital Downloads, Stripe et un module de bascule de tarif. De plus, vous pouvez vous attendre à commencer le processus de conception avec 10 modèles prédéfinis. Comme mentionné, c’est l’une des plus simple extensions de tableau de prix, donc nous l’aimons pour ceux qui ne veulent pas d’éléments comme les animations et les graphiques.

Coût

L’extension de base est gratuite.

L’extension payante est à 29$ par an pour un site, 59$ par an pour cinq sites et 99$ par an pour un nombre illimité de sites.

Fonctionnalités qui font de Easy Pricing Tables un bon choix

4. Pricing Table par Supsystic

L’équipe de développement de Supsystic est reconnue pour la réalisation de toutes sortes d’extensions pour les galeries de photos, les popups, les tableaux de données, et plus encore. Mais nous jetons un coup d’oeil à l’extension Pricing Table, qui est offerte gratuitement avec un certain nombre de fonctionnalités pour que vous puissiez jouer avec. En fait, la version gratuite de l’extension possède des fonctionnalités pour les modèles prédéfinis, les animations survolées et la personnalisation des boutons. Vous pouvez même importer et exporter facilement les informations de vos tableaux.

Pricing Table par Supsystic

Pricing Table par Supsystic

Nous aimons aussi l’apparence de l’extension payante, vu qu’elle commence à partir de 39$ pour un site et que vous recevez un grand nombre de modèles payants et de restrictions de rôle. Dans l’ensemble, je dirais que c’est l’une des meilleures extensions de tableau de prix pour l’utilisation de base, extension gratuite et passer la version payante. Cependant, les modèles payants sont assez cool et ils ne vous coûtent pas tant que ça.

Coût

Une formule gratuite est offert.

Passez au payant pour 39$ sur un seul site. Ou 69$ pour une prise en charge sur cinq sites. Ou 149$ sur des sites illimités.

Fonctionnalités qui font de Pricing Table by Supsystic un bon choix

5. CSS3 Responsive WordPress Compare Pricing Tables

Au prix de 20$, l’extension CSS3 Responsive Pricing Table est d’une valeur incroyable. Elle n’est vendue que sur la place de marché CodeCanyon, mais vous devez garder à l’esprit qu’aucune version gratuite n’est disponible. Cela dit, la plupart des gens n’hésiteront pas à payer 20$ pour un extension de tarification très bien notée et évaluée. Dans l’ensemble, l’extension a quelques beaux modèles pour vous permettre de commencer. Vous pouvez changer les couleurs et les polices de caractères, tout en mettant en évidence certaines des meilleures formules que vous proposez.

CSS3 Responsive WordPress Compare Pricing Tables

CSS3 Responsive WordPress Compare Pricing Tables

La plupart des tableaux de prix sur cette liste sont responsives, mais celui-ci semble particulièrement bien après avoir été testé sur mon téléphone et ma tablette. Il semble également que le développeur soit réactif, prêt à créer de nouvelles fonctionnalités et à les publier sous forme de mises à jour. Par exemple, au moment de cet article, je vois actuellement trois versions de fonctionnalités majeures : les colonnes coulissantes, le mode responsive ainsi que l’importation et l’exportation de données.

Coût

20$ pour toutes les fonctions.

Vous pouvez payer 5,63$ pour prolonger votre service à la clientèle d’un an. Aucune extension gratuite n’est fournie.

Fonctionnalités qui font de CSS3 Pricing Tables Grids un bon choix

6. ARPrice – Responsive WordPress Pricing Table Plugin

L’extension ARPrice se vend aussi sur le site de CodeCanyon, mais au prix de 23$, et nous commençons à remarquer que beaucoup d’entreprises et de personnes ont intérêt à payer ces prix super bas pour obtenir toutes les fonctionnalités dont ils ont besoin, au lieu de travailler avec une extension gratuite qui manque de fonctionnalités. Quoi qu’il en soit, cette extension de tableau de prix présente certains des meilleurs visuels de cette liste, car elle supporte plusieurs types de médias, tels que les images d’arrière-plan et les icônes.

ARPrice - WordPress Pricing Table Plugin

ARPrice – WordPress Pricing Table Plugin

Le concepteur de l’administration est un éditeur visuel qui révèle exactement à quoi ressemblera votre tableau de prix en ligne. Vous pouvez ensuite choisir si vos plans tarifaires sont basés sur les offres annuelles, mensuelles ou sur les nombreuses autres offres de temps disponibles. Vous commencez le processus en sélectionnant un modèle, puis vous pouvez y entrer et importer des données, modifier les effets et choisir vos polices. Dans l’ensemble, l’extension ARPrice offre une belle interface utilisateur avec des résultats encore meilleurs.

Coût

Des frais uniques de 23$ et des frais de 6,75$ pour prolonger votre support jusqu’à un an.

Fonctionnalités qui font de ARPrice un bon choix

7. WP Pricing Table Builder – Extension responsive de tarification de forfaits pour WordPress

Voici une autre extension de tableau de prix payante avec un prix solide. WP Pricing Table Builder est livré avec environ 90 modèles de tableaux dans lesquels vous pouvez croquer. Il y a aussi un générateur de thème personnalisé et un générateur en glisser-déposer pour une expérience ultime de conception visuelle.

WP Pricing Table Builder – Extension de tableau de prix responsive pour WordPress

WP Pricing Table Builder – Extension de tableau de prix responsive pour WordPress

J’aime cette extension parce qu’elle n’essaie pas de créer une bibliothèque de modèles de 100 options. Au lieu de cela, vous pouvez dire que les développeurs se sont concentrés sur la qualité et ont passé beaucoup de temps à rendre tous les modèles aussi modernes et beaux que possible. Le générateur de couleurs de thème est une fonctionnalité intéressante qui semble ne se trouver dans aucune des autres extensions. Il vous permet de générer un thème de couleur en utilisant une couleur de votre choix. Par conséquent, vous savez au moins que la couleur de votre tableau de prix va être belle.

Coût

L’extension est a 24$.

Passez à 12 mois de support pour 7,13$.

Fonctionnalités qui font de WP Pricing Table Builder un bon choix

8. Pricing Table – Liste des prix, tableau de prix, simple

L’extension Pricing Table – Extension de liste de prix vient des gens de A WP Life. C’est une solution un peu plus récente, mais très respectée. La version gratuite offre de belles options de personnalisation, y compris quelques modèles fournis avec l’extension. Des animations sont fournies et vous pouvez insérer des éléments tels que des icônes et des listes de fonctionnalités. Placez les boutons Acheter maintenant sur les listes et incorporez des balises pour des choses comme « Nouveau » ou « Populaire ».

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

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

La version payante de cette extension vous offre toutes les mêmes fonctionnalités, ainsi que 19 modèles supplémentaires. Elle est seulement 9,99$, donc si vous trouvez un modèle qui correspond à votre marque, allez-y.

Coût

Gratuit et 9,99$ pour la version payante.

Fonctionnalités qui font de Pricing Table un bon choix

9. WRC Pricing Tables

L’extension WRC Pricing Tables est fournie gratuitement, mais vous avez le choix de la mettre à niveau pour 10$. La version payante est un peu plus avancée, avec plus de 500 modèles supplémentaires, une intégration PayPal et des bascules de prix pour passer d’un abonnement mensuel à un abonnement annuel. Une poignée d’autres caractéristiques viennent avec la formule payante, il est donc certainement intéressant de l’envisager car le prix est si bas.

WRC Pricing Tables

WRC Pricing Tables

L’extension gratuite est idéale pour construire des tableaux de prix simples, et vous pouvez créer un nombre illimité de lignes et de colonnes. Toute la conception se fait à l’aide d’un éditeur en glisser-déposer. L’une des choses que nous aimons le plus dans l’extension WRC Pricing Tables est que vous pouvez utiliser un sélecteur de couleurs, qui prend essentiellement votre couleur et génère pour vous une conception aléatoire de tableau.

Coût

Gratuit. 10$ pour le payant

Fonctionnalités qui font de WRC Pricing Tables un bon choix

Quel est la meilleure extension WordPress de tableau de prix pour vous ?

Les extensions listées ci-dessus sont tous prêtes à être testées. Cependant, je peux également vous faciliter la tâche en vous faisant des recommandations supplémentaires.

Toutes les autres extensions de tableau de prix sur cette liste ont aussi leurs avantages. Cependant, ce sont celles que j’ai tendance à apprécier le plus.

Mais que faire si vous n’êtes pas intéressé par l’utilisation d’un plugin et que vous souhaitez coder votre propre tableau de prix ?
Voici comment faire !

Comment construire un tableau de prix dans WordPress à partir de zéro

La construction d’un tableau de prix à partir de zéro se fait avec du code HTML qui nous donnera la structure de notre tableau et ensuite le style avec CSS.

Pour commencer, connectez-vous à votre site WordPress, naviguez jusqu’au tableau de bord et cliquez sur Pages → Ajouter. Vous pouvez également ajouter le code à une page déjà existante sur laquelle vous souhaitez que vos tableaux de prix apparaissent.

Une fois l’éditeur WordPress chargé, passez en mode texte et collez le code suivant :

<div class="pricing-table">
<div class="one-third first">
<ul>
 <li class="header">Basic</li>
 <li class="grey-blue">$ 9.99 / an</li>
<li>Article #1</li>
<li>Article #2</li>
<li>Article #3</li>
 <li>Article #4</li>
 <li>Article #5</li>
</ul>
<a class="pricing-button" href="#">S'inscrire !</a>
</div>
<div class="middle one-third">
<ul> 
 <li class="header-blue">Pro</li>
 <li class="light-blue">$ 99.99 / an</li>
<li>Article #1</li>
<li>Article #2</li>
<li>Article #3</li>
 <li>Article #4</li>
 <li>Article #5</li>
</ul>
<a class="pricing-button" href="#">S'inscrire !</a> 
</div>
<div class="one-third">
<ul>
 <li class="header">Business</li>
 <li class="grey-blue">$ 199.99 / an</li>
<li>Article #1</li>
<li>Article #2</li>
<li>Article #3</li>
 <li>Article #4</li>
 <li>Article #5</li>
</ul>
<a class="pricing-button" href="#">S'inscrire !</a> 
</div>
</div>

Le code est assez simple : tout d’abord, nous créons un div pour tenir notre code de table de prix et le rendre facile de les styliser avec du CSS. Ensuite, puisque nous créons trois tables, chacune d’entre elles est enveloppée dans une colonne. La dernière partie est le tableau lui-même, avec des classes ajoutées pour un en-tête et un point de prix qui les distingueront du reste du tableau.

Avant de cliquer sur Publier ou Mettre à jour, assurez-vous de remplacer le texte entre les balises[pre]</li> ; et </li> ;[/pre] par le vôtre et d’ajouter le lien à votre formulaire de paiement après la partie href du lien.

Une fois toutes les informations remplacées, cliquez sur Publier si vous avez créé une nouvelle page ou sur Mettre à jour si vous avez ajouté le tableau à une page existante.

Si vous regardez votre page maintenant, vous remarquerez que le tableau des prix est très clair. Ajoutons-y un peu de style.

Si vous utilisez un thème enfant, vous devez ajouter le code suivant à la feuille de style de votre thème enfant ou dans l’éditeur CSS personnalisé.

La première partie du code s’assurera que notre tableau des prix s’affiche en colonnes et si vous voulez ou devez afficher plus de trois tableaux, ces classes vous permettront de les remplacer facilement :

/* ## 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 deuxième partie du code donnera le style réel aux tableaux.

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

Nous avons ajouté un style simple et basique pour les tables de prix et nous avons conçu l’en-tête et le prix différemment pour qu’ils se démarquent. Nous avons également ajouté une ombre autour de la table du milieu pour mettre en évidence cette offre spécifique. Enfin, nous avons ajouté quelques Media Queries pour nous assurer que les tables sont responsives.

Tableau de prix dans WordPress avec du code

À quoi devrait ressembler votre tableau des prix une fois que tout cela fait.

Une fois que vous avez collé les deux extraits CSS, allez de l’avant et cliquez sur Mettre à jour. Maintenant, regardez votre page et assurez-vous que tout s’affiche comme vous le voulez.

Si vous avez des questions sur les meilleurs tableaux de prix, ou si vous avez des suggestions pour d’autres personnes, faites-le nous savoir dans les commentaires !


Si vous avez aimé cet article, alors vous allez adorer la plateforme d’hébergement WordPress de Kinsta. Accélérez votre site Web et obtenez le support 24/7 de notre équipe de vétérans de WordPress. Notre infrastructure propulsée par Google Cloud met l’accent sur la mise à l’échelle automatique, la performance et la sécurité. Laissez-nous vous montrer la différence de Kinsta ! Découvrez nos plans