3. Using Cost Calculator

INTRODUCTION

Cost Calculator options

After Cost Calculator is installed and activated, you should see Cost Calculator custom post type on your dashboard.
http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2018/05/Screenshot_1.jpg

From the latest plugin update, Cost Calculator can be edited as a custom post type.

In order to create new calculator, click on Add New option. Should you want to edit one of the existing calculators, you need to import demo content. Instructions on how to install demo content can be found in Installing Demo section.



SECTION 01

Cost Calculator Settings

If you edit Cost Calculator element (pencil icon), you will see dialog with several options.

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

General Settings


Accent Color – Select accent color with color option.

[accent_color="#1e73be"]

Total Title – Enter optional title for total.

[total_text="total"]

Currency  Enter currency symbol or code.

[currency="$"];

Currency After Total – Shows currency after result of calculation.

[currency_after="yes"]

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

Contact-Form


Display Next Button and Contact Form – once the field is checked, ‘Next’ button and contact form will be visible. If you only want Total bar to be displayed, deselect this field.

[show_next="yes"]

Contact Form 7 Id – Enter Contact Form 7 Id which will be used instead of default Contact Form. Make sure to include [hidden bt-cc-data] shortcode in your Form. Form more info, go to: Contact Form 7

[cf7_id="503"]

Admin Email – Field where you can enter email to which calculator data will be submitted.

[admin_email="info@email.com"]

Email Subject – Present subject of the email.

[subject="This is email subject"]

Send Email to Client – Once it is checked copy of quote will be sent to client email (if client has entered email in contact form).

[email_client="yes"]

Email confirmation – Checkbox for sending email to client to show client email confirmation checkbox at the bottom of the contact form.

[email_confirmation="yes"]

Optional URL for confirmation – If URL is added to the field, users will be redirected to that page, once they submit the form.

[url_confirmation="https://www.google.com"]

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

Mandatory data (Name, Email, Phone, Address, Message, Preferred Date and Time) – Can be selected by Mandatory checkboxes.

[m_name="Mandatory"]
[m_email="Mandatory"]
[m_phone="Mandatory"]
[m_address="Mandatory"]
[m_message="Mandatory"]
[m_date="Mandatory"]
[m_time="Mandatory"]

Time Input Start and Time Input End – Define interval for Preferred Service Time select box.

[time_start="09:00"]
[time_end="18:00"]

Time Input Title and Date Input Title – Enter optional title for Preferred Service Time and Date.

[time_text="Preferred Service Time B"]
[date_text="Preferred Service Date B"]

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

reCAPTCHA


reCAPTCHA Site – If you want to use get reCAPTCHA Site key and reCAPTCHA Secret key.

[rec_site_key="xxx"]

reCAPTCHA Secret key

[rec_secret_key="xxx"]

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

PayPal


PayPal – If you want to use PayPal you must fill in Your PayPal account email address, Shopping cart name and Currency code. If PayPal email is entered you will see PayPal button used to forward data to PayPal and make a payment. If you use multiply container with PayPal, value of first item is used as unit price and name of first item is used as item name, other values are multiplied and the product is used as quantity. Slider offset is ignored if PayPal is active.

[paypal_email="info@email.com"]
[paypal_currency="USD"]
[paypal_cart_name="Cart"]

If you have Cost Calculator group element included in your calculator make sure to enter PayPal Label in Cost Calculator Group edit panel. If you don’t add label, the group will not be included in PayPal payment.


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

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

Design


Enter class name(s) in Extra Class Name(s).

[el_class="this_is_extra_class"]

Inline style – Add required CSS statements for inline style.

[el_style="color: #fff;"]

When you are finished with editing your Cost Calculator, copy its shortcode (e.g. [bt_cc id=”116″]) and paste it in Text element on desired page.


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

SECTION 02

Using Contact Form 7

From the plugin version 1.2.3, instead of default Cost Calculator Contact Form can be used Contact Form 7. In order to use your form, make sure to include [hidden bt-cc-data] shortcode in Form section. Please have a look at the following screenshot:


http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2017/11/cc-contact-form-7.jpg

