注册
> 资源中心>博客资讯

比较最好的WordPress网站定价/价格表插件

WBOLT_COM 2 月 16, 2022 2.2k+ 1

比较最好的WordPress网站定价/价格表插件

您的网站上有价格清单吗？这些价格可能适用于草坪护理等服务，也可能适用于软件包。从科技界到瑜伽工作室，大多数公司都可以使用价格表来更好地展示他们提供的产品。做到这一点的主要方法是查看最好的WordPress定价表插件，然后在您的网站上实施一个。

但这引出了一个问题，为什么定价表如此重要？

这个问题的答案可能看起来很明显（您想提高转化率，对吗？）但很高兴了解定价表背后的原因。为什么定价表插件比常规的项目符号列表、段落甚至图像更有效地进行销售？

  • 定价表允许对您的服务或套餐进行清晰的概述和比较。
  • 最重要的功能显示在定价表中，清除混乱并将其留到另一页。
  • 定价表有明确的号召性用语按钮，用于向人们展示如何继续购买。
  • 大多数定价表都使用使客户更容易理解的套餐/计划名称。
  • 您可以通过使用较大的字体或图形来强调某些文字、计划或功能。
  • 阅读基于图形的定价表比阅读仅包含文本的定价表有趣得多。
  • 您可以通过紧急方式（即“时间快要花光了一笔好交易”）或免费试用来提高转化率。
  • 定价表在网页上占用的空间最少，因此您可以添加其他信息，例如常见问题解答或销售人员的聊天框。
  1. WordPress定价表插件应该具备哪些功能
  2. 比较最好的WordPress定价表插件（以及如何编写自己的代码）
  3. 哪个是最适合您的WordPress定价表插件？
  4. 如何从零开始在WordPress中构建定价表

WordPress定价表插件应该具备哪些功能

现在我们知道了WordPress定价表插件的好处，让我们来看看您应该想要的一些功能：

  • 免费和高级选项——我最喜欢的定价表插件为您提供了一个标准表，让您的定价看起来不错。在那之后，具有额外功能的高级版本不应该是超级昂贵的。
  • 与顶级页面构建器的集成——一些页面构建器甚至带有自己的定价表。一些更流行的页面构建器包括Divi Builder、Elementor和WPBakery。
  • 在几秒钟内启动定价表的皮肤或主题。我们还希望看到颜色、字体和图标的自定义工具。
  • 用于在某些计划上显示标识的设置，例如“最佳价值”或“最受欢迎”计划。
  • 多种货币可供全球使用。
  • 支持每个定价计划上的大型可自定义按钮。
  • 拖放构建器也将非常出色。
  • 支持自定义CSS和HTML，因为更高级的开发人员将需要复杂的调整机会。

我们可以浏览几十个在定价表上有意义的功能，但这是从基本要素开始的良好开端。

比较最好的WordPress定价表插件（以及如何编写自己的代码）

在定价表插件和WordPress网站方面，不乏可用选项。一些最好的可以免费使用，而另一些则是高级的，没有任何免费选项。话虽如此，下面的所有插件都应该在此列表中占有一席之地，其中一些具有独特的功能，非常适合某些特定行业或公司。

  1. Responsive Pricing Table
  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. Pricing Table – Price list, Price Table, Easy Pricing Table
  8. WRC Pricing Tables
  9. 如何从零开始在 WordPress 中构建定价表

1. Responsive Pricing Table

Responsive Pricing Table是用于制作定价表的更用户友好、功能丰富的插件之一。它提供了一个出色的免费版本，对您包含的计划数量或为您的网站制作表格的方式没有限制。但是，您可以升级到高级版本以获得更好的功能，例如皮肤和使所有列高度完全相同的“equalizer”。

WordPress插件-Responsive Pricing Table

WordPress插件-Responsive Pricing Table

您构建的定价表由简单的字段和后端按钮完成。例如，您可以使用的一些内置字段包括定价、描述、计划标题和图标框。一些自定义按钮允许链接到Stripe和PayPal等地方，而自定义CSS类肯定会帮助高级开发人员。

插件提供免费计划。

您可以在一个站点上以19美元的价格获得高级插件，在无限站点上以49美元的价格获得。

Darko Developers出售其他插件，因此您可以以79美元的价格获得所有这些插件。这可能对某些公司有用。

Responsive Pricing Table功能特征

  • 免费计划为各种小型企业提供了必要的工具，因为您会收到无限的表格和计划。
  • 溢价定价也相当低。
  • 皮肤看起来很现代，开箱即用，高度可定制，有很多按钮和字体可以调整。
  • 可以访问图标和其他视觉效果。
  • 您可以在定价计划中包含任意数量的功能。
  • 号召性用语按钮可以链接到第三方支付系统，如PayPal。
  • 广泛的货币符号可用于接触不同的国家。
  • 您可以显示推荐计划的徽章。
  • 可以使用特殊设置显示重复计划（每月或每年）。

