WooCommerce is a popular WordPress plugin to create an online store. You can use it whether to create an online store to sell physical products, digital products, or even affiliate products. Same as WordPress, every single part of WooCommerce is also customizable, including the single product page. The look of the single product page of WooCommerce depends on the WordPress theme you use. As mentioned, you can customize it if there are elements you want to add or remove. JetWooBuilder is a great plugin that you can use to customize your WooCommerce store.

Not only you can use JetWooBuilder to create a custom single product template, but you can also use it to create a custom category page, custom archive page, and custom shop page. JetWooBuilder itself is an Elementor add-on so the customization process is done via Elementor visual editor. No need to deal with any single line of code.

After creating a single product template with JetWooBuilder, you will have an option which template you want to use every time you are adding a new product.

Is it possible to apply the custom template to all of the existing products (site-wide)? Of course. You will have a new tab on the WooCommerce settings page that hosts template usage settings.

How to use JetWooBuilder to create a custom single product page in WooCommerce

First and foremost, you definitely need to install JetWooBuilder first. JetWooBuilder itself is a paid plugin. It costs only $19 per year. If you hate the subscription-based payment model, you can also get JetWooBuilder with a one-time purchase option on WordPress themes like Jupiter X and Monstroid2.

Since JetWooBuilder is technically an Elementor add-on, you also need to install Elementor. You can use the free version of Elementor to create a custom single product page with JetWooBuilder. Here are the widgets you can use to create a custom single product page with JetWooBuilder.

• Single Add to Cart: To add the Add to Cart button
• Single Attributes: To display the attributes of the product
• Single Content: To display the product content (content written on the WordPress editor)
• Single Excerpt: To display the product description
• Single Images: To display the product images
• Single Meta: To display the product meta (SKU, categories, tags)
• Single Price: To display the product price
• Single Rating: To display the product rating
• Single Related Products: To display related products
• Single Reviews Form: To enable the product reviews form
• Single Sale Badge: To display the sale badge
• Single Tabs: To display the product description and product reviews in tabs
• Single Title: To display the product title

A crucial thing to note: You need to have at least one existing product before you start to create a single product page with JetWooBuilder. Also, make sure to add the key attributes like price, product, and stock to your products. Otherwise, you won’t be able to see the live preview of the changes you made during the customization process since the attributes won’t be loaded to the Elementor editor (including the Add to Cart button).

JetWooBuilder offers 8 ready-to-use single product templates. You can use one of these templates to save you time in creating the custom single product template.

To get started, go to WooCommerce -> Jet Woo Templates. Click the Add New Template button.

Since you want to create a single product template, select Single on the This template for: section. Give your template a name and select one of the available templates. If you want to create the product template from scratch, simply click the Create Template button without selecting a template. In this example, we create the single product template from scratch.

Create a new section by clicking the plus button on the Elementor canvas. There are 12 column structures you can choose from. Select a structure according to what you want to add. For instance — if you want to add the product image on the left column and the product price, product meta, product description, add to cart button on the right column — you can select the two-column structure.

Add the elements you want to add to the columns on the canvas area. You can find the JetWooBuilder widgets on JET WOO BUILDER section on the left panel.

Customizing the elements

You can customize each element (widget) by going to the left panel of the Elementor editor. You can apply the styles like background color, text color, margin, and so on under the Style tab on the left panel. But first, you need to turn the widget you want to customize into an editing mode by clicking the widget handle.

You can play around with the left panel to style every widget until you get satisfied with its look. You can add more sections to host more widgets. Once you are done, click the PUBLISH button to publish your custom single post template.

Using the published template

Once your custom single product template is published, you can start using it. But first, you need to enable the option to use the custom single product page. To do so, go to WooCommerce -> Settings and open the Jet Woo Builder tab. Scroll down to the Single Product section and tick the Enable custom single product page option.

If you want to apply the custom single product template you have just created to all of the existing products, you can select your custom product template from the dropdown menu. Just don’t forget to click the Save Changes button to apply the new changes.

While you can apply your custom single product page to all products on your website, JetWooBuilder also allows you to use another custom single product page for certain products. You can simply create a new custom single product page to do so and select a different custom single product template every time you add a new product. You can find the option to select a custom single product template on the lower right side on WordPress editor.

The bottom line

JetWooBuilder is a great plugin if you have a WooCommerce-based online store. This plugin allows you to create a custom single product template as well as a custom category page, a custom archive page, and a custom shop page. No coding skill is required since JetWooBuilder is an Elementor add-on. You can create a custom single product page via Elementor visual editor. There are ready-to-use single product templates to save you time.

A little note about JetWooBuilder. The product images might don’t appear after you add the Single Images widget to the canvas area. It is might is a bug. You can try to reload the page in order for the images to be loaded on the canvas.