{"id":49486,"date":"2025-09-16T11:42:43","date_gmt":"2025-09-16T11:42:43","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=49486"},"modified":"2025-11-14T14:06:00","modified_gmt":"2025-11-14T14:06:00","slug":"how-to-create-custom-woocommerce-single-product-page-with-jetengine","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-create-custom-woocommerce-single-product-page-with-jetengine\/","title":{"rendered":"How to Create a Custom WooCommerce Single Product Page with JetEngine"},"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 JetEngine <\/em>WordPress plugin. This layout lets you display detailed booking information and interactive forms tailored to each product. <\/p>\n\n\n\n

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

In this tutorial, we will show you how to set up a Single Product Page<\/strong> template using the JetThemeCore <\/em>plugin. <\/p>\n\n\n\n

So, navigate to WordPress Dashboard > Crocoblock > Theme Builder <\/em><\/strong>> scroll down to the \u201cSingle Product<\/strong>\u201d section, and click the \u201cplus<\/strong>\u201d icon.<\/p>\n\n\n\n

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

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

Choose \u201cInclude\u201d, \u201cWooCommerce\u201d, and the \u201cSingle Product\u201d options in the drop-downs. In the \u201cSelect\u201d field type \u201cAll\u201d.<\/p>\n\n\n\n

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

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

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

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

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

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

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

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

Let\u2019s take a closer look at how we display information about the service. <\/p>\n\n\n\n

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

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

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

To display the product\u2019s price, the Dynamic Field<\/strong> widget can also be used. Keep the \u201cPost\/Term\/User\/Object\u201d option for the Source<\/strong>. In the Object Field<\/strong> dropdown, select the \u201cPlain Regular Price\u201d option from the WooCommerce <\/strong>section. <\/p>\n\n\n\n

\"displaying<\/a><\/div>\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

In the same way, we can display other WooCommerce <\/em>fields, such as \u201cStock Status\u201d and \u201cSKU\u201d. <\/p>\n\n\n\n

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

To display custom meta fields<\/strong><\/a> from the product, add another Dynamic Field<\/strong> widget. <\/p>\n\n\n\n

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

\"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 utilized the Heading<\/strong> widget with the Dynamic Tag<\/strong> to input the \u201cProduct description\u201d.\u00a0<\/p>\n\n\n\n

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

Now, let\u2019s add the post\u2019s thumbnail using the Dynamic Image<\/strong><\/a> widget. By default, the “Post thumbnail” is chosen as a Source. If you need to display the thumbnail, keep the settings as they are. To display an image from the custom meta field, click the dropdown and select the field name you need.\u00a0<\/p>\n\n\n\n

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

To display the categories of the products, the Dynamic Terms<\/strong><\/a> widget can be used. We also added custom text to the Text before terms list<\/strong> input. <\/p>\n\n\n\n

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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