JetWooBuilder for Elementor | WooCommerce Plugin Overview

hey what's up everyone kate from crocodblock is here and welcome to this new video we did read your comments and as we can see you really enjoyed the recent format of the jet plug-in overview videos and that is why today i'd like to go over one really amazing plugin that i could say is actually essential for creating woocommerce online stores from scratch the jetpor builder plugin it actually got recently updated to the new version and it's got some super cool functionality in it that you will see in a bit but before we get started go ahead and hit that subscribe and like button below this video to not miss interesting and handy tutorials and also to stay tuned for the live conversations and live broadcasts with our team members and not only so guys let's go ahead and hop into the dashboard to start exploring the jetwa builder plugin [Music] what a jetboil builder plugin is and why is it so necessary for your wordpress projects first of all i'd like to mention that jetboil builder is a plugin that works in conjunction with elementor page builder and of course woocommerce an open source ecommerce platform it's been created to widen the possibilities of building online stores from scratch and it will give you the opportunity to create customizable templates that will pull the product data to the front end using multiple dynamic content widgets but before you start creating the actual templates and customizing your store you surely need to configure the woocommerce settings create default woocommerce pages and add and manage your products within the woocommerce plugin if you don't know how to do this please feel free to check out the description underneath this video where i'll share the links to the woocommerce documentation once the above mentioned procedures are done then you are ready to start working with the chat will builder plugin so let's check out what options do we have under the jet will builder settings block let's go to the chat plugins jet will builder settings here we can see three tabs available widgets products thumb effect and misc available widgets tab has got nine sections of different widgets combined for various needs here's the place where you can disable or enable the widgets according to your preferences one of the cool things is that these widgets all of them won't get you confused in the elementor page builder because they will be displayed according to the type of the template being used so for example if you're working on the archive category template you will see only these widgets in the page builder or if you're creating a single product template then you will be able to implement all your super creative ideas using these 15 widgets to display the info accordingly now such widgets as categories create products list products grid and taxonomy tiles are global widgets and can also be used when editing pages as well as elementor templates not specifically woocommerce so these widgets themselves are pretty comprehensive and will surely be using them when creating new templates that's why let's proceed to the second tab product thumb effect here's the place where you can choose different effects for product thumbnails simply enable this option and decide which effect out of six options available to apply on hover and the last tab misc is also pretty simple but very useful why because nowadays there are tons of styles created in templates rewritten within the popular themes that they might distort the widget's display so once this option is enabled it will automatically add our styles from the plugin that will help to render all the widgets more consistently in the browsers okay guys these settings are now set up and good to go but we also have a jetwa builder tab in the woocommerce settings with some additional and very important options let's follow to woocommerce settings jet will builder tab so here's the place where you can assign the templates that you'll create with chatbot builder to the exact woocommerce pages first and most important is widgets render method if you're planning on creating your custom templates in elementor page builder then this option has to be set to elementor default then underneath this option you'll see eight sections related to the types of templates shop page single product archive product archive category card checkout thank you page my account page yes guys you got it right right now we will be creating all of them together and then assigning them to proper pages so if you haven't done this yet go ahead and put this video on pause and get yourself some tea or coffee water or whatever because it's gonna be a long one so right now we're going to be creating our first jetbo builder template and i think it will be good to start with the single product template so let's follow two jet plugins jetboil templates and click on add new template here in the drop-down section we'll leave this option single selected now let's enter the name of the template let it be single product and pick the premade layout if you like after that click create template button as you can see here we already have a bunch of info nicely pulled into the stylish layout that by the way is actually fully editable it's been created with the help of single product widgets such as single images single title single meta single price single add to cart and so on and if you simply type the word single into the widget search panel you'll see all available widgets to choose from and of course you can easily add or remove widgets to your liking also if you see that some of the widgets like this one single rating are grayed out don't worry it means that this particular value of the product is not filled out yet so once a user submits a review for this product on the front end it will surely appear in the page builder as well but if you see the same kind of issue with other widgets please check your product settings in the dashboard and make sure that this info is not missing there because as you know widgets are made to pull the info from the dashboard to the front end and if there is nothing to pull then you get the gray box so right now give me a few minutes please cause i'd like to quickly change the layout a bit so it's not overloaded with the info and looks a bit nicer [Music] also right here we have a single related products widget what it does it actually showcases the products that share the same tags or categories as the current product which is pretty good right but i'd like to add another widget here the single upsells widget why because this one will display the products that we recommend and that might be interesting to the customers as you can see the layout of this widget is pretty limited but what is cool that we can actually create an archive template for the upsells products and build the layout just the way we want and need this is what we're gonna do right after we assign our single product template to the page so let's update the template and proceed to the dashboard go to woocommerce settings jetwa builder tab and in the single product section tick enable custom single product template and choose the template that we just created instead of the default one great and don't forget to save the changes right here at the bottom of the page now since we already started talking about the upsells products let's create a template for them as well if you don't need this option in your store go ahead and click on the timestamp in the description to proceed with the next step and to those of you who stays with me let's proceed to chat plugins jetwa templates and again click on add new template in the drop down menu select the option archive give the name to the template pick the layout and click create template button so again here we have a lot of info that i would say is not really necessary in case of showing the product preview so give me a few minutes please to rearrange it a bit okay that's better simple but stylish let's save the changes and go back to the dashboard to assign this template go to woocommerce settings jet will builder tab and in the archive product section tick enable custom archive product and choose the template for related and upsells products don't forget to save the changes good and right now we can open our single product template one more time just to check and see how the layout of the upsells products widget has been changed looks pretty nice right so guys we already created two templates single product and upsells products thanks to the last one we already started working with the archive templates that actually help us to customize the outlook of the products that are shown in the store that is why right now i'd like to suggest creating two more archive product templates why two you will find out in a bit so let's add a new template in the drop down menu select the option archive give the name to the template let it be archive product template grid pick the layout and click create template button and again i'll remove tags widget and restyle the other ones a little bit so they match my website design okay now it looks the way i need and all i have to do is set the quantity of columns to show click on the cogwheel open template settings enable custom column count and set it to three now save the changes and go back to the dashboard to create the second archive product template so add new template archive give the name archive product template list pick the layout and click create template button [Music] this layout will be in the form of a list that is why it has to be displayed in one column click on the cogwheel open template settings enable custom columns count and set it to 1. save the changes and go to the woocommerce settings block to assign one of the templates to the archive product template great and save the changes right now we are ready to create the shop template the procedure here is pretty much the same click on add new select shop from the drop down give a name shop template this time i'll not use the layout but you're totally welcome to use it if you want and click create template button first i'll add a two column section and add filters to it if you don't know how to work with chessmart filters don't hesitate to check out our jetsmart filters tutorials playlist on the youtube channel [Music] okay so now we have a couple of options to choose from if we open chatbot builder tab in the elementor panel we'll see our global widgets products create widget products list widget products loop widget if you want the products to be displayed in the form of a grid then go ahead and drag the product's grid widget to the canvas in the widget's content settings you have the opportunity to customize it according to your preferences select one of the 10 presets available adjust the column's number query the products decide what elements of the product items to show or hide and set up the carousel options just try it out yourself and see how amazing this widget is now if you want to display the products in the form of a list then drop the products list widget to the canvas here again you have a variety of options available you can change the layout query the products set the product number and decide what elements to show or hide for both of the above mentioned widgets you have tons of styling options to choose from so don't limit yourself and take bold imaginative decisions and the last but not the least let's check out our products loop widget this widget displays the products according to the custom archive product template the one that we just created here we have one really great feature that has been added to the chatbot builder plugin in the recent update the switcher option once this option is enabled you have the opportunity to set two layouts within one widget here we can choose the main and the secondary templates set the icons and change the labels and just as usually right here we have a bunch of styling settings for you to use but if you want to change the layout itself please do this in the archive product template so let's save the changes and assign the shop template to the shop page in the woocommerce settings first don't forget to tick enable custom shop page and save the changes i know you already want to see what we have on the front end but be patient we'll get there soon in any online store or the internet you probably have seen stylish and nicely fit categories of the products available so right now let's go ahead and create a category template to place it right on the home page so that our customers can easily access the groups of products that they would like to see click on add new template select category from the list give a name to the template choose the layout you'd like to start from and click create template button i think this template fits me just fine i'll just remove the column with the count widget and adjust the styling a little bit now let's click on publish and go back to the woocommerce settings in the archive category section tick enable custom archive category and choose the template we just created save the changes and proceed to the home page of the website click on pages and edit the home page with elementor here in the jetboil builder tab we have our global widgets available categories grid products list products grid and taxonomy tiles and i'd like to show you how we can display our product categories in a simple and neat way first we surely can use categories grid widget simply place it onto the canvas and here you'll see all different options to chest you can select the category preset set the quantity of columns make them equal and adjust the gaps set the number of categories hide the elements you don't need like uncategorized for example adjust the size of the image and so on and you can even set up the carousel to make the section of the page more interactive this option is good but it doesn't give us that much opportunities to play with the layout so that is why i'd like to show you another way of displaying the categories let's remove this widget and go back to the elementor widgets panel here we have another widget taxonomy tiles let's drop it onto the canvas and see what options do we have there so first it gives us the opportunity to select different layouts and it even shows us the little previous of them so we can have the idea what it's gonna look like which is really useful i'll choose this one i don't want to show the count and i do want to make the title a bit bigger so i'll go for the h4 also i'll set the min height to 600 and the main box width 245. we can show either tags but as you can see it doesn't really look that attractive or categories and that's what we need i'll enable the hide uncategorized option and disable show count as you can see these pictures on the right don't really look that nice so i'll change these media files in the dashboard to do that i'll go to products categories and added man's and women's collections here's where we can pick a different thumbnail and also apply a custom template for the category as well so once the customer clicks on the category he will be redirected to the custom shop page yes guys you can create multiple shop pages and apply them to different terms i'll not do that today but you have this opportunity okay let's click update and repeat this procedure with another category good we can close this window update the home page in elementor refresh the page and there we go looks much better now since we already started editing our homepage i'd like to show you another useful option that will help you to display the products using custom product shortcode templates shirt codes can be used to insert content inside posts and pages and i'll drop the link to the list of shirt codes included with woocommerce in the description so i'd like to showcase the featured products right on the homepage to draw the customers attention to them firstly let's create the template for the shortcode layout click on add new template select archive give it a name choose the layout and click create and again i'll change the style of the template a little bit [Music] good let's publish the template and design it in the woocommerce settings and save the changes good right now we can open our home page with elementor one more time and place a shortcode widget to it over here i'll simply enter the following shortcode where the product limit stands for the quantity of products shown columns surely stands for the number of columns and visibility set to featured displays only featured products let's update the changes and check out the front end so as you can see now these featured products are shown just the way we designed them in the template here we can also see our categories that we designed recently and once we click on any category it will bring us to the custom shop page with the nice little switcher and if i click on the product itself it will bring us to our single product page looks pretty nice okay guys i hope you're doing fine so far and are not confused with the workflow i just want to remind you that if you have any questions please don't hesitate to contact our support team because they will be more than glad to assist you so what we did to this point were pretty much the options that you are already familiar with and right now we'll move on to the new functionality brought to you in the jetboil builder 1.7.0 version let's create another two templates for the card why two because we need one for the card with the products and another one for the empty card so let's click on add new template select card from the list give a name to the template and click create now let's open the jet will builder tab and see what widgets we can use for building our cart first of all we can place the card table widget to the canvas and as you can see here we have two options available style and advanced in the style tab you can customize the widget to your tastes in needs so just go ahead and try it out yourself and in the advanced tab just as usual you can adjust all available options to you after that let's add a new to column section and add card return to shop widget and card totals widget now let's click publish and create another one for the empty card so the procedure is the same click on add new template select card from the list give it a name and click create firstly i'll add a heading widget with the shopping cart sign now i'll add another two-column section and open the jetboil builder tab in the elementor panel i'll place the card empty message widget to the column on the left and the card return to shop widget to the column on the right again the styling settings are right here at your service so i'd advise you to spend some time and style these widgets to the bits click publish and go back to the woocommerce jetboil builder settings to enable custom card option and assign both card templates to the corresponding fields click save changes button and go back to the card template yes guys i didn't close this window and told you to go back to the card template on purpose because right here underneath the card totals widget i'd like to add another widget card cross sells this one is kind of like the upsells widget but it promotes the products based on the current product in the card this widget like the upsells widget is using the template to display the products in their own way so let's go back to our jetwa templates and create one for the cross cells as well click on add new template what do we have to select right here correct archive give a name to the template pick the layout and click create to not waste much time on styling i will paste the same section as we have in the upsells template but you can surely make it look different according to your design preferences let's click publish and apply the template in the woocommerce settings and guys what else do we have to do here yes save the changes so since we already built the card templates let's create the templates for the checkout page and yes i'm not mistaken here we'll also need two templates to be created let's start with the first one the actual checkout template with all the billing shipping order and payment info click on add new template button select checkout from the list give it a name and click create template button let's open the jetpor builder tab in the alimeter panel to see what widgets are available for our use let's add the checkout billing form widget first then let's go for the checkout shipping form widget now let's add checkout additional form widget just in case the customer wants to add some info then we'll surely need the checkout order review which is and the last one will be the checkout payment widget so i'm gonna use this simple layout but guys you're totally welcome to create more complex layouts with different combinations of widgets and multiple columns according to your design just one important thing i'd like to mention please combine the widgets together appropriately what i mean by that is do not place the checkout coupon form and the checkout login form widget together with the billing and shipping and other form widgets because these two forms are somewhat separate and they have to be used in a different template we'll create it in a minute and once we're done with all the templates i'll show you how it works on the front end so one more time billing shipping order review and payment as well as additional form can be used together in the same template coupon and login forms can be used together as well but on the separate template okay so all these widgets give you the opportunity to adjust the styling settings of different parts of the forms like headings labels and inputs you get to change the typography and color text alignment and margin along with some other styling options right now let's save the changes and go back to the dashboard to create the second checkout template so click on add new template pick checkout give it a name and click on create template button enter the word checkout in the search field and place the checkout coupon form widget to the canvas here as you can see you have the opportunity to adjust the style settings of the message form input and button one more time let's search for the checkout and place the checkout login form widget underneath here you can customize the message form label input and button as well so now let's save the changes and go back to the woocommerce jetbook builder settings to enable custom checkout option apply these templates to corresponding fields and save the changes once a customer purchases the product he is redirected to a thank you page where he can review the order details billing and shipping addresses entered previously along with the other purchase details so let's create a template for the thank you page and customize it to fit the website's design click on add new template select thank you from the list give it a name and click create template button firstly let's add a heading with the sign thank you good now let's add a thank you order widget then underneath place the thank you customer address details and after that thank you order details just as in the previous widgets their style settings can be changed the headings content and details can be customized to your desire so once done save the changes and apply the template to the appropriate page in the woocommerce jetbook builder settings just don't forget to tick enable custom thank you page and save the changes one more time okay guys we already created so many templates and our online store is almost ready right now let's create two my account templates one for the actual account of the logged in customer and another one for the login register forms for the customers who are not signed in or not registered yet so let's click add new template choose my account from the list give it a name and click create i plan on making a pretty simple template to not waste much time on it i'll add a new column section and place two heading widgets there as well as my account order widget then i'll add another two-column section duplicate the heading widget twice and place it in both columns and after that i'll put my account details widget on the left and my account addresses on the right as you can see here we have a couple of other widgets at your service so you can experiment with their combination as well one thing i would recommend is leaving the my account login form and my account registration form for another separate template that will be shown to non-registered customers so let's create one right now click on add new template choose my account give it a name and click create add a to column section and place both widgets my account login form and my account registration form into the columns publish the template and go back to the woocommerce jetboil builder settings to assign them to my account page tick enable custom my account page save the changes and we're almost ready to go we did a great job today guys we just created almost everything that we need and also assigned it appropriately in the woocommerce jetbook builder settings there's only one thing that is missing and it's search page template of course it is optional but i'd like to show you how it works so you get the idea i promise you this will be the last template for today so let's click on add new select the option archive give it a name pick the layout and click create template button just so you know guys i think these pre-made layouts are simply amazing yes they are default but they are fully editable so you can easily change it to your liking and not to waste much time on thinking how you need to arrange all the product info i'll enable custom columns count in the template settings and set it to 2. now let's save the template and go to the woocommerce jetbook builder settings to apply it right here and what do we need to always remember yep saving the changes so guys i've got some really good news for you we're finally down with creating the jetwood templates who was attentive enough and knows how many of them we created during this video just drop this number in the comments and let me know which templates do you find the most useful for your ecommerce project that you're working on right now okay lastly what i want to do is to add a few widgets to the header to give our customers the possibility to first access their account then open card and of course search for the products fast and with no problems let's go to jet plugins theme builder and open the header template with elementor add three additional columns to the header on the right good right now let's search for the search widget and place it right into the first column and please make sure to enable is product search option because if not it simply won't work with the woocommerce products now let's search for the auth links widget and place it into the second column as you can see it looks a bit strange due to the fact that our column is pretty small in width but it's okay first let's paste the urls into the login link tab register link and registered link tabs right now i'll also remove the prefixes and link texts as well i'll only leave the register link text to be shown good and lastly i'll add a woocommerce shopping cart widget to the last column here i'll remove the label upload my custom svg icon disable card subtotal and remove the drop down label as well okay croco people we're officially done for today are you ready to check out our front end and do some shopping so here's our homepage off the website with the search login register and card widgets in the header let's log in first to start exploring our website so once logged in we can see our account page with the orders address details and account details that we can update now let's go back to the home page and right here as you can see we have our featured products pulled out in a nice looking shortcode product layout and over here we have the categories and once i click on the women's collection it brings me to the shop page with our pretty cool product loop widget with its amazing switcher option we can view the products in grid and in list layouts with no problem let's check out this product cool now it brought us to the single product page where we can check out the detailed info leave a review and of course add the product to the cart and over here at the bottom we can see the upsells products grouped in a nice custom layout let's add this one to the cart great as you can see over here the product has been added to the card automatically so let's view the card and after that proceed to the checkout remember our two checkout templates this message have a coupon is from the checkout top template and everything else at the bottom is the regular checkout template with the billing details shipping additional info order and payment options let's place the order there we go it brought us to the thank you page where we can review the order and check other details and now i want to show you one last thing let's search for the belt for example so if we have a custom shop template enabled it will bring us there with all the search results but if for some reason we don't want to use the custom shop template let's disable it in the settings okay and let's search for the belt one more time as you can see it brought us to the default shop page but it displays the products according to the search product template the last one we created so that's pretty much it for today thank you so much for watching this video i hope it was useful and informative for you and your projects let me know in the comments right below this video what you think about the new possibilities of the jetwa builder plugin and also just as usual don't hesitate to ask your questions if you have any or contact our support team so they could assist you join our friendly facebook community and share your ideas with us on our github page cheers guys

Channel: Crocoblock

Views: 68,314

Keywords: Crocoblock, crocoblock elementor, crocoblock woocommerce, crocoblock tutorial, crocoblock plugin, crocoblock youtube, woobuilder elementor, jetwoobuilder, woocommerce shop page woocommerce product page, woocommerce shop page template, woocommerce product page template, woocommerce single product page, jetwoobuilder product loop, woocommerce product loop template, elementor custom product loop, woocommerce grid products, checkout template woocommerce, crocoblock checkout page

Id: iR1_5psyqME

Length: 41min 56sec (2516 seconds)

Published: Mon Sep 28 2020