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
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.
Create a Price Calculator Now!
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.
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.
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! 😃 + 💨 = 💰
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'!
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. 🧁
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.
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.
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!
ℹ️ 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.
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.
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! 🥧
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:
- Install Formidable Forms on your WordPress site
- Create a form from a template or scratch
- Add eCommerce fields: Product or Service, Quantity, Total, and Payment
- Adjust form settings to Collect a Payment
- 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!
WordPress Calculators: The Ultimate Guide
8 Best Request a Quote WordPress Plugins
7 Best Tax Calculator Plugins for WordPress
5 Best WordPress Shipping Calculator Plugins
How To Make a Fitness Calculator in WordPress [2 Easy Steps]
How To Create a Number Range Slider in WordPress
The Ultimate WordPress Calorie Calculator Plugin
How To Create a Mortgage Calculator in WordPress [No Code!]
The Best Time Addition Calculator for WordPress
How To Calculate the Day From a Date [Past & Future Dates]
Create an Online Date Calculator [No Code!]
7 Best WordPress BMI Calculator Plugins for Fitness Experts!
8 Best Investment Calculator Plugins for WordPress
8 Best Mortgage Calculator WordPress Plugins for Real Estate
7 Best Cost Calculator WordPress Plugins
Is there a way to make this work with repeater section? Seams as soon as I choose to have multiple products from a repeater section the calculation is wrong.
Separate values work great but need to have a quantity associated with the selection. As Marc says, repeater fields automatically add values to a total field and a field is added.
Please I run a courier company and need a price calculator. I am base in Lagos and need to calculate the price such that delivery within Lagos but different weight will attract different price. Example: 1kg package delivery within Lagos will cost 6500naira, while 2kg package delivery within Lagos will cost 800naira, etc
Delivery to other state but different weight will attract different price. Example delivering a package from Lagos to another state other than Lagos e.g Port harcourt while weight is 2kg cost 2500naira, delivering a package from Lagos to another state other than Lagos Port harcourt while weight is 5kg cost 4900naira etc
Delivery from other states to Lagos with different weight will also attract different price.
good explanation for how to setup calculate price
Hi, does the calculator offer an option to calculate in different currencies? and does it allow to manipulate variables, ie: a product costs X (with a minimum of 20 attendees) for every extra person added at a fixed value it will add Y, and should allow adding of optional extras the user can select which will add Z and gives us the total of A with the option to download the quote as a PDF