How to Use JetWooBuilder

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 category page
  • Product archive 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.

  • Categories Grid
  • Products List
  • Products Grid
  • Taxonomy Tiles
  • Single Add to Cart
  • Single Attributes
  • Single Content
  • Single Excerpt
  • Single Images
  • Single Meta
  • Single Price
  • Single Rating
  • Single Related Products
  • Single Reviews Form
  • Single Sale Badge
  • Single Sharing
  • Single Tabs
  • Single Title
  • Single Upsells

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 WooCoomerce -> Jet Woo Templates.

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 Jet Woo Builder 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 WooCommerce -> Jet Woo Templates. 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 Jet Woo Builder 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 WooCommerce -> Jet Woo Templates. 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 Jet Woo Builder 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 WooCommerce -> Jet Woo Templates 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 Jet Woo Builder 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 $19 per year. Alternatively, you can get this plugin with a one-time purchase option on the Jupiter X or Monstroid2 theme bundle.

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

Share This

Share This

Share this post with your friends!