Introduction: The Problem with Default WooCommerce Shops
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 WooLentor 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, WooLentor 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.
Why You Can't Edit the Shop Page with Elementor
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 telling us that we can't actually edit this page. It's 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 WooLentor comes in really, really handy. For now, we'll forget all about this page and just go back to our dashboard.
Creating a Custom Template with WooLentor
Now, what we need to do once we've got WooLentor 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 Saved 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 Elementor 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 WooLentor Addons. And there are a ton of different options inside here. 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. For example, the number of columns. If that's the case, you just need to make sure whatever value you set inside WooLentor, 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 here. 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 WooLentor 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're 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 here. Best selling products, sale products, top-rated products, a whole range of different things, including you can add them manually by 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.
Customizing Product Styles, Actions, and Images
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 them 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 only 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 special offers, you could do that.
We can also come in 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 here: 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 buttons. 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. If 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 layouts.
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 here 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 count. 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 of these is the right option for your particular design.
Activating & Finalizing Your Custom Shop Page
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 WooLentor, 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 WooLentor plugin.
So we come into WooLentor, 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 here. 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 if 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.
Conclusion
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 Paul. This has been WP Tuts, and until next time, take care.
