# 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.

{% tabs %}
{% tab title="Empty Calculators Tab" %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fd9vnrf89gWDACdNxEK4w%2Fimage.png?alt=media&#x26;token=0dfbc93b-709f-40df-b9c7-77c74e09b4c3" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Non-empty Calculators Tab" %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FKDrIZGfsY7PiwgrRtDpJ%2Fimage.png?alt=media&#x26;token=a2f62854-87dc-4e11-b3de-5bede1570b25" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

2. The "Create" button opens the Templates library and you can select one of them or create a blank calculator to start from scratch:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FDt9yUNNqV32IMJLOYRDt%2Fimage.png?alt=media&#x26;token=4a149514-e795-4a17-aa6a-46affb35d635" 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="../getting-started/importing-demos" %}
[importing-demos](https://docs.stylemixthemes.com/cost-calculator-builder/getting-started/importing-demos)
{% endcontent-ref %}

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

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FTtHrCGZfrbReyG4ydlUD%2Fimage.png?alt=media&#x26;token=3ed86e43-3e34-4ce3-8427-c5c0dd795722" alt=""><figcaption></figcaption></figure>

4. You can rename the calculator by clicking the Pencil icon:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FYyXHpowycXkHym9vnXzO%2Fimage.png?alt=media&#x26;token=b691ae6c-e658-4b71-9fc8-0194ab2bb5e6" alt=""><figcaption></figcaption></figure>

## How to Add Elements?

1. There are two ways to add elements to the calculator - [**clicking**](#click) on the elements and [**drag and drop**](#drag-and-drop)**:**

{% tabs %}
{% tab title="Click" %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FSiRs6fTsC5VZ8wPjFNZw%2Fimage.png?alt=media&#x26;token=cf3ff823-3315-4cf2-8390-15ba5f718d0c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Drag & Drop" %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FNqd2o2beLZp8Ow2xhcfN%2Fimage.png?alt=media&#x26;token=ce053f7c-eeef-45a6-9940-ae04e7f8c0f7" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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 and save your work.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FCe2ZlNIKuOcqwsFTmjVR%2Fimage.png?alt=media&#x26;token=cef6973e-c952-43d4-b2dc-b00ea5c2ff42" alt=""><figcaption></figcaption></figure>

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

{% content-ref url="../calculator-elements" %}
[calculator-elements](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements)
{% 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: **Checkbox** and **Basic Slider Button**

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FUnnuY8wOljsagpqduBQ2%2Fimage.png?alt=media&#x26;token=6f3fec6d-0bac-4061-9b9f-9e735aafca20" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FK2yd1u9rwsOCn2mJ6YqY%2Fimage.png?alt=media&#x26;token=d13a6812-f3f7-4054-a12b-bdfeaeea951f" alt=""><figcaption><p>Formula that multiplies B (<a href="../calculator-elements/checkbox">Checkbox</a>) and C (<a href="../calculator-elements/range-button">Slider</a>) elemens' values and adds the result to the value of A (<a href="../calculator-elements/quantity">Quantity</a>)</p></figcaption></figure>

{% hint style="warning" %}
Do not forget to add **at least** one [formula](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/total) 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="../calculator-elements/total" %}
[total](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/total)
{% 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="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FqPpVS36FcJzWKyb368je%2Fimage.png?alt=media&#x26;token=e5dd2c79-2e13-46f2-b2e1-28f4908a22fa" alt=""><figcaption></figcaption></figure>

2. On the right sidebar, there will be the element's available settings. Set them according to your needs, and click on the Save button:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FMyi1LgVmgUDRuSpGbauu%2Fimage.png?alt=media&#x26;token=c30cf8ed-0775-4a74-8d65-6a84e1f82850" alt=""><figcaption></figcaption></figure>

### Duplicate an Element

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

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F7VL41m0N8s2L5R4rTkYl%2Fimage.png?alt=media&#x26;token=325a07b2-a9ab-4131-a7c1-2c8557d3d3af" 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="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FeexyP2hspP62pOwaqcQh%2Fimage.png?alt=media&#x26;token=8761f2d0-594d-4559-a476-ee6de957c817" alt=""><figcaption></figcaption></figure>

### Reorder Elements

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

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FlnmTuQukInMQFfEtoxFE%2FRecording%202025-01-07%20121024%20(1).gif?alt=media&#x26;token=1c40412b-6f92-414a-a7a1-669fa6201b67" alt=""><figcaption></figcaption></figure>

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

{% tabs %}
{% tab title="Formula Elements in the Calculator" %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Ftd3J7MllL5n3EmdVgp7F%2Fimage.png?alt=media&#x26;token=87a4f3c6-fd5c-4369-b3f4-f6ed09ae3d6c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Preview" %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FgmLcqTWZa4mBWadnNFsD%2Fimage.png?alt=media&#x26;token=938755f4-e804-4ebf-9268-610caa6f601b" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Delete an Element

1. To delete an element, just click on the **trash icon** in the element field:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FKHJ1nou4yuGdzSCGeyej%2Fimage.png?alt=media&#x26;token=c881697f-50ef-4225-a467-b8d196effadc" alt=""><figcaption></figcaption></figure>

2. You will get a warning notification and after your approval, the element will be deleted:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FxZVcwZpAY7SFGG5pVtYH%2Fimage.png?alt=media&#x26;token=b7e3ab5d-f6c8-424a-b99e-ed31c4a60b7a" 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, all of the associated connections **will also be lost.**&#x20;
{% endhint %}

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

{% content-ref url="../cost-calculator-settings/global-settings/automatic-backup" %}
[automatic-backup](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/global-settings/automatic-backup)
{% endcontent-ref %}

## Preview Calculator

The Preview feature allows you to see your changes or additions before saving the form. It is useful when you doubt adding your calculator form to the page directly so that you can check it before publishing.&#x20;

You can see how your Calculator looks anytime using the **Preview** button.&#x20;

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FAL31Ssm023NDfavP9DQ5%2Fimage.png?alt=media&#x26;token=23d22cf4-1206-4d54-98ba-0cc56f54c6b5" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
It is recommended to refresh the page when you cannot see preview results at once.
{% endhint %}

After clicking the preview button, you will see the popup board. The Preview of the calculator will be available for both desktop and mobile views.

{% tabs %}
{% tab title="Desktop Preview" %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F8DhPmlLn72KTNEgJPgGh%2Fimage.png?alt=media&#x26;token=b23240d2-4387-4002-81af-07e82ff61ba4" alt=""><figcaption></figcaption></figure>

On the left side of Desktop Preview, there will be elements you added to the calculator. On the right side of Preview, you will see the values of each element relatively and the total description. The Total description will show the value due to your created formula.
{% endtab %}

{% tab title="Mobile Preview" %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FUCSuHKGAAQZpDNWb8njY%2Fimage.png?alt=media&#x26;token=09ba35a5-6647-4242-bf6d-29fa22d92f63" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**NOTE**

You can preview the changes anytime. But **do not leave** the calculator without **Saving the changes**. In most cases, users believe the preview and close the calculator without saving it.  However, the changes you make **will not affect** the calculator you pasted on your website **unless** you click on the **Save button.** &#x20;
{% endhint %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fuis8y9PnjK6WEu2wAtEG%2Fimage.png?alt=media&#x26;token=18968fda-03d5-416b-b2d0-75b6a256527a" alt=""><figcaption></figcaption></figure>

Created calculators can be inserted into the pages. You can learn how to do it by following this manual:

{% content-ref url="insert-calculators-into-the-page" %}
[insert-calculators-into-the-page](https://docs.stylemixthemes.com/cost-calculator-builder/plugin-features/insert-calculators-into-the-page)
{% 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.