How to Use JetWooBuilder

Updated: March 20, 2021

When creating an online store with WooCommerce, you can use any WordPress theme, but the look of your store might don’t like the one you expected. If you use a free theme, you typically have not many options to customize your store. JetWooBuilder is a plugin that allows you to customize your store, no matter the theme you use. It is especially a great plugin if you are the sort of WordPress user who has no coding skills. With JetWooBuilder, you can customize every single part of your store without touching a single line of code.

JetWooBuilder is an Elementor add-on so all of the customization processes are done via the visual editor of Elementor where everything is drag and drop. In this post, we will show you how to use JetWooBuilder to customize your WooCoomerce-based online store.

How to use JetWooBuilder to customize your WooCommerce-based store

A short intro before we get started. JetWooBuilder is a premium Elementor add-on designed specifically for WooCommerce. It is a member of the JetPlugins, a set of Elementor add-ons developed by Crocoblock.

JetWooBuilder allows you to customize the following parts of your WooCommerce store:

  • Single product page
  • Shop page
  • Product archive pages (categories and tags)
  • Checkout page
  • Cart page
  • Success page
  • Customer account page

You can create a custom template for your store parts above. You can then use the custom template you have created to replace the default parts above. JetWooBuilder comes with several premade templates to save you time in creating a custom template. You can add any element (widget) you want to the custom template you create. After installing and activating JetWooBuilder, you will have a section (JET WOO BUILDER) on the left panel of the Elementor editor that consists of the following widgets.

Single TabsTags (Archive)Cart Empty Message
Single TitleStock Status (Archive)Cart Table
Categories GridSale Badge (Archive)Cart Cross Sells
Product GridRating (Archive)Checkout Payment
Product ListPrice (Archive)Checkout Coupon Form
Taxonomy TilesExcerpt (Archive)Checkout Order Review
Single SharingCategories (Archive)Checkout Billing
Single Add to CartAdd to Cart (Archive)Checkout Shipping Form
Single AttributesTitle (Archive Category)Checkout Login Form
Single ContentThumbnail (Archive Category)Checkout Additional Form
Single ExcerptDescription (Archive Category)Thank You Order
Single ImagesCount (Archive Category)Thank Order Details
Single MetaProducts Result Count (Shop)Thank You Customer Address Details
Single PriceProducts Pagination (Shop)My Account Logout
Single RatingPage Title (Shop)My Account Dashboard
Single Related ProductsProduct Ordering (Shop)My Account Registration Form
Single Review FormProducts Notices (Shop)My Account Login Form
Single Sale BadgeProducts Navigation (Shop)My Account Address
Single UpsellsProducts Loop (Shop)My Account Order
Title (Archive)Cart Return to ShopMy Account Downloads
Thumbnail (Archive)Cart TotalsMy Account Details

Apart from the widgets above, you can add other Elementor widgets to the custom template you are working on according to your needs.

JetWooBuilder is a flexible enough add-on. You can disable the widgets you don’t need via the JetWooBuilder Settings page (JetPlugins -> JetWooBuilder Settings)

1. How to create a custom single product page in WooCommerce with JetWooBuilder

As we mentioned earlier, there are four main parts you can customize with JetWooBuilder: single product page, shop page, product category page, and product archive page. You can customize them by creating a template for each part and apply it via the WooCommerce Settings page.

There are two ways to create a template for a store part. First, you can create a template from scratch. Second, you can create a template from a premade template. In this article, we will demonstrate how to create a template for each store part from a premade template.

Let’s start from the single product page. Assuming you have installed JetWooBuilder and Elementor, go to Crocoblock -> Woo Page Builder.

Click the Add New Template button on the top side, give your template a name, select a premade template (layout), and click the Create Template button.

Once the template is loaded to the Elemetor canvas, you can customize each widget on the Style tab on the left panel. But first, you need to click the widget handle to turn the widget into an editing mode.

If you want to add a new widget, simply drag the widget you want to add from the left panel to the canvas area. To remove a widget, right-click the widget you want to remove and select Delete.

Once you are done creating the template, click the PUBLISH button on the left panel to publish your template.

To use the custom product template you have just created, first, go to WooCommerce -> Settings. Open the JetWooBuilder tab and tick the Enable custom single product page option on the Single Product section and select the template from the dropdown menu. Click the Save changes button on the bottom.

By now, you will have an option to select a custom product template every time you are adding a new product. You can find it on the lower side on the left panel.

You can create another custom product template if you want to use a different product template for certain products.

2. How to create a custom shop product page in WooCommerce with JetWooBuilder

After installing WooCommerce on your WordPress site, you will have a new shop page (yourdomain.com/shop). You can also create a custom template with JetWooBuilder to replace the default shop page offered by your theme.

Go to Crocoblock -> Woo Page Builder. Click the Add New Template button on the top side, select Shop on the This template for section, give your template a name, select a premade template, and click the Create Template button.

Once the template is loaded to the Elementor canvas, you can go to the Style tab on the left panel to customize each widget. Click the widget handle to turn the widget you want to customize into an editing mode. You can add new widgets or remove the existing ones to your liking. Click the PUBLISH button once you are done customizing the widgets.

To use the custom shop page template you have just created above, go to WooCommerce -> Settings. Open the JetWooBuilder tab, tick the Enable custom shop page option on the Shop Page section, and select the template you have just created from the dropdown menu. Click the Save changes button on the bottom.

3. How to create a custom product category page in WooCommerce with JetWooBuilder

To create a custom product category page template, go to Crocoblock -> Woo Page Builder. Click the Add New Template button on the top side, select Category on the This template for section, give your template a name, select a premade template, and click the Create Template button.

Again, you can go to the Style tab on the left panel to customize each widget once the template is loaded to the canvas. Add the widgets you want and remove the unneeded widgets. Once done, click the PUBLISH button to publish your template.

To use the custom product category page template you have just created above, go WooCommerce -> Settings. Open the JetWooBuilder tab and scroll down to the Archive Category section. Tick the Enable custom archive category option, select the custom product category page template you have just created from the dropdown menu and click the Save changes button on the bottom.

4. How to create a custom product archive page in WooCommerce with JetWooBuilder

Same as other parts above, you can go to Crocoblock -> Woo Page Builder to create a custom product archive page. Click the Add New Template button, set to Archive on the This template for section, give your template a name, select a premade template you like, and click the Create Template button.

Again, you can go to the left panel to customize each widget. You can add more elements if you want. Before clicking the PUBLISH button to publish your template, you can set the template columns. To do so, click the gear icon on the bottom-left corner on the left panel, open the Template Settings option and enable the Use custom columns count option and then set the template columns.

To use the custom product archive template you have just created above, go to WooCommerce -> Settings. Open the JetWooBuilder tab, scroll down to the Archive Product section, tick the Enable custom archive product option, and select the template from the dropdown menu. Click the Save changes button.

That’s it. See, you can customize your WooCommerce store without coding. You can play around to explore more about JetWooBuilder.

A little note when working with JetWooBuilder, especially when creating a custom single product page template. Make sure you already have at least one product in order to be able to see the live preview of every change you make on the customizing/styling process. Also make sure to add the key attributes like price, product image, and stock to your products.

Where to get JetWooBuilder?

We have explained at length about JetWooBuilder, but haven’t mentioned where you can get it. You can download this plugin on its official site at $24 per year.

Original posted on: February 24, 2020

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Support Us

Consider subscribing to help us grow. Get the regular articles about page builder plugins and WordPress in general.