Tuesday, June 28, 2022
HomeWordPress DevelopmentHow To Simply Add a Helpful Price Calculator to a WordPress Web...

How To Simply Add a Helpful Price Calculator to a WordPress Web site


Including a price calculator to your online business web site could be an effective way to enhance your backside line. By permitting potential prospects to shortly and simply decide how a lot your services or products will price, you can also make their decision-making course of simpler. Consequently, they’re extra doubtless to decide on you over your opponents.

There are a number of methods of including fundamental price estimation performance to an internet site, similar to utilizing widgets or CSS. Nonetheless, Stylemix Themes’ Price Calculator Plugin for WordPress provides a extra elegant, versatile means.

What’s a Price Calculator?

Price calculators gather sure variables from web site guests to calculate the overall worth of a services or products.

For instance, in case your web site sells home windows, the enter fields might embody the size of the window opening, kind of body materials, double or single glazing, and many others., all of which influence worth. As soon as the customer has enter all of the required knowledge, the calculator mechanically generates the price of the window, thereby saving you from having to do it manually.

Typical Price Calculator Purposes

There are such a lot of companies that may make use of a price calculator, and listed here are only a few typical examples:

  • Lumber mills
  • Salons, magnificence parlors, and spas
  • Car and gear rental companies
  • Graphic and internet designer companies
  • Medical providers suppliers
  • Hosting firms
  • Skilled providers similar to copywriting, bookkeeping, and many others.
  • Cleansing and housekeeping providers
  • Print providers
  • Plasterers, painters, bricklayers, and many others.
  • Flooring firms
  • And lots of extra…

The checklist is nearly countless, and nny enterprise that manually prepares quotations and estimates can usually profit considerably from including a price calculator to its web site.

Moreover, these calculators aren’t essentially restricted to price calculations. For instance, a well being membership web site or health weblog might have a BMI calculator, whereas a recipe web site can use them for metric to imperial conversions.

Stylemix Themes’ Price Calculator Plugin for WordPress

The Price Calculator Plugin for WordPress by Stylemix Themes consists of all of the options wanted so as to add engaging, full-featured price calculators to your web site shortly and simply.

A free model of the plugin is offered. That boasts glorious starter options, together with a robust calculator builder, limitless kinds, varied customization choices, immediate price estimations, foreign money choices, a user-friendly interface, and many others.

Nonetheless, I like to recommend the Professional model because it brings tons extra helpful options to the desk, together with:

Article Continues Beneath

  • Conditional system
  • Date picker, multi-range slider, picture dropdown, and file add customized parts
  • WooCommerce integration
  • Skill so as to add a number of calculators on a web page
  • Wide selection of customization options
  • Pre-built calculator kind with directions for quite a lot of industries
  • Stripe and PayPal integration
  • Contact Type 7 and Ship Type integration
  • reCAPTCHA safety
  • Calculator duplicate and import/export services
  • Orders dashboard, together with hassle-free order monitoring
  • Premium assist

The desk beneath particulars the present pricing for the Professional model:

Max. Variety of Web sites Annual Lifetime
1 $29.99 $99.99
5 $79.99 $239.99
25 $199.99 $599.99

Get Price Calculator Plugin for WordPress Professional

Putting in the Price Calculator Plugin for WordPress

The free model of the Price Calculator Plugin is offered within the WordPress plugin listing, or you will get it by way of the plugin web site. I’m not going to undergo your complete course of of putting in and activating it, as it’s the similar as for some other plugin. Nonetheless, in case you’re uncertain the best way to do it, the documentation covers the method.

For the Professional model, you have to to buy a license and obtain the plugin via the plugin web site. Earlier than putting in it, you will need to word that you’ll want to put in the free model first. Should you try to put in the Professional model alone, you can be prompted to put in the free one first.

After activating the Professional model, you have to to enter the license key you acquired if you purchased it:

Screenshot showing where the Cost Calculator Plugin for WordPress license key is entered

