如何為您的網站建立價格計算器

已發表: 2024-01-18

您是否想知道如何為您的網站創建一個價格計算器,允許用戶選擇產品並立即付款?

您會很高興聽到 WPForms 允許用戶為各種企業和自動計算價格的用例建立訂單表單。

立即建立您的價格計算器

因此,事不宜遲,讓我們深入了解為您的網站建立價格計算器所需採取的步驟!

如何為您的網站建立價格計算器

使用 WPForms 為您的網站建立價格計算器非常簡單。 請依照以下步驟開始!

在本文中

  • 1.安裝並啟用WPForms插件
  • 2. 將 WPForms 與 Stripe 連接
  • 3. 選擇訂單模板
  • 4.使用自訂公式進行進階總計
  • 5. 發布您的帳單/訂單

1.安裝並啟用WPForms插件

WPForms 是一個用於製作聯絡表單和訂單表單等表單的絕佳工具。 它有超過 1,300 個可供您使用的 WordPress 表單範本。

要使用運算插件,您需要取得 WPForms Pro。 這為您提供了更多功能,例如帶有可自訂總計欄位的訂單表單。

the wpforms homepage

首先,請購買專業版許可證。 然後,在您的網站上安裝 WPForms。 如果您需要協助,請按照有關如何在 WordPress 中新增外掛程式的說明進行操作。

2. 將 WPForms 與 Stripe 連接

有了 WPForms 後,您需要新增 Stripe Pro 外掛。

如果需要,您可以安裝其他支付處理器的插件,例如 PayPal 或 Square,但我們建議使用 Stripe 建立價格計算器表單。

也就是說,前往 WordPress 選單中的WPForms並點擊Addons

add new addon wpforms

尋找Stripe Pro Addon並將其安裝在您的網站上。 為此,只需單擊“安裝”按鈕,然後單擊“啟動”按鈕即可。

activate stripe pro addon

接下來,前往WPForms » 設定並點擊付款。 在這裡,您可以選擇要使用的貨幣類型。

wpforms currency settings

然後,點擊藍色按鈕並輸入您的 Stripe 詳細信息,將您的網站連接到 Stripe。 如果您沒有 Stripe 帳戶,您現在可以建立一個。

connect with stripe

連接到 Stripe 後,返回WPForms » 設定 » 付款。 您應該會看到一個綠色的複選標記,表示您已連線。

stripe connection status

現在,您可以使用價格計算器功能製作訂單並立即透過 Stripe 獲得付款!

3. 選擇訂單模板

現在讓我們建立您的訂單。 從 WordPress 儀表板前往WPForms ,然後按一下新增選項

wpforms add new

之後,為您的表單命名並選擇一個範本。 對於本指南,我們將選擇帳單/訂單表單以加快表單建立速度。

select billing form

此範本有一個「多個項目」欄位和一個「總計」欄位。 您可以變更表格以新增不同種類的產品並計算總價。

更改多個項目字段

在本指南中,我們從普通的多個項目欄位開始,並將其變更為包括不同類型的襯衫。

按一下「多個項目」欄位可變更其中的內容。 您可以採取以下措施使表單與您的業務更相關:

  • 標籤:這是選項的名稱。
  • 物品:這些是您可以選擇的不同物品及其成本。
  • 在商品標籤後顯示價格:如果您想顯示每個商品的價格,請勾選此選項。

multiple item field order form

完成後,每當有人選擇產品時,總價格就會立即更改以匹配他們選擇的產品。

wpforms total amount display

選擇不只一種產品

也許您想讓人們選擇不只一種產品。 您可以使用各種欄位和自訂選項輕鬆做到這一點。

例如,如果有人想購買一件 T 恤和一件運動衫,他們可以在同一張表格上選擇兩者。

轉到付款欄位部分並使用複選框項目欄位。 在這裡,您可以列出所有產品。

wpforms choose products

現在,當有人選擇不只一種產品時,總價格將把他們所有的選擇加起來。

total amount multiple products

新增 Stripe 信用卡字段

訂單最重要的部分是讓客戶輕鬆在線付款,以確保您收到付款並可以繼續發貨。

早些時候,我們添加了 Stripe Pro 並將其連接到 WPForms,以便您在網站上接受付款。 現在,是時候將 Stripe 新增至您的表單了。

若要在表單上設定 Stripe 付款,請在付款欄位下方找到Stripe 信用卡欄位並將其新增至您的表單。

add stripe credit card field

接下來,前往“付款”部分並查看“Stripe”設定。 開啟一次性付款選項。

enable one time payments stripe

現在,您的客戶可以選擇不同的產品,查看總價,並以一種形式完成付款!

4.使用自訂公式進行進階總計

如果您想對訂單上向客戶顯示的總價進行更多操作,您可以使用計算插件。

前往WPForms » Addons並尋找Calculations Addon 。 然後,點擊“安裝插件”按鈕。 之後,點擊“激活”按鈕。

activate calculations addon

現在,您可以為總價格製定複雜的公式。 例如,您可以新增數量欄位或插入標準稅務減免。

