Comment on page
Formula
Using the Formula (formerly Total) element, you can build any formula for your Calculator. For that, you should add available Fields and Operators by clicking on them. Watch this in-depth video on how to use the Formula element.
The Formula element contains the following attributes in the Element section:
- Title - Give the description of the total calculation
- Calculator Formula area - Create your own formula for the calculator
- Available Operators - This field contains mathematical operators and functions that can be used in the formula
- Available Fields - This field contains all elements as colored letters of the created calculator form with their ordered IDs.
And it has the following attributes in the Settings section:
- Show Alternative Symbol - Enables field to enter an alternative symbol
- Hidden by Default - The element will be hidden until a corresponding condition is met
- Additional Classes - Add extra classes to the HTML elements to further style changes
Fields in Formula are shown as green letters. They are shown in alphabetical order based on their ID.
If you delete any field, the letters will stay the same:
You can see these available operators in the Formula element.
Basic Arithmetic Operators:
- Addition (+): Combines two numbers to produce their sum. For example, 5 + 3 equals 8.
- Subtraction (-): Subtracts one number from another to yield the difference. If you subtract 3 from 8, you get 5.
- Division (/): Divides one number by another, resulting in the quotient. When you divide 10 by 2, the result is 5.
- Multiplication (*): Multiplies two numbers, giving the product. 4 multiplied by 6 equals 24.
- Modulo(%): It finds the remainder when one number is divided by another. 25%6=1 (1 - modulo).
Mathematical Methods:
- round(x): This method returns the value of x rounded to the nearest integer. For instance, round(4.7) is equal to 5.
- ^pow(x, y): Calculates x raised to the power of y. If you evaluate pow(8, 2), you'll get 64.
- √ sqrt(x): Computes the square root of x. The square root of 25 is sqrt(25) = 5.
- abs(x): Yields the absolute (positive) value of x. For example, abs(-3.7) equals 3.7.
- ceil(x): Rounds up x to the nearest integer. If you apply ceil(4.4), the result is 5.
- floor(x): Rounds down x to the nearest integer. When you use floor(8.7), the outcome is 8.
Conditional Operators
Conditional operators are vital tools for making decisions based on conditions. They allow you to control the flow of your calculations.
- IF: This is a fundamental conditional keyword. It enables you to execute a block of code if a specified condition is true. For example: if (x > 10) { }
- IF ELSE: Extending the 'if' statement, 'if else' lets you define an alternative block of code to execute if the initial condition is false. It provides a way to branch your calculations based on different scenarios. For example: if (x > 10) { } else { }
Logical Operators
Logical operators are used to combine and manipulate conditions.
- AND: Combines two conditions and evaluates to true only if both conditions are true.
- OR: Combines two conditions and evaluates to true if at least one condition is true.
- Less than (<) and Greater than (>): These operators compare two values and return true if the specified condition holds.
- Not equal to (!=) and Equal to (==): These operators are used to test the equality or inequality of two values.
You can review the mathematical methods here to get more information. Note: All these methods are written with a Math prefix since they are objects inherited from the Math library.
Showing Formula Element
Let's see the example of the Formula element:
You can see numbers at the beginning of each line. This is to make creating long formulas much easier.
You can undo the last changes in the formula editor using the Ctrl/CMD+Z keys on their keyboard. It is also possible to select and copy a part of the formula with the cursor/mouse and select the whole via Ctrl/CMD+A or Ctrl/CMD+C keys on the keyboard.
Creating formulas in the total element using available operators and fields is not the only thing you can do with it. Below we will discuss this formula element’s condition features in more in-depth.
You can use conditions using the IF and IF ELSE statements. These tools help you handle various situations and set specific rules for your calculations.
The IF statement lets you tell the calculator what to do if a particular condition is met. For instance, you can use it to calculate discounts only if the total amount is greater than a certain value.
Example: IF(total > 100, *0.9, *1)
In this case, if the total is more than 100, a 10% discount will be applied; otherwise, it will display the value with no discount.
The IF ELSE statement adds another layer of logic. It allows you to set an alternative course of action if the initial condition isn't met.
Example: IF(total > 500, *0.1, *0.125)
Here, if the total is over 500, the calculator will multiply the value by 0.1; otherwise, it will multiply by 0.125.
Now, let's see the Loan Calculator which is built with a quantity, two range buttons, and total elements as a sample example. Here is the standard formula for calculating the loan amount:
And now we will create an if/else statement so that the total sum of a loan calculator should be higher than or equal to 500 like below:
So, according to the formula above, the loan amount will be always higher than or equal to 500. Please check the following pictures:
The result of the if statement:
The result of the else statement:
If you want to apply a separate if/else statement for each field and set a separate Total element for each statement. We recommend you to use the Summary Total formula to get the sum of all Total elements and to avoid a complex calculation process.
In the following example, different if/else statements were used for each Total element. And the Summary Total formula calculates the overall sum of these two Total elements:
The Alternative Symbol option is available in order to display multiple Total fields with different calculations and symbols.
The inserted symbol in the Alternate Symbol field takes precedence over the currency symbol in the Settings menu.
The Alternative Symbol is displayed after pasting the symbol to the appropriate field.
The result:
If you are using the currency symbol in the Alternative Symbol field and want to integrate the Calculator with WooCommerce, then you have to consider whether WooCommerce supports that currency.
Legacy Formula View
The Old Formula looked like this:
There were long words for fields with ID. The element used to have limited mathematical operators. To put conditions if/ if else users needed to use a formula in Javascript style.
New Formula View
Now, the New Formula looks like this:
The view has become more user-friendly. There are green letters instead of long-tail words. There are more available operators, such as !=, = =, < >, etc. Now, users can add conditions with IF/ IF ELSE statements easily. It is possible to add letters and operators from the keyboard. When putting any letters not related to fields, they will be shown grey. There are lines to make creating long formulas much easier. Users can undo the last changes in the formula editor using the Ctrl/CMD+Z keys on their keyboard. It is possible to select and copy a part of the formula with the cursor/mouse and select the whole via Ctrl/CMD+A or Ctrl/CMD+C keys on the keyboard.
Last modified 1mo ago