As soon as the plugin is put in and activated, a brand new menu merchandise will seem in your WordPress panel – that is the place you create your calculators:

Location of the Cost Calculator Plugin menu in the WordPress admin panel

Including a Price Calculator to a Web site

I’ll now undergo the method of including a fundamental price calculator to an internet site utilizing the Price Calculator Plugin. I say fundamental because the plugin is able to far more than this text’s scope can cowl. Due to this fact, I strongly recommend studying the plugin web site and documentation to see what else it will probably do. Furthermore, the developer has additionally created a library of useful movies that features some tutorials.

Step 1

Within the new Price Calculator menu merchandise that seems within the WordPress backend, click on price calculator, after which click on the inexperienced ‘Create New’ button:

The Cost Calculator panel in the WordPress admin area

Step 2

Below the ‘Calculator’ tab, enter a reputation for the brand new calculator after which hit the inexperienced button with the ‘+’ image:

Creating a new cost calculator

It’s okay to make use of any title, however I recommend making it related, so it’s straightforward to recollect.

Step 3

Subsequent, a panel will seem containing a piece space the place the fee calculator shall be constructed utilizing drag-and-drop parts:

The calculator panel where the calculators are created

As you may see, on the right-hand aspect, there are numerous parts to play with, though those used in the end rely on what the calculator is required to do.

In my case, I would like it to calculate the price of copywriting providers and can use a slider for the variety of phrases. Merely drag and drop the Vary Button (which is a spread slider) from the checklist of parts on the appropriate to the place it says ‘Place Component Right here’:

Image showing the Range Button being dragged and dropped into the calculator area

Step 4

After dropping a component into place, a popup instantly seems containing varied configuration choices which is able to differ relying on the component chosen. For instance, within the case of the Vary Button, it’s crucial to offer issues like an outline of the best way to use the slider, the utmost and minimal vary values, vary step, and many others. – different component varieties will present completely different configuration choices.

Beneath is the vary button configuration for my copywriting price calculator. I wished the slider to begin at 500 phrases minimal and go as much as 25,000 most in increments of 500. You’ll word that I’ve put ‘phrases’ within the foreign money subject because the vary is to be phrases relatively than $:

The Range Button configuration panel
The Range Button configuration panel (continued)

After getting into the configurations for the chosen component, hit the inexperienced ‘Save’ button. To check the button and see how the fee calculator will look, merely hit ‘Preview’:

A preview of the calculator in action

Don’t fear if the calculation within the Complete Abstract part is inaccurate – that shall be mounted later.

Step 5

In fact, it’s doable so as to add many extra parts to the calculator if wanted. For instance, I’ll add a checkbox that permits my buyer to decide on if they need a 24-hour turnaround for a $200 surcharge.

After dragging and dropping the Checkbox component into the calculator, I added the next configurations:

The Checkbox configuration panel

Right here is the completed checkbox in motion:

Preview of the Checkbox in action in the calculator

Step 6

Now the required parts have all been added, it’s essential to get them to calculate appropriately within the Complete Abstract.

To do that, we use the Complete component. Once more, simply drag and drop it into place, after which the configuration panel will popup:

The Field element configuration panel

The calculation I would like is:

(output from the vary slider x my charge of $0.08 per phrase) + output from the 24-hour service checkbox

You will note underneath accessible fields two inexperienced buttons: ‘range_field_id_0’ and ‘checkbox_field_id_2.’ These include the outputs from the Vary Button and Checkbox, respectively. If different parts have been added, these would additionally seem as inexperienced buttons right here.

