Search
Close this search box.

How to Use JetWooBuilder

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 the plugin, you can customize every single part of your store without touching a single line of code.

To use JetWooBuilder, you need to have Elementor installed on your website since it is technically an Elementor add-on. 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.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2013. He is responsible of all content published on this website. Learn more
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.