{"id":39050,"date":"2025-06-16T08:25:43","date_gmt":"2025-06-16T08:25:43","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=39050"},"modified":"2025-10-10T12:51:03","modified_gmt":"2025-10-10T12:51:03","slug":"how-to-display-booked-items-on-the-users-page","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-display-booked-items-on-the-users-page\/","title":{"rendered":"How to Display Booked Items on the User Account Page"},"content":{"rendered":"\n<p>Using the <em>JetEngin<\/em>e plugin, you can query the created bookings by the current user and display them as a listing on the User Account page.<\/p>\n\n\n\n<p>Once the user makes a booking on the site, information about this booking will appear in their account, where the user can track the booking status.&nbsp;<\/p>\n\n\n\n<p>This tutorial covers configuring the custom query and displaying the query results in a listing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"configure-a-custom-query-to-display-booked-items\">Configure a Custom Query to Display Booked Items<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>The custom query will filter bookings made by the current user and allow displaying results as a listing.<\/p>\n\n\n\n<p>Head to <strong><em>WordPress Dashboard &gt; JetEngine &gt; Query Builder <\/em><\/strong>and click the \u201c<strong>Add New<\/strong>\u201d button to create a new query.&nbsp;<\/p>\n\n\n\n<p>Name the query and select the \u201cJetBooking Query\u201d <strong>Query Type<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/jetbooking-query-setting-for-the-user-account-page.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/jetbooking-query-setting-for-the-user-account-page.webp\" alt=\"jetbooking query setting for the user account page\" class=\"wp-image-48200\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/jetbooking-query-setting-for-the-user-account-page.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/jetbooking-query-setting-for-the-user-account-page-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/jetbooking-query-setting-for-the-user-account-page-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/jetbooking-query-setting-for-the-user-account-page-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/jetbooking-query-setting-for-the-user-account-page-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/jetbooking-query-setting-for-the-user-account-page-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>This type of query returns all bookings created on the site. Using different query settings, you can narrow down the results. To learn more about these settings, proceed to the <strong><a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/query-builder-jetbooking-query-type\/\" target=\"_blank\" rel=\"noreferrer noopener\">JetBooking Query Type in the Query Builder Overview<\/a><\/strong>. <\/p>\n\n\n\n<p>To display only the list of bookings created by the current user, move to the body of the query and, in the <strong>General<\/strong> section, hit the \u201c<strong>database<\/strong>\u201d button near the <strong>User ID <\/strong>field, and select the \u201cCurrent User ID\u201d macro.<\/p>\n\n\n\n<p>You can enable the <strong>Preview Results <\/strong>toggle to check how the query narrows the results.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/current-user-id-macro-in-the-jetbooking-query-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/current-user-id-macro-in-the-jetbooking-query-settings.webp\" alt=\"current user id macro in the jetbooking query settings\" class=\"wp-image-48199\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/current-user-id-macro-in-the-jetbooking-query-settings.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/current-user-id-macro-in-the-jetbooking-query-settings-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/current-user-id-macro-in-the-jetbooking-query-settings-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/current-user-id-macro-in-the-jetbooking-query-settings-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/current-user-id-macro-in-the-jetbooking-query-settings-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/current-user-id-macro-in-the-jetbooking-query-settings-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<p>Now, the query retrieves only bookings created by the current user. Configure other custom query settings and push the \u201c<strong>Add\/Update Query<\/strong>\u201d button.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-a-listing-to-display-bookings\">Create a Listing to Display Bookings<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>The next step is to create and style the <strong>Listing<\/strong> template for the bookings on the User Account. The <strong>Listing<\/strong> template can be created using Elementor, WordPress block, Bricks, or Timber\/Twig editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"building-a-listing-template-in-the-elementor-editor\">Building a Listing template in the Elementor editor<\/h3>\n\n\n\n<p>Navigate to the <strong><em>WordPress Dashboard > JetEngine > Listings\/Components<\/em><\/strong> tab and press the \u201c<strong>Add New Item<\/strong>\u201d button to add a new template.<\/p>\n\n\n\n<p>In the <strong>Setup Listing Item <\/strong>window, select \u201cQuery Builder\u201d as the <strong>Listing <\/strong><strong>s<\/strong><strong>ource<\/strong>; then, select the custom query created in the previous step and give the listing a name.&nbsp;<\/p>\n\n\n\n<p>Finally, select \u201cElementor\u201d for the <strong>Listing <\/strong><strong>v<\/strong><strong>iew<\/strong> if you build the website with Elementor and click the \u201c<strong>Create Listing Item<\/strong>\u201d button.&nbsp;<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating_listing_for_sql_query_in_elementor_2x.png\" alt=\"creating listing for sql query in elementor\">\n\n\n\n<p>Now, it is time to customize the listing template for the booked items. You are free to display any column retrieved by the custom query. In our example, we will display the booking ID and status, the linked title of the booked instance, dates, number of guests, and user information. All of this data will be displayed with the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/dynamic-field-widget-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dynamic Field<\/strong><\/a> widget.<\/p>\n\n\n\n<p>First, drag and drop a <strong>Dynamic Field <\/strong>widget to the editing area. Select the \u201cPost\/Term\/User\/Object Data\u201d as the <strong>Source<\/strong>. In the <strong>Object Field <\/strong>drop-down menu, scroll down until you see the <strong>JetBooking <\/strong>section and pick the \u201cBooking ID\u201d option.<\/p>\n\n\n\n<figure class=\"wp-block-image text-center size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"586\" height=\"932\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/displaying-the-booking-ID-in-the-listing-template-in-the-elementor-editor.png\" alt=\"displaying the booking ID in the listing template in the elementor editor\" class=\"wp-image-48202\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/displaying-the-booking-ID-in-the-listing-template-in-the-elementor-editor.png 586w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/displaying-the-booking-ID-in-the-listing-template-in-the-elementor-editor-189x300.png 189w\" sizes=\"(max-width: 586px) 100vw, 586px\" \/><\/figure>\n\n\n\n<p>To include additional text to this value, enable the <strong>Customize field output<\/strong> toggle and customize the format area. For example, we typed \u201cBooking ID: %s\u201d into the <strong>Field format<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"939\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/customizing-the-output-of-the-booking-ID.webp\" alt=\"customizing the output of the booking ID in the elementor editor\" class=\"wp-image-42860\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/customizing-the-output-of-the-booking-ID.webp 760w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/customizing-the-output-of-the-booking-ID-243x300.webp 243w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/customizing-the-output-of-the-booking-ID-600x741.webp 600w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/div>\n\n\n\n<p>Now, the listing displays the booking ID. Similarly, add the booking status.<\/p>\n\n\n\n<p>Add a new <strong>Dynamic Field <\/strong>widget or duplicate the existing one. Repeat the above steps to display the \u201cStatus\u201d option and format it as needed.<\/p>\n\n\n\n<div class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"938\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-status-in-the-listing-template.webp\" alt=\"displaying the booking status in the listing template in the elementor editor\" class=\"wp-image-42870\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-status-in-the-listing-template.webp 760w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-status-in-the-listing-template-243x300.webp 243w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-status-in-the-listing-template-600x741.webp 600w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/div>\n\n\n\n<p>To display the name of the booked property (post title), add another <strong>Dynamic Field <\/strong>widget and select the \u201cBooked Instance ID\u201d option as the <strong>Object Field<\/strong>. The value of this option is the post ID.<\/p>\n\n\n\n<p>To transform it into a linked title, enable the <strong>Filter field output <\/strong>toggle and select the \u201cGet post\/page link\u201d <strong>Callback<\/strong>. This callback formats the value and outputs the name of the post instead of its ID. Also, you can display just a post title without a link, post URL, and post thumbnail with callbacks. Learn more in the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/dynamic-field-widget-overview\/#display-post-and-term-titles-links-and-urls\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Display post and term titles, links, and URLs<\/strong><\/a> chapter of the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/dynamic-field-widget-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dynamic Field Widget Overview<\/strong><\/a>.<\/p>\n\n\n\n<div class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"828\" height=\"938\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-property-in-the-listing-template.webp\" alt=\"displaying the booking property in the listing template in the elementor editor\" class=\"wp-image-42868\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-property-in-the-listing-template.webp 828w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-property-in-the-listing-template-265x300.webp 265w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-property-in-the-listing-template-768x870.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-property-in-the-listing-template-600x680.webp 600w\" sizes=\"(max-width: 828px) 100vw, 828px\" \/><\/div>\n\n\n\n<p>Then, we can display the booked dates. Add two <strong>Dynamic Field<\/strong> widgets: one showing the \u201cCheck In Date\u201d option and the other displaying the \u201cCheck Out Date\u201d option. These options contain the check-in and check-out dates in the timestamp format.<\/p>\n\n\n\n<p>To convert the timestamp to a human-readable date, activate the<strong> Filter field output <\/strong>toggle and choose the \u201c<a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/dynamic-field-widget-overview\/#showcase-date-time-and-datetime-meta-fields-value-as-preferred\" target=\"_blank\" rel=\"noreferrer noopener\">Format Date<\/a>\u201d callback. Don\u2019t forget to define the date format according to the <a href=\"https:\/\/wordpress.org\/documentation\/article\/customize-date-and-time-format\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>Customizing the Time and Date Format<\/strong><\/a> documentation.<\/p>\n\n\n\n<div class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"938\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-check-in-and-check-out-dates-in-the-listing-template.webp\" alt=\"displaying the check-in and check-out dates in the listing template in the elementor editor\" class=\"wp-image-42871\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-check-in-and-check-out-dates-in-the-listing-template.webp 900w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-check-in-and-check-out-dates-in-the-listing-template-288x300.webp 288w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-check-in-and-check-out-dates-in-the-listing-template-768x800.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-check-in-and-check-out-dates-in-the-listing-template-600x625.webp 600w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/div>\n\n\n\n<p>You can also display values from the additional <em>JetBookings <\/em>table columns added in the <strong><em>WordPress Dashboard > Bookings > Settings > Tools <\/em><\/strong>tab. For that, add another <strong>Dynamic Field<\/strong> and select the \u201cAdditional column: \u2026\u201d option. For example, in our case, we picked the \u201cAdditional column: guest\u201d <strong>Object Field<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"729\" height=\"938\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/displaying-the-number-of-guests-in-the-listing-template-in-the-elementor-editor.png\" alt=\"displaying the number of guests in the listing template in the elementor editor\" class=\"wp-image-48201\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/displaying-the-number-of-guests-in-the-listing-template-in-the-elementor-editor.png 729w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/displaying-the-number-of-guests-in-the-listing-template-in-the-elementor-editor-233x300.png 233w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/displaying-the-number-of-guests-in-the-listing-template-in-the-elementor-editor-600x772.png 600w\" sizes=\"(max-width: 729px) 100vw, 729px\" \/><\/div>\n\n\n\n<p>The \u201cUser ID\u201d option contains the user ID that can be used to retrieve the default user information.<\/p>\n\n\n\n<p>Add a <strong>Dynamic Field<\/strong>, select the \u201cUser ID\u201d option for the <strong>Object Field<\/strong>, enable the <strong>Filter field output <\/strong>toggle, and set the \u201cGet user data by ID\u201d <strong>Callback<\/strong>. This callback retrieves default user fields by the user ID. Choose any desired option in the <strong>User Data to get <\/strong>drop-down menu.<\/p>\n\n\n\n<div class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"940\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-default-user-information-in-the-listing-template.webp\" alt=\"displaying the default user information in the listing template in the elementor editor\" class=\"wp-image-42872\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-default-user-information-in-the-listing-template.webp 850w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-default-user-information-in-the-listing-template-271x300.webp 271w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-default-user-information-in-the-listing-template-768x849.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-default-user-information-in-the-listing-template-600x664.webp 600w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/div>\n\n\n\n<p>That\u2019s it for the main settings. Experiment with styling to achieve the best design for the listing. Once finished, don\u2019t forget to update the changes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"creating-a-listing-template-in-the-wordpress-block-editor-gutenberg\">Creating a Listing template in the WordPress block editor (Gutenberg)<\/h3>\n\n\n\n<p>Navigate to the <strong><em>WordPress Dashboard > JetEngine > Listings\/Components<\/em><\/strong> tab and press the \u201c<strong>Add New Item<\/strong>\u201d button to add a new template.<\/p>\n\n\n\n<p>For the <strong>Listing source<\/strong>, select \u201cQuery Builder.\u201d Then, pick the custom query created in the previous step and give the listing a name. Lastly, choose \u201cBlocks (Gutenberg)\u201d for the <strong>Listing view <\/strong>if you build the website with the WordPress block editor and click the \u201c<strong>Create Listing Item<\/strong>\u201d button.&nbsp;<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating_listing_for_sql_query_in_gutenberg_2x.png\" alt=\"creating listing for sql query in gutenberg block editor\">\n\n\n\n<p>Now, customize the listing template to display the booked items. You are free to display any column retrieved by the custom query. In our example, we will show the booking ID and status, the linked title of the booked instance, dates, number of guests, and user information using the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/dynamic-field-block-overview\/\"><strong>Dynamic Field<\/strong><\/a> block.<\/p>\n\n\n\n<p>First, drag and drop a <strong>Dynamic Field <\/strong>block into the editing area. Pick a \u201cPost\/Term\/User\/Object Data\u201d in the <strong>SOURCE<\/strong> field. In the <strong>POST OBJECT <\/strong>drop-down menu, scroll down to the <strong>JetBooking <\/strong>section and pick the \u201cBooking ID\u201d option.<\/p>\n\n\n\n<figure class=\"wp-block-image text-center size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"263\" height=\"872\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/displaying-the-booking-ID-in-the-listing-template-in-the-block-editor.png\" alt=\"displaying the booking ID in the listing template in the block editor\" class=\"wp-image-48204\"\/><\/figure>\n\n\n\n<p>To add text to this value, enable the <strong>Customize field output<\/strong> toggle and customize the format area. For example, we typed \u201cBooking ID: %s\u201d into the <strong>Field format<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/customizing-the-output-of-the-booking-ID-in-the-block-editor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/customizing-the-output-of-the-booking-ID-in-the-block-editor.webp\" alt=\"customizing the output of the booking ID in the block editor\" class=\"wp-image-42866\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/customizing-the-output-of-the-booking-ID-in-the-block-editor.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/customizing-the-output-of-the-booking-ID-in-the-block-editor-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/customizing-the-output-of-the-booking-ID-in-the-block-editor-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/customizing-the-output-of-the-booking-ID-in-the-block-editor-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/customizing-the-output-of-the-booking-ID-in-the-block-editor-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/customizing-the-output-of-the-booking-ID-in-the-block-editor-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Now, the listing displays the booking ID. Next, let\u2019s add the booking status.<\/p>\n\n\n\n<p>Add a new <strong>Dynamic Field <\/strong>block or duplicate the existing one. Repeat the above steps to display the \u201cStatus\u201d option and format it as needed.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-status-in-the-listing-template-in-the-block-editor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-status-in-the-listing-template-in-the-block-editor.webp\" alt=\"displaying the booking status in the listing template in the block editor\" class=\"wp-image-42869\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-status-in-the-listing-template-in-the-block-editor.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-status-in-the-listing-template-in-the-block-editor-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-status-in-the-listing-template-in-the-block-editor-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-status-in-the-listing-template-in-the-block-editor-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-status-in-the-listing-template-in-the-block-editor-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-status-in-the-listing-template-in-the-block-editor-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>To display the name of the booked property (post title), add another <strong>Dynamic Field <\/strong>block and select the \u201cBooked Instance ID\u201d option as the <strong>POST OBJECT<\/strong>. The value of this option is the post ID.&nbsp;<\/p>\n\n\n\n<p>To transform it into a linked title, enable the <strong>Filter field output <\/strong>toggle and select the \u201cGet post\/page link\u201d <strong>Callback<\/strong>. This callback formats the value and outputs the name of the post instead of its ID. Also, you can display just a post title without a link, post URL, and post thumbnail with callbacks. Learn more about that in the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/dynamic-field-widget-overview\/#display-post-and-term-titles-links-and-urls\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Display post and term titles, links, and URLs<\/strong><\/a> guide.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-property-in-the-listing-template-in-the-block-editor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-property-in-the-listing-template-in-the-block-editor.webp\" alt=\"displaying the booking property in the listing template in the block editor\" class=\"wp-image-42875\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-property-in-the-listing-template-in-the-block-editor.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-property-in-the-listing-template-in-the-block-editor-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-property-in-the-listing-template-in-the-block-editor-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-property-in-the-listing-template-in-the-block-editor-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-property-in-the-listing-template-in-the-block-editor-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-booking-property-in-the-listing-template-in-the-block-editor-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Then, we can display the booked dates. Add two <strong>Dynamic Field<\/strong> blocks: one showing the \u201cCheck In Date\u201d option and the other displaying the \u201cCheck Out Date\u201d option. These options contain the check-in and check-out dates in a timestamp format.<\/p>\n\n\n\n<p>To format the timestamp as a human-readable date, activate the<strong> Filter field output <\/strong>toggle and choose the \u201c<a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/dynamic-field-widget-overview\/#showcase-date-time-and-datetime-meta-fields-value-as-preferred\" target=\"_blank\" rel=\"noreferrer noopener\">Format Date<\/a>\u201d <strong>Callback<\/strong>. Don\u2019t forget to define the date format according to the <a href=\"https:\/\/wordpress.org\/documentation\/article\/customize-date-and-time-format\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Customizing the Time and Date Format<\/strong><\/a> documentation.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-check-in-and-check-out-dates-in-the-listing-template-in-the-block-editor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-check-in-and-check-out-dates-in-the-listing-template-in-the-block-editor.webp\" alt=\"displaying the check-in and check-out dates in the listing template in the block editor\" class=\"wp-image-42876\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-check-in-and-check-out-dates-in-the-listing-template-in-the-block-editor.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-check-in-and-check-out-dates-in-the-listing-template-in-the-block-editor-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-check-in-and-check-out-dates-in-the-listing-template-in-the-block-editor-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-check-in-and-check-out-dates-in-the-listing-template-in-the-block-editor-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-check-in-and-check-out-dates-in-the-listing-template-in-the-block-editor-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-check-in-and-check-out-dates-in-the-listing-template-in-the-block-editor-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>You can also display values from the additional <em>JetBookings <\/em>table columns added in the <strong><em>WordPress Dashboard > Bookings > Settings > Tools <\/em><\/strong>tab. For that, add another <strong>Dynamic Field<\/strong> and select the \u201cAdditional column: \u2026\u201d option. For example, in our case, we picked the \u201cAdditional column: guest\u201d <strong>POST OBJECT<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image text-center size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"264\" height=\"874\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/displaying-the-number-of-guests-in-the-listing-template-in-the-block-editor.png\" alt=\"displaying the number of guests in the listing template in the block editor\" class=\"wp-image-48203\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/displaying-the-number-of-guests-in-the-listing-template-in-the-block-editor.png 264w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/displaying-the-number-of-guests-in-the-listing-template-in-the-block-editor-91x300.png 91w\" sizes=\"(max-width: 264px) 100vw, 264px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<p>The \u201cUser ID\u201d option contains the user ID that can be transformed into the default user information.<\/p>\n\n\n\n<p>Add a <strong>Dynamic Field<\/strong>, select the \u201cUser ID\u201d option for the <strong>POST OBJECT<\/strong>, enable the <strong>Filter field output <\/strong>toggle, and set the \u201cGet user data by ID\u201d <strong>Callback<\/strong>. This callback retrieves default user fields by the user ID. Choose any desired option in the <strong>User Data to get <\/strong>drop-down menu.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-default-user-information-in-the-listing-template-in-the-block-editor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-default-user-information-in-the-listing-template-in-the-block-editor.webp\" alt=\"displaying the default user information in the listing template in the block editor\" class=\"wp-image-42877\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-default-user-information-in-the-listing-template-in-the-block-editor.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-default-user-information-in-the-listing-template-in-the-block-editor-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-default-user-information-in-the-listing-template-in-the-block-editor-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-default-user-information-in-the-listing-template-in-the-block-editor-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-default-user-information-in-the-listing-template-in-the-block-editor-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/displaying-the-default-user-information-in-the-listing-template-in-the-block-editor-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>That\u2019s it for the main settings. To style the blocks, use the free <a href=\"https:\/\/crocoblock.com\/plugins\/jetstylemanager\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetStyleManager<\/em><\/a> plugin. Once finished, don\u2019t forget to update the changes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"display-the-booked-items-listing-on-the-account-page\">Display the Booked Items Listing on the Account Page<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>The last part of our work is to display the created listing on the user&#8217;s <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-user-account-page\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Account<\/strong><\/a> page set with the <em>JetEngine<\/em> <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-user-profile-builder-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Profile Builder<\/strong><\/a> feature. We will create a new subpage template and place the <strong>Listing Grid <\/strong>widget or block inside.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"showing-the-listing-in-elementor\">Showing the listing in Elementor<\/h3>\n\n\n\n<p>Firstly, create a new \u201cPage\u201d template in the <strong><em>WordPress Dashboard > Templates > Add New <\/em><\/strong>tab under <strong>Elementor<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-a-new-page-template-in-elementor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-a-new-page-template-in-elementor.webp\" alt=\"creating a new page template in elementor\" class=\"wp-image-42874\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-a-new-page-template-in-elementor.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-a-new-page-template-in-elementor-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-a-new-page-template-in-elementor-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-a-new-page-template-in-elementor-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-a-new-page-template-in-elementor-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-a-new-page-template-in-elementor-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>This template will display the account subpage with the list of booked items.\u00a0<\/p>\n\n\n\n<p>In the Elementor editor, find the <strong>Listing Grid <\/strong>widget and place it on the template. Choose the <strong>Listing <\/strong>option created previously.<\/p>\n\n\n\n<p>These settings are enough to display the current user\u2019s bookings as a listing. To adjust the rest of the settings, check the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-listing-grid-widget-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Listing Grid Widget Overview<\/strong><\/a>.\u00a0<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/listing-grid-widget-in-the-page-elementor-template.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/listing-grid-widget-in-the-page-elementor-template.webp\" alt=\"listing grid widget in the page elementor template\" class=\"wp-image-42879\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/listing-grid-widget-in-the-page-elementor-template.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/listing-grid-widget-in-the-page-elementor-template-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/listing-grid-widget-in-the-page-elementor-template-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/listing-grid-widget-in-the-page-elementor-template-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/listing-grid-widget-in-the-page-elementor-template-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/listing-grid-widget-in-the-page-elementor-template-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Once done with the styling, hit the \u201c<strong>Publish\/Update<\/strong>\u201d button to save the changes and return to the WordPress Dashboard.&nbsp;<\/p>\n\n\n\n<p>Now, apply the created template in the <strong>Profile Builder<\/strong>. Navigate to the <strong><em>JetEngine &gt; Profile Builder &gt; Account Page <\/em><\/strong>tab and click the \u201c<strong>Add New Subpage<\/strong>\u201d<strong> <\/strong>button to add a new subpage for users\u2019 bookings.&nbsp;<\/p>\n\n\n\n<p>Give a title to this subpage and attach the template created previously. Click the \u201c<strong>Save<\/strong>\u201d<strong> <\/strong>button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-my-bookings-subpage-in-profile-builder.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-my-bookings-subpage-in-profile-builder.webp\" alt=\"creating my bookings subpage in the profile builder\" class=\"wp-image-42881\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-my-bookings-subpage-in-profile-builder.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-my-bookings-subpage-in-profile-builder-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-my-bookings-subpage-in-profile-builder-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-my-bookings-subpage-in-profile-builder-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-my-bookings-subpage-in-profile-builder-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-my-bookings-subpage-in-profile-builder-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Finally, it is time to check the result. Open the Account page on the front end, proceed to the \u201cMy Bookings\u201d subpage, and check if your bookings are displayed.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/viewing-bookings-on-the-account-page.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/viewing-bookings-on-the-account-page.webp\" alt=\"viewing bookings on the account page\" class=\"wp-image-42885\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/viewing-bookings-on-the-account-page.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/viewing-bookings-on-the-account-page-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/viewing-bookings-on-the-account-page-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/viewing-bookings-on-the-account-page-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/viewing-bookings-on-the-account-page-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/viewing-bookings-on-the-account-page-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"building-the-listing-in-block-editor-gutenberg\">Building the listing in Block Editor (Gutenberg)<\/h3>\n\n\n\n<p>We will put the <strong>Listing Grid <\/strong>block inside the <strong>Listing<\/strong> template<strong> <\/strong>for users and attach the new <strong>Listing <\/strong>template to an <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-user-account-page\/#create-the-account-subpages\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Account subpage<\/strong><\/a> of the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-user-profile-builder-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Profile Builder<\/strong><\/a><strong>.&nbsp;<\/strong><\/p>\n\n\n\n<p>Navigate to the <strong><em>JetEngine &gt; Listings <\/em><\/strong>tab<strong><em> <\/em><\/strong>and hit the \u201c<strong>Add New<\/strong>\u201d button.&nbsp;<\/p>\n\n\n\n<p>In the <strong>Setup Listing Item<\/strong> pop-up, choose \u201cUsers\u201d as the <strong>Listing source<\/strong>, give a name to the listing, and select \u201cBlocks (Gutenberg)\u201d in the <strong>Listing view <\/strong>drop-down list. Press the \u201c<strong>Create Listing Item<\/strong>\u201d<strong> <\/strong>button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-user-listing-template-in-gutenberg.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-user-listing-template-in-gutenberg.webp\" alt=\"creating user listing template in Gutenberg\" class=\"wp-image-42882\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-user-listing-template-in-gutenberg.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-user-listing-template-in-gutenberg-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-user-listing-template-in-gutenberg-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-user-listing-template-in-gutenberg-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-user-listing-template-in-gutenberg-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-user-listing-template-in-gutenberg-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>This template will be responsible for displaying the account subpage with the list of booked items.&nbsp;<\/p>\n\n\n\n<p>Once the editor is opened, find the <strong>Listing Grid <\/strong>block and place it on the template. Choose the <strong>Listing <\/strong>option created beforehand.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/listing-grid-block-in-the-listing-template.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/listing-grid-block-in-the-listing-template.webp\" alt=\"listing grid block in the listing template\" class=\"wp-image-42883\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/listing-grid-block-in-the-listing-template.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/listing-grid-block-in-the-listing-template-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/listing-grid-block-in-the-listing-template-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/listing-grid-block-in-the-listing-template-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/listing-grid-block-in-the-listing-template-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/listing-grid-block-in-the-listing-template-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>These settings are enough to display the current user\u2019s bookings as a listing. To adjust the remaining settings, check the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-listing-grid-block-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Listing Grid Block Overview<\/strong><\/a>.\u00a0<\/p>\n\n\n\n<p>Once done, hit the \u201c<strong>Publish\/Update<\/strong>\u201d button to save the changes and return to the WordPress Dashboard.&nbsp;<\/p>\n\n\n\n<p>Now, it is time to apply the created template in the <strong>Profile Builder<\/strong>. Navigate to the <strong><em>JetEngine &gt; Profile Builder &gt; Account Page <\/em><\/strong>tab and click the \u201c<strong>Add New Subpage<\/strong>\u201d<strong> <\/strong>button to add a new subpage for users\u2019 bookings.<\/p>\n\n\n\n<p>Give a title to this subpage and attach the listing template for users created previously. Click the \u201c<strong>Save<\/strong>\u201d<strong> <\/strong>button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-my-bookings-subpage-in-profile-builder-with-gutenberg-listing.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-my-bookings-subpage-in-profile-builder-with-gutenberg-listing.webp\" alt=\"creating my bookings subpage in profile builder with Gutenberg listing\" class=\"wp-image-42880\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-my-bookings-subpage-in-profile-builder-with-gutenberg-listing.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-my-bookings-subpage-in-profile-builder-with-gutenberg-listing-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-my-bookings-subpage-in-profile-builder-with-gutenberg-listing-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-my-bookings-subpage-in-profile-builder-with-gutenberg-listing-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-my-bookings-subpage-in-profile-builder-with-gutenberg-listing-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/creating-my-bookings-subpage-in-profile-builder-with-gutenberg-listing-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Ultimately, it is time to check the result. Check out the Account page to see the created bookings.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/viewing-created-bookings-on-the-account-page.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/viewing-created-bookings-on-the-account-page.webp\" alt=\"viewing created bookings on the account page\" class=\"wp-image-42886\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/viewing-created-bookings-on-the-account-page.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/viewing-created-bookings-on-the-account-page-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/viewing-created-bookings-on-the-account-page-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/viewing-created-bookings-on-the-account-page-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/viewing-created-bookings-on-the-account-page-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/04\/viewing-created-bookings-on-the-account-page-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<p>That\u2019s it; now you know how to display booked items on the Users Account page with the help of the <em>JetBooking<\/em> and <em>JetEngine<\/em> plugins on your WordPress website.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Display bookings made by the current user on the user account page created with JetEngine.<\/p>\n","protected":false},"author":8,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[448,402],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Display Bookings on the User Account Page \u2013 JetBooking | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to display bookings made by the current user on their account page using Elementor or WordPress block editor in cooperation with the 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\/how-to-display-booked-items-on-the-users-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display Bookings on the User Account Page \u2013 JetBooking | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to display bookings made by the current user on their account page using Elementor or WordPress block editor in cooperation with the JetBooking plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-display-booked-items-on-the-users-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-10T12:51:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/jetbooking-query-setting-for-the-user-account-page.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=\"14 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\/how-to-display-booked-items-on-the-users-page\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-display-booked-items-on-the-users-page\/\",\"name\":\"How to Display Bookings on the User Account Page \u2013 JetBooking | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2025-06-16T08:25:43+00:00\",\"dateModified\":\"2025-10-10T12:51:03+00:00\",\"description\":\"Learn how to display bookings made by the current user on their account page using Elementor or WordPress block editor in cooperation with the JetBooking plugin.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-display-booked-items-on-the-users-page\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-display-booked-items-on-the-users-page\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-display-booked-items-on-the-users-page\/#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 Booked Items on the User Account Page\"}]},{\"@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 Bookings on the User Account Page \u2013 JetBooking | Crocoblock","description":"Learn how to display bookings made by the current user on their account page using Elementor or WordPress block editor in cooperation with the 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\/how-to-display-booked-items-on-the-users-page\/","og_locale":"en_US","og_type":"article","og_title":"How to Display Bookings on the User Account Page \u2013 JetBooking | Crocoblock","og_description":"Learn how to display bookings made by the current user on their account page using Elementor or WordPress block editor in cooperation with the JetBooking plugin.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-display-booked-items-on-the-users-page\/","og_site_name":"Help Center","article_modified_time":"2025-10-10T12:51:03+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/06\/jetbooking-query-setting-for-the-user-account-page.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-display-booked-items-on-the-users-page\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-display-booked-items-on-the-users-page\/","name":"How to Display Bookings on the User Account Page \u2013 JetBooking | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2025-06-16T08:25:43+00:00","dateModified":"2025-10-10T12:51:03+00:00","description":"Learn how to display bookings made by the current user on their account page using Elementor or WordPress block editor in cooperation with the JetBooking plugin.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-display-booked-items-on-the-users-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-display-booked-items-on-the-users-page\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-display-booked-items-on-the-users-page\/#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 Booked Items on the User Account Page"}]},{"@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\/39050"}],"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\/8"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=39050"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=39050"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=39050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}