{"id":49034,"date":"2025-08-11T13:57:49","date_gmt":"2025-08-11T13:57:49","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=49034"},"modified":"2025-11-14T13:38:33","modified_gmt":"2025-11-14T13:38:33","slug":"creating-custom-single-page-for-woocommerce-based-booking","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/creating-custom-single-page-for-woocommerce-based-booking\/","title":{"rendered":"How to Create a Custom Single Product Page for WooCommerce-Based Booking"},"content":{"rendered":"\n

This tutorial focuses on creating a custom Single Product page for the WooCommerce<\/em><\/a>-based booking for JetBooking <\/em>using the JetWooBuilder <\/em>and JetProductGallery <\/em>WordPress plugins. This layout lets you display detailed booking information and interactive forms tailored to each product.<\/p>\n\n\n\n

Enable the Single Product Widgets<\/h2>\n\n\n\n
\n

Once you set up the WooCommerce-based Mode Booking<\/strong><\/a> on your site, the Single Product Page Template<\/strong><\/a> should be created using the JetWooBuilder <\/em>plugin.<\/p>\n\n\n\n

If you are using a builder other than Elementor, you can also modify the JetWooBuilder <\/em>template using alternative<\/span> methods.<\/p>\n\n\n\n

Go to WordPress Dashboard > Crocoblock > JetPlugins Settings > JetWooBuilder > Widgets<\/em><\/strong>, scroll to the Single Product Widgets<\/strong> block, and enable the widgets you will use while creating a Single Product<\/strong> template.<\/p>\n\n\n\n

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

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

So, navigate to WordPress Dashboard > Crocoblock > Woo Page Builder ><\/em><\/strong> click the \u201cCreate New Template<\/strong>\u201d button.<\/p>\n\n\n\n

In the newly appeared pop-up, select the \u201cSingle\u201d option for the This Template For <\/strong>field and enter the name of the template. Additionally, you can select the layout preset. Otherwise, you can set the template up from scratch.<\/p>\n\n\n\n

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

In this tutorial, we select layout #one and click the \u201cCreate Template<\/strong>\u201d button. <\/p>\n\n\n\n

Let\u2019s have a closer look at the widgets used to display the product data. <\/p>\n\n\n\n

To display the title of the product, add the Single Title<\/strong><\/a> widget.<\/p>\n\n\n\n

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

Use the Single Images<\/strong><\/a> widget to display the product\u2019s thumbnail.<\/p>\n\n\n\n

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

To display the product\u2019s price, you can add the Single Price<\/strong><\/a> widget.<\/p>\n\n\n\n

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

For all default data types\u2014such as excerpt, terms, rating, price, and more\u2014there are corresponding default widgets like Single Excerpt<\/strong><\/a>, Single Meta<\/strong><\/a>, and Single Rating<\/strong><\/a>. <\/p>\n\n\n\n

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

Additionally, WooCommerce <\/em>allows you to add the product to the Cart <\/strong>before actually buying it. In this case, the Single Add to Cart<\/strong><\/a> widget is needed.\u00a0<\/p>\n\n\n\n

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

If you need to add some additional meta fields<\/a>, like from the Meta Boxes<\/strong><\/a>, you can do it with the Dynamic Widgets<\/strong><\/a> from JetEngine<\/em><\/a>. <\/p>\n\n\n\n

For example, to display the additional information, we use the Dynamic Field<\/strong><\/a> widget.<\/p>\n\n\n\n

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

If y<\/span>ou have a gallery you need to display, you can use the\u00a0JetProductGallery\u00a0widgets, for example, by\u00a0using the Anchor Navigation<\/strong><\/a> widget. Here you can add images manually, use the WooCommerce <\/em>gallery, or add the images through the Dynamic Tag<\/strong><\/a>.\u00a0<\/p>\n\n\n\n

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

Alternatively, the Ga<\/strong><\/a>llery <\/a><\/strong>Grid<\/strong><\/a> widget can be used.<\/p>\n\n\n\n

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

If you are looking for an unusual style, consider using the Gallery Modern<\/strong><\/a> widget.<\/p>\n\n\n\n

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

To display the gallery as a slider, you can use the Gallery Slider<\/strong><\/a> widget.<\/p>\n\n\n\n

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

Once you are ready with the settings, click the \u201cPublish<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n

Assign the template to WooCommerce<\/h2>\n\n\n\n
\n

Go back to the WordPress Dashboard > WooCommerce > Settings submenu<\/em><\/strong>. Select the JetWooBuilder <\/strong>tab and scroll to the Single Product<\/strong> section to set a particular template for all products.<\/p>\n\n\n\n

Tick the Enable custom product single page<\/strong> option and select a template you have recently created in the Single Product Template <\/strong>dropdown.<\/p>\n\n\n\n

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

Scroll down and click the \u201cSave changes<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n

Check the Result<\/h2>\n\n\n\n
\n

Proceed to the front end and check how products look with the newly created Single Template.<\/p>\n\n\n\n

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

That\u2019s it. Now you know how to create a custom Single Product page for the WooCommerce<\/em>-based booking for JetBooking <\/em>using the JetWooBuilder <\/em>and JetProductGallery <\/em>WordPress plugins.<\/p>\n","protected":false},"excerpt":{"rendered":"

Discover how to create a Custom Single Page for WooCommerce-Based Booking for the WordPress JetBooking plugin with the help of the JetWooBuilder and JetProductGallery plugins. <\/p>\n","protected":false},"author":20,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[581],"yoast_head":"\nHow to Create a Custom Single Product Page for WooCommerce-Based Booking \u2014 JetBooking | Crocoblock<\/title>\n<meta name=\"description\" content=\"Discover how to create a Custom Single Page for WooCommerce-Based Booking for the WordPress JetBooking plugin with the help of the JetWooBuilder and JetProductGallery plugins.\" \/>\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\/creating-custom-single-page-for-woocommerce-based-booking\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Custom Single Product Page for WooCommerce-Based Booking \u2014 JetBooking | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Discover how to create a Custom Single Page for WooCommerce-Based Booking for the WordPress JetBooking plugin with the help of the JetWooBuilder and JetProductGallery plugins.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/creating-custom-single-page-for-woocommerce-based-booking\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-14T13:38:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/single-product-widgets-enabled-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=\"6 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\/creating-custom-single-page-for-woocommerce-based-booking\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/creating-custom-single-page-for-woocommerce-based-booking\/\",\"name\":\"How to Create a Custom Single Product Page for WooCommerce-Based Booking \u2014 JetBooking | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2025-08-11T13:57:49+00:00\",\"dateModified\":\"2025-11-14T13:38:33+00:00\",\"description\":\"Discover how to create a Custom Single Page for WooCommerce-Based Booking for the WordPress JetBooking plugin with the help of the JetWooBuilder and JetProductGallery plugins.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/creating-custom-single-page-for-woocommerce-based-booking\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/creating-custom-single-page-for-woocommerce-based-booking\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/creating-custom-single-page-for-woocommerce-based-booking\/#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 Create a Custom Single Product Page for WooCommerce-Based Booking\"}]},{\"@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 Create a Custom Single Product Page for WooCommerce-Based Booking \u2014 JetBooking | Crocoblock","description":"Discover how to create a Custom Single Page for WooCommerce-Based Booking for the WordPress JetBooking plugin with the help of the JetWooBuilder and JetProductGallery plugins.","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\/creating-custom-single-page-for-woocommerce-based-booking\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Custom Single Product Page for WooCommerce-Based Booking \u2014 JetBooking | Crocoblock","og_description":"Discover how to create a Custom Single Page for WooCommerce-Based Booking for the WordPress JetBooking plugin with the help of the JetWooBuilder and JetProductGallery plugins.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/creating-custom-single-page-for-woocommerce-based-booking\/","og_site_name":"Help Center","article_modified_time":"2025-11-14T13:38:33+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/single-product-widgets-enabled-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/creating-custom-single-page-for-woocommerce-based-booking\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/creating-custom-single-page-for-woocommerce-based-booking\/","name":"How to Create a Custom Single Product Page for WooCommerce-Based Booking \u2014 JetBooking | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2025-08-11T13:57:49+00:00","dateModified":"2025-11-14T13:38:33+00:00","description":"Discover how to create a Custom Single Page for WooCommerce-Based Booking for the WordPress JetBooking plugin with the help of the JetWooBuilder and JetProductGallery plugins.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/creating-custom-single-page-for-woocommerce-based-booking\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/creating-custom-single-page-for-woocommerce-based-booking\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/creating-custom-single-page-for-woocommerce-based-booking\/#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 Create a Custom Single Product Page for WooCommerce-Based Booking"}]},{"@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\/49034"}],"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=49034"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=49034"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=49034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}