Also, make sure to add [bt-cc-data] shortcode to Mail section in Contact Form 7 editor.


http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2017/11/new-contact-form-7-mail.jpg

When you are finished with editing your Contact Form 7, copy its id (e.g. 503) and paste it in Cost Calculator Contact Form 7 Id field.



SECTION 04

Translate Plugin

The procedure is standard – you can find the .pot file in the plugin’s languages folder.

Please use PoEdit to translate the .pot file and create respective .po and .mo fies.

You should upload .po and .mo files created using PoEdit back to plugin’s languages folder.

Please name .po and .mo files for example: bt_plugin-nl_NL.po and bt_plugin-nl_NL.mo (nl_NL is the language code for dutch) and place them in /wp-content/plugins/bt_cost_calculator/languages/. 

For other languages code, please refer to the following link: Internationalization.

You can set the site language of your WordPress installation on Settings > General. WordPress will automatically use the right language files if they exist.


How to translate Datepicker?


First of all, edit bt_cost_calculator/bt_cost_calculator.php file in Plugins folder and locate the following line:

c.find( '.btContactDate' ).datepicker({

Then add the next codes above that line:

$.datepicker.regional['tr'] = {closeText: "kapat",
            prevText: "<geri",
            nextText: "ileri>",
            currentText: "bugün",
            monthNames: [ "Ocak","Şubat","Mart","Nisan","Mayıs","Haziran", "Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık" ],
            monthNamesShort: [ "Oca","Şub","Mar","Nis","May","Haz", "Tem","Ağu","Eyl","Eki","Kas","Ara" ],
            dayNames: [ "Pazar","Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi" ],
            dayNamesShort: [ "Pz","Pt","Sa","Ça","Pe","Cu","Ct" ],
            dayNamesMin: [ "Pz","Pt","Sa","Ça","Pe","Cu","Ct" ],
            weekHeader: "Hf",
            dateFormat: "dd.mm.yy",
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: "" };
        $.datepicker.setDefaults( $.datepicker.regional['tr'] );

Edit required Labels according to your needs.


SECTION 05

FAQ

  • How to use custom CSS statements to style calculator?
  • How to change the e-mail address from WordPress?
  • How to edit clients email?
  • How to update a plugin?
  • Will I loose content with updating the plugin?
  • Remove “Next“ button
  • Contact Form visible by default
  • How do I remove the bar with Total and leave contact form?
  • Adding additional fields to contact form
  • How can I round up the total value and remove .00?
  • How to redirect users to another page after submiting message?
  • How to redirect users to another page after the “Next“ button?
How to use custom CSS statements to style calculator?

Custom CSS should be added to your theme’s Custom / Additional CSS field.


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

Alternatively, you can use third party plugin such as Simple Custom CSS.

How to change the e-mail address from WordPress?

In order to change the sender name, if the visitor and admin are receiving an e-mail from “WordPress”, we suggest you to avoid code customization and to install a third party plugin which will allow this. For example this one: WP Simple Mail Sender.

How to edit clients email?

In order to change the clients email than you should locate the bt_cost_calculator.php file and find function bt_cc_callback() in the code. The email formatting starts from the line:

$message_to_admin = ...
How to update a plugin?

If you have not customized the calculator, please download the latest version and rewrite the old files on the server with the new ones. The calculator files should be in /wp-content/plugins/bt_cost_calculator/ of your WordPress installation.

If you have customized the code, you will need to reapply the changes prior to upload of new version.

Will I loose content with updating the plugin?

With new plugin update you will not loose any content, but it will affect and overwrite any changes in the bt_cost_calculator.php code that you’ve made. The best way is to manually repeat modifications with new update.

Remove “Next“ button

In order to hide ‘Next’ button, deselect the ‘Display Next Button and Contact Form’ field in Cost Calculator Settings.


http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2018/05/cc-next-button.jpg
Contact Form visible by default

If you want the form to be open by default, please add the following css statements to the page:

.btQuoteBooking .btTotalQuoteContactGroup {
    opacity: 1;
    filter: alpha(opacity=100);
    max-height: 1000px;
}
.btQuoteBooking .btQuoteBookingForm.btActive .btContactNext {
    display: none;
}
.btQuoteBooking .btQuoteBookingForm.btActive .btTotalNextWrapper {
    padding-right: 0px;
}
How do I remove the bar with Total and leave contact form?

In order to remove Total bar and leave Next button please add the following css statements to the page:

.btQuoteTotal {
    display: none !important;
}
.btQuoteBooking .btQuoteBookingForm.btActive .btTotalNextWrapper {
    padding-right: 0px;
}
.btQuoteBooking .btContactNext {
    margin: auto;
}
.btQuoteBooking .btQuoteBookingForm .boldBtn {
    float: none;
    margin: auto !important;
}
Adding additional fields to contact form

If you like to add additional fields to contact form part of Cost Calculator, please do the following:

1. Open bt_cost_calculator.php file in the code editor.

2. Locate the following piece of code:

$output .= '<div class="btQuoteItem' . $m_message . ' btQuoteItemFullWidth"><textarea class="btContactMessage btContactField" placeholder="' . __( 'Message', 'bt_plugin' ) . '"></textarea></div>';

and add above it the following:

$output .= '<div class="btQuoteItem' . $m_phone . '"><input type="text" class="myText btContactField" placeholder="' . __( 'myText', 'bt_plugin' ) . '"></div>';

This will create the new field in the form with the placeholder text myText. Change it according to your needs (edit placeholder=”‘ . __( ‘myText’, ‘bt_plugin’ ) statement)

3. Locate the following piece of code in cc.main.js file:

'message' : c.find( '.btContactMessage' ).val()

and add above it the following:

'mytext' : c.find( '.myText' ).val(),

it will ensure that the value of the newly created field gets propagated to backend upon form submission

4. Locate the following piece of code in bt_cost_calculator.php file:

$message = $_POST['message'];

and add above it the following:

$mytext = $_POST['mytext'];

5. Locate the following piece of code in bt_cost_calculator.php file:

if ( $message != '' ) $message_to_admin .= '<div style="padding:.5em;"><b>' . __( 'Message', 'bt_plugin' ) . '</b>: ' . stripslashes( $message ) . '</div>' . "\r\n";

and add above it the following:

if ( $mytext != '' ) $message_to_admin .= '<div style="padding:.5em;"><b>' . __( 'MyText', 'bt_plugin' ) . '</b>: ' . $mytext . '</div>' . "\r\n";

It will include the value of your field into the email body.

How can I round up the total value and remove .00?

The best way to change the total value from e.g. 2500.00 to 2500 is to modify plugin’s code.

Please locate line 448 in cc.main.js in plugin’s folder. It should have the following code:

total = total.toFixed( 2 ).replace( /(\d)(?=(\d{3})+\.)/g, '$1,' );

Replace the noted line with the following statement:

total = Math.round(total);

It should round up your result to an integer without decimal points.

How to redirect users to another page after submiting message?

In order to redirect users to another page after submitting the form, add the URL to ‘Optional URL for confirmation’ field.


http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2018/05/cc-optional-redirect.jpg
How to redirect users to another page after the “Next“ button?

Please find the following lines in cc.main.js file:

c.find( '.btContactNext' ).click(function() {
                    $( 'html, body' ).delay( 1000 ).animate({
                        scrollTop: ( $( this ).closest( '.btQuoteBooking' ).find( '.btTotalQuoteContactGroup' ).offset().top - 30 )
                    }, 400 );
                    
                    var contact_group = $( this ).closest( '.btQuoteBooking' ).find( '.btTotalQuoteContactGroup' );
                    
                    $( this ).closest( '.btQuoteBooking' ).find( '.btTotalQuoteContactGroup' ).addClass( 'btActive' );
                    $( this ).closest( '.btQuoteBooking' ).find( '.btQuoteBookingForm' ).removeClass( 'btActive' );
                });

and change them with:

c.find( '.btContactNext' ).click(function() {
                    window.location = 'http://www.google.com';
                });

Please edit the url according to your needs.