How to Create a Calculator
Step-by-Step Guide
In this manual, we will review the following:
How to Create a Calculator?
To create a new calculator, follow WP Dashboard > Cost Calculator and click the Create button to create a new calculator.
If you do not have any saved calculators, in the Calculators tab, you will only see the Create and Import options.
There are two options:
Create a new calculator - creates a blank calculator. We will see this case as an example.
Use Template - button opens the Templates library, and you can select one of them or create a blank calculator to start from scratch:
You can also use one of the prebuilt, ready-to-use calculators using the templates. Refer to this manual for more information:
TemplatesThe calculator elements will appear on the left. Begin adding desired elements to your new form.
You can rename the calculator by clicking the Title of the calculator:
How to Add Elements?
There are two ways to add elements to the calculator - dragging and drop:
After adding a new element to your calculator, this element's settings will be provided to fill. Add all necessary data to the dragged element:
No need to save the element's settings, but if you want, the changes will be permanently saved; you have to click on the Save button in the top right corner.
All elements have unique settings. To learn about the settings and functionalities of the CCB elements, refer to this section:
Calculator ElementsAdd other elements to your calculator due to wish. As an example, you can check the built calculator below, with two extra elements added: a checkbox and a basic slider button:
Add the Formula field and write down your formula to calculate the total cost. You can have more than one formula field as well:
Do not forget to add at least one formula element to your calculator at the end to make your calculator work properly. If you do not add a formula element to your calculator, the sum of all fields will be shown as the total cost.
To learn more about how to design your formulas correctly, refer to this manual:
FormulaHow to Edit, Duplicate, Reorder and Delete Elements?
Edit an Element
To change element settings, in the Calculator editor, click on the necessary element field:
On the right sidebar, there will be the element's available settings. Set them according to your needs.
No need to save the element's settings, but if you want, the changes will be saved permanently; click the Save button in the top-right corner. If the calculator is already placed on your website, the changes that you made to the calculator will not take effect until you click this button.
Duplicate an Element
To duplicate an element, hover on the item and click the duplicate icon:
The element will be duplicated with an additional (copy X) name, saving all the settings of the duplicated element. You can rename and re-adjust its settings:
Reorder Elements
You can easily change the order of the elements in the calculator using the drag & drop function:
The order of the Formula element among other elements means nothing; you can put it in any place. Anyway, it will be displayed in the Calculation Summary section. However, the order of the Formula element within other Formula elements (if you have more than one formula element in the calculator) is important. It defines in which order these elements will be shown on the Calculation Summary.
Delete an Element
To delete an element, just click on the trash icon in the element field.:
Before deleting an element, first make sure you have not used this element in your Formula. If you delete an element that has been used in your formula, its value will be changed to 0 automatically.
Moreover, if this element is used in Conditions, all of the associated connections will also be lost.
Accidentally deleted elements can be recovered via the Undo button:
Note that there is an automatic backup function in the Cost Calculator:
Backup SettingsLast updated
Was this helpful?