WooCommerce

If you want to sell your service/product configured by the calculator on your website you can enable WooCommerce from Settings of the calculator.

After enabling the WooCommerce option, the list of your WooCommerce products will appear.

After choosing your proper Calculator product from the list, you should also choose whether you would like to redirect the visitors directly to the Cart or Checkout page after filling the Calculator form.

In the next option, you can see the input box for the calculator total calculation. By default, it is for a calculator with a single total field element [ccb-total-0]. However, in case you have a calculator form with more than one total element, you can insert that total element into here by its correct index.

The first created total field element in the calculator form takes the first index number of [ccb-total-*]. [ccb-total-*] index number begins with 0. Therefore, by default, it is [ccb-total-0]

To make more clear this field, let's see the example. In this example, we have four total elements:

In this calculator, there are a total element for the loan amount, annual interest rate, total months, and the total summary which sum ups all three totals.

In the main total summary field, the loan amount, annual interest rate, and the total months are summed up.

You should first identify the main total field for the [ccb-total-*] index number in your calculator. Let's see how these four total elements took [ccb-total-*] index numbers:

Total loan amount (total_field_id_3) = [ccb-total-0]

Total Annual Interest Rate (total_field_id_4) =[ccb-total-1]

Total Months (total_field_id_5) = [ccb-total-2]

Total Summary (total_field_id_6) = [ccb-total-3]

You can write only a single [ccb-total-*] index number to the input box.

Creating a Calculator Product

You should first create your own special Calculator Product using the WooCommerce plugin to use WooCommerce Payments. So you can assign your Calculator Product to the specific calculator form to be redirected to the Cart or Checkout page.

Navigate to Products and click Add New:

On the “Add New” products page, fill the form and publish your product.

Do not forget to give the price for your Calculator Product. But setting the product image is optional.

The price of the Calculator product will be changed to the price of the Total Summary of Calculator Form.

In the next step, go to your Calculator form page, fill your form, and then click the Submit button to see your Calculator form in the Cart page or Checkout Page.

Redirection to the Cart page after submit:

As you can see, the price of the BMI Calculator is changed to the price of the Total Summary of Calculator Form.

Redirection to the Checkout page after submit:

Please make sure that the default WooCommerce pages (Cart, Checkout, etc.) are configured and set under WooCommerce Settings > Advanced tools