Introduction: Beyond Default WooCommerce
So WooCommerce provides some amazing options for those of us looking to start selling online, but by default, you're fairly limited in styling and setting things up in the way that you may want to. Well, you're kind of limited.
Now, Elementor Pro gives us some extra tools that allow us to customize a lot of the different aspects of the design, but there are still some limitations. Now today, I'm going to be showing you how to take one plugin and take your customization options in a direction that Elementor Pro simply doesn't offer. We'll be creating a custom shop page with a product category listing and featured product section that also links through to a subcategory page. Now, this is perfect when you have a shop with a lot of product categories and you want to let people navigate around your store in a logical and simple fashion.
Demonstrating the Custom Shop Experience
So let's start by taking a look at what we'll be creating in this tutorial. Now normally when you create an online shop using WooCommerce, you're just taken through and you see a range of different products. This is going to be your normal selection of products; you don't get this category selection. And then if we take a look for example where we've got posters, music, and clothing. Underneath clothing, we have several different subcategories. So we've got t-shirts, hoodies, those kinds of things. So we click on there, you'll see this will take us now through into a second page which will have the subsections at the top and the products that are in that particular category down below. We come back out of that and we jump over to something like the posters for example, or the music. We'll jump into music and what we'll see is we'll have the music underneath. A because you've got singles and albums. So we're going to be taking a look at creating this today.
Introducing the Woolementor Plugin
Now we're going to be using a third-party plugin because out-of-the-box WooCommerce doesn't really give you a huge amount of functionality like this and Elementor doesn't really give you much in the way of controlling categories separate and independent to products. So we're going to be using a product called Woolementor. Now, I've already taken a look at this where we took a look at customizing the cart page and also the checkout page, so that's with the pro version. So I would recommend taking a look at this. And currently, at the time of recording, you can see there's a 20% discount off until May the 15th. So if you are thinking about grabbing a copy, the link is in the description for you to check that out. Okay, so let's go back now and take a look at actually building this up and showing you how you go about doing it.
Creating a Custom Page for Your Shop
Now there are a couple of parts to this particular tutorial. When you install WooCommerce, it automatically creates a shop page. And as you can see at the bottom of my list, we've got that shop page set up. Now if I come in and try to edit that with Elementor, I can't because it's a registered template that's being used by WooCommerce and we can't edit it. You see this 'content area was not found in your page' because it's basically locked to us. So what we need to do is we need to basically start with a blank slate. So we end up ignoring that shop page and we create our own custom page for our online store. And you can see I've done that here. So this isn't the main page, but for all intents and purposes for everything we do inside our navigation and so on, it will always point to the online store. So what we're going to do is we're going to edit this with Elementor and that will open up the basic page that I've created which at the moment is just simply a header section.
Building the Main Category Grid
So once you've opened that up, you can see there's nothing more than just a title section. Underneath is completely blank. So there are two parts to this. We're going to create the listing of all the different categories and we're also going to create something that would be what you'd expect, like featured images, sale items, something like that. Because otherwise, the page could end up being quite small if you only have a few categories, but obviously, it's up to you how you want to go ahead and design it.
So what we need to do now is just go and grab the product category. So let's just type in category, and what we want is this Product Category, which is part of the Woolementor plugin. So I'm gonna drag and drop that onto our page and you can see now that immediately pulls in a range of different categories. On the left-hand side, we can control exactly how many categories you're going to see. So you can see we can say the number of columns we want. We can change that to six for example, and you can see now it'll cut things down. We need to up the category count, so if we increase that to six, you'll see we now get more categories in. This is up to you how you want to design this. We're going to set that back to be four and we're going to set the category count to be about eight. Okay, so now you can see it's showing all the categories, including the subcategories. For example, we've got t-shirts and we've also got hoodies, but they sit underneath clothing.
So to deal with that, we can come to the query section. You see currently it says source is 'Show all.' We click to expand that out, we then have four options. So you can easily get creative by choosing any of these and then configuring things. But what we want to do is choose 'By Parent' and then you can see the parent is saying 'Only top-level.' In other words, it's only going to show the top-level categories, nothing that sits underneath it. Click to expand that down, we could easily sub-filter that down if we wanted to. Entirely up to you if you want to create custom pages for each of the different kinds of sections, you could do something along the lines like that. We're gonna leave it as only top-level though.
But you can see that we've got a couple of items like 'Uncategorized,' which is one of the default categories as part of WooCommerce, and also 'Digital Items' that have nothing inside there. So what we can do is we can say 'Hide empty,' and that will now only show us the ones that have content inside them. We could then adjust the ordering, but as you see it's all set to show as 'Name' to start off with, and then we've got 'Descending.' We could change that to 'Ascending'—up to you how you want to set things up in there to make sure it displays the way that you want it to. So that's the first part done. We've now kind of created that.
Adding a Featured Products Section
So what we need to do is just make a little bit of space for this. We'll come to 'Advanced' and we'll just add in some padding at the top and the bottom. And we'll drop in a little title at the top to say what this actually relates to, and we'll just put in 'Product Categories' and there we go.
So we've got the first part done. The next thing we're going to do now is just put another section underneath which is more to do with like featured images or featured products and so on. So I'm going to come back in, we're going to do a search for 'products' and from there we're going to choose the relevant option which is... where we've got it... which is 'Products.' I'm going to drag and drop that into here. Again, you can see you've got the same kind of options, the number of columns, the rows, the pagination, if we want to include if you're going to have a lot of different products. But the query is what we're interested in doing. And you see it says currently 'Sale & Filter by Latest Product', but what I want to do is set these to be featured products. So we're gonna choose that option. You can see nothing has been set to be featured, so we'd have to set something up inside there, which I'll show you in a moment how to do.
We will duplicate this, and we're just going to simply drag that down, position that above, and we're going to change that to 'Featured.' There we go. And we're going to simply choose this section, we're going to add some space into this like we did with the last one. So 50 top, 50 bottom. And we're going to come into the 'Style,' and we're going to go to 'Background' and set that to be white, just so it stands off a little bit. And there we go. So that's the outside of things done.
Let me just quickly show you now how you just tell any product to be a featured product. To set any product to be a featured product is super simple. You just log into your dashboard, open up your products listing, and then just 'Quick Edit' any new products. And you can see you've got an option that says 'Featured.' We can check that and we can just then update that. We'll come back to our page, hit refresh, and then what we can do is you can see we've got our categories set up. And then like we just did, inside there then we've got one featured product. Let's come back over and set something else as the featured product. We'll just say we'll take this one, we'll set that to be featured, and 'Update.' Come back into our test site, refresh our page, and we'll see we have two featured products now instead of just the one. So super simple to do, a great way of highlighting key products in your store.
Creating a Product Archive Template
Okay, so we've set that up. Now if we go and take a look at 'Posters' for example, that'll take us over now, and you can see we just get posters using the default kind of layout. We don't see any other subsections in there and no way to get to the subsections. So we need to create a new template now that's going to set up for this particular layout. To do that, we'll come back into our dashboard, we're going to exit back out of all of this, and we're going to go into our 'Template' section. Okay, so we're going to come into 'Templates,' we're going to say 'Theme Builder,' and from there we're going to create an archive. What we need to do now is just create a 'Product Archive.' So let's click on the 'Product Archive' tab, and from there we're going to say 'Add New Product Archive.' We're going to give this a name, and we'll just call this 'Default Product.' But obviously, you could name this whatever you want that makes sense. Click on 'Create Template.' That'll take us through then into the template picker, at which point we're going to close that down. We're going to start a completely fresh design. So let's just close this down and let's create our own custom design.
Displaying Subcategories in the Archive Template
So the first thing I'm gonna do is we're going to create a custom header to go at the top, but all I'm gonna do to make life easy is just copy one that I created on the previous page. We'll just paste that into here. So we'll get rid of this title, just click on X on there. Okay.
So what we need to do now is create a new section where we will have the subcategories of whichever category we've chosen to go into. But to do this is pretty much the same as what we did the last time but with a slight difference in the query. So we're going to come in and we're going to do a search for 'product categories,' drag and drop this onto our page. We're going to set this now to be eight columns because we want these to be slightly smaller. And I'm going to say the product count is also going to be set to eight because we don't need to have large icons at the top of this once you've gotten in there. These are just subsections, so they don't really need to be quite so prominent. What you need to do though is go into the query, and from there we're going to change the source. Now currently it says 'Show all,' what we want to do is say 'Current Subcategories.' So this is going to use the current category that we're going into and then just display the subcategories, if any, that are associated with it. We could do the same thing again; we could say 'Hide empty,' so if anything doesn't have any product inside it, we can hide that. Now the reason you're seeing all of these at the moment is because we don't actually have a query being applied because we're creating the template, but we'll say 'Hide empty.' You can then adjust the 'Order by' and the 'Order' to anything you want that kind of fits to what you're looking to do.
Displaying Products in the Archive Template
Now underneath that, we've created these subcategories. The next thing we need to do now is come back in and we want to do a search for 'products.' And what we're going to do is drag in the products widget, and from there we can now just configure things. So again you can see we've got the number of columns and so on. Let's make a little bit of space for this so it has some breathing room. So we'll set 50 top, 50 bottom. We're going to come back into the widget itself, come into our query section, and we're going to make sure that we've got the query set up. Now you see at the moment it says 'Latest products,' which is not what we wanted to do. So we want to click on there and we need to go in and specify we want to use the 'Current Query.' And what this is going to do is it's going to take a look at whatever category or subcategory that we've gone into, and it will filter this based upon that choice. So this means that we will get the relevant content inside there for these products. You can then obviously drop in things like titles and things if you want to. So we can say we'll drag and drop a section into here. We'll just set this to be 'Products.' You know you can set this up in any way you want once you've kind of gone through the basics of what we're doing here. You can configure things however you want to.
Setting Conditions and Testing the Flow
So now if we hit publish, we're going to get to add a condition in. And this is the important thing. We need to make sure that we specify the condition correctly. So say 'Add Condition' and then where it says 'All Product Archives,' we don't want to do that. We want to change this and we want to say 'Product Categories' and then we're going to leave this set to 'All.' So this is when it's going to work and display the content through product categories. So we say 'Save & Close.' Now we've now created our template, we've created our shop page. So now everything should be set up for us to test that. So let's take a quick look at this now on the front end of the site.
Okay, so you can see we're now on our custom shop page, which is our 'Online Store' as opposed to the default which is 'Shop.' So you can see that's linked up in the top navigation. Underneath we've got our product categories like we did in the original demo: 'Posters,' 'Music,' and 'Clothing.' We then got our featured products underneath that. And if we go into something like 'Clothing,' we'll find that we get at the top part of this, we've got our subcategories: 'T-shirts' and 'Hoodies.' We can see all of our clothing options, so this is showing both hoodies and t-shirts. However, if we come into something like 'T-shirts,' you'll find that when we take a look underneath, we've now sub-filtered that down and you can see we only see t-shirts. And because there are no subcategories of this, then nothing shows at the top. That's kind of completely hidden. So you can have multiple different layers inside here, multiple different categories and subcategories and so on. And then once you get at the bottom of that hierarchy, then you'll have no more subcategory sections at the top.
Final Thoughts and Customization Options
Now obviously you could also apply filters and things to this. There's a ton more things you could do. But what I wanted to demonstrate was how we can create those categories, how we can sub-filter things down, and how we can make a logical way of allowing people to move around our store quickly and easily. And as we have more categories, all of that will take into consideration and the store will be set up the way you want.
Now the next thing with Elementor, going back to that is that we can still customize all these different sections. We're not limited to this look and the way that it does. We can easily come in and we can control and style all these aspects. So the product section, for example, we can control the styling. So we can come in and we can adjust column gaps, you can adjust the image information, spacing, colors, alignment, all those kinds of things if you want to get something a little bit more unique. And Woolementor is definitely one of those plugins that gives you a ton of options.
But if you'd like to see a full tutorial on how to build an entire WooCommerce site and customize it using Woolementor to create different kind of categories, the different sections, these different custom templates, let me know in the comment section below. I'll take a look at creating that if enough people are interested in finding out more about creating custom WooCommerce stores.
So Woolementor offers some great options. And if you want to see some of the other customization tools that I've covered, you can take a look at these videos you can see on screen right now. Now as always, all the applicable links for everything I've covered are in the description below, so you can check those out. There are affiliate links in there but they cost you absolutely no more money and it does help support the channel if you use those. As always, my name's been Paul from WP TUTs, and until next time, take care.
