How to Add a Cost Calculator for WordPress Website

Cost Calculator for WordPress

A cost calculator could be an important feature on your WordPress website if you need to understand your customers better. Cost calculators will help you engage customers early on in the sales funnel, and help to set realistic pricing expectations regarding your products and services. There are different options available in the WordPress ecosystem to add a cost calculator to your WordPress website. In this article, we are reviewing the Cost Calculator Plugin for WordPress from Stylemix themes, and understand how it will help.

What are the advantages of having a Cost Calculator on your website?

Cost calculators are a great option to engage customers more effectively and also to capture qualified leads. Let’s take a look at some of the obvious advantages of having a cost calculator on your website.

Give customers a better idea on your pricing structure

There will be diverse aspects that contribute to the pricing of a product or service. If you are featuring a product or service in your store that has varied components that contribute to its pricing, it will be better for customers to have clarity on the pricing structure. Moreover, this will even help customers choose certain components and avoid certain others. By featuring cost calculators on the site, you can easily let customers choose a product variation, or service packages suited to their requirements.

Increases customer engagement

Having a cost calculator on your site naturally means customers will spend more time on your store. Sometimes, they will visit your site to just check the pricing even when there is no intent to purchase immediately. All this will lead to potential customers being more familiar with your site, which can enhance possibilities for future purchase. Moreover, there are chances that customers will be more aware of all kinds of products that you sell.

Helps with website traffic and bounce rate

The traffic to your website will naturally increase when customers have an option to use cost calculators on your website. Another advantage is that customers will be spending more time on your store, and the bounce rate of your site will reduce as a result.

How to add a cost calculator for WordPress website?

We will demonstrate how you can add a cost calculator for WordPress site using the Cost Calculator for WordPress plugin. This plugin helps you create and customize professional-looking cost estimation forms on your WordPress site. Different types of websites and business models can use this plugin to offer price estimation on their sites. These include professional services, rental websites, booking sites and any other business that has a pricing structure. You can easily build a cost calculator form for your website using this plugin thanks to flexible drag and drop builder and customization options.

This is one of the preferred plugins to create a cost calculator for WordPress websites.

Now, let’s see how to get started with the plugin. You can download the free version of the plugin from the WordPress repository. Once you have installed the plugin, you can access the plugin settings by going to WordPress dashboard > Cost Calculator.

When you first go to the settings, it will look like the below screenshot:

On the plugin settings page, you can create new calculators.

Now on this page, you can:

  1. Create new calculator
  2. Import calculators

Creating a new calculator

Let’s see how to create a new calculator first:

To demonstrate how to create a new calculator, we will create an EMI calculator for a site similar to what you see in bank websites for car loans.

First, click the Create new button, and add a name for your calculator, and then click the ‘+‘ button next to the name.

You need to first name your cost calculator.

Now, different available field elements will be visible on the right side, which you can drag and drop to the left side.

When you drag a field to the form builder, the settings for that field element will open up. For our example, we will drag a ‘Quantity’ element first.

In the field settings, we will give the field a name, a default value, and toggle currency symbol on, as it is the estimated cost of the car.

You can set up each field based on your specific requirements.

Similarly, we also added a quantity field for estimated down payment and loan period as well.

Then we chose a Range Slider to let customers choose the interest rate. Here, minimum and maximum range value is specified, along with the Range Step and Range Default value.

Cost Calculator for WordPress
In the range field, you can set minimum and maximum values.

Finally, added a ‘Total’ field, where you can specify how the other field values should be taken into consideration for the final output.

For our example, the Total field calculations can be seen in the below screenshot.

You can manage different calculations of available fields easily.

From the available fields and operators in the Total field, you can set the calculations required for the form. Once the formula is correctly added, you can save the Total field.

So the form builder will look like the below screenshot, where you can use the Preview button to test the output before saving the formula.

Once you are satisfied with the form you created, click the Save button.