2. Go Pricing

Go Pricing应用程序没有免费版本，但它在CodeCanyon市场上拥有数以千计的销量和一些好评。更不用说，只需27美元即可获得市场上最好的定价表插件之一。

Go Pricing – WordPress响应式定价表

Go Pricing – WordPress响应式定价表

是什么让Go Pricing插件如此特别？首先，它具有令人难以置信的时尚定价计划，具有现代色彩和大量空白，因此看起来并不杂乱。您还可以从大量主题中进行选择，其中一些主题仅适用于某些行业。我们也喜欢该插件与多个页面构建器集成，并具有短代码，以确保没有人必须成为编码高手来制作定价表。

一次性费用为27美元，可选择以8.25美元的价格将支持延长至一年。

Go Pricing插件功能特征

  • 在可视化编辑器中，定价表的每个部分都被分解为自己的部分。这包括标题、正文和按钮区域。
  • 购买插件后，会为您提供超过250个演示表。这应该允许大多数公司在几分钟内获取模板并启动定价页面。
  • 页面构建器集成可以拖放元素。Go Pricing与Beaver Builder、Elementor和WPBakery配合得很好。
  • 定价表构建过程对于所有经验水平都很容易。该插件具有出色的后端界面，具有短代码、导入和设置选项。
  • 包括动画以使您的定价表更具吸引力。
  • 使用超过2000种字体图标让您的表格更加直观。
  • 为那些想要超越基本功能的人提供了一个自定义CSS模块。
  • 添加独特的功能，例如媒体元素、PayPal按钮和Google地图。

3.Pricing Tables WordPress Plugin – Easy Pricing Tables

如果您对没有花里胡哨的干净的比较和定价表感兴趣，那么Pricing Tables WordPress插件对您来说似乎是一个不错的选择。它有免费和高级版本，一个网站每年29美元起，无限网站每年99美元起。一些高级功能开始变得非常酷，包括WooCommerce附加组件和Google Analytics集成。

Pricing Tables WordPress Plugin – Easy Pricing Tables

Pricing Tables WordPress Plugin – Easy Pricing Tables

高级版本的其他一些集成包括Easy Digital Downloads、Stripe和Pricing Toggle附加组件。更重要的是，您可以期望以10个预设设计开始设计过程。如前所述，这是更简单的定价表插件之一，因此我们喜欢​​那些不想要动画和图形等元素的人。

核心插件是免费的。

一个站点的高级插件每年29美元，五个站点每年59美元，无限站点每年99美元。

Easy Pricing Tables插件功能特点

  • 定价表设计简洁明了，营造出现代感，没有任何不必要的影响。
  • 您可以调整定价表上几乎每个项目的颜色和其他元素。这包括列、按钮和字体。
  • 所有定价表都是在后端使用一个简单的可视字段列表构建的。设置的格式与定价表在前端的外观相同。
  • 您可以指定一个或多个计划优先于其他计划。
  • 您可以拖放列以重新排序。
  • 提供了一个自定义CSS模块，用于对您的定价表进行更高级的自定义。
  • 即使是免费版本也支持无限数量的定价表行。
  • 一些高级版本对WooCommerce、Google Analytics和Stripe等内容进行了很好的集成。

4. Pricing Table by Supsystic

Supsystic开发团队以为照片库、弹出窗口、数据表等制作各种插件而闻名。但是我们正在研究Pricing Table by Supsystic，它是作为免费解决方案提供的，具有很多功能供您使用。事实上，该插件的免费版本具有预设模板、悬停动画和按钮自定义功能。您甚至可以轻松导入和导出表格信息。

Pricing Table by Supsystic

Pricing Table by Supsystic

我们也喜欢高级版本插件的外观，一个站点的起价为 39 美元，并且您会收到大量高级模板和角色限制。总的来说，我认为这是使用核心免费插件和跳过付费版本的最佳定价表插件之一。但是，高级模板非常酷，而且不会花费你那么多。

提供免费计划。

在一个网站上以39美元的价格升级到高级版。或69美元用于五个站点的支持。或149美元在无限网站上。

Pricing Table by Supsystic功能特征

  • Pricing Table by Supsystic插件最接近免费版本中最完整的定价表解决方案。您在高级插件中获得的唯一升级是一些更好的模板。
  • 所有的定价表看起来都很漂亮，具有响应性元素和鲜艳的色彩。
  • 免费版的模板很棒，高级模板也很棒。
  • 选择有一个向人们显示特别优惠的开关，例如提前一年付款或今天购买。
  • 使用视觉图标展示您的一些计划。
  • 使用短代码、颜色滑块和可视化构建等工具，以确保您在创建过程中不会触及任何代码行。
  • 该插件具有悬停动画，使您的计划对访问者更具吸引力。
  • 还支持图像和视频，以便您展示某些功能或部分业务。
  • 拖放构建器位于WordPress仪表盘的后端。

