4. Cost Calculator Items

ReadFAQ VisitSUPPORT CheckPLUGIN DETAILS

Cost Calculator Items can be configured by entering the name in Name field and defining the required settings and the Value.

Backend:

Label – Enter Item title (e.g. Facade square feet ($2))
Description – Enter description of the item / product
Unit value – Value that is multiplied with the number users enter in input field. If client enters, for example 10 in Number Input element, the total will be 20 (2 * 10).
Example Value – From the plugin version 1.2.1, initial value can be set in Cost Calculator Item Settings. In order to set initial value for Number Input item, you need to add the starting value you want, to ‘Initial value’ field.

Example: If you have Number Input item with unit 2 and you want the initial value to be 4 items, the initial Total will be 8 (2*4).

Change Event Condition – From the plugin version 1.2.3, condition events can be set in Cost Calculator Item Settings. You can learn more on conditions on the following link.

In Design tab enter Id attributte, extra class name(s) and required CSS statements for inline style in Custom ID Attribute, Extra Class Name(s) and Inline style field.

Can I use text as an input?

Can I use text as an input?

Currently, that is not possible. Cost Calculator does not support textual inputs for text box meaning that everything that is entered is evaluated as a number.

Backend:

- Label – Enter Item title (e.g. Square Feet ($50))
- Description – Enter description of the item / product
- Min Value – minimum Slider value (e.g. 0)
- Max Value – maximum Slider value (e.g. 200)
- Slider Handle Moves By – Defines how much the quantity will increase each time slider is toggled (e.g. if step is 10, then slider will increase by 10, and values will be: 0,10,20,30…200)
- Unit value – Value multiplied with each step. For example, if user toggles slider to 30 and unit value is 50, the total will be 150 (30 * 50).
- Offset – The Slider control has price offset property which allows you to introduce fixed cost regardless of the volume.

*Note that offset value is ignored if PayPal is used (active), as well as when the slider is added to the Cost Calculator group.

Example Value – From the plugin version 1.2.1, initial value can be set in Cost Calculator Item Settings. In order to set initial value for Slider item, you need to add the starting value you want, to ‘Initial value’ field.

Example: If you have Slider Item with unit 50 and you want the initial value to be 10 items, the initial Total will be 500 (50*10).

Change Event Condition – From the plugin version 1.2.3, condition events can be set in Cost Calculator Item Settings. You can learn more on conditions on the following link.

In Design tab enter Id attributte, extra class name(s) and required CSS statements for inline style in Custom ID Attribute, Extra Class Name(s) and Inline style field.

Add % in slider

Add % in slider

Adding the following custom CSS to the page, percent sign should be added to the sliders:

span.btQuoteSliderValue:after {
    content: '%';
}

Backend:

Label – Enter Item title (e.g. Bathroom type)
Description – Enter description of the item / product
List Of Dropdown Options – For example: Low end;400.23;Ut iaculis mollis nulla in etc. Numbers 400, 600 and 800 are values for each selected Item from the list. For example, if user select Mid range (second option from the list), 600 will be added to the Total.
Example Value – From the plugin version 1.2.1, initial value can be set in Cost Calculator Item Settings. In order to set initial value for Select item, you need to add the starting select item you want, to ‘Initial value’ field.

Example: If you want to have first Select Item (value 400) listed as initial, than enter 1 in ‘Initial value’ field and Total will be 400.

Images For Dropdown Options and Images Height in px – You can optionally select images and enter images height in px. Number of images and select options should be the same.
Change Event Condition – From the plugin version 1.2.3, condition events can be set in Cost Calculator Item Settings. You can learn more on conditions on the following link.

In Design tab enter Id attributte, extra class name(s) and required CSS statements for inline style in Custom ID Attribute, Extra Class Name(s) and Inline style field.

Common Issue: Missing Item

Common Issue: Missing Item

If there is missing Select Item on the frontend, please make sure to check if ; is missing in Value box.

Backend:

Label – Enter Item title (e.g. Facade Works ($1))
Description – Enter description of the item / product
Value Off – For example: 0, initial value when Switch Item is “off”
Value On – For example: 1, once switch is selected, 1 will be added to the Total value.
Suggested Option – From the plugin version 1.2.1, initial value can be set in Cost Calculator Item Settings. In order to set initial value for Switch item, you need to add the switch value you want, to ‘Initial value’ field.

Example: If you want to have Switch Item on, than enter 1 in ‘Initial value’ field and Total will be 1.

Change Event Condition – From the plugin version 1.2.3, condition events can be set in Cost Calculator Item Settings. You can learn more on conditions on the following link.

In Design tab enter Id attributte, extra class name(s) and required CSS statements for inline style in Custom ID Attribute, Extra Class Name(s) and Inline style field.

Please note that not all combinations of options will give good results, so it is best to start with included demo content and modify demo according to your needs.