Cost Calculator for WordPress
The Preview button lets you test the calculations before saving them.

Adding the Cost Calculator to a page

Now, finally you can place it on a page on your site. For this, the plugin provides shortcodes at the bottom right corner of the form page.

You can copy this shortcode and place it on a page.

Cost Calculator for WordPress
The shortcode lets you add this cost calculator on any preferred page.

When customers click the page, the Cost Calculator you have created will be visible. Customers will be able to add their custom value and get the output.

Customizing the appearance of the Calculator

Now, the above example is just a basic calculator that we created to demonstrate. The plugin has a great range of customization options, which you can use to get the right appearance for your calculator. You will be able to customize different visual aspects of the calculator such as color, borders, margins, shadow, etc.

Cost Calculator for WordPress
The plugin offers abundant customization options.

Import Calculators

If creating a new calculator on your own is too much hassle for you, the plugin helps you with templates for different use cases. Let’s see how you can manage this.

On the plugin dashboard, click the Import Calculators button.

The plugin helps you import demo calculators.

Now you have two options. If you have a Calculator saved on your computer, you can import that. Or, you can click the Run Default Demo Import button to use the calculators provided by the plugin.

This will start the Import process, and you will have a range of Calculators useful for different business models added to your website.

You can edit these to suit your specific business requirement, or can directly use them on a page by copying the shortcode.

Cost Calculator for WordPress
Demo calculators make your job easier.

How to integrate Cost Calculator with WooCommerce?

The premium version of this plugin integrates with WooCommerce, and offers scope to use cost calculators on product pages and the checkout page.

Please note, the plugin works only with simple products but you can use it to let customers order different variations of the same product.

We will demonstrate this with a demo calculator template – Photography. This template offers three different photography services – Studio photography, Nature photography and Wedding photography. Customers can choose their service, and specify the required hours, and the calculator will show the cost.

Now let’s see how customers will be able to use WooCommerce checkout to select the service and pay for it.

First we have to create a WooCommerce product called Photography service.

Create a simple WooCommerce product, add a price and assign a category.

Now go to Cost Calculator and click the Edit icon for the Photography calculator.

Then go to Woo Checkout and enable WooCommerce Checkout, and choose the product name from the dropdown.

Cost Calculator for WordPress
Choose the product you want to offer the cost calculator.

After this, go to Woo Products and enable the Calculator for WooCommerce Products. Here you need to select the category, and also specify the calculator position.

You also need to link WooCommerce meta to the calculator field. In a general scenario, the WooCommerce meta will be ‘Price’ and the field will be the ‘Total’ field.

The plugin gives you an option to hide the Add to Cart form.

Save the settings, and your product will have the Calculator, and customers will be able to choose their required service and checkout.

Cost Calculator for WordPress

Features comparison

Now that we have covered how you can add a cost calculator on WordPress website and a WooCommerce store using this plugin, let’s understand some other features of the plugin.

Free version

The free version of the Cost Calculator Builder is a simple tool to create cost calculators and cost estimation forms. It has a handy drag and drop builder and can be used to create unlimited calculators. Moreover, you can easily add them to WordPress pages using shortcodes. There are10 different calculator elements available with the free version.

Pro version

With the Cost Calculator Builder Pro, you will get access to a range of additional features. These are:

  • Support for WooCommerce Products and Checkout.
  • PayPal and Stripe integration.
  • An order dashboard, where you can view orders received through calculators.
  • Helps to integrate with Contact Form 7.
  • Can add reCAPTCHA to the forms.
  • Access to additional calculator elements – Date picker, multi-range slider, file upload and image dropdown.

For a single site, you can get this plugin for $29.99. The cost for 5 sites is $79.99 and for 25 sites, it is $199.99. Check out Cost Calculator Builder Pro today!

We hope this article has helped you add a cost calculator to your WordPress website. Do leave us a comment if you have a query regarding this feature.

Further reading