If you are looking for a smart and simple tool that allows you to easily create forms estimate of prices or forms to give your customers the opportunity to get information about the costs of your services and products, then you have come to the right place.
WP Cost Calculator is a WordPress Plugin which helps you easily create any type of forms cost estimation in just a few steps. This is why this WordPress Plugin comes with its own form builder. Thus, you will be able to create an unlimited number of quote forms and insert them on any page or post.
Ce WordPress Plugin is extremely visitor friendly and is very suitable for variable services or products.
The features of the WP Cost Calculator plugin
This WordPress plugin offers many features and many compatibilities. In this section, we will cite a few:
- Support for a conditional logic management system
- Import of demo versions of some quote forms
- The possibility of submitting a form
- WooCommerce support
- Management of estimate forms
- Compatibility with Stripe and PayPal payment gateways
- The ability to customize the appearance of calculators
- A settings section
- Support for the Recaptcha feature
- Available 24 / 7 Customer Support
General overview
Since it has a form builder, you will find 12 field templates to create these. We will mention among others:
- Checkboxes
- The Date Picker (available in the Pro version)
- The drop-down list
- An HTML module
- A Line section
- Multi-range (available in the Pro version)
- A Quantity field
- A Radio button
- Range button
- A text box
- A toggle button
- A Total field
How to acquire the WordPress Cost Calculator Builder plugin
This WordPress plugin comes in two versions: The free version and the paid version.
The free version
This version offers the possibility of creating several types of estimate or quote forms in a few steps. You can create an unlimited number of forms and insert them into any page or post.
This version can be downloaded from the official WordPress plugin page
The pro version
It is richer in features and helps you estimate the cost of the product or service. According to the needs of your business. You will be able to create any type of quote form, even those with the most complex conditional logic management.
How to Install the WordPress Cost Calculator Builder plugin
The WP Cost Calculator Builder plugin comes in two versions as mentioned above. Depending on the version of it, the installation process will be different.
Free version installation of the WordPress Cost Calculator Builder plugin
As this is a WordPress plugin, you can install it in two ways:
First, download the plugin archive file Cost Calculator Builder
Go to Extensions> Add On your dashboard.
Click on the button Upload an extension and select the downloaded file from your folders on your computer. Then click on Installer and wait for the installation to complete.
After installing it successfully, you need to activate the plugin by clicking on Activate the extension.
The second way of installation is done directly in your WordPress dashboard:
Go to Extensions> Add and enter the desired search.
From the search results, install the plugin. After clicking the button Install now, the button Enable will be displayed. Click on it for activation.
Installation of the pro version
Make sure you have installed and activated the free version of the plugin before installing the pro version
When all of your data is found to be correct about your purchase, you will get a welcome message from Freemius sent to your email.
In this email you will be aware of the Pro version download page link with the license key to activate it.
Go to section Extensions from your dashboard, then on Add and choose to upload a plugin as we showed above.
Choose the purchased archived file that you downloaded. Then click on Installer and finally on Enable. You will be redirected to the activation table where you will need to paste the license key sent to you.
Push the button Agree & Activate License to activate :
After successfully activating, you will be taken to the Plugin dashboard to start your work.
How to configure the WP Cost Calculator Builder plugin
Import of ECU demo versions
After installation et activation plugin, it is best to start by importing the demos of this WordPress plugin. This will allow you to have a closer look at how the processes are going.
Go to the section My calculator
Click on My Calculator. In the Modal popup that appears click on the button Import Calculators
Choose the option Run the default demo import
You will then see a progress bar that displays the current process. Once the import is complete, you will see the list of installed ECUs on your website.
If you already have calculators designed from the Cost Calculator Builder plugin, you can import those as well. For this you need to choose your file from your folders on your computer to import it.
How to create a calculator
Create a cost calculator
To do this, go to your dashboard > Cost Calculator and click on the button "Create newIn order to create it.
The elements of the calculator will only appear after giving a name to the latter
Click on the '+'
The calculator items will appear on the right. Start adding the elements you want to your new form.
Adding elements
There are two ways to add items to the calculator.
Click on the '+'
or simply drag and drop the item into your form.
After adding a new element to your calculator, the parameters of this element will appear. Add all the necessary information to the item and save your work.
Modify or Delete an element of the form
If you want to change the parameters of the elements, in the form editor, click the icon Edit of the item you want to customize.
and then click on the button Save the settings.
To delete an element, just click on the Recycle Bin icon to do it.
Overview of calculators
You can see what your calculator looks like at any time using the Preview button.
This button allows you to see your modifications or additions before saving the form. It is really useful when you have doubts.
The preview button only works after saving the ECU. It is recommended to refresh the page when you cannot directly see the preview results.
After saving, press the button Overview to view your work.
In Overview left side there will be items you added to the calculator. On the right side of the preview, you will see the values ​​of each item relatively and the total description. The Total description will display the value due to your created formula.
Calculator management
You can find your calculators already created and imported by clicking on the button My Calculator :
And here you can get the shortcode of the calculator, and also apply the actions modify, customize, duplicate or delete.
Editing Calculators
To modify your calculators or those imported by default, just click on the pencil icon and make your modifications.
When you click on the changes icon, you will be taken to the calculator table to make changes.
Customize calculators
To give your calculator unique styles and to personalize it, choose the second icon.
Duplicate calculators
If you need a copy of the calculator example, click the third copy icon to duplicate.
After clicking this icon, you will see the duplicate ECU with a changed id.
Remove calculators
Deletion is done using the trash can icon on the right side.
As you can see, there is no more renovation calculator with id = 191 in the list after deleting.
Insert calculators in the page
You can use shortcodes to display calculators created in certain pages or posts. First copy the calculator shortcode you need.
Then go to Pages > Add to create a new page.
You can paste the shortcode you copied to the page. To add this shortcode you can use any plugin from page builder such as: Gutenberg, Elementor, WPBakery, or you can use special elements instead of shortcode. We will see how to do it in each page builder one by one below.
Adding Shortcode on Gutenberg
First, we'll see adding a shortcode using the Gutenberg page builder.
Adding a calculator with Elementor
Now we are going to do that with Elementor page builder. On this page builder there is a special item called Cost Calculator Builder, find this item and drag it.
Then select the calculator you want to add to the page and click on the Layout button à day.
In Elementor, you need to save the calculator first and then open it in the page to preview the calculator.
The result is the following:
Adding a calculator with WPBakery
Now we are going to do this with a WPBakery page builder. On this page builder, there is also a special item called Cost Calculator Builder, find this item and choose your calculator.
After selecting the necessary calculator, press the Save changes button.
Therefore, you can see the calculator when you preview the page.
Calculator settings
After installing the plugin, there will be three main navigation options in the work area: Calculator, Conditions, Settings. The third (Settings) gives you the option to change the default settings. In the free version of this plugin, you can change the general settings and the settings of motto.
In General, you can add a title, configure the calculator style and choose the option as default action of a computer.
In the settings currency, you can choose price parameters such as currency symbol currency, its position and those of the separators of thousands and decimals and more.
How to customize the calculator
This WordPress plugin allows you to customize your calculators. Go to your existing calculators, choose the calculator you need, and go to Personalize their campaigns.
By clicking on Customize, you will open the personalization page. If you want your work to be unique and stylish, change it up by personalizing it.
If you want to customize your calculator, it is recommended to do so after you have finished creating it since the style will not be affected by the structure.
On this page you can specify the orientation of your calculator - Horizontal or Vertical.
Horizontal view:
Vertical view:
On the right side of the page, there are all the customization options that are available. Among them, you can find fields like, checkbox, selectors, and many more. You can configure each field separately.
Below we will configure the background color of our calculator
Next, we will configure the margins of our calculator
The text color of the total sum
Customizing sliders
You can do this for any element present in your form, because there are all the attributes of CSS.
However, your element may not need all of the attributes. So you have to decide what to customize. For example: if there is no toggle button in your calculator, what's the point of customizing the toggle button items.
Our verdict
Although there are many options to estimate your quotes or the costs of your products, the WordPress plugin Stylemix Cost Calculator stands out for its user-friendliness and easy handling. You can use it in its free version if you don't need complex formulas. But the pro version demonstrates exactly why this plugin is a great alternative and why we recommend it.
Download the WordPress WP Cost Calculator plugin now !!!
