Create a custom WooCommerce Product Archive Elementor Pro & Elementor Custom Skin

so if there's one area of WordPress customization that gets sort of product quite a lot is how can you customize a lot of the WooCommerce pages now I've covered a lot of different customization options on this channel I'll put a link in the description below so you can take a look at some of those and you can follow along and this one I'm going to show you how you can create your own custom loop and then use that as part of the archive the benefit of this is that you can basically use any of the tools at your disposal to create any kind of layout that you want and then create your own customized loop from it so we're going to use two plugins today for this we're going to be using elemental Pro because we need to use a theme builder and we're going to be using le or elemental custom skin now we are gonna use the free version in this but I will be covering that the pro version in a separate video that'll show you some of the things that I brought to the table with the pro version some of the nice layout options so the extra features we have however for this one we use an elemental pro on the free version of elemental custom skin so it's just dive in and I'm going to show you how you can create something similar to this now what this is a really simple example as you can see pretty much the same kind of thing you'd expect to see as a normal loop as part of vous commerce however this has been created directly inside elemental Pro use it any custom skin so we can customize this anyone so you can see I've got a hover effect that gives us an outline turns the background of the image or chose the image to a black and white we've got the name of the image the brief description the price and an add to basket option now obviously you could go way beyond this this is just a case of showing you how to do it giving you the tools that you need then it's up to you what you do it you can run as far as you want with it so what I'm going to do is I'm going to take it over to the dashboard now we're gonna take a look at how we start to set something like this up and just show you the fundamental skills and the tools that you need to use to be able to create your own custom loop for WooCommerce now when you install elements or custom skin you get a couple of extra options that are part of your copy of elemental specifically if we take a look at the template section and jump into the theme builder which is where we are right now you can see that we've got a new tab called loop and this just allows us to create an individual template for any of those loop items now if you're unsure what I'm talking about jump back with the example page you can see an individual product in the archive displays the type the image the title a brief description the price and the add to basket in quantity that is one single item inside the loop so loop currently is showing us six of those individual items so that's all we're going to do we're going to create the template for this individual item that will then be called up and created as part of the loop so inside here inside the theme builder under the loop section we're going to say add new I'm going to do is give this a name making sure that the type is set to loop we're going to call this default product loop and we'll say create template once you've done that that'll take us into the element we can go into the editor like you'd normally expect and as you can see we first of all were brought into the library where we could choose any of the predefined templates we're not gonna worry about that we're going to close this down we're going to start from scratch the first thing I do is just come up the settings and I'm going to come into the option for the page layout we're going to set this to elemental canvas this doesn't really have any effect on what we're doing other than the fact that gives us a blank slate a clean slate to work with we don't have distractions like headers and footers and anything else that may be part of our design underneath that we've got the preview settings now currently this is set as blank so going to do is going to change that I'm gonna come into product so we're saying is we want to use this to preview the actual layer that we're going to work on and that's just more of a visual thing than anything come in there we say all we want to change that and we're going to call this which is know going search for the beanie so I'll type that in it would say beanie with logo apply and preview now obviously there's nothing to preview at the moment but just means now we start to build this app will see different elements on the screen to make it whole process a lot easier so we're gonna keep this example fairly simple but like I said the technique is more important than the actual execution that we're going to see right now first thing we do is we're gonna drag and drop the featured image which is going to pull in the product image now before I do that let me just quickly explain that even though WooCommerce is a separate plugin and we have products as a separate section they're still just a post type in WordPress WordPress just treats them as a custom post type so we can still reference things like image post accept title and so on even though it relates to a product as part of mu commerce so would you keep that in mind you stop forgetting or you start to forget the fact that we're uh commerce is a separate plugin with different references it's all doing the same thing WordPress just considers it a custom post type but a post nonetheless so let's drag in the featured image drag and drop that into our screen and you can see that now pulls in that beanie you can take a look on the left hand side we have all the normal options for things like links the alignment and so on so I set up a few things in here but like I say this is entirely up to you how you do it so we're gonna say we want to use this centered we're going to set the link to go to a custom URL and from there we're gonna choose the dynamic option and this allows us to specify exactly we're clicking on this image will take us now obviously the ideal scenario is this going to take us through to the actual product itself so let's just do that click on the dynamic option and we're gonna come down and say post URL and this is why I want to emphasize the point that WordPress just looks at WooCommerce products adjusted at the post okay so that that means that's a link that'll take us through to view the product if someone clicks on it if we want to we could then come in and do things I said styling up on on hover effect and so on so let's do that let's set hover effect and we're going to do is we're gonna use a CSS filter to get a click and we're just gonna say we want this to desaturate so we have pretty much no color it so just give some visual feedback when the user Mouse's over this particular item will set a transition duration then of about a half a seconds we'd have a nice slow transition between the colored image and the almost black and white image other than that we're gonna leave it as it is so once you've done that the next thing you can do is drop the next item in so we gonna come down and we're just gonna come in back to the widgets option and from there we're gonna grab the post title drag and drop that into there and you should find out to set yourself there we go beanie with logo we can then go through it head and style that that text if we want to so we're just gonna paste the style that I've already got on there so there we go you can see that I've just aligned it to the center and so on we'll change this from a h1 to h2 because it's not as important and we can set things up like do we want to link it through to something so you you want to set the name of the product to be a link as well well you could do that just by clicking on the link option clicking on dynamic and say post URL so there's the first couple of options next we're going to use another feature that's install as part of Elementor custom skin going to come up to the widgets again from here we're going to come down and we're going to say that we want to pull in text editor drag and drop that underneath they click on the dynamic option again and we have an option called post summery now what this is going to do is it's going to take the product details the information about the product and there's going to cut it down to small bite-sized piece now you could if you wanted to use the post excerpt but not everybody fills out the post excerpt it's up to you who you want to work you could use one or the other I'm gonna use the post summary and once you do that you can click on the little wrench icon to the left of that and we can set up how many characters or how many words we want to display at any particular time 25 is perfect for this example because we don't have a huge amount of text in there but this is a great way of just give it a little bit of information about the product that someone's viewing and then let them make their mind up from there so we leave that as is what we're going to do is come up to the style and set that to be centered as well now the next thing we need to do is put in the price but to do that we're going to same again we're going to come down to the text editor option go drag and drop that underneath our brief information about our product now click to make sure that's active and then we going to come into the dynamic option from there we're gonna come down scroll right the way down through until we get to the WooCommerce options and you can see from there we've got the product title the price and so on so we're gonna click on product price and you see though that brings the price in and again we'll do the same thing against we're style that set that to be centered and the final thing we're gonna do is drop in the button to actually allow us to purchase this so I've got a way to do that now come over to this and we're just gonna type in basket in there and you can see we've got add to basket so you can drive that drop that underneath again we'll just set this to be centered and we now have our key basic information pulled in so this is the basics for that loop item so what in place we can go we can set up any kind of styling we want to make sure that everything is configured the way we wanted to I'm not gonna worry about that in this video the styling is something I'm sure you can you can sort that out yourself and get it look exactly as you want they said like I say more a case of how the things work so let's hit publish on there now it says the normal thing when we deal with templates inside Elementor Pro what's the condition you want to apply to this particular template well because we're dealing with the loop and it doesn't really have anything to do with a specific template we don't want to set any condition we're gonna leave that as is and we're just gonna hit save and close so with that in place we've now created our loop sort of layout so the kind of this we've finished with the loop option exit or dashboard and the next I'm going to do is come back into the theme builder and from there we're now going to create the archive this can display our custom layout for our products so in the do is with a country archive section and we could do product archive if you wanted to so you could do product archive and from there we're gonna create our when your archive so we'll say add new just put a name in for this I'm going to call this default product okay I'll hit create template now if you've ever used the theme builder inside element or pro you'll know you'd normally go through and you have some options for just pulling in the archive let's clear it out of this template just come into the page itself so you'd normally use the archive products option if we drag that into V you'll see this pulls in the normal layout for our products but we don't really have any control over anything you see the content a low-order show result count and so on general to advanced just a search measured message so we have no way of being able to pull in that custom loop layout so we'll do let's get rid of this and instead of using the products option we're gonna use the posts so we're gonna come up to the top type post in on what we want is the posts widget and drag and drop that over onto our page let's make a little bit of room for this now so just put some padding at the top and the bottom so we've got a bit of space there now the reason we use this is because this allows us to create or use that custom so if we select the posts you can see the first thing we have under the layer option left hand side is classic for the skins if we click to expand that we've got custom click on custom and now it says what do you want to use for your custom template gonna click on there and we're going to use the default product loop which is what I've just created it'll click on that and you can see that pause in this information now the query obviously is wrong because it's trying to pull in the information that's a normal post so what we need to do is come down to the query section click only and change the source from being posts and because we're dealing with products we're gonna come in and we're gonna say products once you do that you see that now pulls in the products we've got all the options set up using the template that we've just created for our custom loop so we can set up anything else we want so for this example we've got multiple different pages so we're gonna come in and we're gonna say we want to have pagination click and add pagination in there so we can now go through the various different pages for this particular product archive and we've got everything set up so that now allows us to use our custom loop so we can hit publish on there this time we're going to add a condition you see there's all product archives and that's perfectly fine we're dealing with the product archive so we say save and close so now all our products will use this layout now if you want to make any changes to the way this looks all we need to do is come back out of this exit to our dashboard and from there come back into the theme builder I'm gonna do is go into the loop we're gonna open up that look that we just created which is the default product loop and edit that with elemental so let's just say for example we wanted to put a border around this just so we had a nice separation so we can simply click on the column and from there we can come to style in the border set a border up in there with a solid we'll set a nice little light gray border on this we have some kind of styling we will set that to be one pixel across the board and they will say it slightly different on the hover so we will say again we'll have solid we're set that a one pixel we will set it to a darker color so when someone hovers over it almost is over it they'll see this some kind of chain hit update save and close because again like I say we don't want to add any conditions to this we'll say save and close on there and now we can take a look and testing this out on the page itself so we do take a look at our short page you can see there's our custom loop our custom layout you can see when we mouse over we've got that slight change in the outline all the details the title the image which is clickable the title of the product the name of the product which again is clickable add to basket the quantity all those different elements that we used inside our custom loop layout have all been pulled into this and allow us now to go through and select any product I have a basket all the normal things you'd want to do so types of product jumps over and takes us into the normal template which we can't customize and like I said already got videos on how you can customize these individual product pages which I'll link in the description below so you can see how to do that as well but that's it that's how we can take element or custom skin we can take elemental pro and we can use those together to create our own custom shop loop where we can control exactly how each of these different items looks appears and operates well hopefully this is something that's opened your eyes to how you can use these two plugins together and give you the ability to go a little bit more creative when it comes to creating WooCommerce based stores you should no longer be stuck just by using the same old same old layers that are governed by the theme that you're using well if you enjoyed the video and let me know any comments questions or feedback in the comment section below all applicable links are in the description - mean policy this has been WP test and until next time take care

Channel: WPTuts

Views: 100,136

Keywords: woocommerce product archive, woocommerce product archive / shop page, woocommerce product archive customiser, woocommerce product archive page, woocommerce product archive template, elementor woocommerce product archive, elementor woocommerce product page, woocommerce elementor, woocommerce elementor pro, elementor pro woocommerce, elementor woocommerce shop page, elementor woocommerce tutorial, elementor custom skin, elementor custom skin loop, elementor pro, wptuts

Id: qUF7HLdcjlg

Length: 14min 56sec (896 seconds)

Published: Tue Jan 14 2020