添加數量字段

想讓人們選擇他們想要的產品數量嗎? 將數量欄位新增至您的表單。 只需將下拉欄位移至右側的表單區域即可。

select dropdown field

接下來,轉到此下拉字段的字段選項。 將其名稱更改為“數量”並輸入人們可以選擇的數字。

wpforms dropdown quantity field

現在,將單一項目欄位新增至您的表單。 您可以透過將其拖放到預覽上或只需單擊它來完成此操作。

single item field

將此單一項目欄位的標籤變更為「總價」之類的內容。 然後,轉到“高級”選項卡並打開“啟用計算”

enable calculation option

公式框中,將多個項目欄位連接到數量下拉欄位。 您可以使用簡單的乘法公式來完成此操作。

$FX_amount * $FX

這裡, $FX是ID為#X的欄位的值, $FX_amount是ID為#X的支付欄位的價格值。

開啟多個項目欄位並記下其欄位 ID。 您可以在“常規”選項卡下的“字段選項”中找到它。

multiple items field id

對名為「Quantity」的下拉欄位執行相同的操作。 這對於下一步很重要,因為這是我們創建公式的地方。

dropdown quantity field id

現在,您所要做的就是將這些 ID 放入(產品價格乘以數量)公式中。 因此, $FX_amount * $FX將變成$F5_amount * $F10

單一項目「總價」欄位的公式方塊中輸入公式 $F5_amount * $F10。 然後,按一下“驗證公式”以確保其正確。

validate formula option

現在,當有人選擇產品及其數量時,由於您添加的自訂公式,將自動計算總價!

插入標準稅收減免

當您想要計算稅金時,通常會將小計(商品價格乘以商品數量)乘以稅率。

正如您在上一步中了解到的,我們的用例總和(商品價格乘以商品數量)的公式為:

$F5_amount * $F10

假設稅額以小計的 10% 計算。 標準稅金計算公式如下:

0.10 * ($F5_amount * $F10)

包含稅費的總計是透過將小計和稅費相加確定的。 下面將表示該方程式:

($F5_amount * $F10) + (0.10 * ($F5_amount * $F10))

可以將其新增至您想要顯示最終金額的任何位置。 我們將使用我們命名為「Total Price + Tax」的單品欄位。

standard tax formula

請記住,在建立公式時,您需要使用正確的欄位 ID,以便數學計算正確。 有關更多資訊和建立公式的協助,請查看此計算備忘單

5. 發布您的帳單/訂單

WPForms 讓您可以輕鬆發佈表單並發佈在您的網站上。 完成表單製作後,按一下「儲存」按鈕

save form

然後,按一下「儲存」按鈕旁的「嵌入」 。 您可以選擇在新頁面或現有頁面上發佈表單。

create new page

WPForms 將帶您進入 WordPress 編輯器,而無需您執行任何操作。 您的表單將已經出現在新頁面上。

要啟動您的訂單表格和帶有 WPForms 計算功能的線上計算器,您只需點擊「發布」按鈕即可。

publish form

發布後,作為預防措施,測試嵌入表單以確保其按預期工作並排除任何問題。

form preview

有關為您的網站建立價格計算器的常見問題解答

計算是我們讀者中的熱門話題。 以下是有關它的幾個常見問題的解答。

如何為我的網站建立自訂計算器?

要為您的網站建立自訂計算器,您可以使用具有計算插件的 WPForms Pro。 首先,在您的 WordPress 網站上安裝 WPForms Pro。

然後,使用拖放建構器新增數量和產品選擇等輸入欄位以完成訂單。

完成後,啟用計算插件以根據使用者輸入執行加法或乘法等運算。

如何為網站新增計算?

要將計算新增至網站,請考慮使用表單產生器,例如 WPForms Pro,它提供了運算外掛程式。

安裝 WPForms 後,建立一個新表單並使用計算功能為您的欄位新增數學運算。

您可以使用基本算術或複雜表達式建立各種公式,以根據使用者輸入動態計算值,這非常適合訂單表單、預訂表單等。

如何建立價格公式?

要在您的網站上建立價格公式,您可以使用 WPForms Pro 和計算外掛程式。

首先設定一個表單,其中包含您所提供的項目或服務的欄位。 為這些項目指定價格。

然後,使用計算插件建立一個公式,將商品價格乘以數量並添加任何額外費用或折扣。

接下來,了解如何建立自訂抵押貸款計算器

想為您的網站建立自訂抵押貸款計算器嗎? 透過使用線上抵押貸款計算器,信貸員可以更快地預先篩選申請人並減少混亂的文書工作。 請參閱本指南,了解如何使用 WordPress 範本製作自訂抵押貸款計算器。

立即建立您的價格計算器

準備好建立您的表單了嗎? 立即開始使用最簡單的 WordPress 表單產生器外掛。 WPForms Pro 包含大量免費模板,並提供 14 天退款保證。

如果本文對您有所幫助,請在 Facebook 和 Twitter 上關注我們,以獲取更多免費的 WordPress 教學和指南。