比較最好的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

您構建的定價表由簡單的欄位和後端按鈕完成。例如，您可以使用的一些內建欄位包括定價、描述、計劃標題和圖示框。一些自定義按鈕允許連結到Stripe和PayPal等地方，而自定義CSS類肯定會幫助高階開發人員。

外掛提供免費計劃。

您可以在一個站點上以19美元的價格獲得高階外掛，在無限站點上以49美元的價格獲得。

Darko Developers出售其他外掛，因此您可以以79美元的價格獲得所有這些外掛。這可能對某些公司有用。

Responsive Pricing Table功能特徵

• 免費計劃為各種小型企業提供了必要的工具，因為您會收到無限的表格和計劃。
• 溢價定價也相當低。
• 面板看起來很現代，開箱即用，高度可定製，有很多按鈕和字型可以調整。
• 可以訪問圖示和其他視覺效果。
• 您可以在定價計劃中包含任意數量的功能。
• 號召性用語按鈕可以連結到第三方支付系統，如PayPal。
• 廣泛的貨幣符號可用於接觸不同的國家。
• 您可以顯示推薦計劃的徽章。
• 可以使用特殊設定顯示重複計劃（每月或每年）。

2. Go Pricing

Go Pricing應用程式沒有免費版本，但它在CodeCanyon市場上擁有數以千計的銷量和一些好評。更不用說，只需27美元即可獲得市場上最好的定價表外掛之一。

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

高階版本的其他一些整合包括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

我們也喜歡高階版本外掛的外觀，一個站點的起價為 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定價表

此列表中的大多數定價表都是響應式的，但在我的手機和平板電腦上測試後，這個價格表看起來特別好。開發人員似乎也反應靈敏並願意建立新功能並將它們作為更新發布。例如，在撰寫本文時，我目前看到了三個主要功能版本——滑動欄、響應模式和資料匯入和匯出。

所有功能20美元。

您可以支付5.63美元將您的客戶支援延長至一年。不提供免費外掛。

CSS3 Responsive pricing table外掛功能特點

• 對於您在定價外掛中獲得的功能，定價是我們所見過的一些最好的。
• 大量定製工具允許使用數千個獨特的定價表。這包括20個顏色版本、60個色帶、42個十字圖示和兩種表格樣式。
• 建立無限數量的行和列。
• 利用CSS和HTML模組進行額外的自定義。
• 您可以獲得調整所有列和行的寬度和高度的選項。
• 多站點相容性。
• 可幫助您在網站上的任何位置實施定價表的簡碼。
• 資料匯入和匯出工具，以便您可以將資料移動到另一個表或從電子表格匯入。
• 圖示支援包括複選標記和X等視覺效果。
• 動畫和媒體支援新增更多視覺效果並使您的計劃脫穎而出。

6. ARprice – 響應式WordPress定價表外掛

ARPrice外掛也在CodeCanyon網站上出售，但價格為23美元。我們開始注意到，與使用缺少某些功能的免費外掛相比，許多公司和個人最好支付這些超低價格來獲得他們需要的所有功能。無論如何，此定價表外掛具有此列表中的一些最佳視覺效果，因為它支援多種型別的媒體專案，例如背景影象和圖示。

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 – 價目表、價格表、簡易定價表

此外掛的高階版為您提供所有相同的功能，以及額外的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外掛的一件事是，您可以使用顏色選擇器，它實質上會獲取您的顏色併為您生成隨機表格設計。

免費。10美元升級至Premium。

WRC Pricing Tables外掛功能特點

• WRC Pricing Tables外掛在免費版本中具有出色的功能，只需10美元（一次性費用）即可獲得完整的高階解決方案。
• 當您需要將定價表放在WordPress網站的任何位置時，該外掛提供了簡碼。例如，從技術上講，簡碼可以出現在任何頁面、帖子甚至可能是小部件上。
• Font Awesome圖示為您的設計新增了一些視覺效果。
• 該外掛還支援谷歌字型。
• PayPal按鈕整合確保您可以從客戶那裡收款。
• 外掛附帶了相當多的模板。
• 您可以新增無限數量的行和列，同時還可以複製定價表並將它們儲存以備後用。
• 高階開發人員有機會使用c0ustom CSS改進他們的表格。

哪個是最適合您的WordPress定價表外掛？

上面列出的外掛都已準備好供您測試。但是，我還可以通過一些額外的建議讓您更輕鬆一些。

• 如果您想要一個包含您需要的大多數功能的免費計劃– 使用Responsive Pricing Table by WP Darko或Pricing Table by Supsystic。
• 如果您想要大量漂亮的表格模板– 考慮Go Pricing外掛或ARPrice外掛。
• 對於一個沒有花裡胡哨的簡單、乾淨的表格——考慮Pricing Tables WordPress Plugin – Easy Pricing Tables。
• 為了獲得來自高階外掛的最多功能的最佳價值– 考慮CSS3 Responsive WordPress Compare Pricing Tables。

此列表中的所有其他定價表外掛也有其優勢。然而，這些是我最喜歡的。

但是，如果您對使用外掛不感興趣並想編寫自己的定價表怎麼辦？

這是怎麼做的！

如何從零開始在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片段後，繼續並單擊更新檔案。現在看看你的頁面，確保一切都按照你想要的方式顯示。