5. CSS3 Responsive WordPress Compare Pricing Tables

CSS3 Responsive pricing table插件的价格为20美元，物超所值。它仅在CodeCanyon市场上出售，但您应该记住，没有免费版本可用。话虽如此，大多数人不会担心花20美元购买一个高度评价的定价插件。总的来说，该插件有一些漂亮的模板供您入门。您可以更改颜色和字体，同时突出显示您提供的一些最佳计划。

CSS3 Responsive pricing table定价表

CSS3 Responsive pricing table定价表

此列表中的大多数定价表都是响应式的，但在我的手机和平板电脑上测试后，这个价格表看起来特别好。开发人员似乎也反应灵敏并愿意创建新功能并将它们作为更新发布。例如，在撰写本文时，我目前看到了三个主要功能版本——滑动栏、响应模式和数据导入和导出。

所有功能20美元。

您可以支付5.63美元将您的客户支持延长至一年。不提供免费插件。

CSS3 Responsive pricing table插件功能特点

  • 对于您在定价插件中获得的功能，定价是我们所见过的一些最好的。
  • 大量定制工具允许使用数千个独特的定价表。这包括20个颜色版本、60个色带、42个十字图标和两种表格样式。
  • 创建无限数量的行和列。
  • 利用CSS和HTML模块进行额外的自定义。
  • 您可以获得调整所有列和行的宽度和高度的选项。
  • 多站点兼容性。
  • 可帮助您在网站上的任何位置实施定价表的简码。
  • 数据导入和导出工具，以便您可以将数据移动到另一个表或从电子表格导入。
  • 图标支持包括复选标记和X等视觉效果。
  • 动画和媒体支持添加更多视觉效果并使您的计划脱颖而出。

6. ARprice – 响应式WordPress定价表插件

ARPrice插件也在CodeCanyon网站上出售，但价格为23美元。我们开始注意到，与使用缺少某些功能的免费插件相比，许多公司和个人最好支付这些超低价格来获得他们需要的所有功能。无论如何，此定价表插件具有此列表中的一些最佳视觉效果，因为它支持多种类型的媒体项目，例如背景图像和图标。

ARprice – WordPress定价表插件

ARprice – WordPress定价表插件

后端设计器是一个可视化编辑器，可以准确显示您的定价表在网上的样子。然后，您可以选择您的定价计划是基于年度、每月还是许多其他可用时间。您通过选择模板开始该过程，然后您可以进入并导入数据、更改效果并选择您的字体。总的来说，ARPrice插件提供了一个漂亮的用户界面和更好的前端效果。

23美元的一次性费用和6.75美元的费用可将您的支持延长一年。

ARprice插件功能特点

  • 对于高级插件来说，这是相当实惠的。
  • 插件提供了300多个定价表模板供您下载。
  • 自定义工具非常出色，具有无限的颜色选项、完全响应的模板、切换定价按钮和3,000多个图标。
  • 动画效果一定会帮助您提高定价表的吸引力。
  • 有一个用于高级定制的CSS模块和CSS指导系统。
  • 您会收到与其他第三方程序（如Google地图）的一些独特集成。
  • 实时模板编辑器提供了一个漂亮的可视化界面，用于调整列、标题和背景等项目。
  • 还有一个额外的“团队展示”功能，基本上采用相同的列格式，并允许您在网站上共享有关您的员工的信息。
  • WordPress定价表插件与最流行的页面构建器兼容，如Elementor、Gutenberg和WPBakery。

7. Pricing Table – 价目表、价格表、简易定价表

定价表– ABC Pricing Table来自A WP Life。这是一个较新但备受推崇的解决方案。免费版本具有漂亮的自定义选项，包括插件附带的一些模板。提供动画，您可以插入图标和功能列表等项目。将“Buy Now”按钮放在列表中，并为“Hot”或“Popular”商品添加标签。

Pricing Table – 价目表、价格表、简易定价表

Pricing Table – 价目表、价格表、简易定价表

此插件的高级版为您提供所有相同的功能，以及额外的19个模板。它只需9.99美元，所以如果您找到适合您品牌的模板，那就去买吧。

高级版免费，9.99美元。

Pricing Table插件功能特点

  • 您将获得免费版本中的所有优秀功能。升级所需的唯一原因是如果您想要一个不在免费插件中的特定模板。
  • 免费版本中包含一些好看的定价表模板。您还可以再升级大约20个。
  • 插件附带的所有表格都被认为是完全响应的。
  • 图标允许您创建更具视觉吸引力的表格。
  • 简码有助于将您的表格放置在您网站上的任何位置。
  • 只需单击一个按钮，即可在您的站点中添加和删除定价表。
  • 自定义选项包括无限颜色、按钮颜色、标题颜色等。
  • 可以在仪表板中完成自定义CSS样式。
  • 设计区域不是一个完全可视化的构建器，但它设置了多个列来模拟表格之前的样子。

