Back to contents

JetBooking: How to Set Automatic Price Calculator

n this tutorial, you will learn how to set prices for every apartment you offer and define the price rates regarding the number of days a user wants to stay. Besides that, this guide will teach you to display the total price automatically both in the booking form and WooCommerce order.

When creating an apartment booking service, you definitely don’t want to set the total price of every order manually. Combined with WooCommerce and JetEngine, JetBooking could help you automate all the calculations.

How to set the prices and pricing rates

When you finish setting up Booking, the new meta field named Pricing Settings will be added to all Room custom posts. If you want to display pricing in the Listing Grid or on the Single Room pages, don’t forget to fill it in for all the items.

pricing settings meta box
NOTE. The Price per 1 day/night bar is for numbers only. Don’t type any other characters there.

Besides defining the static price for one day or night, you can also create flexible price rates. This means you can set a different price for the visitors who would like to rent a room for some longer-term stay. For example, if a visitor rents the accommodation for three and more days, the price per day will be not $12 but $11. Click the “Advanced price rates” button, set the number of days in the From bar, and fill the Price: text area. You can add as many rates there as you want by clicking the “Add new rate.” When you are done, hit the “Save” button. 

Set up the pricing rates in JetBooking plugin

Moreover, if, for some reason, you don’t want to use that field, you can always add a separate meta field to the Room custom post type, name it “Price” and fill it with the needed value. If you need more information, check our tutorial about adding meta fields. However, such a custom meta field doesn’t have an option for setting pricing rates. Additionally, it has other small disadvantages that will be described further.

How to display pricing rate on the Single page

With the functionalities of JetBooking, you can show not only the static price but also a pricing range from the lowest to the highest.

Go to JetPlugins > Theme Builder and choose to edit with Elementor the single page you created for Room CPT. In the widget menu, pick the Heading widget and drop it to the page. In the Content tab, instead of typing in the Title, click the dynamic tags button in the upper right corner and choose the “JetBooking: Price per day/night” option.

title dynamik tags list

Click on the bar to open the drop-down menu. Let’s take a closer look at the settings.

  • Show price. Here you can choose how to show the prices. Default will display the price you put into the Price per 1 day/night bar. Min price and Max price will show the minimum or maximum price from the ranges you set in the Set up advanced pricing rates window. Prices range will, obviously, display the range of prices from minimum to maximum.
  • Change Dynamically. If this toggle is turned on, the price shown here will dynamically change after the user chooses dates. The price will be shown according to the rates you set.
  • Currency sign. The character you type in here will be placed near the price.
  • Currency sign position can be “Before price” and “After price.”
dynamic tag settings

There are also Advanced settings there. In this section, you can choose the words that will be displayed Before and After the price. Besides that, you can choose the Fallback phrase, which will be shown to users if something goes wrong.

Choose the Size, HTML tag, and Alignment, do some designing in the Style tab, and voila! This heading will dynamically show the range of pricing for every specific room. In the front, it will look like that:

dynamic price rate made using JetBooking

How to add a Total Price field to the booking form

Now let’s make the form show users the entire cost of their booking. Go to JetEngine > Forms and open the booking form you created.

Click “Add Field” and proceed to editing it. Choose the Type “Calculated,” type in the Name and Label. In the Calculation Formula text area, type the %ADVANCED_PRICE::_dates % (“_dates” here is the ID of your Check-in/check-out dates field). You can just copy that formula from the list to the right from the text area.

total price calculated field

Let’s take a brief look at the Booking macros tips, shown to the right from the Calculated Formula text area:

  • %ADVANCED_PRICE::_check_in_out% macros is the one that counts the total price. It multiplies the number of selected days with the Price per 1 day/night meta field value. Additionally, if you set some pricing ranges it will calculate the total price according to them.
  • %META::_apartment_price% macros return the value you place to the Price per 1 day/night meta field. Be aware, that it doesn’t change the price according to the number of chosen days, it will always show the static value from the meta field bar.

Next, type in the currency sign to the Calculated Value Prefix or Calculated Value Suffix and hit the “Apply Changes” and “Update” buttons.

Let’s see how it works on the frontend. For example, the default price for the room is $12. However, if a user wants to book the room for 5 days and more, the price will reduce to $10 (so the total will be $50).

total price calculator made using JetBooking

Additional options

NOTE! If the Price per 1 day/night meta field (the one that is in the Price Settings meta box and attached to every Room CPT) is empty, the Calculated field will fail to count the total price and show the 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 booking 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 field type.

price hidden field

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

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

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

%FIELD::_dates% macros will return the number of days the user select.

%FIELD::price% macros will use the value of the Hidden field you just created.

So, 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.

How to automatically add the total price to WooCommerce order

Go to JetEngine > Forms and open the booking form you created. By this time, the WooCommerce will have to 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, you will see the drop-down menu with all the created form fields. Choose the field you would like to use for the total price that will be shown in the checkout form and order.

woocommerce price field

If you leave that field empty, WooCommerce will use the value of the Price per 1 day/night meta field of the Room custom post type.

Congratulations, you can now set the prices and simplify your work sufficiently with an automatic calculation of the total price!