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 Tabs | Tags (Archive) | Cart Empty Message |
Single Title | Stock Status (Archive) | Cart Table |
Categories Grid | Sale Badge (Archive) | Cart Cross Sells |
Product Grid | Rating (Archive) | Checkout Payment |
Product List | Price (Archive) | Checkout Coupon Form |
Taxonomy Tiles | Excerpt (Archive) | Checkout Order Review |
Single Sharing | Categories (Archive) | Checkout Billing |
Single Add to Cart | Add to Cart (Archive) | Checkout Shipping Form |
Single Attributes | Title (Archive Category) | Checkout Login Form |
Single Content | Thumbnail (Archive Category) | Checkout Additional Form |
Single Excerpt | Description (Archive Category) | Thank You Order |
Single Images | Count (Archive Category) | Thank Order Details |
Single Meta | Products Result Count (Shop) | Thank You Customer Address Details |
Single Price | Products Pagination (Shop) | My Account Logout |
Single Rating | Page Title (Shop) | My Account Dashboard |
Single Related Products | Product Ordering (Shop) | My Account Registration Form |
Single Review Form | Products Notices (Shop) | My Account Login Form |
Single Sale Badge | Products Navigation (Shop) | My Account Address |
Single Upsells | Products Loop (Shop) | My Account Order |
Title (Archive) | Cart Return to Shop | My Account Downloads |
Thumbnail (Archive) | Cart Totals | My 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.