8. WRC Pricing Tables

WRC Pricing Tables作为免费插件提供，但您可以选择以10美元的价格进行升级。高级版更高级一些，有超过500个额外模板、PayPal集成以及用于在月度和年度计划之间切换的定价切换。高级计划附带了一些其他功能，因此绝对值得考虑，因为价格如此之低。

WRC Pricing Tables

WRC Pricing Tables

免费插件非常适合构建简单的定价表，您可以创建无限数量的行和列。所有设计都是在拖放编辑器的帮助下完成的。我们最喜欢WRC Pricing Tables插件的一件事是，您可以使用颜色选择器，它实质上会获取您的颜色并为您生成随机表格设计。

免费。10美元升级至Premium。

WRC Pricing Tables插件功能特点

  • WRC Pricing Tables插件在免费版本中具有出色的功能，只需10美元（一次性费用）即可获得完整的高级解决方案。
  • 当您需要将定价表放在WordPress网站的任何位置时，该插件提供了简码。例如，从技术上讲，简码可以出现在任何页面、帖子甚至可能是小部件上。
  • Font Awesome图标为您的设计添加了一些视觉效果。
  • 该插件还支持谷歌字体。
  • PayPal按钮集成确保您可以从客户那里收款。
  • 插件附带了相当多的模板。
  • 您可以添加无限数量的行和列，同时还可以复制定价表并将它们保存以备后用。
  • 高级开发人员有机会使用c0ustom CSS改进他们的表格。

哪个是最适合您的WordPress定价表插件？

上面列出的插件都已准备好供您测试。但是，我还可以通过一些额外的建议让您更轻松一些。

此列表中的所有其他定价表插件也有其优势。然而，这些是我最喜欢的。

但是，如果您对使用插件不感兴趣并想编写自己的定价表怎么办？

这是怎么做的！

如何从零开始在WordPress中构建定价表

从头开始构建定价表是使用HTML代码完成的，该代码将为我们提供表的结构，然后使用CSS对其进行样式设置。

要开始，请登录您的WordPress网站，导航到仪表盘并单击页面 → 新建页面。您还可以将代码添加到您希望显示定价表的现有页面。

加载WordPress编辑器后，切换到文本模式并粘贴以下代码：

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

代码相当简单：首先，我们创建一个div来保存定价表代码，并使用CSS轻松设置它们的样式。然后，由于我们正在创建三个表，因此每个表都包含在三分之一列中。最后一部分是表格本身，添加了标题和价格点的类，这将使它们从表格的其余部分中脱颖而出。

在点击发布或更新之前，请务必将 [pre]<li> 和 </li>[/pre] 标记之间的文本替换为您自己的，并在链接的 href 部分之后将链接添加到您的付款表单.

替换所有信息后，如果您创建了新页面，请继续并单击“发布”，如果您将表格添加到现有页面，请单击“更新”。

如果您现在查看您的页面，您会注意到定价表看起来非常简单。让我们为其添加一些样式。

如果您使用的是子主题，则应将以下代码添加到子主题的样式表或自定义CSS编辑器中。

代码的第一部分将确保我们的定价表显示在列中，如果您想要或需要显示三个以上的表，这些类将允许您轻松替换它们：

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

代码的第二部分将为表格提供实际样式。

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

我们为定价表添加了一些简单的基本样式，并对标题和价格进行了不同的样式设置，以使它们脱颖而出。我们还在中间的表格周围添加了一个盒子阴影来突出显示该特定包。最后，我们添加了一些媒体查询以确保表格是响应式的。

定价表

一切都说完了，你的定价表应该是什么样子。

粘贴两个CSS片段后，继续并单击更新文件。现在看看你的页面，确保一切都按照你想要的方式显示。

评论收藏微海报
分享
分享到

相关推荐

评论留言

回复 heihae 取消回复

唇枪舌剑(1)

  • heihae的头像

    heihae

    2022.4.28 00:04

    代码的布局是乱的

    回复

热门主题

热门插件

  • 但这引出了一个问题，为什么定价表如此重要？
  • WordPress定价表插件应该具备哪些功能
  • 比较最好的WordPress定价表插件（以及如何编写自己的代码）
  • 1. Responsive Pricing Table
  • 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 - 响应式WordPress定价表插件
  • 7. Pricing Table – 价目表、价格表、简易定价表
  • 哪个是最适合您的WordPress定价表插件？
  • 如何从零开始在WordPress中构建定价表