Element: Variable Math

Created by Mike B, Modified on Fri, 10 Nov 2023 at 02:48 PM by Ana Gabriela Echeverria


The Variable Math element is great for products and services that require you to customize the math of a product or service using variables. For example: $productOne x $productTwo / 30

Benefits, Features & Use Cases

  1. Shipping Rates - Calculate prices based on the length, width, and height of a shipping item

  2. Mortgage Calculator - Calculate a monthly fee

  3. Loan Calculator -  Add an interest (percentage) to the number of days or months the user wants to borrow money

  4. Package DealsGive your customer a discount based on combing items together. Please take a look at the video below.

  5. Square Footer - Please take a look at the video below.

  6. ROI Calculator - video coming soon

How to Activate & Use This Feature

To add Variable Math, first click the "+Add Element" button 

Then click on the "Variable Math" button

Settings & Options

First, you can create a title for the element.

Now, let's dive into the interesting stuff... By default, the Variable Math element creates 2 products that you can change or customize easily. 

You can change the product's name, value in price, max quantity and a type of front-end element to control this product.

You can also click on the "+Add Item" button to add more products

Now, here it comes the real power of the Variable Math element. With the "Total Calculation" field, you can create math operations (+, -, *, /) to operate with all the products/services you created. 

For instance, in the next image we are calculating the shipping cost based on the product dimension (width, height, length)

And we are multiplying each value to get the total calculation:

And this is the end result:

Mind-blowing, huh?

Linking Element Values

In the latest versions of Stylish Cost Calculator, you can link other elements as a variable in Variable Math. The calculated value of the element will be the value returned by the variable. Use the "[+] Link Element" button to add an element as a variable.

You can also add a section's total to the variables list.

Writing Formulas

You can write formulas in a JavaScript like syntax, use * to multiply the variables. Here are some sample formulas. 

Input1 * (1.15)

The above code will add 15% to the value of Input1

Advanced Options of Variable Math

Default 0 Value: Enabling this option will set the value of variables that have not returned any value set to 0 and will let the formula execute. If not enabled, the formula will not execute until all of the variables becomes available. 


We would like to encourage you to try it out. Many users find solutions to complex problems that didn't even occur to us. 

Video Tutorials

Creating Package Deals

Working with Square Footage


Additional Information

Special Notes

You may want to read about our Custom Math element that is used for triggering fees/discounts, charging base fees, adding percentages to the end of your total, converting totals to monthly pricing, and much more.

Related Features

Element: Custom Math https://designful.freshdesk.com/support/solutions/articles/48001142309-element-custom-math


WooCommerce Shipping Functionality - SCC will not pay the fee to a shipping option in WooCommerce. We recommend you use the shipping rate functionality of WooCommerce that is built-in.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article