Adding an online calculator to an Elementor website can improve the user experience, especially when users need to calculate something, like an EMI calculation, discount calculation, etc. Normally to add such calculators in Elementor you have to use third-party services or custom code.
However, with the WDesignKit Calculator widgets, you can easily create different types of calculators without any coding. WDesignKit offers a group of calculator widgets that you can use in different combinations to create complex calculators.
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have the WDesignKit plugin installed and activated.
- Make sure you’ve created an account and logged into it.
- These are pro widgets, so make sure you have either WDesignKit pro license or have activated The Plus Addons for Elementor pro key in your WDesignKit account.
- Make sure you’ve downloaded the Formula – Calculator, Slider – Calculator, Dropdown – Calculator, Radio – Calculator, and Number – Calculator widgets to create different types of calculators.
How to Activate the Calculator Widgets?
Go to
- WDesignKit → Widget Browse.
- Search the widget name and select Elementor as the Page Builder.
- Download all the widgets.
Key Features
- Create custom calculators – You can write custom formulas to create a custom calculator.
How to Use the Calculator Widgets in Elementor?
You have to use the Formula – Calculator widget with any one or combination of Slider – Calculator, Dropdown – Calculator, Radio – Calculator, and Number – Calculator widgets.
Slider – Calculator
With this widget, you can add a range slider.
Content
In the Field Name field, you have to add a unique name that will be used to create the connection Formula – Calculator widget.
Then in the Title Text field, you can add a label.
You can set a default value for the range slider in the Default Value field.
Then you have to set a maximum, minimum and steps for the range slider from the Max Value, Min Value and Step fields respectively.
You can individually hide the minimum value and maximum value labels by enabling the Hide Min Value and Hide Max Value toggles respectively.
Current Value
You can add a text before the current value in the Prefix Text field.
Similarly, you can add a text after the current value from the Postfix Text field.
Min/Max Label
You can add a label to the minimum and maximum value from the Min Label Text and Max Label Text fields respectively.
From the Position dropdown, you can place the label before or after the minimum and maximum values.
Extra Option
By enabling the Thumb Glow Effect toggle, you can add a growing circle effect on the range slider thumb.
Connection
In the Formula ID field, you have to add the Formula – Calculator widget ID on which you want to show the output. You can add multiple IDs using space.
From the Style tab, you can style all the options.
Dropdown – Calculator
With this widget, you can add an option dropdown.
Content
In the Field Name field, you have to add a unique name that will be used to create the connection Formula – Calculator widget.
Then in the Title Text field, you can add a label.
Options
In the Add Option section, you have to add options for the dropdown. You’ll find an item, open the item.
In the Name field, you have to add the option name.
Then in the Value field, you have to add the value of the option that will be used for calculation.
You can click on the +Add Item button to add more options.
Connection
In the Formula ID field, you have to add the Formula – Calculator widget ID on which you want to show the output. You can add multiple IDs using space.
From the Style tab, you can style all the options.
Radio – Calculator
With this widget, you can add a radio button option.
Content
In the Field Name field, you have to add a unique name that will be used to create the connection Formula – Calculator widget.
From the Layout dropdown, you can change the radio button layout to horizontal or vertical.
Then from the Select Type dropdown, you can change the radio button type. Here you’ll find four options –
- Simple – To use default radio buttons.
- Button – To use buttons as radio buttons.
- Icon – To use icons as radio buttons.
- Image – To use images as radio buttons.
Then in the Title Text field, you can add a label.
Items
In the Add Items section, you have to add the radio button options. You’ll find an item, open the item.
In the Name field, you have to add the option name.
Then in the Value field, you have to add the value of the option that will be used for calculation.
You can add an icon in the Select Icon section if you are using the Icon option as the radio button type.
Similarly, you can add an image in the Select Image section if you are using the Image option as the radio button type.
You can click on the +Add Item button to add more options.
Columns
From the Columns tab, you can manage the radio button columns for desktop, tablet, and mobile separately.
Connection
In the Formula ID field, you have to add the Formula – Calculator widget ID on which you want to show the output. You can add multiple IDs using space.
From the Style tab, you can style all the options.
Number – Calculator
With this widget, you can add a number field.
Content
In the Field Name field, you have to add a unique name that will be used to create the connection Formula – Calculator widget.
Then in the Title Text field, you can add a label.
You can set a default value for the range slider in the Default Value field.
Then you can set a maximum and minimum range from the Max Value and Min Value fields respectively.
You can also add an increment step value in the Step field.
You can individually hide the minimum value and maximum value labels by enabling the Hide Min Value and Hide Max Value toggles respectively.
In the Prefix Text field, you can add a text before the number value
Similarly, you can add a text after the number value from the Postfix Text field.
By enabling the Show Buttons toggle, you can add increase and decrease buttons in the number field.
Connection
In the Formula ID field, you have to add the Formula – Calculator widget ID on which you want to show the output. You can add multiple IDs using space.
From the Style tab, you can style all the options.
Formula – Calculator
With this widget, you can add a result field where the calculation result will show.
Connection
In the ID field, you have to add a unique name that will be used to create the connection with the other Calculator widgets.
Then in the Title Text field, you can add a label for the result.
By enabling the Inline Layout toggle, you can show the label and result in the same line.
In the Result section, you can add text before and after the result from the Prefix Text and Postfix Text fields respectively.
Formula
In the Math Formula field, you have to write the calculation formula. You have to add the Field Name ID of the calculator widget you want to use, inside a [] like [range].
You can use multiple Field Name IDs with standard mathematical operators like +, -, *, /, (), etc. to create a formula like this – ([percentage_value]/100)*[number_value].
From the Style tab, you can style all the options.
How to Create a Calculator in Elementor?
With the Calculator widgets, you can create different types of calculators of different complexity levels.
For example, we’ll create a simple Discount Calculator, where we’ll show the discount amount and the discounted amount i.e. amount after the discount.
To calculate the discounted amount we’ll use this formula – Amount – (Amount * Discount/100)
Then to calculate the discount amount we’ll use this formula – Amount * (Discount/100)
For this, we’ll use the combination of the Formula-Calculator, Slider-Calculator, and Number-Calculator widgets.
1. Add the Number – Calculator widget, and in the Field Name add the id as amount.
Then adjust the Title Text, Default Value, Max Value, Min Value, and Step fields as per your requirements.
2. Add the Slider – Calculator widget, and in the Field Name add the id as discount_per.
Then adjust the Title Text, Default Value, Max Value, Min Value, and Step fields as per your requirements.
3. Then add the Formula – Calculator widget, and in the ID add the id as discounted_amount.
Adjust the Title Text as per your requirements.
4. Add another Formula – Calculator widget, and in the ID add the id as discount_amount.
5. Then in the Number – Calculator widget, go to the Connection tab and add discounted_amount discount_amount in the Formula ID field to create the connection with the two formula widgets.
6. Similarly select the Slider – Calculator widget, go to the Connection tab and add discounted_amount discount_amount in the Formula ID field.
7. Now select the first Formula – Calculator widget, and go to the Formula tab.
Here we’ll add the formula to calculate the discounted amount for this we’ll add the following formula in the Math Formula field.
[amount]-([amount]*[discount_per]/100)
8. Then select the second Formula – Calculator widget, and go to the Formula tab.
Here we’ll add the formula to calculate the discount amount for this we’ll add the following formula in the Math Formula field.
[amount]*([discount_per]/100)
You can adjust the style of each widget as per your requirements.
Now you should have a working discount calculator where you can add an amount, and set a discount percentage then it will auto calculate the discounted amount and discount amount.
This is how you can create more complex calculators using custom formulas.