{"id":49072,"date":"2025-08-12T13:51:38","date_gmt":"2025-08-12T13:51:38","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=49072"},"modified":"2025-11-14T13:47:00","modified_gmt":"2025-11-14T13:47:00","slug":"displaying-booking-instances-in-grid","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/displaying-booking-instances-in-grid\/","title":{"rendered":"How to Display Booking Instances in a Grid"},"content":{"rendered":"\n

This tutorial focuses on setting up the grid for displaying the booking instances from the  JetBooking <\/em>WordPress plugin using different builders: Elementor<\/em>, Gutenberg<\/em>, Bricks<\/em>, or Timber\/Twig<\/em>. <\/p>\n\n\n\n

Setting Up the Grid with the Elementor Builder<\/h2>\n\n\n\n
\n

Let\u2019s start by setting up a Listing Template in Elementor<\/strong><\/a>.<\/p>\n\n\n\n

Creating the listing<\/h3>\n\n\n\n
\n

Proceed to WordPress Dashboard > JetEngine > Listings\/Components<\/em><\/strong> and click the \u201cAdd New Item<\/strong>\u201d button.<\/p>\n\n\n\n

In the newly appeared Setup Listing Item <\/strong>pop-up, fill in the fields. Keep the \u201cPosts\u201d option as the Listing Source<\/strong>. Select the Instance Booking Custom Post Type<\/strong><\/a> (CPT<\/strong>) <\/strong>in the From post type<\/strong> dropdown (\u201cProperties\u201d in this case). Enter the Listing item name <\/strong>and set the \u201cElementor\u201d Listing View<\/strong>. <\/p>\n\n\n\n

Then, click the \u201cCreate Listing Item<\/strong>\u201d button.<\/p>\n\n\n\n

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

Once the Elementor <\/em>editing page is opened, you can add the Dynamic Widgets<\/strong><\/a> to display the content of the CPT<\/strong>. <\/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, let\u2019s display the title of the post. For that, add the Dynamic Field<\/strong><\/a> widget. Keep the \u201cPost\/Term\/User\/Object\u201d option as 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

To display the thumbnail, the Dynamic Image<\/strong><\/a> widget should be added. By default, the \u201cPost thumbnail\u201d is chosen as a Source<\/strong>. So if you need to display the thumbnail, keep the settings as they are. If you need to display an image from the custom meta field<\/a>, click on the dropdown and select the field name you need. <\/p>\n\n\n\n

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

When you need to display meta fields from the post, add another Dynamic Field<\/strong> widget. 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 Headline <\/strong>widget to enter the description for the First part<\/strong> and get the Second part<\/strong> from the meta field using the Dynamic Tag<\/strong> icon and choosing the field from the dropdown.\u00a0<\/p>\n\n\n\n

The information about the instance post, such as the property price, can also be displayed using Dynamic Tags<\/strong>.<\/p>\n\n\n\n

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

If you need the listing item to be clickable, so users can proceed to another page with the post details after clicking, click the \u201cgear<\/strong>\u201d icon at the top bar and enable the Make listing item clickable <\/strong>toggle.<\/p>\n\n\n\n

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

Adjusting a dynamic pop-up with the booking form<\/h4>\n\n\n\n
\n

If you would like to include a pop-up with the booking form within the listing item, let\u2019s take a closer look at the setup.\u00a0<\/p>\n\n\n\n

If you are setting up JetBooking <\/em>with the booking wizard, the form will be created automatically. In the How to Set Up Booking with Wizard Setup<\/strong><\/a> tutorial, you can find the details on the setup. <\/p>\n\n\n\n

In case you would like to create a form by yourself, refer to the How to Create a Booking Form<\/strong><\/a> <\/strong>tutorial. <\/p>\n\n\n\n

We created a booking form using a Pattern<\/strong><\/a> that allows users to select dates and other options for the service. <\/p>\n\n\n\n

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

Then, let\u2019s create a Dynamic Popup<\/strong><\/a> with the booking form.<\/p>\n\n\n\n

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

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

Now, proceed back to the Listing Item\u2019s<\/strong> settings. Add a Button<\/strong> widget\u00a0and change the\u00a0Label\u00a0<\/strong>if needed (we entered the text \u201cBook Now\u201d<\/span>).\u00a0<\/p>\n\n\n\n

Proceed to the Advanced <\/strong>tab and in the JetPopup <\/strong>section, select the Attached Popup <\/strong>you created. Activate the JetEngine Listing popup<\/strong> option. Next, define the Trigger Type<\/strong> as \u201cClick On Widget,\u201d and your pop-up will open once the button is clicked.<\/p>\n\n\n\n

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

Ensure that the\u00a0Conditions<\/strong><\/a>\u00a0for the pop-up are set up, as without them, the pop-up will not function<\/span> properly.\u00a0<\/p>\n\n\n\n

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

Once you have added all the needed widgets and applied the required styles, click the \u201cPublish<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n

Displaying the listing on the front end<\/h3>\n\n\n\n
\n

Now, proceed to the page where you need to display the listing and open it in the Elementor <\/em>editing page. Add the Listing Grid<\/strong><\/a> widget to the desired space. Choose the recently created Listing<\/strong>.<\/p>\n\n\n\n

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

Click the \u201cPublish<\/strong>\u201d button when you are ready and proceed to the frontend.<\/p>\n\n\n\n

The Listing Grid<\/strong> widget is displayed correctly on the front-end page.\u00a0<\/p>\n\n\n\n

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

The dynamic pop-up with the form is also displayed on the front page.<\/p>\n\n\n\n

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

Setting Up the Grid with Gutenberg<\/h2>\n\n\n\n
\n

Let\u2019s focus on setting up the Listing Template with the Gutenberg<\/strong><\/a> builder.<\/p>\n\n\n\n

Creating the listing<\/h3>\n\n\n\n
\n

Proceed to WordPress Dashboard > JetEngine > Listings\/Components<\/em><\/strong> and click the \u201cAdd New Item<\/strong>\u201d button.<\/p>\n\n\n\n

In the newly appeared Setup Listing Item <\/strong>pop-up, fill in the fields. Keep the \u201cPosts\u201d option for the Listing Source<\/strong>. Select the Instance Booking CPT <\/strong>in the From post type<\/strong> dropdown (\u201cProperties\u201d in this tutorial). Enter the Listing item name <\/strong>and set the \u201cBlocks (Gutenberg)\u201d Listing View<\/strong>. <\/p>\n\n\n\n

Then, click the \u201cCreate Listing Item<\/strong>\u201d button. <\/p>\n\n\n\n

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

When the editing page is opened, let\u2019s add the Dynamic Field<\/strong><\/a> block to display the posts\u2019 titles. Keep the \u201cPost\/Term\/User\/Object\u201d option for the SOURCE <\/strong>and the \u201cTitle\u201d from the POST OBJECT<\/strong> dropdown. <\/p>\n\n\n\n

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

To display the posts\u2019 thumbnail, add the Dynamic Image block<\/strong><\/a>. According to the default settings, the block displays a thumbnail so that you can retain the settings. If you need to display the images from the image meta field, you can change it in the SOURCE <\/strong>field.<\/p>\n\n\n\n

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

The Dynamic Field<\/strong> block can be used to display other meta fields. 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

Adjusting a dynamic pop-up with the booking form<\/h4>\n\n\n\n
\n

If you would like to add the pop-up with the booking form<\/a>, ensure that the booking form is created.<\/p>\n\n\n\n

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

Then, create a pop-up<\/a> using the JetPopup <\/em>plugin.<\/p>\n\n\n\n

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

Once you are ready, click the \u201cSave<\/strong>\u201d button. Then, set up the pop-up\u2019s Conditions<\/strong>, as without it, the pop-up will not be displayed on the front. <\/p>\n\n\n\n

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

Open the Listing Item <\/strong>template editing page. Add the Button <\/strong>block and proceed to the Advanced <\/strong>tab. Select the ATTACHED POPUP<\/strong> you created earlier and define the \u201cClick\u201d as a TRIGGER TYPE<\/strong>. Enable the JetEngine Listing Popup<\/strong> toggle.<\/p>\n\n\n\n

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

Click the \u201cSave<\/strong>\u201d button once you are ready.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n

Displaying the listing on the front end<\/h3>\n\n\n\n
\n

Now, proceed to the page where the grid should be displayed and open it in the builder. Add the Listing Grid<\/strong><\/a> block.<\/p>\n\n\n\n

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

After all the settings are applied, click the \u201cPublish<\/strong>\u201d button. <\/p>\n\n\n\n

On the front-end page, the Listing Grid<\/strong> is displayed.<\/p>\n\n\n\n

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

The dynamic pop-up works as well when we click on the \u201cBook Now<\/strong>\u201d buttons. <\/p>\n\n\n\n

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

Setting Up the Grid with the Bricks Builder<\/h2>\n\n\n\n
\n

In case you use the Bricks <\/em>builder, you can check our How to Create Listing Items with Bricks<\/strong><\/a> guide.<\/p>\n\n\n\n

Creating the listing<\/h3>\n\n\n\n
\n

Proceed to WordPress Dashboard > JetEngine > Listings\/Components<\/em><\/strong> and click the \u201cAdd New Item<\/strong>\u201d button.<\/p>\n\n\n\n

In the Setup Listing Item <\/strong>pop-up, keep the \u201cPosts\u201d option for the Listing Source<\/strong>. Select the Instance Booking CPT <\/strong>in the From post type<\/strong> dropdown (\u201cProperties\u201d here). Enter the Listing item name <\/strong>and set the \u201cBricks\u201d Listing View<\/strong>. <\/p>\n\n\n\n

Then, click the \u201cCreate Listing Item<\/strong>\u201d button.<\/p>\n\n\n\n

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

When the editing page is opened, we can add information about the CPT <\/strong>with the help of either JetEngine\u2019s <\/em>widgets, such as Dynamic Field<\/strong>, Dynamic Image<\/strong>, and Dynamic Link<\/strong><\/a>, or by using Bricks\u2019 <\/em>elements with the Dynamic Data<\/strong><\/a>.<\/p>\n\n\n\n

In this tutorial, we focus on displaying the booking instances’ info using the JetEngine\u2019s <\/em>Dynamic Widgets<\/strong>.\u00a0\u00a0<\/p>\n\n\n\n

So, click the \u201c+<\/strong>\u201d shaped icon and add the Dynamic Field<\/strong> to display the posts\u2019 titles. The default settings allow you to display the title, so you can keep it.<\/p>\n\n\n\n

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

In case you would like to make the title clickable, you can use the Dynamic Link<\/strong> element. Keep the \u201cPermalink\u201d Source<\/strong> if you need to redirect users to the single post page. Then, click the Dynamic Data<\/strong> icon and select the \u201cPost Title\u201d option.<\/p>\n\n\n\n

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

To display the thumbnail of the posts, add the Dynamic Image<\/strong> element. The default settings allow you to display the thumbnail, which enables you to retain the settings. If you need to display the images from the image meta field, you can change it in the Source <\/strong>field.<\/p>\n\n\n\n

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

To display meta fields, use the Dynamic Field<\/strong>. Choose the \u201cMeta Data\u201d for the Source <\/strong>and select the needed Meta Field<\/strong> from the dropdown.<\/p>\n\n\n\n

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

To display the booking price, you need to add the Dynamic Field<\/strong> element, select the \u201cMeta Data\u201d for the Source<\/strong>, and add the \u201c_apartment_price\u201d in the Object field \/ Meta field \/ Repeater key \/ Component prop<\/strong> field. <\/p>\n\n\n\n

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

Adjusting a dynamic pop-up with the booking form<\/h4>\n\n\n\n
\n

Unfortunately, the dynamic pop-up from JetPopup <\/em>does not work in the Bricks <\/em>builder. Alternatively, you can create a\u00a0pop-up<\/strong>\u00a0using<\/span> the Bricks <\/em>builder.\u00a0<\/p>\n\n\n\n

Ensure that the booking form is created.<\/p>\n\n\n\n

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

Set up the pop-up in the Bricks <\/em>builder. Once the pop-up is created, click the \u201cgear<\/strong>\u201d icon in the top tab, and in the Conditions <\/strong>tab, select the condition according to which the pop-up will be displayed. <\/p>\n\n\n\n

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

Then, open the listing template and add a Button <\/strong>element. Click the \u201cInteraction<\/strong>\u201d button.  Select the \u201cClick\u201d Trigger <\/strong>and choose the \u201cShow Element\u201d Action<\/strong>. Select the \u201cPopup\u201d as a Target<\/strong>, and in the newly appeared field, select the pop-up you created earlier.<\/p>\n\n\n\n

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

Click the \u201cSave<\/strong>\u201d button once you are ready with the settings. <\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n

Displaying the listing on the front end<\/h3>\n\n\n\n
\n

Open the page where you need to display the grid in the Bricks <\/em>builder. Add the Listing Grid<\/strong> element and select the listing you have created in the Listing <\/strong>input.<\/p>\n\n\n\n

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

When you are ready with the settings, click the \u201cSave<\/strong>\u201d button and open the front-end page.<\/p>\n\n\n\n

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

The Bricks\u2019 <\/em>pop-up is also displayed on the front end.<\/p>\n\n\n\n

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

Setting Up the Grid with the Timber\/Twig<\/h2>\n\n\n\n
\n

This part of the tutorial focuses on setting up a grid using Timber\/Twig<\/em>. Refer to our How to Create a Listing Template Using Timber\/Twig View<\/strong><\/a> guide to review the settings\u2019 details.<\/p>\n\n\n\n

Creating the listing<\/h3>\n\n\n\n
\n

Proceed to WordPress Dashboard > JetEngine > Listings\/Components<\/em><\/strong> and click the \u201cAdd New Item<\/strong>\u201d button.<\/p>\n\n\n\n

In the Setup Listing Item <\/strong>pop-up, keep the \u201cPosts\u201d option for the Listing Source<\/strong>. Select the Instance Booking CPT <\/strong>in the From post type<\/strong> dropdown (\u201cProperties\u201d in this case). Enter the Listing item name <\/strong>and set the \u201cTimber\/Twig\u201d Listing View<\/strong>. <\/p>\n\n\n\n

Then, click the \u201cCreate Listing Item<\/strong>\u201d button.<\/p>\n\n\n\n

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

When the editing page is opened, firstly, we will display the post title. For that, we hit the \u201cDynamic Data<\/strong><\/a>\u201d button and pick the \u201cPost<\/a>\u201d option. From the Select data to show<\/strong> dropdown, choose the \u201cPost Title\u201d and click the \u201cInsert<\/strong>\u201d button.<\/p>\n\n\n\n

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

The {{ post.title }} placeholder will be inserted into the sheet. It can also be typed manually, without using the \u201cDynamic Data<\/strong>\u201d functionality.<\/p>\n\n\n\n

To display the post’s thumbnail, click the \u201cDynamic Data<\/strong>\u201d button again and pick the \u201cDynamic Data\u201d option. In the pop-up, we selected the \u201cMeta Data\u201d Source <\/strong>and entered the \u201c_thumbnail_id\u201d Custom Field Key<\/strong>. Then, we hit the \u201cAdd filter to result<\/strong>\u201d button.<\/p>\n\n\n\n

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

We picked the \u201cJetEngine Callback.\u201d Then, we selected the \u201cGet image by ID<\/a>\u201d from the Callback function <\/strong>dropdown menu. This option also allows us to pick the Image size<\/strong>.<\/p>\n\n\n\n

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

Then, click the \u201cInsert<\/strong>\u201d button.<\/p>\n\n\n\n

We applied the <div> element to segment placeholders, ensuring that each of them appears on a distinct line within the listing item.<\/p>\n\n\n\n

To display the custom meta field value. We hit the \u201cDynamic data<\/strong>\u201d button and chose the \u201cDynamic Data\u201d option. We selected the \u201cMeta Data\u201d Source <\/strong>and picked the necessary Meta Field <\/strong>(\u201cAddress\u201d Textarea meta field). Then, we hit the \u201cInsert<\/strong>\u201d button.<\/p>\n\n\n\n

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

Additionally, we inserted the \u201cRooms\u201d number meta field. We added the \u201cRooms:\u201d custom text before the placeholder:<\/p>\n\n\n\n

Rooms:{{ jet_engine_data(args={source:'meta',meta_key:'_rooms'}) }}<\/code><\/pre>\n\n\n\n
\"display<\/a><\/div>\n\n\n\n
Adjusting a dynamic pop-up with the booking form<\/h4>\n\n\n\n
\n
If you need to add a dynamic pop-up<\/a> with the booking form, ensure that the form is set up and the pop-up is created.\u00a0<\/p>\n\n\n\n
\"dynamic<\/a><\/div>\n\n\n\n
Then, add the following HTML code:<\/p>\n\n\n\n
<button\n    class=\"jet-popup-trigger\"\n    type=\"button\"\n    data-popup-id=\"6806\"\n    data-object-id=\"{{ post.ID }}\"\n    data-object-type=\"post\"\n  >\n\tBook Now\n<\/button>\n\n{{ button | raw }}\n<\/code><\/pre>\n\n\n\n
Here, the \u201c6806\u201d is the ID of the pop-up, so ensure you use the ID of the correct pop-up. The \u201cBook Now\u201d text will be displayed on the button.<\/p>\n\n\n\n
\"displaying<\/a><\/div>\n\n\n\n
Following our How to Create a Listing Template Using Timber\/Twig View<\/strong><\/a> guide, we set up the CSS styles.<\/p>\n\n\n\n
\"listing's<\/a><\/div>\n\n\n\n
Once you are ready, click the \u201cSave<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
Displaying the listing on the front end<\/h3>\n\n\n\n
\n
To display the listing template in the Listing Grid<\/strong>, you can create a page in the Gutenberg <\/em>builder, Elementor<\/em>, or Bricks <\/em>editor. We used the Elementor <\/em>editor.<\/p>\n\n\n\n
So, proceed to the page where you need to display the grid and add the Listing Grid <\/strong>widget\/block\/element. Select the listing you created earlier.<\/p>\n\n\n\n
\"listing<\/a><\/div>\n\n\n\n
Click the \u201cPublish<\/strong>\u201d button once you are ready. Open the page on the front end.<\/p>\n\n\n\n
\"listing<\/a><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
That\u2019s it. Now, you know how to set up the grid and display booking instances from the\u00a0JetBooking\u00a0<\/em>WordPress plugin using different builders, including\u00a0Elementor<\/em>,\u00a0Gutenberg<\/em>,\u00a0Bricks<\/em>, and<\/span> Timber\/Twig<\/em>.\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"
Discover how to display booking instances in a grid with different builders for the WordPress JetBooking plugin.<\/p>\n","protected":false},"author":20,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[580],"yoast_head":"\nHow to Display Booking Instances in a Grid \u2014 JetBooking | Crocoblock<\/title>\n<meta name=\"description\" content=\"Discover how to display booking instances in a grid with different builders for the WordPress JetBooking plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/displaying-booking-instances-in-grid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display Booking Instances in a Grid \u2014 JetBooking | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Discover how to display booking instances in a grid with different builders for the WordPress JetBooking plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/displaying-booking-instances-in-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-14T13:47:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/create-listing-item-popup-with-elementor-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/displaying-booking-instances-in-grid\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/displaying-booking-instances-in-grid\/\",\"name\":\"How to Display Booking Instances in a Grid \u2014 JetBooking | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2025-08-12T13:51:38+00:00\",\"dateModified\":\"2025-11-14T13:47:00+00:00\",\"description\":\"Discover how to display booking instances in a grid with different builders for the WordPress JetBooking plugin.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/displaying-booking-instances-in-grid\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/displaying-booking-instances-in-grid\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/displaying-booking-instances-in-grid\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Display Booking Instances in a Grid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Display Booking Instances in a Grid \u2014 JetBooking | Crocoblock","description":"Discover how to display booking instances in a grid with different builders for the WordPress JetBooking plugin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/displaying-booking-instances-in-grid\/","og_locale":"en_US","og_type":"article","og_title":"How to Display Booking Instances in a Grid \u2014 JetBooking | Crocoblock","og_description":"Discover how to display booking instances in a grid with different builders for the WordPress JetBooking plugin.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/displaying-booking-instances-in-grid\/","og_site_name":"Help Center","article_modified_time":"2025-11-14T13:47:00+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/create-listing-item-popup-with-elementor-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/displaying-booking-instances-in-grid\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/displaying-booking-instances-in-grid\/","name":"How to Display Booking Instances in a Grid \u2014 JetBooking | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2025-08-12T13:51:38+00:00","dateModified":"2025-11-14T13:47:00+00:00","description":"Discover how to display booking instances in a grid with different builders for the WordPress JetBooking plugin.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/displaying-booking-instances-in-grid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/displaying-booking-instances-in-grid\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/displaying-booking-instances-in-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Display Booking Instances in a Grid"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/49072"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/20"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=49072"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=49072"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=49072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}