To construct the formulation, that is the sequence of actions I have to observe:

  1. Click on ( in ‘Obtainable Operators’ to open the parenthesis within the Calculator Method subject
  2. Click on the inexperienced ‘range_field_id_0’ button so as to add it to the ‘Calculator Method’ subject
  3. Click on * in ‘Obtainable Operators’ so as to add the multiplication operator
  4. Sort 0.08 (i.e., my charge per phrase) subsequent to the *
  5. Click on ) in ‘Obtainable Operators’ to shut the parenthesis
  6. Click on + in ‘Obtainable Operators’ so as to add the addition operator
  7. Click on the inexperienced ‘checkbox_field_id_2’ button so as to add it to the ‘Calculator Method’ subject

That is what the completed calculation appears like:

The field element configuration panel showing the completed formula

Now all click on ‘Save’ and preview the calculator to examine the whole lot is working okay:

Preview of the completed cost calculator

The Complete component is extraordinarily highly effective, as you should utilize the Obtainable Operators to construct complicated calculations utilizing the outputs generated by any of the opposite parts used.

Step 7

My fundamental calculator is now full and able to be inserted into my web site, which is tremendous straightforward to do.

Merely click on on ‘Price Calculator’ within the WordPress admin panel menu. That may take you to the ‘My Calculators’ web page, the place you will discover an inventory of all of the created calculators (as I solely constructed one, that’s all my checklist comprises.) Subsequent, click on on the shortcode towards the calculator you want to use – that can copy the shortcode to the clipboard:

Location of the shortcode used to embed the calculator into content

Go to the WordPress put up or web page the place you want to place the calculator, and easily insert the shortcode wherever you want it utilizing the ‘Shortcode’ block (or component if utilizing Elementor):

Shortcode being embedded into a daft post

Publishing the web page or put up then units the calculator stay:

Preview of the calculator embedded into a post

That’s Not All, Of us!

In fact, loads of different issues could be finished to the calculator utilizing the capabilities and choices contained within the Situations, Settings, and Customise tabs. Detailed data on these is offered within the plugin documentation and video library. Nonetheless, right here’s a abstract of the aim of every tab:

Situations

Whereas the Complete component mentioned earlier permits for creating complicated mathematical equations, the Situations tab – which is a Professional characteristic solely – expands these additional utilizing logical circumstances. For instance, AND, OR, is/isn’t chosen, is bigger/lower than, is/isn’t equal to, and many others., are all accessible.

The accessible circumstances rely on the weather in use, and creating relationships is simple because of drag-and-drop.

The Conditions panel

Settings

The Settings tab comprises normal international configurations, such because the foreign money image for use, the wording required for the overall abstract, whether or not to show zero values or not, and many others. It additionally consists of the configurations for kinds, WooCommerce, fee integrations, and many others.

The Settings panel

You might also discover that the Price Calculator menu within the WordPress admin panel comprises an ‘Orders’ choice. This enables monitoring of orders from calculators which have been monetized utilizing one of many fee integrations:

The Orders panel

Customise

The Customise tab consists of tons of choices to jazz up calculators or make them match a web site’s branding. One notably good characteristic of this tab is you could see the modifications made to the calculator in real-time earlier than saving them.

The Customize panel showing the calculator after adding some customizations

The Verdict

I’ve to say, I’m in love with Stylemix Themes’ Price Calculator Plugin for WordPress and will certainly be utilizing it on my enterprise web sites.

Creating each easy and sophisticated calculators is an absolute breeze because of an intuitive interface, drag-and-drop, and detailed documentation. Moreover, the calculators add an interactive component to your web site, which helps with engagement. Better of all, the PayPal and Stripe integrations permit your prospects to pick out the choices they need and pay by way of the calculator in an effort to seize their enterprise (and {Dollars}) instantly.

No matter kind of enterprise you run, it’s doable that your web site may benefit from the addition of a calculator. Not solely will it create a greater consumer expertise for web site guests, it would additionally give them the personalised price data they want mechanically, permitting them to make a direct buying determination. And the Price Calculator Plugin for WordPress will make including calculators to your web site tremendous straightforward.

Strive Price Calculator Plugin



How To Add a Cost Calculator to a WordPress Website: A Simple But Elegant Solution

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments