Cost Calculator Builder
Item PageVideo TutorialsChangelogResources Get Started
  • Cost Calculator Builder Documentation
  • Getting Started
    • Free Version and Pro Version
    • System Requirements
    • Plugin Installation
    • License Activation
      • Upgrading the License
    • Update Billing Details and Access Invoices
    • License Utilization
    • Update The Plugin
    • Templates
    • Feature Request
  • Plugin Features
    • How to Create a Calculator
    • How to Manage Calculators
    • How to Add a Calculator to the Page
    • Calculator Appearance
    • Additional Classes
  • Cost Calculator Settings
    • Calculator Settings
      • Summary Block
      • Currency
      • Warning Texts
      • Confirmation Page
      • Order Form
      • Form Manager
      • Sticky Calculator
      • Woo Products
      • Woo Checkout
      • Payments
      • Webhooks
    • Global Settings
      • Currency (Global)
      • PDF Entries
      • Share Quote Form
      • Order Form (Global)
      • Email Template
      • Backup Settings
      • AI Formula
      • Captcha
      • Payments (Global)
      • Geolocation
  • Calculator Elements
    • General Overview
    • Text
    • Quantity
    • Validated form
    • Dropdown list
    • Image Dropdown (Pro feature)
    • Radio Select
    • Image Radio (Pro feature)
    • Switch Toggle
    • Checkbox
    • Image Checkbox (Pro feature)
    • Date Picker (Pro feature)
    • Time Picker (Pro feature)
    • Basic Slider
    • Multi Range (Pro feature)
    • File Upload (Pro feature)
      • How to Allow Additional File Types in WordPress
      • How to Increase Maximum File Upload Size in WordPress
    • HTML
    • Geolocation (Pro feature)
    • Line
    • Formula
      • AI Assistant (Pro feature)
    • Repeater (Pro feature)
    • Group Field (Pro feature)
    • Page Breaker (Pro feature)
  • Conditional System
    • Introduction
    • How to Create a Condition
    • Condition Options
    • Condition Actions
    • AND/OR Conditions
    • Condition Creating Example
  • Special Plugin Features
    • Orders
    • Discounts
    • Required Fields
    • Contact Form 7 Plugin
  • Payments
    • Settings
    • PayPal
    • Stripe
    • Razorpay
    • Cash Payment
  • Translating Cost Calculator Into a Different Language
    • Translation Basics
    • Translating Static Strings
    • Translating Calculator with WPML
    • FAQ
  • Develeoper's guide
    • Cost Calculator Hooks
      • Order Management
      • Contact Form
      • Confirmation Page
      • Email
  • Troubleshooting
    • Introduction
    • Plugin Conflicts
    • Theme Compatibility
    • Calculator is not loading
    • Cache Settings
    • Email not sending
    • Debug Logs
    • Submit a Support Ticket
  • Changelog
    • Release Notes
    • Changelog (Free Version)
    • Changelog (Pro Version)
  • Pre-built Calculators & Cases
    • Service Booking
    • Graphic Design
    • Loan Interest
    • Delivery Service
    • Renovation Company
    • Dental Services
    • Car Wash Company
    • Medical Services
    • Tuition Fees
    • Printing Services
    • Car Rental
    • Venue Rental Service
  • Advanced Topics
    • License Management
  • Stylemixthemes
    • Cost Calculator Builder WordPress Plugin
    • Themes
    • Plugins
Powered by GitBook
On this page
  • How to Create a Calculator?
  • How to Add Elements?
  • How to Edit, Duplicate, Reorder and Delete Elements?
  • Edit an Element
  • Duplicate an Element
  • Reorder Elements
  • Delete an Element
  • Preview Calculator

Was this helpful?

  1. Plugin Features

How to Create a Calculator

Step-by-Step Guide

PreviousFeature RequestNextHow to Manage Calculators

Last updated 4 months ago

Was this helpful?

In this manual, we will review the following:

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.

If you do not have any saved calculators, in the Calculators tab there will be only Create and Import options.

  1. The "Create" 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:

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

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

How to Add Elements?

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

All elements have unique settings. To learn about the settings and functionalities of the elements' refer to this section:

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

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

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:

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

Duplicate an Element

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

Reorder Elements

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

Delete an Element

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

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

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.

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

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.

You can see how your Calculator looks anytime using the Preview button.

It is recommended to refresh the page when you cannot see preview results at once.

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.

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.

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.

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

There are two ways to add elements to the calculator - on the elements and :

Add the 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 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.

The element will be duplicated with an additional (copy X) name saving all the settings of the duplicated element. You can rename and its settings:

The order of the 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.

Templates
Calculator Elements
Formula field
formula
Formula
Formula element
Backup Settings
How to Add a Calculator to the Page
clicking
drag and drop
re-adjust
How to Create a Calculator?
How to Add Elements to the Calculator?
How to Edit, Duplicate, Reorder and Delete Elements from the Calculator?
How to Preview the Changes in the Calculator?
Formula that multiplies B () and C () elemens' values and adds the result to the value of A ()
Checkbox
Slider
Quantity