# How to Create a Calculator

{% embed url="<https://youtu.be/XZKJE1CcYxo>" %}

In this manual, we will review the following:

* [**How to Create a Calculator?**](#how-to-create-a-calculator)
* [**How to Add Elements to the Calculator?**](#how-to-add-elements)
* [**How to Edit, Duplicate, Reorder and Delete Elements from the Calculator?**](#how-to-edit-duplicate-reorder-and-delete-elements)
* [**How to Preview the Changes in the Calculator?**](#preview-calculator)

## How to Create a Calculator?

1. To create a new calculator, follow **WP** **Dashboard > Cost Calculator** and click the **Create** button to create a new calculator.

<figure><img src="/files/RSa2ncO1oVcYIx0LDoFR" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
&#x20;If you do not have any saved calculators, in the Calculators tab, you will only see the **Create** and **Import** options.
{% endhint %}

2. There are two options:&#x20;

* **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:

<figure><img src="/files/HoLcqS5AJyRxOPZPcNHB" alt=""><figcaption></figcaption></figure>

You can also use one of the prebuilt, ready-to-use calculators using the templates. Refer to this manual for more information:

{% content-ref url="/pages/-MHl5D\_zss4wVGye85SB" %}
[Templates](/cost-calculator-builder/getting-started/importing-demos.md)
{% endcontent-ref %}

3. The calculator elements will appear on the left. Begin adding desired elements to your new form.

<figure><img src="/files/eZsK9vJ8k0p3Ufvp7q1S" alt=""><figcaption></figcaption></figure>

4. You can rename the calculator by clicking the Title of the calculator:

<figure><img src="/files/2JuHpw7vTJURejie9P8z" alt=""><figcaption></figcaption></figure>

## How to Add Elements?

1. There are two ways to add elements to the calculator - dragging and drop:

<figure><img src="/files/1f6KiwmhKx79lUkMQ5Yj" alt=""><figcaption></figcaption></figure>

2. 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:

<figure><img src="/files/LPKDRSh5wX5KUO70vmQT" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
No need to save the element's settings, but if you want, the changes will be permanently saved; you have to click on the <kbd>Save</kbd> button in the top right corner.
{% endhint %}

All elements have unique settings. To learn about the settings and functionalities of the CCB[^1] elements, refer to this section:

{% content-ref url="/pages/-MHlE6phAr3Jb-cQgg5W" %}
[Calculator Elements](/cost-calculator-builder/calculator-elements/general-overview.md)
{% endcontent-ref %}

3. Add 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:**

<figure><img src="/files/9HoYFMnKFIzZp6znFkn4" alt=""><figcaption></figcaption></figure>

4. Add the [Formula field](/cost-calculator-builder/calculator-elements/total.md) and write down your formula to calculate the total cost. You can have more than one formula field as well:

<figure><img src="/files/Oa3vBhXkRmiqZReQpcqT" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/XXXqAxfwpsR4Gtv5ct7y" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Do not forget to add **at least** one [formula](/cost-calculator-builder/calculator-elements/total.md) 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.**
{% endhint %}

To learn more about how to design your formulas correctly, refer to this manual:

{% content-ref url="/pages/-MHlO20oldrcLjnAK5bc" %}
[Formula](/cost-calculator-builder/calculator-elements/total.md)
{% endcontent-ref %}

## How to Edit, Duplicate, Reorder and Delete Elements?

### Edit an Element

1. To change element settings, in the Calculator editor, click on the necessary element field:

<figure><img src="/files/vSIsrEGep7A9AO16awjW" alt=""><figcaption></figcaption></figure>

2. On the right sidebar, there will be the element's available settings. Set them according to your needs.&#x20;

<figure><img src="/files/zAJkiE8QFshYHpYDuaMi" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
No need to save the element's settings, but if you want, the changes will be saved permanently; click the <kbd>Save</kbd> 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.
{% endhint %}

<figure><img src="/files/z1z7GEwRtMkQMTvof79X" alt=""><figcaption></figcaption></figure>

### Duplicate an Element

1. To duplicate an element, hover on the item and click the duplicate icon:

<figure><img src="/files/8tp07QQlAUq1943MnysG" alt=""><figcaption></figcaption></figure>

2. 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](#edit-an-element) its settings:

<figure><img src="/files/gQJufhIIyfIxPA33uxGZ" alt=""><figcaption></figcaption></figure>

### Reorder Elements

You can easily change the order of the elements in the calculator using the drag & drop function:

<figure><img src="/files/1H6L7Ie3zt8mK8vhW51S" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The order of the [Formula element](/cost-calculator-builder/calculator-elements/total.md) **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.
{% endhint %}

<figure><img src="/files/XhWfEsOT4P9nmCI8Hs1q" alt=""><figcaption></figcaption></figure>

### Delete an Element

To delete an element, just click on the **trash icon** <i class="fa-trash-can">:trash-can:</i> in the element field.:

<figure><img src="/files/7aDrm9Zb2EnYG1u20wRe" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**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.&#x20;

Moreover, if this element is used in [**Conditions**](/cost-calculator-builder/conditional-system/introduction.md), all of the associated connections **will also be lost.**&#x20;
{% endhint %}

Accidentally deleted elements can be recovered via the **Undo** <i class="fa-trash-undo">:trash-undo:</i> button:

<figure><img src="/files/gNLwQ5Xhan1FXTIR2PaI" alt=""><figcaption></figcaption></figure>

Note that there is an **automatic backup** function in the Cost Calculator:

{% content-ref url="/pages/Wjhb2OeSDl9sbm3KybmS" %}
[Backup Settings](/cost-calculator-builder/cost-calculator-settings/global-settings/automatic-backup.md)
{% endcontent-ref %}

[^1]: Cost Calculator Builder - short form of the plugin name


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.stylemixthemes.com/cost-calculator-builder/plugin-features/creation-of-cost-calculator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.