How to Add a Cost Calculator to Your WordPress Website

If you've ever used a loan calculator or price estimator, you may have wondered if there's a way to add a cost calculator to your WordPress site. There is, and it's super easy.
Table of Contents

If you’ve ever used a loan calculator or price estimator, you may have wondered if there’s a way to add a cost calculator to your WordPress site. There is, and it’s super easy.

Sure, you can learn some JavaScript and knock out a decent calculator in a few months — or you can save a ton of time and headaches by using a plugin. That’s why we love WordPress, right?

Stick around, and I’ll show you how it’s done.

A Versatile Cost Calculator For WordPress

When you use a loan calculator on a mortgage site, it can seem like there’s some complex code behind it. And you may have imagined that it’s out of reach for your site. Hiring a developer to implement a form like that may be out of your budget.

Then, what if you need to change something in the calculator? You’ll need to bring back the dev to fix it for you. That would be a pain and possibly out of your financial reach.

Thankfully, a WordPress plugin will allow you to handle all of this yourself — no code required.

Boost conversion rate with Cost Calculator!

Cost Calculator lets you create any kind of calculator form you need, and it will look great to boot.

Getting Started with Cost Calculator

While the Cost Calculator plugin is easy to use, I’ll walk you through the features and show you an example that may inspire your own forms. First, let’s get the plugin.

Install Cost Calculator

You can find Cost Calculator by searching in your WordPress dashboard under Plugins>Add New or download it on WordPress.org. Additionally, you can purchase the Pro version, which features options like Image Drop-down, File Upload, and more.

screenshot of WordPress add new plugin menu

Creating Calculators

Once the plugin is activated, you’ll see the Cost Calculator icon appear in your WordPress dashboard menu. Click that to access the Cost Calculator menu.

Initially, there are no forms on the list. To get started, just click Create new at the top right. However, since you’re new to using the plugin, I recommend trying the Import calculators option. In the menu that opens up, choose to Run Default Demo Import. That will populate your list with some sample calculators provided by the plugin authors.

screenshot of Cost Calculator menu

Before creating your first calculator, it’s helpful to dig into the provided demo examples. This will give you a feel for the menus and how a calculator is structured. Choose a calculator, and under the Action tab, click the pencil icon to go into edit mode.

Editing Calculators

For this example, let’s use the Photography calculator. Go into edit mode, scroll to the bottom and click Preview. This shows you what you can expect when the calculator is displayed. This one helps potential photography clients calculate the cost when choosing between different packages.

screenshot of Cost Calculator preview

Let’s go back to the edit menu and go over the Calculator tab.

screenshot of Cost Calculator edit menu

On the right are all the elements available to use in our calculator. In this example, on the left, we can see that they’ve used the Drop Down, Quantity, and Total elements. We can edit any of these by hovering over them, where an edit button will appear.

The first element is a Drop Down named Services. Inside, we can see the Name and Description fields at the top. If we scroll down further, we can specify more options for the Drop Down.

screenshot of editing an element in Cost Calculator

This calculator totals the cost of photography services. We can set all of that up in this drop-down, including pricing.

The next element, Hours, is a Quantity element. For this, we only need to define the Quantity Unit to make the calculation work. Since we’re calculating time, we don’t need to toggle any currency settings. While default value isn’t required, it can help steer visitors toward a choice you might prefer.

The Total element is where the calculation will be made. In the Calculator Formula field, we can see what looks like complicated code. It’s really not. If you delete everything in that field, you can recreate it easily. Under Available Fields, you’ll see that we only have two fields we can use in the formula. Click the first, and it appears in the Formula field. Then we need an Operator, so click on the asterisk below to signify that we want to multiply the two field values. Click the other Available Field option, and your formula is complete.

screenshot of editing an element in Cost Calculator

Now that we see how the calculator is set up, let’s look at conditions, settings, and customization.

Conditions

You may not need the Conditions feature for every form, but when you do, it’s a fantastic feature to have. The Conditional system lets you link different fields and add conditions to them. You can show, hide, or disable specific fields based on whether or not a condition is met. For example, if you have a loan calculator, you can set the interest rate to appear only when the user enters a specific loan amount.

Settings

The Cost Calculator settings menu is where you’ll adjust your currency settings or set up any payment gateway integrations.

screenshot of Cost Calculator Settings menu

Most settings are intuitive here, but I’ll cover a few significant ones.

If you have a WooCommerce store, the Cost Calculator integrates with it. This is a handy feature that can increase your conversion rate when implemented. For example, you can set up a rate form so that when users click the Submit button, they’re taken directly to your Woo checkout page. You can also add an Add to Cart button to your form.

Send Form allows you to add a send form by integrating with the Contact 7 plugin. Once a user clicks Submit on the calculator form, they’ll have the option to send the form’s results via email.

If you don’t want to get a legion of spam robots sending you junk forms, you can include a ReCaptcha button. You’ll need to set that up through Google first, but you’ll be ready to go once you have your site key and secret key.

Customize

The Customize menu is literally the icing on the calculator cake. You can change just about any design aspect in your forms using simple sliders and color pickers.

screenshot of Cost Calculator Customize menu

Add borders to the boxes, change font color and sizes, or even create your own gradient background color. The customize menu makes it easy to style your forms to fit your site’s branding.

Feature A Great-looking Cost Calculator on Your Website

If you need a way to add a calculator form to your site, the Cost Calculator plugin is not just painless, it’s fun to use. Without hiring a developer or writing any code, you can create great-looking forms for your WordPress site in just a few minutes.

Pricing

Cost Calculator is free to install and use. The Pro version contains features like Payment Gateway, WooCommerce checkout, Conditions, File Uploads, and a Date Picker. Pricing starts at $29.99 for a single annual license.

DJ Billings
DJ Billings
D.J. Billings is a WordPress designer, developer and consultant. They also love all things open source, creating illustrations and running long distances.

Consider sharing this post so others can find it:

Stay in the know on the latest and greatest products and services in WordPress [+ Exclusive deals & offers]

Leave a Reply

Your email address will not be published.

Everything you need to create a website for less than $100. From your domain and hosting to picking a design, we cover it all.

Join the mayor’s club

Stay in the know on the latest and greatest products and services in WordPress