Crocoblock WooCommerce with JetWooBuilder & Elementor

if you're looking for a starter guide to using jet will builder from croco block then this video should be right up your street i'll show you the basics of the key features and by the time you've gone through each of the sections you should have a solid understanding of the core concepts and features needed to build your own custom woocommerce store as always there will be full timestamps for each of the sections in the description below and links to everything that i cover okay if you're ready let's get started by taking a look at what we've been working on and then what tools we'll be using to get everything up and running a quick disclaimer before we do though this tutorial does assume you are familiar with the basics of wordpress woocommerce and elementor if that isn't the case i would suggest taking a look at some of the beginner's guides on the channel to get you up to speed and then you can come back to this tutorial and really get stuck in okay so let's just take a look now at the key pages that we're going to be building throughout this tutorial we'll be creating a custom home page where we can jump through to the various different sections all this is fully customized going to take us through to custom archive pages to display filtered records you can see we have a custom browser latest editions which will show the latest products added if we run through to a different section you can see we have a custom template inside here with filters down the side we can clearly take a look at a product and we've customized this section as well including the related products layout we've also got a customized cart and checkout pages so we can customize all of these different elements there are several basic things i want to cover before we start building as these are pretty important to this whole tutorial as always if you want to skip past these and get straight into the first part building the site you can use the timestamps in the description to jump around as and when you need to so let's kick things off with a quick look at the plugins we'll be using in today's video first off we have elementor the free version we do not need pro installed to be able to do any of this so i'm not installing pro just go with the free version jet search and jet smart filters this just gives us the ability to enhance our jet will builder store by including filters searches and so on it's just a much better way especially if you have a larger store obviously you don't have to use these to get your store up and running so we'll only briefly cover those to show you how you can integrate them into the design then we have jet woo builder for elementor which is the core of this entire tutorial and that's what we're going to be focusing on today and finally we have to have woocommerce installed because well it is a woocommerce based plug-in and tutorial next up we've got the jet will builder settings to get those we come to croco block and we come into jet plug-in settings inside there once you've got jet will build it installed we'll have a new entry we can select that and inside there we've got the general settings which is where we've got some basic options we can configure like the thumbnail effects and so on we're going to leave those as they are for now i'm going to go to widgets and inside there are all the different widgets we can choose to enable or disable inside the elementor editor i'm going to leave everything set up inside here but if there are certain features you're not going to use it makes sense to just disable those just to streamline the actual elementor editor interface a little bit so we're going to leave those set as they are there we are going to go back to the general settings and we're going to enable the enable woocommerce page template styles once we've done that we are good to go now the final thing i want to show you is something we're going to be going back to a lot throughout this tutorial so i just want to give you a quick overview of what it is and why it's so important to the whole process of using jet will builder to build your woocommerce stores we're going to go to woocommerce and into settings and you can see we've got a tab at the end called jet woo builder if we enable that you can see this now has a lot of different options and this is where we can tell woocommerce and wordpress what templates to use if we want to override those default woocommerce templates so for example if we create an archive category by default it will fall back and only use the standard woocommerce template for that however if we want to change it we can enable it and we can choose the template we want to use after we've created it so we will be coming back and forth this section a heck of a lot throughout this tutorial an e-commerce website's homepage is probably one of the most important sections and jet will build that gives us loads of great tools to be able to build it in an almost endless fashion now i'll keep this section pretty straight forward it should give you a solid insight into just how easy it is to build something truly unique for yourself so let's just take a quick look at what we're starting off with so this is the home page and as you can see other than a header and footer there's nothing on there if we go to the shop page you'll see we have just the default woocommerce setup nothing custom in there whatsoever other than maybe some of the colors which you set that was part of elementor theme styles my account it's just the standard my account page and so on same goes for the cart same goes for the checkout they're all standard we've done nothing to them so now that we see what we're starting with let's start building out the key things that we need to work with we're going to start with the home page first of all now the reason we're going to start with the home page is because this allows me to show you and ease you into how we can use various different widgets before we move on to creating templates as i said if this isn't something that interests you then there are full time stamps in the section below so you can jump around to whichever part you want however if you're interested to find out how to create a more customized homepage stick around because i'll show you how to do that right now okay so let's just come into our pages and add a new page in from there we're just going to bypass this and we're just going to give this a title of home page we'll publish this and we'll have a basic blank page ready for us so let's edit with elementor and then we can start building the things that we wanted so the first thing you want to do is get rid of this annoying title that we have at the top that's easy to do we come to the settings in the bottom left and we just say hide the title and that's now gone let's add in a new single row column section and we're going to kind of put a nice big header section in here with a lot of color just to really draw your attention to everything that's going on so the first thing you want to do is select this and we're going to come into our style section we're going to add our image in choose background and we're going to come into classic and from there we're going to choose our image now i've already uploaded some images but obviously you'd have different ones for your website so we're going to choose this nice bright yellow image and insert that into our page okay so that's put that inside there we now need to just configure this so we're gonna come over to the style tab making sure that we've got the background option open and we're gonna set up we're gonna set this to be center center we're gonna set attachment we need that as default repeat we don't want any repeat on here and we're going to set this to be cover okay so you can see we're still not really seeing much going on there so we need to do is come back to layout and from layout we can set a minimum height and we can adjust that and we're going to set this to 800 pixels and there we go we now have a much larger image and finally i want to give this a bit more interest at the bottom of the image so we're going to come to style down to shape divider and set that to be the bottom and then we're going to change this over and we're going to just choose pyramids that just kind of gives a bit more interest and obviously if you want to adjust this you can't easily adjust it so for example i might think the 800 is a little too big while i can easily adjust that to taste so we'll leave it a set somewhere around there okay so that's our header section in place the next thing i want to do is put another section that allows people to jump to the various different categories that we have as part of our store or at least some of those categories this is really easy to do now with jet woocommerce or jetblue builder i should say so we're going to do is we're going to come back and we're going to go and do a search for taxonomy and you can see we have a widget called taxonomy titles drag that onto our page and this gives us the ability now to control exactly what goes on there so i'm going to select this section add a bit of space inside there we're going to set 50 pixels top and bottom and now we can set this up so we've got a range of options for layout we can see i can edit and change these and get exactly what i want the layout style that i kind of fancy so i'm going to go for this particular layout now you can see we've got some blank entries inside there and it doesn't really look that good at the moment so we can configure all of this we have lots and lots of different options we're going to set the height on this because at the moment it looks a little small so i'm going to increase that and you can see as i do we now get a much nicer looking layout so we'll set that to somewhere around 500 and we can see we can adjust the size of the main box so if you want that to be your key focus category inside your store you could do that by adjusting this very easily i'm going to set that back to about 50 and then we can see we have the option to say what do we want to show do you want to show categories or tags up to you you could create a tag and you could set that to be featured category and then you could use that to filter things and show only those inside here there's lots of different ways in which you could utilize this particular widget we're going to say hide empty so we don't have any empty categories which would look a little bit odd gonna say hide and categorized and you can see we've got show by id so if i wanted to exclude specific taxonomies or specific tags and so on i could do that inside you i'm gonna leave it as it is for now just so it's quick and easy but you can obviously get stuck into this and have a play about yourself we'll disable the count because i don't want to see that on there and then you can see we can adjust things like the title max width description length and so on if we're using those if we go to the styles tab we can now configure the look and feel of all of this so suggest the gap in between we'll set that to somewhere around 10. we're going to apply a border if you want to border radiuses you can get as creative as you want inside here what you do now is set the vertical alignment to bottom so that will push the text down to the bottom and then if i want to i can adjust all those kinds of options now the moment this looks okay but the text doesn't really stand out and there's a few issues we need to rectify very easy to do that we've got the options for the box overlay we're going to set a box overlay on this we're going to just change this and we're going to choose a color now you can still use global colors as part of the theme styles that you can build as part of elementor free and pro so you can choose this and we can just put in any colors from there so i'm going to set this for the background color and you can see that makes it totally dark and you can't see a single thing so we can come back in and we can adjust the opacity of that to get that to whatever kind of setting that we want that looks pretty good it gives us some separation now okay we can adjust this then on the background as well so on the hover effect we can come in and we can select that same color and we can just make it a little darker so let's choose that global footer background color and just adjust the opacity on there and now you can see when we mouse over we get a slight darkening effect obviously you could go the opposite way you could make it totally light if you wanted to entirely up to you how you want to configure this so i set that back there that looks pretty good okay come back to this area and we'll adjust that a little bit more make it a little less transparent there we go okay so that's setting up those colors we still need to address the text as you can see still doesn't stand out very well to do that we simply come down to the content area and inside there we now have full control of the text the typography colors all those kinds of things so we're going to do is you can see it we can scroll down until we find description we've got product count and we've got title and so on so title is what we want to focus on right now to set our color inside there we'll set that to be white you see that now immediately shows we can change our typography and again we can reference any of those global options we can say we'll set this to be primary so that'll put in the primary font styling but we'll make that a little larger so we say we will bump that up to something like 28 actually maybe 26 around there 24 looks good if you want to adjust the spacing on the letters or the weight of the actual text itself you can do all that so you can see now we have a nice way of seeing various different categories as part of our site so our home page is getting somewhere now so next up i want to put a new section in that's going to show the latest additions to our store a great way of promoting the new things that you add but you can get as creative as you want with this you can set up queries you can filter things however you want there's a lot of options available first thing you want to do is come back to our widgets and we're going to drop a heading section inside here and we're just going to give this the title of browse our latest additions we'll set our font styling on there and we'll just say we want this to be global typography we'll set that to our primary and we'll choose our color set as primary as well again if you want to you can adjust the size of this to taste let's set that to about 28 and we'll adjust the weight on there make it just a little bit finer there we go so now we want to show our product grid so we're going to do is come back to our widgets and do a search for product and we have product list and product grid we're going to choose the product grid for this example we're going to drop that underneath our title and you can see that now just pulls in a range of different design options now we have full control over how this looks and we can even customize the template that will be used for each of these different sections so that's pretty cool we can get as creative as we want now in this video i'm not going to get into every single aspect of jet will build it because there are huge amounts but if you'd like to see a more advanced tutorial after you've seen something like this let me know in the comment section below and if enough people are interested in a more advanced tutorial i'll be happy to take a look at creating something for that but like i say let's just take a look now how we can start to customize the aspects of this so we choose this on the left hand side we have lots of different options we have different presets we can use so we can pull in different preset layouts if we want to and you can see they are just various different things but we have full control over this ourselves if we want to we can change the number of columns we'll set this to four which is what we're going to use as part of the site layout and you can see then we can control various different things so equal column heights and so on so we're going to set a few of these up and again it's worthwhile taking your time to experiment with these to see exactly what they look like and get the results that you want product number three we're going to set this to be eight i want to show eight of our most recent products on there and then we have the query option so if you want to you can query this by lots of different things so featured sale category specific ids and so on so there's various different ways you can use this widget in different parts of your site you could have a recently viewed section in your footer or on the right or left-hand columns you could have specific categories tags sale items and so on so you can get as creative as you want with this particular widget then you can exclude products by id and again this is just another way of filtering data and excluding things you don't want as part of this particular section on your site we've got ordering options and we've got the order itself descending or sending so order by date that's what we want to use on your because this is going to be our recent products and you can set descending or ascending depending upon what you want now then let's just tidy up what we have because at the moment it just looks a little bit of a mishmash so we need to just refine this a little better if we scroll down we can now start to look at the things we can enable and disable so your things like prog status your stock status and so on if you're managing stock product excerpts so we don't want that on this we're going to take that off you can see we've got categories and so on so we disable the categories disable the tags we just want to show the actual name of the item and the price disable any add to cart options as well if you wanted to you could set this as a carousel and if you chose the carousel you'd have different options there to configure that how you want okay so now i've got the information that i want on there i just now need to refine the styling in this because the text doesn't look particularly good and in keeping with the style that we have let's switch to the style tab and now we can configure all of the different aspects now obviously if we're not using something styling it is kind of a moot point there's no point in doing it but you can do things like your product item your thumbnail your title and so on so let's just choose our title and we can then style that to make sure that is in keeping with our color scheme and so on to typography we're going to change that and you can change it on an individual basis or you can use your custom options so we're going to set this to be primary again see that now picks up our styling i'm going to change our color and we're going to use our global colors on there as well so we're going to just choose this primary option which gives this dark blue we can then come down to our price which is the only other item that we have on here and we can do exactly the same thing so we're going to do is we're going to change that typography using our global option we'll set that to be secondary we'll adjust the size on this as well to make it a little smaller because it's picking up the default value which is 14 we'll set that to 12 in this example and you can also do anything else you want if you have regular and sale items you can control those independently of each other so it's very easy to see how this is done text decoration for your regular your sale all those kinds of things so you can see underline if you want to you can have nothing on there or we can stick with the line through option if you want to change the colors you can do that as well so you can change the global colors or an individual color so you can go through and you can style this exactly how you want one other thing i want to do is at the moment i want to bring this price and just bring it a little closer to the name of the product itself so we've got our margin option so i can unlink that and what i can do now is i can adjust the top on this we'll start off with a value of minus 20 and that looks a little bit tight so what we'll do is we'll just drop that down to about 15. there we go that looks a little bit better now you can spend as much time as you wanted to working through this styling it adding all different options like your latest additions on sale items featured items whatever you wanted to to your homepage to get as creative as you want for this example i'm going to leave this here we'll hit update and then we just need to assign this now to be the home page of wordpress let's come out of the dashboard from there we're going to go back to the wordpress dashboard and we'll come to settings and we're going to come into reading and from there we're going to set the static page choose our home page and set that to be the page we just created we'll hit save changes and we can now take a look at this in action and see the difference we have on our home page come back to our test site go back to our home page and we now have something that looks infinitely nicer looking than what we started off with like i said this is just a starting point and you can get as creative add as much as you want to these kinds of layout styles to make it a really useful home page okay so let's take a little look now feature wise so we've got this section at the top which is to browse the categories and then we've got the products underneath so let's start off by browsing the categories if we click on clothing for example that takes us into what is now just the standard wordpress and woocommerce layout for that particular type of archive you can see none of the styling that we may have set up none of that has actually carried over so we need to deal with that come back and if we take a look at our products for example we'll take this t-shirt as an example you can see again this is just using the default layout for all the different aspects for an individual product so we've got all those things to deal with but we've now done the homepage and hopefully that's given you an insight into how easy it is and how you can get so much more creative using the jetboil in so next up we'll tackle the shop page again you could get as creative as you like here but what i'll demonstrate is how to start building the archive template and then you can easily expand upon the skills and tools covered to build multiple different layouts for various parts of your website if you so choose so to start building your archive pages we need to go to the croco block options and down to woo page builder and this is where we can start to build the templates the various different templates and assign those then through the different settings that we have so let's create our new template we're going to choose the type of template we're going to set that to be shop and then we're going to give this a name so we're going to call this default shop template underneath you can see we've got some pre-defined template layers we can start from and if you want to you can start from these or you could create a blank one and start from scratch let's keep this really simple to start off with and say we're going to just choose one of these options so we'll say we'll take this first option and we'll create our template from that once that's loaded into elementor all of our template files will be loaded in and now we can start to customize things if we want to so now our page our template has various different component parts to it you can see we've got some pre-built filters down the left-hand side some sorting options at the top and then we've got the widget to show our actual products if we click on there you can see we have no real options available no styling options no content options the thing we can do is choose the option for the enable the layout switcher we're going to do that in a moment now the layout switcher will allow us to easily choose between two different layouts and we're going to choose to have a listing layer and we're going to choose to have a grid layout but let's just take a quick look at what we have to start off with we've got a section at the top you've got your page title and everything else is kind of predefined for us so let's just say okay we're happy to use that to start off with we'll hit publish on there and we just got our template set up now before we start customizing this let me just show you how we go about setting this up as our short page if we come back to our test site and refresh our default shop page you can see it's still using that predefined woocommerce template all we need to do is come out of this and go back to our dashboard we're going to come into our woocommerce settings and like i showed you at the beginning of this tutorial we've got the jet will builder option and this is where we can set things up so you can see at the moment shop page is using the default layout we haven't overridden that let's choose enable custom shop option drop this down you can see the template that fits into that is the default shop template we'll choose that option and we'll just simply come down to the bottom and we'll just choose to save those changes now if we go back to our test page and refresh this we now have that template we've just created we have no real control over it but you can see there's the filters down the left-hand side there's our sorting options so we can say you want to sort this by high price to low price low price to high price whatever you kind of want then we've got some filters for colors and sizes and so on now if you're happy with that layout you could just carry on creating your templates using all these default settings but that kind of defeats what we can do with wood jet will build it let's come back into our dashboard and go back into our templates so go back to our wool page builder and we're going to open up that template we've just created and we're going to set that to have a switcher in place okay we'll just choose this entire section and we're going to choose this widget and we're going to enable the layout switches we're going to select that and you can see this now opens up the switcher options that allows us to switch between a primary and a kind of secondary layout normally that'll be like a grid layout and a list layout and that's what we're going to do so we have is we have to select the templates we want for each of these different layers now currently we have no templates created so we have no real control over what's going to be done inside there let's rectify that let's update this come back out to our dashboard and we're going to go back to our page builder and we're going to create our first template so add a new template we're going to set this up to be a archive and from there we're just going to call this shop archive and we put in brackets grid and close the brackets so we'll know which one this is i'm going to copy that so i can just paste that in for the next one so you can choose any of these pre-defined layouts if you want to or again you could start from scratch so we'll say we'll choose this option we create our template and what this is going to do now is it's going to show us what one particular product would look like we're not editing the entire grid we're editing the style for this particular product will be put into a grid afterwards hope that makes sense anyway so what we're going to do is we're going to get rid of the things that we don't want so i don't really want this to delete that from there i don't really need to have what type of product it is so i can delete that from there and we've got these other options now anything's grayed out like this when it comes to the jet woo builder it's primarily because there's no information to currently display inside there so because we have no ratings applied to this particular product no ratings are going to show up same goes for tags if we had tags applied to them they would show up for this example i don't want those so i'm going to simply delete those from our design now i can go ahead and quickly style various elements on here so i'm going to do that so you don't have to watch me and then we'll carry on okay so i've applied some basic styling to this we'll click on publish and once that's published we can now basically replicate this using the list layout let's simply close this down and create our second template so exit our dashboard back to our woocommerce page builder and we're going to add a new one in so this is going to be our shop archive and this is going to be list and we simply change that to archive okay so we'll do the same thing again only we'll choose the different layout this time we're going to choose this option we'll select that create our template that will then create the template based upon those options you can see same kind of thing again so i'm going to quickly go through adjust the styling on here get rid of any things that i don't want and then we'll take a look at the next stage okay so there's the basic studying done there's one important thing we need to do for this list item i'm going to come down to the settings in the bottom left hand corner and we're going to do is open up the template settings and from there we're going to say use custom columns count and from there we're going to set this custom columns to 1. you can adjust any horizontal gaps or vertical gaps if you want to but this is going to stop it from being overwritten and creating multiple columns so now that i've done that i'm going to hit publish and that's our second template created so now we can switch back to our original template for our short page and we can set this up let's go back into our page builder and from there we're going to open up our default shop template with elementor now where we've got these switches we're going to select this widget again and we're going to select the templates we want to use for the switches so you can see there's our shop archive grid and list so our first one is going to be the grid option so there's our grid layout and then we're going to come down to the second template and we're just simply going to choose the list option from there we can also change the titles that are going to be used inside these switches so main and secondary doesn't make a lot of sense so we'll just change this to grid and we'll change the second one to list and that makes a lot more sense so now we've set those things up we can adjust anything else now on the site to make sure everything is laid out how we want it to be let's update the page and let's just jump over into our test site we'll refresh this and you can see there's our listing you can see there's our buttons at the top we've got grid selected at the moment and if we click on list we'll switch over to the list view but you may notice that things don't look quite right this is not using the template that i set up the buttons are different the text is different and the colors are different why is that we jump back to the grid and you see there's the options we set up we need to do a couple of other things so we're going to go back over into our settings option inside woocommerce so exit to our dashboard back into woocommerce and into settings okay so let's just jump over to the jetblue builder option now at the moment the widget render method is set to macros we're going to change that to elementor default we'll come down and we can save this out to save our changes come back in refresh the page you can see there's our first grid is looking fine switch to list view and things are working better so now this is using the style that we set up so there are a lot of options inside you for how you can set various different things up and how you can get things to work the way that you want to so you need to take a little bit of time just to get accustomed to how all of this works because you're going to be back and forth here quite a lot setting up various different things so that's all set up the last thing i'm going to do is just change this header section to make it a little bit more in keep into what we have so select that we come over to our style we'll change this background image and we'll find something that looks just a little bit better so maybe we'll stick with our original image inside there you can see we can add that in and we can now just get this all set up the way that we want set the center and we can make it a bit larger if we wanted to as well so we'll say we want to set this a minimum height and we'll adjust that to taste okay so somewhere around the for example now we'll hit update on there and we've now created our custom shop page now obviously there's still a heck of a lot you could do to this page to make it a lot more customized a lot more professional but this isn't so much about showing you how to make it look professional more a case of showing you how you can take these tools and how you can utilize them to be able to create whatever you want using jetblue builder now the single product template is the key to showing your site visitors the product that they are interested in and jetblue builder you can go to town on the design and the information you want to include once again this guide is more about showing you how to use the tools more than it is about making something truly unique and visually appealing that well you can get stuck in and use these tools for yourself now before we move on to creating the single product template i want to show you something because we've set up an archive that's now being used for pretty much everything on the site and that can be okay so let me just demonstrate what i'm talking about we're currently looking at the home page of the site so if we come into accessories for example you can see once we come into the that's now using the template we've just set up for the default home page you can see we're currently looking at specifically the accessories come back out of this and we're going to take a look at some like hoodies you can see the same template is being used and being filtered for hoodies like i say that is perfectly fine if you didn't want that though you can't override that with custom templates for any different kind of section so we come back into the woocommerce settings you can see at the moment we've set enable custom archive and that's going to use whatever the default we've set up you can override that at any point by simply choosing any of the options you have from a template that's created under that specific template type so archives carts single product so on and so forth okay i've headed back over down to my jet will build a template section and we're going to create a new template single is perfectly fine and we're just going to call this default single product you can see we've got a range of predefined layouts we can pick from just as our starting point so let's just choose something from there this first one looks perfectly fine so i'm going to select that option and create my template this is then gonna do the usual it's gonna load everything in for us as you can see we've got all the various different features you'd expect as part of a template and we can't delete anything we want from here so you can see we've got related products underneath we've got our tabs for descriptions additional information and reviews so i'm going to just streamline this a little bit and tweak it just ever so slightly to fall in line with what we currently have and there we go i've now set everything up inside there the way that i want and as you can see we've got related products underneath and you can use this or you can use a range of other widgets so let's come back to all the widgets we have available and you can see at the moment related products is there and you can see we have options inside you for various different things we can change this out and we can set in the single upsells if we wanted to so we could then pick exactly what products we wanted to upsell as opposed to the related products which just looks at the tags in the category of particular products in up to you which way you want to go about doing it and it's entirely configurable as well which we will come back to in a moment for now though let's just say we're happy with this we'll hit publish and that's created the layout for our single template what we need to do now like we've seen before is to assign this so we'll come back out of our dashboard back into woocommerce and the settings and under jet will builder we just need to enable the custom single product template and choose which product we want there it is we can just check that click on there and there's the template we've just created so we'll just simply come down simply click on save changes and that will commit so now we need to do is just come back and take a look at an individual product so let's just click on this hoodie for example and we'll go in and there's our custom page layout everything is set up the way we want including the related products our description all the styling and everything that we've configured so all those things are directly configured inside there now let's come back and take a look at this related product option and if we can style that to make that fit in line with everything else we currently have as you can see the button the text and so on they're picking up that kind of default styling because we haven't configured anything for that now to do that is really really easy if we scroll down you can see we've got related and upsell products the template for that now we've already created a couple of templates that we've used that are kind of become global templates so if we expand this you can see we've got shock shop archive list and grid well this is a grid so we'll just choose the grid option we'll simply come down and hit save changes and then we refresh the page and take a look then at a related products you can see that's now picked up the styling we set up for our grid layout so our button is all installing our text size everything else is set up inside there so that's how we can configure the related products without having to create multiple different templates over and over again we can reutilize ones we've set up that have become sort of global templates once someone clicks add to cart you don't want to simply spin them back off into the boring typical woocommerce page and jetblue builder gives us the tools you need to build something far more unique so we're now kind of on the home straight we've built out most of the key components that we need like i said there are still plenty of other options there if you want to get even deeper into what you can do but as the basics just to show you we've covered those areas so next up we've got two more things we need to look at the cart page and the checkout page so this is currently the cart page that we have which as you can see is pulling in those default styles we can rectify that really easily i'm headed back over to my jet will build the templates and we're going to add a new template in we're going to choose cart for this option and we're going to give this a name so we're going to call this default cart create our template and then we can just pull in the various different components we want for the card so if we just start searching for cart for example you'll see we have a range of different options things like your cart cross sales card empty message and so on and so forth now i'm going to do this section quite quickly but if you want to see this in a lot more detail this and the checkout page i've created a fully dedicated tutorial just to those two key pages using jet will builder so i would highly recommend checking that out i'll put a link in the description below so you can take a look at that if you want to learn more about the intricacies of what you can do with this particular feature okay so for our cart we have two different templates we need to create we need to create the cart template that has content in it and we need to create a separate template for an empty cart so we're going to do is first of all we'll say that empty card so we've got a widget called cart md message we'll drag and drop that into our design and you can see there's our empty message and now we could go ahead and style all of that so we can change the typography and make sure that everything is in keeping with the style of our entire site the message color for example the icon color and so on so i'll just quickly change those to the relevant colors and you can see we've got what looks like a pretty typical kind of message to tell us there's nothing in there but like i said you can style all of this even dropping your own custom message if you want to we'll keep this really simple though and we'll just save that as the default cart and we'll just close that down we'll come back out of this and we'll create another template so again croco block and from there we're going to choose the wool page builder add a new template i'm going to call this default cart with items and again if you want to we can change this to the cart option and we'll say create our template so this is the second of our two templates i'm going to search for cart one more time and this time we can say right what do we want to put inside there we can drop the cart table in there and you can see that we'll put the table showing the items that we have in our basket and we can remove anything we don't want on here so we may say you don't want to put the product title you don't want the thumbnail whatever you want and you can come in you can see we can remove those we can change them we can rename them we can set the width on there all those kinds of things to customize this to get exactly what we want pretty cool and once we've done that set everything up inside there we've got action controls and you can see we can update our cart we can change that if we want to apply coupon coupon codes and so on under styling again we've got all those options there so we can configure this to make it look exactly the way we want so we can take table heading for example we'll change the color on that to be our primary color we'll change the typography to be our primary typography and you can see we just now start to pick up all the relevant styling obviously you take your time go through all of this configure this to be exactly what you want let's come back out of this and we can go back to our cart and we can say well we might want to put something like an upsell on here or cross cell for example well we can drag and drop that underneath and we can just let that go inside there now obviously there's nothing showing up in at the moment but we can configure this and then obviously depending upon what upsells or cross cells you may have listed next to a product they'll be listed inside here as well for now though we'll just take that out it just goes to show what you can actually do okay so we've got our apply card and app cart and all that kind of thing obviously you need to have a couple of other things inside you we need to have the option to return to your shop so we can just add in an extra field inside here so we'll just add another section in and we'll set this like so and we'll just come back to our widgets draw a cart and we'll say we want to put in cart return to shop over that side and we'll just customize that a little bit so typography again we're going to set our primary let's set our color to be white for example and then we can set our background colors and so on inside this so we'll show you our background color use our global colors so you can see you can go through and set this up however you want i'm not going to take too much time on this i just want to demonstrate what you need to do hit publish on there and that's our cart or our two carts configured we can now exit to the dashboard we can go back into woocommerce back into our settings back into the jet we'll build the settings and then we can enable our custom cart to say enable that our cart template we'll just choose that default cart with items and our empty template is going to be default card save that come back out of this we'll refresh this page now and you can see there's our more customized layout now obviously there's still some bits and pieces you need to put in there to get this fully featured and you can add extra things and if you want to it's entirely up to you how you want to go ahead with it but you can see how easy it is to be able to create something more customized you've got your buyer to the final stage the checkout page but obviously we don't want to give them a substandard experience the final hurdle don't worry though i've got you covered with this final step you can easily take the tools the jet will builder offers to build and style this section to make sure it is in keeping with the rest of your site and that's exactly what we'll do next so once again we're back into the jet will build a template section we're choosing checkout and we've got again two parts we need to do this we need to do checkout top we'll create that template okay so let's go ahead now and create the first template that we need so we're going to scroll down until we get to the jet will builder now there's a couple of things that we need to insert into this top section it's the coupon form and the login form and that's all we need to place inside you so we're going to create a simple two column row we're going to set everything inside there and we're just going to come back to our widgets and we're going to just grab those widgets from there so you say we want to grab the coupon code drop that inside there you can configure anything you want in here for now i'm going to leave that as is but obviously you'd spend time configuring that to get exactly what you want to be in line with your overall design and then we're going to grab the login form and drop that onto the right-hand side that's it we're going to publish that and once that's done we're going to create another new template so the procedure is exactly the same choosing checkout we're naming this one check out bottom and we're going to say create our template once elementor's loaded we can then just drop in the widgets that we actually need so again let's come down to the checkout section the jet rule builder and now we can put in the various different things that we want so now we can take the various widgets and build out our checkout page so let's just add in a simple two column layout we're going to give this a little bit of space at the top so we're going to go 50 pixels top and bottom and now we can just put in the widgets that we want so the first thing we want to probably do inside there is drop in the actual the billing forms we'll drag and drop that into there and you see that just pulls in the billing details we can style this whatever we want so typography we're going to do the same as usual set that to either a primary or secondary text or accent whatever you want to set it to we'll set that to primary control everything we want on on there as well so next up let's just add our billing details in so again we need to come back at the widgets come back in grab our shipping drop that inside there again we have full control over the title the styling all those kinds of things are totally available to us inside you next up we can come in and add any other features we want in because obviously we need to have some more options than this so we can drag another section underneath and we'll do a two column section again that's our widgets and we've got things like check out additional form check out coupon form you've got your checkout order review checkout payment and so on so let's say we'll drop in an order review on the left hand side and you can see that will give us an overview of what's in our basket totals so on and so forth all fully styleable and then finally we'll just drop in the option for checkout payment and drop that onto the right hand side so there we go so apparently there's no payment method set up on this test site but you can see that we've got everything configured so we can select this come over to our button for example and we can set up all the styling on there so we'll just say we want to set that as primary we set the color to be we'll set that to be white and then we'll set the background color for the button so we'll just choose that we set our background color we'll set that to our primary color and we can do things like we can change the border radius set that to zero so we can configure this to look exactly the same as everything else on our site once we're done we hit publish and as we've done many times before we head back over to our dashboard back into woocommerce and settings back over to the jet rule builder scroll down until we find our checkout section enable our custom checkout our checkout template is going to be checkout bottom and our top section is going to be check out top so we'll save changes on there and we've basically created now our custom checkout to our shop is our checkout come into there you can see there's all the relevant details now let's just looks particularly ugly because i've done nothing to set things up the way that we needed to but hopefully what you can see is it's very very easy to go through the process of setting it up and then you just configure everything stylings colors all those kinds of good things so we've now created all of the key components to build a typical shop yes there are extra templates you can create and if you want to get more creative please go in and test those out set things up configure everything the way you want you should now have the key skills you need to be able to do that now what is beyond the scope of what i wanted to cover in this guide i simply can't leave out how easy it is to have some pretty comprehensive filtering options with jet smart filters in this very brief section i'll just quickly demonstrate how to easily create a filter and insert that into your template and start providing visitors an intuitive and comprehensive way of filtering your online store but if you want to learn more about jet smart filters you can check out this video on screen now and i'll also link it in the description below so let's create our first smart filter i'm going to add a new smart filter and we're just going to call this categories then we can drop in a label so we just call this a product category and we just copy that to the next section filter type we're going to change this now we're going to say we want check boxes for this example data source we're going to set to taxonomies and then we're going to change that to categories or product categories i should say choose product categories and then you can set up any other parameters you want for example the relational operator do you want this to be a union or intersection so it kind of allows you to stack or just have unique filters empty terms so on and so forth set those to whatever you want and if you want to include or exclude specific categories you can do that as well that's all we need to do for this filter this isn't a tutorial about how to use jet smart filters just to show you you can use it as a complementary tool to jet blue builder so with that in place we'll publish that filter and then we'll just head back over to one of our templates so again into croco block into our page builder and we're going to come in and take a look at our shop archives this is our default shop archive so we are looking for the default shop template we'll edit that with elementor once that's opened up we'll just drop in our filter so we're going to scroll down to find our filters checkbox filter was the kind we just set up so we'll drag and drop that above all the other filters that are included we'll start doing a search for that and there's our categories filter now we're going to choose what type of filter is this for so we're going to select the option that says woocommerce archive by jetboil builder you have to select that one to make sure this works correctly once you've done that you can set any other parameters you want i'm going to leave it as it is and just hit update and once that's done we're going to hop over to our test site and take a look at that on the page so here's our shop page there's our four filters for the different sections and for example if we click on hoodies you'll see that now we'll filter it out and show us only the hoodies we can deselect and choose something like accessories and now we can see there's the accessories but we can because we set this up inside the filter we can choose to say we want accessories and hoodies so now we've got two filters being applied to this particular section so it's easy and you can build up as many of these different filters that you want to create a really comprehensive set of filters to filter all of the data throughout your woocommerce website now we've covered a heck of a lot of ground here today and i hope it's given you the confidence to give jetwood builder a goal for yourself if you want to learn how to get the most out of jet world builder though check out this playlist next it's full of great information if you found this video useful please feel free to hit that thumbs up button smash the subscribe button and gently caress the bell icon however if you didn't find it useful well you can feel free to hit that thumbs down button twice as that works pretty well too as always all of the applicable links are in the description below my name is paul c this is wp tets and until next time take care

Channel: WPTuts

Views: 42,413

Keywords: WPTuts, crocoblock woocommerce, woocommerce, crocoblock plugin, woocommerce product page template, woocommerce shop page template, woocommerce single product page, woocommerce tutorial, wordpress crocoblock, checkbox filter, checkbox filter widget, elementor page builder, jetsmartfilters, jetwoobuilder, jetwoobuilder for elementor, jetwoobuilder plugin, jetwoobuilder plugin for elementor, jetwoobuilder tutorial, products grid, shop from scratch, single product page template

Id: Q6lBJZ_BR_A

Length: 47min 39sec (2859 seconds)

Published: Tue Oct 27 2020