How to Edit WooCommerce Shop Page with Elementor & Woolentor for Free

so here's the thing if you build an e-commerce site with woocommerce it can look almost identical to the next woocommerce site and that's not great especially when you're on a tight budget now today i'll show you how you can easily change all that without spending a single penny now all of these tools we'll be using in this video are 100 free we'll be using the astra theme along with one of its free starter sites alongside that we'll be using elementor free and wool len free now if you're ready let's just jump into creating a more unique online shop page now to keep this video short i've already gone ahead and installed everything that we need so that's elementor free rule lentil free and the astra starter theme and as you can see this is what we start off with so this is our home page what we're interested though is the store page so if we jump over to the store page you can see we've got a very simple looking layout and this is all set up directly inside the astra theme but we want to get a bit more creative so let's just jump over to the dashboard and from here if we go into our pages section and we take a look at the store page which is the default page that's been set up by woocommerce if we're going to edit that we'll see that we get a normal page layout if we click to edit with elementor however we'll get an error message tell us that we can't actually edit this page so saying sorry the content area wasn't found and this is what you're always going to find whenever you try to create a custom page using elementor free or pro so how do we get around it well this is where woo lentil comes in really really handy for now we'll forget all about this page and just go back to our dashboard now what we need to do once we've got bulendo installed is going to create a new custom page i'm going to set that up as a template file so i'm going to come into our save templates and again for speed i've just created a pretty much blank template however all you need to do is click on add new choose page as the option you want and give it a name other than that you're going to be in the same place as i am right now now let's take a look at editing this with elementor and you'll see exactly what i've done so far all i've put in there in this place is this banner strip at the top all done with normal elemental widgets nothing special about that at all and to be honest we're not even interested in that i've just done that to show you how we can customize the page what we're interested in though if we come to the left hand side and scroll through as you can see that we now have a section called lento add-ons and there are a ton of different options inside you providing you install all of the free options you can see there's lots of different bits and pieces to make up not only a listing page the archives and so on which we're going to do but also if you want to create a custom product page which we'll take a look at in a separate dedicated video we've got two options in here we've got the universal product layout and we've got the product archive layout we can use either of those and they just give us slightly different options and starting points so if we take this universal product layout and drag that over into our page you can see it does this it gives us a fairly standard woocommerce product archive layout but we've got more control over this now so we can customize this the first thing i'm going to do is just add a little bit of space at the top and bottom just to give us a bit of breathing room now before i make any changes to this it's worth bearing in mind that some themes will override some of the settings you may set up inside you for example the number of columns if that's the case you just need to make sure whatever value you set inside rulento you also set inside the customizer of your actual theme itself so just bear that in mind there's always a woocommerce section and i'll just show you what i'm talking about if we go into search and we'll just do customizer and i open up the customizer open up in a new tab you can see we've got a woocommerce section inside you if we open that woocommerce section we can control the product catalog and the single product if we open up the product catalog you can see we have shop columns and we've got products per page so in some themes that may override the values you set up inside the woolen or widget so just bear that in mind so i'm going to come back out of that close this down and take a little look at what we can do inside here so let's come back into the widget itself and you can see we've got a couple of different options we can choose between sliders tabs and default for this example i'm going to leave it as default but you can experiment with those to see exactly what they like and if you like them just use them the query settings is where we've got more control at the moment you can see it's just showing us three recent products and if i want to change that to something else say for example six you can see i can change that and we'll now see six products we can control how many products we see in the layout but we've also got more options inside the filter so we've got featured products if you're using featured products as part of the way that you organize your store you can tap into that directly inside you best selling products sale products top-rated products a whole range of different things including you can add them manually by the just the id number so you can easily specify exactly what products you want to list using this option i'm going to come back up and i'm going to say this is going to be our sale products and you can see now all we see are sale items if i want to i can even fine-tune this to be sale items in specific categories so it's really easy to get a lot more creative to make sure you're only displaying exactly what you want to display so it's great to see that you see if we just choose cactus you can see that now changes it we can delete that use plants obviously you can stack these on top of each other so you could have multiple different categories being displayed however i'm going to take those off so it just shows all of my sale products your content settings then allows us to choose between three or four different styles you can see we can choose different layouts and they just basically tweak the layout a little bit there's nothing too drastic going on there it's still fairly standard so let's just leave it to that center option underneath then we can choose what are the different sort of sections inside each one of these products is going to be displayed so you may not want to show the category well you could hide that if you wanted to you don't want to deal with product stock and so on you can disable or enable that option inside there so you can fine-tune this to get like i say exactly what you want to look like your action button settings there now these action buttons are these little icons you can see on the right hand side you've got your quick view and you've got your select options and what we can do is we can enable or disable those if you don't want to use those get rid of them completely if you do want to use them you can do and then you've got a couple of different styles you can choose between and you can see you style them slightly differently all looking quite cool and then you can choose whether you want to show all the time or only on hover so they'll animate in and then you can control the position of those if you want to you may want the left right whatever you kind of want in the middle so you can get like i say you can tweak this to be a pretty cool look if you want to you can show the add to cart button or disable that if you want to as well so if we say yes we want that and you mouse over you can see we now get a slightly different layout and if we go back to a different style for example you can see we can just get really creative with that bit of fun image settings so you can see thumbnail style is single image but if you were using multiple images for a product then you could use the image slider or the gallery tab and that would allow you to see those extra images so for example if we choose the gallery tab that will show us in this example we've already got one image per product but if you had multiple images you could see those little thumbnails and then you could allow the user to click through and you can even customize the border colors and so on so that's pretty cool to see we'll put that back to single image then and then your offer price counter settings if you wanted to show a countdown timer for your your special offers you could do that we can also commit the style section there and you can start to configure to make sure that everything is styled in keeping with your store design so we've got all the normal options inside your padding margins so on your content area if you want to add borders colors all those different kinds of things right the way through your product title prices ratings and so on and so forth you can even do the same thing then for your action button so you can control the styling for this if you want to the background type you know box shadow if you want to apply a box shadow to it you can see when you mouse over you get this box shadow effect we'll put a background color in well we can do just that you can see there's our background color so you can tweak get it exactly what you want fonts everything so that's the first of our two layers let's just get rid of this and take a look at the second layout option so what we've just seen is the universal but we've got the product archive layout we'll drop that inside there and you see what this does is slightly different this now is exactly the same styling wise as our main theme so the select options and all those kinds of things are pulling in the styling you set as part of your theme so when you make changes to your theme that you see those reflected inside your as well so that's quite cool if you want to keep everything consistent you don't want to have to tweak these pages you just want to set everything inside your theme customizer well you could use this particular option and again you've got plenty of different options to work with your pagination if you want to add that in there we can change the number of rows we'll say two rows for example there's our pagination showing up you can allow order if you want to this allows you to change your sorting order at the top and show your results account so these are the kind of normal things you'd expect to see as part of a listing for woocommerce so it's great we have all those options but you'll see we do have a lot less options because this is tied in to the actual customizer tied into your theme and so on so the style you can see we can control various different styling the image border types and so on so you can easily come into this and configure everything so you can see the sale tag for example we could change that if we wanted to change the text color the background color all those kinds of cool things and you can see if i change that to a bright red you can see now our sale appears as a bright red but obviously we are missing some things we don't have those query options we are still kind of limited but you can choose whichever these is the right option for your particular design okay so i've now switched back to the previous widget just so we've got something that looks completely different to our theme style we're going to update this template file and we've now created the design we want to work with however if we come back into our shop and we just refresh our store page you can see nothing has changed we're still using the default layout that's part of our theme and part of woocommerce so we need to do and this is where it's pretty cool when it comes to lento is that we have the option to tell it to override and that gets rid of that issue with trying to edit the typical template file for woocommerce with elementor which we can't do and also it means we don't have to mess about with redirects and all those kinds of things we can simply do it all inside the lentor plug-in so we come into volento into settings and from there we're going to make sure we're on the woocommerce template tab and then we've got a couple of options what we're interested in is this single product template and the product archive template now the single product template if you decided to create your own custom individual product template you'd assign that inside you and the archive which is what we've done in this video we set the second option so we're going to choose our custom shop which is the page template and all we need to do is save our changes and now we come back to our store and we refresh this we see now we have our custom design inside there there's our header section there's our individual products and we can then click and go take a look at the product as we expect to now you can see that this isn't going full width like it was inside our template and all that is is because we need to set something up to do with the theme that we're using so again if we jump back into our dashboard we'll go to our pages and we're simply going to come to our store page and we're going to edit that and because we're using astra we have these options on the right hand side to control the content layout so we're just simply going to choose full width stretched and we'll update that page hop back over and refresh and there we go now we've got the nice full width with a full custom layout for our store and it is as easy as that now that you've seen how easy it is to make your online shop look more unique you may also want to add some extra functionality to it if you do take a look at this playlist that's full of awesome and totally free tools for powering up your woocommerce store now if you found value in this video please consider giving it a thumbs up hitting that subscribe and smashing that bell icon to be notified as soon as new videos come out if you didn't get any value from the video though well please feel free to hit that thumbs down twice because that seems to work pretty well too my name's me paulsy this has been wp tuts and until next time take care

Channel: WPTuts

Views: 113,615

Keywords: WPTuts, how to edit woocommerce shop page with elementor, how to edit woocommerce shop page with elementor free, how to edit woocommerce shop page, how to edit woocommerce shop page template, woocommerce shop page, woocommerce shop page customize, elementor shop page, elementor pro woocommerce, elementor woocommerce, page builder, woocommerce elementor, woocommerce elementor free, woocommerce elementor pro, woocommerce tutorial, customize woocommerce pages, woolentor

Id: HgZ__E5qrEo

Length: 13min 1sec (781 seconds)

Published: Mon Oct 05 2020