4. Cost Calculator Items

INTRODUCTION

Define CC Items

Cost Calculator Items (Text, Select, Slider and Switch) can be added by selecting ‘+’ sign.

http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2018/05/cc-add-elements.jpg

http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2018/05/cc-items.jpg

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


ITEM 01

Text

Example from “Renovation Cost Calculator“ Demo page:

http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2016/11/text_element.jpg

Backend:


http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2018/05/cc-text-item.jpg

General


  • Name – Enter Item title (e.g. Facade square feet ($2))
  • Description – Enter description of the item / product
  • Unit – If client enters, for example 10 in Text element, the total will be 20 (2 * 10).
  • Initial 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 Text item, you need to add the starting value you want, to ‘Initial value’ field.

Example: If you have Text 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.

Design


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


FAQ

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


ITEM 02

Slider

Example from “Renovation Cost Calculator“ Demo page:

http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2016/11/slider_example_demo.jpg

Backend:


http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2018/05/cc-slider-item.jpg

General


    • Name – 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)
    • Step – step in Slider (e.g. if step is 10, than slider values will be: 0,10,20,30…200)
    • Unit – If client drag 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.

  • Initial 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.

Design


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


FAQ

  • 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: '%';
}

ITEM 03

Select

Example from “Renovation Cost Calculator“ Demo page:

http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2016/11/select_demo_example.jpg

Backend:


http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2018/05/cc-select-item.jpg

General


  • Name – Enter Item title (e.g. Bathroom type)
  • Description – Enter description of the item / product
  • Value – 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.
  • Initial 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 Select list 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.

Design


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


FAQ

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


ITEM 04

Switch

Example from “Renovation Cost Calculator“ Demo page:

http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2016/11/switch_demo_example.jpg

Backend:


http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2018/05/cc-switch-item.jpg

General


  • Name – 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.
  • Initial 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 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.

Design


In Design tab enter Id attributte, extra class name(s) and required CSS statements for inline style in Custom ID AttributeExtra 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.


ITEM 05

Multiply

Example from “Renovation Cost Calculator“ Demo page:

http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2016/11/multiply_frontend.jpg

Backend – Choose Multiply from the element list:


http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2018/05/cc-multiply.jpg

Once the Multiply is added to the Cost Calculator select + sign in order to add CC Items which will be multiplied:


http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2018/05/cc-multiply-2.jpg

If the selected item has value 300 (first option – “Window Air Conditioner”)  and slider is 5, total will be: 300 * 5 = 1500