Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

JetWooBuilder: How to Create a Single Product Page Template

This step-by-step tutorial will take you through creating a single product template for WooCommerce products using the JetWooBuilder plugin and a page template with a header and footer using the JetThemeCore plugin functionality.


Tutorial requirements:

  • JetWooBuilder plugin;
  • WooCommerce plugin;
  • Elementor editor free version;
  • JetThemeCore at least 2.0.1 version (not required, only if you want to create a page with header and footer).

The JetWooBuilder plugin allows representing the WooCommerce products and customizing the template without coding. Also, it offers easy-to-use widgets for stylish single product template creation.

single template layout preset

For the single product template, that’s enough to have the JetWooBuilder plugin, but if you want to create a page template with a header, body, and footer, JetThemeCore is required.

How to Create a Single Product Template with the JetWooBuilder Plugin

1 Step — Enable the Single Product Widgets

Go to WordPress Dashboard > Crocoblock > JetPlugins Settings > JetWooBuilder > Widgets, scroll to the Single Product Widgets block, and enable the widgets you will use while creating a Single Product template.

single product widgets

2 Step — Create a Template

Proceed to the Crocoblock > Woo Page Builder tab and click the “Create New Template” button.

jetwoobuilder templates

Select the “Single” option in the pop-up window and provide it with a title. You can create a template from scratch or choose a layout in the Start from Layout section if you don’t know where to start.

single product template creation

After that, click the “Create Template” button to open the Elementor editing page.

NOTE!
The pre-designed templates already contain the widgets needed for displaying the WooCommerce products, but in case the product doesn’t have all the required values, some of the widgets might be displayed incorrectly. Please, make sure you’ve added all the needed information to your WooCommerce products before you start creating a new Single Product page template.
jetwoobuilder widgets in the single product template

Create a single template using the JetWooBuilder widgets and Elementor widgets board. Drag and drop the widgets you need to display information about your product, such as Single Title, Single Images, Single Add to Cart, Single Meta, etc.

Afterward, click the “Publish” button in order not to lose the changes.

3 Step — Assign the Template to WooCommerce

Go back to the WordPress Dashboard and open the WooCommerce > Settings submenu. Select the JetWooBuilder tab, and scroll to the Single Product section to set a particular template for all products.

Tick the Enable custom product single page option and select a template you have recently created in the Single Product Template dropdown.

WooCommerce settings

Don’t forget to click the “Save changes” button at the very bottom of the page.

Proceed to the front end and check how products look with the newly created Single Template.

WooCommerce product on the front end

How to Create a Single Product Page Template with the JetThemeCore Plugin

The JetThemeCore is the WordPress builder for the Elementor and Gutenberg editor, with the help of which you can create a page template with a header, footer, and the JetWooBuilder template as a body.

1 Step — Enable the Single Product Widgets

Go to WordPress Dashboard > Crocoblock > JetPlugins Settings > JetWooBuilder > Widgets, scroll to the Single Product Widgets block, and enable the widgets you will use while creating a Single Product template.

single product widgets

2 Step — Create a Template

You can create a template with the help of the JetWooBuilder plugin, as we described in the first part of the tutorial, or via the JetThemeCore, as shown below.

Move to the WordPress Dashboard > Crocoblock > Theme Templates tab and hit the “Add New” button.

theme parts

In the appeared pop-up, select the “Single Product” Template Type, choose the “Elementor” Template Content Type, and enter the Template Name. Then, press the “Create Template” button.

create a template

Fill the single template with the content using the JetWooBuilder widgets and Elementor widgets panel. Drag and drop the widgets you need to display information about your product, such as Single Title, Single Images, Single Add to Cart, Single Meta, etc.

single product template created with jetthemecore

When you finish, push the “Publish/Update” button.

3 Step — Create a Page Template

Go to the Crocoblock > Theme Builder tab, and click the “Create new page template” button.

theme builder

In the pop-up, hit the “Add Condition” button, and choose the “Include,” “WooCommerce,” and “Single Product” options. In the last field, you may select the “All” option to attach the page template to all products or pick several products separately.

theme builder condition

You can also add one more condition and exclude some products. For that, choose the “Exclude,” “WooCommerce,” and “Single Product,” and in the last window, select the names of the products.

exclude condition

Proceed to this tutorial if you want to know more about the template conditions. For instance, you can create dedicated templates for different devices, user roles, and requests.

When you’re done, click the “Create” button.

In the newly created page template, click on the “Add body” button. As you can see, you can create a brand new template for the page or add the existing one. Now, hit the “Add from library” button.

page template

Select the previously created template from the Template Library. As shown below, you can add to the page either JetWooBuilder or JetThemeCore templates.

template library

Then, add a header and footer from the library or create new ones. In that case, we have dedicated tutorials about header and footer creation.

page template with header body and footer
NOTE!
You shouldn’t attach the Single Product Page template to the WooCommerce settings, because you have already set the condition.

Proceed to the front end and check how products look with the newly created Single Page template.

single product page template with a header on the front end

If we view the product that is excluded from the page template condition, we’ll see the default theme layout.

product with the default theme layout

That’s all. Now you know how to create a single product template with the JetWooBuilder and JetThemeCore plugins.