Cost Calculator Builder
Item PageVideo TutorialsChangelogResources Get Started
  • Cost Calculator Builder Documentation
  • Getting Started
    • Free Version and Pro Version
    • System Requirements
    • Plugin Installation
    • License Activation
      • Upgrading the License
    • Update Billing Details and Access Invoices
    • License Utilization
    • Update The Plugin
    • Templates
    • Feature Request
  • Plugin Features
    • How to Create a Calculator
    • How to Manage Calculators
    • How to Add a Calculator to the Page
    • Calculator Appearance
    • Additional Classes
  • Cost Calculator Settings
    • Calculator Settings
      • Summary Block
      • Currency
      • Warning Texts
      • Confirmation Page
      • Order Form
      • Form Manager
      • Sticky Calculator
      • Woo Products
      • Woo Checkout
      • Payments
      • Webhooks
    • Global Settings
      • Currency (Global)
      • PDF Entries
      • Share Quote Form
      • Order Form (Global)
      • Email Template
      • Backup Settings
      • AI Formula
      • Captcha
      • Payments (Global)
      • Geolocation
  • Calculator Elements
    • General Overview
    • Text
    • Quantity
    • Validated form
    • Dropdown list
    • Image Dropdown (Pro feature)
    • Radio Select
    • Image Radio (Pro feature)
    • Switch Toggle
    • Checkbox
    • Image Checkbox (Pro feature)
    • Date Picker (Pro feature)
    • Time Picker (Pro feature)
    • Basic Slider
    • Multi Range (Pro feature)
    • File Upload (Pro feature)
      • How to Allow Additional File Types in WordPress
      • How to Increase Maximum File Upload Size in WordPress
    • HTML
    • Geolocation (Pro feature)
    • Line
    • Formula
      • AI Assistant (Pro feature)
    • Repeater (Pro feature)
    • Group Field (Pro feature)
    • Page Breaker (Pro feature)
  • Conditional System
    • Introduction
    • How to Create a Condition
    • Condition Options
    • Condition Actions
    • AND/OR Conditions
    • Condition Creating Example
  • Special Plugin Features
    • Orders
    • Discounts
    • Required Fields
    • Contact Form 7 Plugin
  • Payments
    • Settings
    • PayPal
    • Stripe
    • Razorpay
    • Cash Payment
  • Translating Cost Calculator Into a Different Language
    • Translation Basics
    • Translating Static Strings
    • Translating Calculator with WPML
    • FAQ
  • Develeoper's guide
    • Cost Calculator Hooks
      • Order Management
      • Contact Form
      • Confirmation Page
      • Email
  • Troubleshooting
    • Introduction
    • Plugin Conflicts
    • Theme Compatibility
    • Calculator is not loading
    • Cache Settings
    • Email not sending
    • Debug Logs
    • Submit a Support Ticket
  • Changelog
    • Release Notes
    • Changelog (Free Version)
    • Changelog (Pro Version)
  • Pre-built Calculators & Cases
    • Service Booking
    • Graphic Design
    • Loan Interest
    • Delivery Service
    • Renovation Company
    • Dental Services
    • Car Wash Company
    • Medical Services
    • Tuition Fees
    • Printing Services
    • Car Rental
    • Venue Rental Service
  • Advanced Topics
    • License Management
  • Stylemixthemes
    • Cost Calculator Builder WordPress Plugin
    • Themes
    • Plugins
Powered by GitBook
On this page
  • Embedding calculators from the Cost Calculator dashboard.
  • Inserting manually with Shortcode
  • Select existing pages
  • Creating new page
  • Embedding Calculators with Page Builders.
  • Add Calculator with Elementor
  • Add Calculator with WPBakery
  • Add Calculator with Gutenberg

Was this helpful?

  1. Plugin Features

How to Add a Calculator to the Page

PreviousHow to Manage CalculatorsNextCalculator Appearance

Last updated 4 months ago

Was this helpful?

This guide will help you to insert calculators into the page of your website. There are several ways to do it.

Embedding calculators from the Cost Calculator dashboard.

Calculators can be added to the page with easy steps. To open Calculator embed options just click on the Embed button:

Following one of the options below in the Cost Calculator dashboard the calculator can be embedded:

You can also get this menu inside the Calculator by clicking the Ember button:

Inserting manually with Shortcode

You can use shortcodes to show created calculators on some pages or posts manually.

First, click on the embed button of the desired calculator:

Next, in the opened Pop Up window expand Insert manually option and copy the Calculator Shortcode:

Then go to the Pages and edit one of the existing pages or click on Add New to create a new page.

You can paste the shortcode that you copied to the front page. To add that shortcode, you can use any page builder plugin (Gutenberg, Elementor, WPBakery) or you can use special elements instead of shortcode.

Select existing pages

You can add a Calculator to the existing pages automatically. First, click on the embed button of the desired calculator:

Next, in the opened Pop Up window expand the "Select existing pages" option select pages, and click on the Apply button to embed the calculator:

The Calculator will be added to the end of the page.

Creating new page

You can add a Calculator by creating a new page. First, click on the embed button of the desired calculator:

Next, in the opened Pop Up window expand the "Create new page" option and by giving the name click on the Create Page button to embed the calculator to this new page:

After clicking on the Create Page button, you will be redirected to the newly created page with Calculator:

Embedding Calculators with Page Builders.

You can use the "Cost Calculator Builder" widget to inset the calculator with page builder plugins.

Add Calculator with Elementor

In this page builder, there is a special element called Cost Calculator Builder, find that element and drag it.

Then select the calculator that you want to add to the page and click the Update button.

NOTE: In Elementor, you should initially save the calculator and then open it on the page in order to preview the calculator

The result is the following:

Add Calculator with WPBakery

In the WPBakery page builder, there is also a special element called Cost Calculator Builder.

  1. First, edit the necessary page using WPBackery or you can also paste it to the empty page using the builder. Click on the Add Element + button:

  1. Search for Cost Calculator Builder element and click on it:

  1. Choose the necessary calculator from the list and click on the Save Changes button:

  1. Next, click on the Update button to reflect the changes on your webpage:

  1. Here is the result, calculator pasted on a webpage successfully:

Add Calculator with Gutenberg

You can also use the Cost Calculator's special block for WordPress Default editor - Gutenberg.

  1. Create a new page or edit any existing page using Gutenberg. It can be done just by following WP Dashboard > Pages > All Pages Add New/Edit:

  1. Search for Cost Calculator Builder and click on it:

  1. Choose the desired calculator from the dropdown list in the inserted block:

  1. Click on the Publish or Update buttons to save the changes:

  1. Here is the result of our insertion:

Click on one of the plus signs:

âž•
Inserting manually with Shortcode.
Selecting existing pages to embed Calculator.
Creating a new page to insert the Calculator.