Croco Black Friday 2024 banner element
Copy discount code:
bfcroco2024
Days
Hours
Minutes
Croco Black Friday 2024 banner element
Help Center
How to Set Automatic Price Calculator

How to Set Automatic Price Calculator

This tutorial provides all the details on how to set prices for every apartment you offer and define the price rates depending on the number of days a user wants to book. Besides, this guide will teach you to display the total price automatically in the booking form and WooCommerce order.

Before you start, check the tutorial requirements:

Things to know

The provided tutorial is based on the BaliRento dynamic template.

Use Case with JetFormBuilder

Adjust booking price and pricing rates

Open the General tab in the WordPress Dashboard > Bookings > Settings directory. Here, you can see the post type applied as a Booking instance post type.

The fields for editing the booking settings are added to this post type, so we edit its posts accordingly.

booking instance post type field in the general settings

On the post editing page, there is a Pricing Settings block, in which the Price per 1 day/night is added. This price can be displayed later on the Single Page.

Warning

Mind that the Price per 1 day/night field is for numbers only. Any other characters are not accepted there.

pricing settings section

Besides adding the static price for one day or night, you can also create flexible price rates. 

It means you can set a different price for a longer-term stay. For example, if a visitor rents the accommodation for three or more days, the price per day will be not $30 but $21. 

Click the “Add rates” button to call the rates settings.

add rates button

Press “Add new rate” to specify the new rates. 

In our example, we added a new rate for bookings that last from three days with the price of $21. 

Add as many rates as you want. When you are done, hit the “Save” button.

add new rate button

You can optionally add special prices on specific days of the week by hitting the “Add weekend” button.

weekend pricing settings

You can also add special prices for specific date periods using the Seasonal prices settings.

seasonal prices section

Add a total price field to the booking form

Check how the pricing can be displayed in the booking form.

Go to WordPress Dashboard > JetFormBuilder > Forms and open the Single Page Booking Form for editing.

Add a Calculated Field to the form and check the block settings. There, you can find the macros that can be used in the Calculated Field.

For instance, the inserted formula into the Calculated Field in the described case is:

%FIELD::_dates%*%META::_apartment_price%+%FIELD::additional_services_a%*%FIELD::guest%*%FIELD::_dates%+%FIELD::additional_services_b%*%FIELD::_dates%+%FIELD::additional_services_c%

With this formula, the total amount will be based on the selected dates, additional services, and the number of guests.

calculated field with a macro

Add the total price to the WooCommerce order

In the same booking form built with the JetFormBuilder plugin, we can use the Calculated Field to fill in the price used on the WooCommerce checkout and order. To do so, open the Post Submit Actions tab and add the “Apartment Booking” action.

apartment booking post submit action

In addition to mapping the APARTMENT ID FIELD and CHECK-IN/CHECK-OUT DATE FIELD, we should select the Calculated Field, which contains the advanced price formula as a WOOCOMMERCE PRICE FIELD.

Things to know

If you leave the WOOCOMMERCE PRICE FIELD empty, WooCommerce will use the value of the Price per 1 day/night meta field of the “Room” Custom Post Type.

woocommerce price field completed

Hit “Update” to save the form.

Show pricing rate on the single page

Check how this pricing can be displayed on a Single Page (it can be edited in Elementor, Gutenberg, or Bricks).

You can add a widget/block/element that will display the dynamic price. It can be a Headline or Text Editor widget.

Click on the “Dynamic Tag” icon, and select the “JetBooking: Price per day/night” option.

jetbooking price per day or night dynamic tag

In the “JetBooking: Price per day/night” option, we picked the “Prices range” to be displayed (Show price field).

Also, we enabled the Change Dynamically toggle to change the price according to the dates selected in the booking form on the Single Page

You can also edit the Currency sign and its position to fit your needs.

prices range option selected

Also, set the Second part that will be added to the price, if desired. 

Once the changes are made, press the “Publish/Update” button.

second part of the headline

Check how the price is displayed on the front end.

Now the price range shows “$21-35” according to the Pricing Settings of the product.

price range on the front end

Use Case with JetEngine (Legacy)

Add a total price field

Go to WordPress Dashboard > JetEngine > Forms and open the booking form you created.

Click “Add Field” and proceed to edit it. Choose the “Calculated” Type and type in the Name and Label

In the Calculation Formula text area, we put the following formula:

%FIELD::_dates%*%META::_apartment_price%+%FIELD::additional_services_a%*%FIELD::guest%*%FIELD::_dates%+%FIELD::additional_services_b%*%FIELD::_dates%+%FIELD::additional_services_c%

With this formula, the total amount will be based on the selected dates, additional services, and the number of guests.

calculated field in the jetengine form

After other settings are adjusted, hit the “Apply Changes” button.

Additional options

Things to know

If the Price per 1 day/night meta field (the one in the Price Settings meta box and attached to every CPT post) is empty, the Calculated Field will fail to count the total price and show a zero result.

If you have a separate meta field for pricing and want to use it in the total price formula, you need to perform a few additional steps.

Go to the Post Type or Meta Box where you created the Price meta field, open it, and copy the ID of the field (the text you put into the Name bar). 

Proceed to the form, hit the “Add Field” button, and start editing it. You don’t want the user to see it in the form, so choose the “Hidden” Type.

Type in the Name and Label, then choose the “Current Post Meta” option in the Field Value drop-down menu. Paste the copied ID into the Meta field to get value from bar and click the “Apply Changes” button.

hidden field in the jetengine form

After that, go to the “Calculated” field and change the Calculation Formula to:

%FIELD::_dates%*%FIELD::price%

Here, the %FIELD::_dates% macro will return the number of days the user selects, and the %FIELD::price% macro will use the value of the “Hidden” field you just created.

According to the formula, the number of days/nights selected by the user will be multiplied by the price you set in the corresponding meta field. If you need more information on the topic, go through our Hidden and Calculated Fields guide.

Add the total price to WooCommerce order

Go to WordPress Dashboard > JetEngine > Forms and open the booking form you created.

Things to know

By this time, WooCommerce should be enabled for JetBooking. If you don’t know how to do it, check out the WooCommerce enabling tutorial.

Scroll to the Post-submit Actions / Notification Settings and open the Apartment Booking. There is a WooCommerce Price field option there. Clicking on it will show a drop-down menu with all the created form fields. Choose the field you would like to use for the total price shown in the checkout form and order.

apartment booking post submit action in the jetengine form

If you leave that field empty, WooCommerce will use the value of the Price per 1 day/night meta field of your Custom Post Type.

That’s all; now you can set the prices and simplify your work sufficiently with an automatic calculation of the total price by using JetBooking, JetFormBuilder, and JetEngine plugins.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.