3. Using Cost Calculator
Cost Calculator options
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.
Cost Calculator has several commands, such as:
- Add – add new element to the Cost Calculator.
- Edit – edit Cost Calculator settings such as accent color, currency, set PayPal, etc.
- Duplicate – duplicate an element or entire calculator.
- Copy – copy an element or entire calculator.
- Copy + – copy several elements one after the other.
- Paste – paste previously copied element / calculator.
- Delete – delete an element or entire calculator.
Cost Calculator Settings
General Settings
Accent Color – Select accent color with color option.
Label for total – Enter optional title for total.
Number Format For Total – Select the format in which your total will display.
Decimal Places For Total – Select the number of decimals total will have.
Currency – Enter currency symbol or code.
Currency Symbol Is Placed After Total – Shows currency after result of calculation.
Space Between Currency and Total – Select if you want to show space between currency and total.
Hide Total – Check this field if you want to hide the bar with total price (price will still be visible in email).
Contact-Form
Enable 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.
Button Label – enter the text that will display on ‘Next’ button.
Contact Form Is Always Visible (Remove Button) – check if you want contact form to be visible below total bar. This will remove ‘Next’ button.
Choose Contact Form – Select from the dropdown list Contact Form 7 which will be used instead of default form. Make sure to include [hidden bt-cc-data] shortcode in your Form section, and [bt-cc-data] shortcode to Mail section. For more info, go to: Contact Form 7.
Optional Redirection URL – If URL is added to the field, users will be redirected to that page, once they submit the form.
Show Date/Time Inputs – Select if date and time fields will display in contact form or not.
Place Holder – Date Picker – Enter optional title for Preferred Service Date.
Date Input Format – Enter desired date format.
Place Holder – Time Picker – Enter optional title for Preferred Service Time.
Time Picker – Start Time and Time Picker – End Time – Define interval for Preferred Service Time select box.
Time Picker – Time Format – Define the time format for timepicker (24-hour or 12-hour).
Select Fields That Will Be Mandatory For Users (Name, Email, Phone, Address, Message, Preferred Date and Time) – Can be selected by Mandatory checkboxes.
Admin Email – Field where you can enter email to which calculator data will be submitted.
Email Subject – Present subject of the email.
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).
Client Email Confirmation – Checkbox for sending email to client.
Add GDPR checkbox – GDPR Checkbox will display at the bottom of default Cost Calculator contact form.
GDPR checkbox description – Add description that will display next to GDPR checkbox.
GDPR checkbox warning – Add warning text for GDPR checkbox.
Client Email Header and Footer – Add HTML content that you want displayed as header or footer of the email users receive.
reCAPTCHA
reCAPTCHA Site and reCAPTCHA Secret key – If you want to use get reCAPTCHA Site key and reCAPTCHA Secret key.
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.
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.
Design
Extra Class Name(s) – Add existing or custom classes to apply CSS to specific calculator / element.
Inline style – Add required CSS statements for inline style.
When you are finished with editing your Cost Calculator, copy its shortcode (e.g. ) and paste it in Text element on desired page.
Using Contact Form 7
From the plugin version 1.2.3, Contact Form 7 can be used instead of default Cost Calculator Contact Form. 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:
Also, make sure to add [bt-cc-data] shortcode to Mail section in Contact Form 7 editor.
When you are finished with editing your Contact Form 7, navigate to calculator where you want to add contact form, and select that form from dropdown in Cost Calculator Contact Form 7 Id field.
Cost Calculator Log
From the plugin version 2.2.5. CC Log is available in Cost Calculator panel of your dashboard. Here you will see the list of all form submissions from your Cost Calculator.
This feature works for both our default form, and form created using Contact Form 7 plugin (please refer to the previous section on how to configure message and email correctly).
Each log will contain all the information from the contact form, as well as the date and time it was sent.
Translate Plugin
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-cost-calculator-nl_NL.po and bt-cost-calculator-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.
Exporting Cost Calculator
In order to export the calculator you created from one site, and import it to another one, please follow these steps:
1. Open calculator you want to copy, and click on Copy button.
2. Then, click on the two arrows at the bottom of the screen.
3. On the pop up that appears, click export, and copy the symbols that appear.
4. After that select to add new calculator to the site where you want to copy it. Click on the blue button to add Cost Calculator settings.
5. Then again click on the two arrows on the bottom of the screen, paste the symbols you previously copied, and click ‘Import’ button.
6. Close the pop up, and on the Cost Calculator settings panel click ‘Paste’.
Make sure to save changes and now your calculator should be properly copied.
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 lose content when 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 change total format’s display?
- How to redirect users to another page after submiting message?
- How to redirect users to another page after the “Next“ button?
Custom CSS should be added to your theme’s Custom / Additional CSS field.
Alternatively, you can use third party plugin such as Simple Custom CSS.
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.
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 = ...
There are two ways to update Cost Calculator plugin – through wp-admin or through FTP.
Since plugin version 2.2.4 it is possible to update plugin through your dashboard, in Updates panel. In order to be able to do this, you will need to register your purchase code.
You can register your purchase code in Cost Calculator >Product License panel, on your dashboard.
Other option to update Cost Calculator to the latest version is to download the plugin folder from the download section of your CodeCanyon profile and update through FTP. We suggest that you use Filezilla to access your server. Here is the article that explains how Filezilla works.
Extract bt_cost_calculator file from the folder you downloaded, and upload it to /wp-content/plugins/ folder of your WordPress installation. You will be prompted to overwrite the existing files. Select ‘Yes’, and the plugin will update.
If you have made some changes in the plugin’s code, you will need to reapply the changes in the new version.
Cost Calculators that were made before update will be preserved.
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.
In order to hide ‘Next’ button, deselect the ‘Display Next Button and Contact Form’ field in Cost Calculator Settings.
Since plugin version 2.1.9, it is possible to display contact form below total bar by selecting ‘Contact Form Initially Visible (Remove Next Button)’ field in Cost Calculator settings panel, Contact form tab.
Since plugin version 2.2.1 it is possible to remove total bar in Cost Calculator general settings panel.
*Note that this does not remove total price from the email users will receive.
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.
Since version 2.1.6. total format can be changed in Cost Calculator settings panel.
In order to redirect users to another page after submitting the form, add the URL to ‘Optional URL for confirmation’ field.
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.