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.
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
- How to Create a Single Product Page Template with the JetThemeCore Plugin
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.
2 Step — Create a Template
Proceed to the Crocoblock > Woo Page Builder tab and click the “Create New Template” button.
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.
After that, click the “Create Template” button to open the Elementor editing page.
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.
Create a single template using the JetWooBuilder widgets and Elementor widgets board. Users can style the JetWooBuilder widgets (i.e., the Single Title, Single Images, Single Add to Cart, Single Meta, etc.). Drag and drop the widgets you need to display information about your product.
For instance, the Single Add to Cart widget displays the “Add To Cart” button with the link to the Cart page and allows customizing this button by the Style tab settings. The Show View Cart Link toggle shows/hides the link to the Cart page using the AJAX add-to-cart method.
Afterward, click the “Publish” button to avoid losing 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Select the previously created template from the Template Library. As shown below, you can add to the page either JetWooBuilder or JetThemeCore templates.
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.
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.
If we view the product that is excluded from the page template condition, we’ll see the default theme layout.
That’s all. Now you know how to create a single product template with the JetWooBuilder and JetThemeCore plugins.