How to Create a Custom Single Page for CPT-Based Booking
Discover how to create a Custom Single Page for CPT-Based Booking for the WordPress JetBooking plugin with the help of the JetThemeCore and JetEngine plugins.
Before you start, check the tutorial requirements:
- Elementor (Free version) builder
- JetBooking plugin installed and activated
- JetEngine plugin installed and activated
- JetThemeCore plugin installed and activated
This tutorial focuses on creating a custom single post page for booking with Custom Post Types for JetBooking using the JetThemeCore and JetEngine WordPress plugins. This layout lets you display detailed booking information and interactive forms tailored to each service.
Creating the Single Page Template
In this tutorial, we will show you how to set up a Single Post Page Template using the JetThemeCore plugin.
So, navigate to WordPress Dashboard > Crocoblock > Theme Builder > scroll down to the “CPT Single” (“Properties Single” in this tutorial), and click the plus-shaped icon.
In the newly opened pop-up, the conditions for the template should be set up.
Pick the “Include” option in the first dropdown, then move to the second, where the “Singular” option should be selected. In the next dropdown, select the CPT — in this case, “Tour”. In the “Select” field type “All”.
Click the “Create” button.
Then, we are redirected to the page with the newly created template. Type the name for the template. Then click the “+” icon next to the “Overwrite theme body” input and select the “Create Template” option. You can choose the template from the library if you have one, but here we guide a step-by-step template creation process.
In the newly appeared pop-up, choose the Template Content Type (“Elementor” in this case), and enter the Template Name. Then, click the “Create” button.
Displaying the Data about the Service
As the Elementor editor opens, you will be able to add all the needed widgets and style the template according to your needs. You can use JetEngine widgets to display dynamic content, such as meta fields or repeaters, on the Single Post page.
Let’s have a closer look at displaying the info about the service.
First of all, we will display the title of the service.
To do this, add the Dynamic Field widget to the page. Keep the “Post/Term/User/Object” option for the Source. Then select the “Title” from the Object Field dropdown.
When you need to display meta fields from the post, add another Dynamic Field widget.
Choose the “Meta Data” for the Source and select the needed Meta Field from the dropdown.
If you need some extra text, you can enable the Customize field output toggle and add the required text to the newly appeared field. Ensure that the “%s” value is kept as it replaces the value of the field.
You can also use a Headline, Heading, or Text Editor widget with the Dynamic Tag to display the meta fields’ values. We used the Headline widget of the JetElements plugin to enter the description for the First part and get the Second Part from the meta field using the Dynamic Tag icon and choosing the field from the dropdown.
In the same way, we display a couple more meta fields.
Now, let’s add the post’s thumbnail using the Dynamic Image widget. By default, the “Post thumbnail” is chosen as a Source. If you need to display the thumbnail, keep the settings as they are. To display an image from a custom meta field, click the dropdown and select the field name you need.
However, in this tutorial, we will display not one image as a thumbnail, but a gallery field. For that, add the Gallery Slider widget and choose the “Manual Select” for the Source. In the newly appeared field, click the Dynamic Tag icon and select the needed gallery field from the dropdown.
To display the “Tour Details”, “Tour Plan”, and “Destination”, we used the Dynamic Field widgets and Headings.
To display the additional information about the service in the container on the right side, we used the Icon Box widgets.
The Booking Form should also be added to the page. You can do it using the JetForm widget. Once the widget is added, select the needed form from the Choose Form input.
Displaying the booking form in the pop-up
However, in this case, we add the “Book Tour” button to the page, which displays the form inside a pop-up and opens it when the button is clicked.
For this, some preparation is needed. Ensure you click the “Publish” button to avoid losing all the settings.
So, ensure that the booking form is set up.
Then, proceed to the WordPress Dashboard > JetPopup > All Popups > click the “Create New Popup” button. In the newly appeared pop-up, choose the Content Type, enter the Name, and choose the Preset. Then, click the “Create” button.
When the Elementor edit page is opened, add the JetForm widget and select the booking form you created.
Click “Publish” once you are ready.
Then, let’s move back to the single-page template. Open the Button’s settings and proceed to the Advanced tab, and open the JetPopup section.
Select the Attached Popup you created, and in the Trigger Type, choose the “Click on Widget” option.
Setting up the related services
Additionally, we add a list of similar related services to ameliorate the user experience on the site.
Creating the listing
Following the How to Create a Listing Template for Post Types in Elementor tutorial, we created a listing for the “Tours” CPT.
We added the Dynamic Widgets to display short information about the rooms.
Click the “Publish” button once you are ready.
To know more about displaying booking instances in the list, refer to our How to display Booking instances in a grid tutorial.
Setting up a custom query
Following the Macros for Query Builder tutorial, we set up the Custom Posts Query.
Proceed to the WordPress Dashboard > JetEngine > Query Builder > click the “Add New” button.
Enter the Query Name and select the “Posts Query” Query Type. Scroll down to the General tab and select the CPT you need to query in the Post Type field. Then, in the Tax Query tab, apply the following settings to get the posts related by terms on the single post page.
Click the “Add Query” button once you are ready.
Displaying the related services on a single page
Return to the single-page template and add the Listing Grid widget. Select the listing you created in the Listing input.
Then open the Custom Query tab and enable the toggle. In the newly appeared field, select the query you created.
Once you are ready, click the “Publish” button.
Checking the Result
Now, proceed to the front end of any page from the services CPT (“Tours” in this case). Here, the template we created is applied.
That’s it. Now you know how to create a custom single post page for booking with Custom Post Types for JetBooking using the JetThemeCore WordPress plugin.