{"id":49013,"date":"2025-08-11T12:24:28","date_gmt":"2025-08-11T12:24:28","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=49013"},"modified":"2025-11-14T13:35:14","modified_gmt":"2025-11-14T13:35:14","slug":"creating-custom-single-page-for-cpt-based-booking","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/creating-custom-single-page-for-cpt-based-booking\/","title":{"rendered":"How to Create a Custom Single Page for CPT-Based Booking"},"content":{"rendered":"\n

This tutorial focuses on creating a custom single post page for booking with Custom Post Types<\/strong><\/a> for JetBooking <\/em>using the JetThemeCore <\/em>and JetEngine <\/em>WordPress plugins. This layout lets you display detailed booking information and interactive forms tailored to each service.<\/p>\n\n\n\n

Creating the Single Page Template<\/h2>\n\n\n\n
\n

In this tutorial, we will show you how to set up a Single Post Page Template<\/strong><\/a> using the JetThemeCore <\/em>plugin. 
So, navigate to WordPress Dashboard > Crocoblock > Theme Builder <\/em><\/strong>> scroll down to the \u201cCPT Single<\/strong>\u201d (\u201cProperties Single\u201d in this tutorial), and click the plus-shaped icon.<\/p>\n\n\n\n

\"template<\/a><\/div>\n\n\n\n

In the newly opened pop-up, the conditions for the template should be set up. <\/p>\n\n\n\n

Pick the \u201cInclude\u201d option in the first dropdown, then move to the second, where the \u201cSingular\u201d option should be selected. In the next dropdown, select the CPT <\/strong>\u2014 in this case, \u201cTour\u201d. In the \u201cSelect\u201d field type \u201cAll\u201d.<\/p>\n\n\n\n

\"conditions<\/a><\/div>\n\n\n\n

Click the \u201cCreate<\/strong>\u201d button. <\/p>\n\n\n\n

Then, we are redirected to the page with the newly created template. Type the name for the template. Then click the \u201c+<\/strong>\u201d icon next to the \u201cOverwrite theme body<\/strong>\u201d input and select the \u201cCreate Template\u201d option. You can choose the template from the library if you have one, but here we guide a step-by-step template creation process. <\/p>\n\n\n\n

\"create<\/a><\/div>\n\n\n\n

In the newly appeared pop-up, choose the Template Content Type<\/strong> (\u201cElementor\u201d in this case), and enter the Template Name<\/strong>. Then, click the \u201cCreate<\/strong>\u201d button.<\/p>\n\n\n\n

\"create<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Displaying the Data about the Service<\/h2>\n\n\n\n
\n

As the Elementor <\/em>editor opens, you will be able to add all the needed widgets and style the template according to your needs. You can use JetEngine <\/em>widgets to display dynamic content, such as meta fields or repeaters, on the Single Post page.<\/p>\n\n\n\n

Let\u2019s have a closer look at displaying the info about the service. <\/p>\n\n\n\n

First of all, we will display the title of the service. <\/p>\n\n\n\n

To do this, add the Dynamic Field<\/strong><\/a> widget to the page. Keep the \u201cPost\/Term\/User\/Object\u201d option for the Source<\/strong>. Then select the \u201cTitle\u201d from the Object Field<\/strong> dropdown.<\/p>\n\n\n\n

\"displaying<\/a><\/div>\n\n\n\n

When you need to display meta fields<\/strong><\/a> from the post, add another Dynamic Field<\/strong> widget. <\/p>\n\n\n\n

Choose the \u201cMeta Data\u201d for the Source <\/strong>and select the needed Meta Field<\/strong> from the dropdown.<\/p>\n\n\n\n

If you need some extra text, you can enable the Customize field output<\/strong> toggle and add the required text to the newly appeared field. Ensure that the \u201c%s\u201d value is kept as it replaces the value of the field. <\/p>\n\n\n\n

\"displaying<\/a><\/div>\n\n\n\n

You can also use a Headline<\/strong><\/a>, Heading<\/strong>, or Text Editor <\/strong>widget with the Dynamic Tag<\/strong><\/a> to display the meta fields\u2019 values. We used the\u00a0Headline\u00a0<\/strong>widget of the\u00a0JetElements<\/em><\/a>\u00a0plugin to enter the description for<\/span> the\u00a0First part<\/strong>\u00a0and get the\u00a0Second Part<\/strong>\u00a0from the meta field using the\u00a0Dynamic Tag<\/strong>\u00a0icon and choosing the field from the dropdown.<\/p>\n\n\n\n

\"displaying<\/a><\/div>\n\n\n\n

In the same way, we display a couple more meta fields. <\/p>\n\n\n\n

Now, let\u2019s add the post\u2019s thumbnail using the Dynamic Image<\/strong><\/a> widget. By default, the \u201cPost thumbnail\u201d is chosen as a Source<\/strong>. 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.\u00a0<\/p>\n\n\n\n

\"thumbnail<\/a><\/div>\n\n\n\n

However, in this tutorial, we will display not one image as a thumbnail, but a gallery field<\/strong><\/a>. For that, add the Gallery Slider<\/strong><\/a> widget and choose the \u201cManual Select\u201d for the Source<\/strong>. In the newly appeared field, click the Dynamic Tag<\/strong> icon and select the needed gallery field from the dropdown. <\/p>\n\n\n\n

\"gallery<\/a><\/div>\n\n\n\n

To display the \u201cTour Details\u201d, \u201cTour Plan\u201d, and \u201cDestination\u201d, we used the Dynamic Field<\/strong> widgets and Headings<\/strong>. <\/p>\n\n\n\n

To display the additional information about the service in the container on the right side, we used the Icon Box<\/strong> widgets.<\/p>\n\n\n\n

\"icon<\/a><\/div>\n\n\n\n

The Booking Form<\/strong><\/a> should also be added to the page. You can do it using the JetForm<\/strong><\/a> <\/strong>widget. Once the widget is added, select the needed form from the Choose Form<\/strong> input.<\/p>\n\n\n\n

\"booking<\/a><\/div>\n\n\n\n

Displaying the booking form in the pop-up<\/h3>\n\n\n\n
\n

However, in this case, we add the \u201cBook Tour\u201d button to the page, which displays the form inside a pop-up and opens it when the button is clicked.\u00a0<\/p>\n\n\n\n

For this, some preparation is needed. Ensure you click the \u201cPublish<\/strong>\u201d button to avoid losing all the settings.<\/p>\n\n\n\n

So, ensure that the booking form is set up. <\/p>\n\n\n\n

\"booking<\/a><\/div>\n\n\n\n

Then, proceed to the WordPress Dashboard > JetPopup > All Popups ><\/em><\/strong> click the \u201cCreate New Popup<\/strong>\u201d button. In the newly appeared pop-up, choose the Content Type<\/strong>, enter the Name<\/strong>, and choose the Preset<\/strong>. Then, click the \u201cCreate<\/strong>\u201d button. <\/p>\n\n\n\n

When the Elementor edit page is opened, add the JetForm <\/strong>widget and select the booking form you created. <\/p>\n\n\n\n

\"booking<\/a><\/div>\n\n\n\n

Click \u201cPublish<\/strong>\u201d once you are ready. <\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

Ensure you set the conditions<\/a> according to your needs and press the \u201cSave Conditions<\/strong>\u201d button. Without the conditions applied, the pop-up will not be shown on the front.<\/p><\/div><\/div>\n\n\n\n

\"conditions<\/a><\/div>\n\n\n\n

Then, let\u2019s move back to the single-page template. Open the Button\u2019s <\/strong>settings and proceed to the Advanced <\/strong>tab, and open the JetPopup <\/strong>section.\u00a0<\/p>\n\n\n\n

Select the Attached Popup<\/strong> you created, and in the Trigger Type<\/strong>, choose the \u201cClick on Widget\u201d option.\u00a0<\/p>\n\n\n\n

\"pop-up<\/a><\/div>\n<\/div><\/div>\n\n\n\n