Last updated on November 1, 2023 by Formidable Team

How To Create a WordPress Price Calculator for a Website

Want to create a WordPress price calculator for a website? This step-by-step guide will show how to create an amazing price calculator in a few simple steps

How to Create a WordPress Price Calculator for a Website

Approximate read time: 6 minutes

Online shopping has become part of our daily lives and is here to stay. In 2023, an astounding 2.64 billion people made a purchase online, according to Insider Intelligence.

That's a big pool of potential customers — and a big goldmine to tap, too!

But while it's easier than ever to get your online store up and running, eCommerce has become increasingly competitive.

And do you know one of the easiest and most effective ways to increase your chances of success? 🤔 Adding price calculations to your website.

We promise it's easier than you might think! You only need a good calculator WordPress plugin, and your site will be quickly crunching numbers.

So, let's show you how to use Formidable Forms to create a price calculator for your website.

Upgrade your WordPress site with powerful, flexible forms.

Get Formidable Forms Pro

Why create a price calculator for your site?

Cost calculators are the unsung heroes of eCommerce.

For online stores, these handy tools allow customers to choose product options like quantity, color, and size and see the final price in real time.

Example of a product price calculator on a website

Instead of using them as product price calculators, service businesses can create product cost estimates by factoring in hourly rates, labor costs, material costs, profit margins, and more.

Plus, instant online quotes mean no more manual math for you and no more waiting around for customers.

All that adds up to happy site visitors, time saved, and increased sales! 😃 + 💨 = 💰

From Idea to Reality in Minutes. Build Powerful Forms, Dashboards, Apps and More.

Formidable Forms makes advanced site building simple. Launch forms, directories, dashboards, and custom WordPress apps faster than ever before.

Get Formidable Forms

How do you create a price calculator in WordPress?

To make a price calculator form for your website, you must install and activate Formidable Forms on WordPress. If you don't already have Formidable, pick up this powerful form maker below.

Alright, ready to do some calculating? Let's get cookin'!

  1. Create your online order form / product price calculator
  2. Set up pricing based on product and product options
  3. Add the final form fields
    1. Accept payments
    2. Publish the price calculator on your website

      Step 1: Create your online order form/product price calculator

      From the WordPress dashboard, head to Formidable → Forms and click Add New.

      Next, select from the 225+ pre-built form templates or Create a Blank Form.

      To save some time (and satisfy our sweet tooth!), let's use the bakery order form template today. 🧁

      Bakery order form price calculator template

      Name your order form, and let's get baking building!

      Step 2: Set up pricing based on product and product options

      When the drag and drop form builder opens, you'll see the available form fields on the left. Scroll down to the Pricing Fields to find all the ingredients you need to calculate prices.

      Pricing fields to add to a calculator form

      Add a Product field to your form and specify item prices in the calculator.

      In the field options, you can choose whether to display the product options as a Dropdown, Radio Buttons, or Checkboxes.

      How to set different item pricing options when doing cost calculations

      Now, fill in the names of your products (or descriptions of each product variation) and the prices.

      Step 3: Add the final form fields

      Once you've entered your items and options, drop a Quantity field into your form.

      Then, it's time to add a Total. Don't worry. You won't have to fight with formulas — this field automatically does the math for you!

      And finally, let's insert a 💳 Payment field at the bottom so customers can buy our baked goods!

      Plus, it may not be a bad idea to gather some contact details, right? You can add an Email Address and Name field to gather those.

      When you're happy with your form, click Update in the top right to save!

      Example of an online order form with a built-in cost calculator

      ℹ️ The total won't update inside the form builder. To test your custom calculator widget, all you have to do is click the Preview button!

      Wondering how to add tax to your price calculator?

      You can easily add sales tax to the total in your price calculator. Add a #Number field to your form and enter your tax calculation in the advanced field options.

      Insert a second Total field, and now you'll have the total cost, including tax!

      Find more detailed steps in this Knowledge Base article.

      Step 4: Accept payments

      Here's where you start rollin' in the dough — see what we did there? 🤭

      Before starting this step, you'll need a payment gateway on your site. We use Stripe in our example since it supports 15+ payment methods, including debit/credit cards, bank transfers, and digital wallets.

      Okay, back to the form builder! Click the Settings tab at the top of the screen. Under Actions & Notifications, choose Collect a Payment.

      How to collect a payment on a WordPress form

      Next, you can adjust the payment description, amount, currency, and frequency. Then, hit Update to save your sweet new WordPress price calculator!

      All that's left is to give our users a taste! 🧁

      Step 5: Publish the price calculator on your website

      The final step is to share your creation with the world! You could publish it on:

      • Individual product pages to encourage users to add it to their cart,
      • In users' shopping carts to show delivery fees with a shipping calculator,
      • Your home page to offer instant quotes and act as a lead magnet,

      or anywhere else you please. Embed your form on a page or post by clicking the Add Block icon in the top left of the WordPress editor.

      How to add a calculator to a WordPress page

      Then select the Formidable Forms block. Finally, choose your form from the dropdown list to add it to the page.

      Publish your page, and your interactive calculator is now online. Easy as pie! 🥧

      Bakery website online order form with price calculator

      Ready to make your custom price calculator?

      It's a piece of cake, right? Now that you know our secret ingredient, you're all set to start calculating costs on your site!

      Before we grab some sweets, let's sum up how to make a calculator for your website:

      1. Install Formidable Forms on your WordPress site
      2. Create a form from a template or scratch
      3. Add eCommerce fields: Product or Service, Quantity, Total, and Payment
      4. Adjust form settings to Collect a Payment
      5. Save and publish it on your website

      We hope this guide helped you create an incredible tool to fuel sales and lead generation.

      And if you're ready to learn more about calculators, check out our complete guide to WordPress calculators for more info!

      Learn more about making calculators

      This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

      Complete your purchase
      Special offer unlocked.
      Get 55% OFF!
      Complete Purchase
      Join 400,000+ using Formidable Forms to create form-focused solutions fast. Get Formidable Forms