如何为您的网站创建价格计算器

已发表: 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 教程和指南。