Working with Menus in WordPress and Woocommerce

Working with Menus in WordPress and Woocommerce

Hi and welcome to another bloom360 e-session! In this short video, what we’re gonna be looking at is how to work with menus in Woocommerce and WordPress, of course.

So, here we have in front of us a website. It’s bare-bones but it gives you the idea. You see some products here and here at the top of the screen you’ll see a happily animated little menu, just look in there and being good. Alright. So what we’re gonna be doing first is we’re gonna be adding a page into the menu here. And to do that, as is the way with everything in WordPress, what we’re gonna do first is we’re gonna be going into the back-end now. Now, to go to the back-end I’m sure you understand how to go through that process. The suffix on your URL is gonna be wp-admin and generally you’re gonna be presented with a user id and password prompt, but in this case I wasn’t because I’m already logged in.

Alright. So now that we’re in our dashboard, through our left-hand menu over here, you’re not gonna see all of these options on your screen most probably, but what you will see is the Appearance menu and the submenu here is Menus. So, so far we’ve clicked on Appearance and Menus and that’s gonna load the screen here. And this shows the screen where we’re able to work with menus. Alright. So, what you need to understand before we go too far is that in a WordPress website you’re gonna have multiple menus and that’s generally the case. You can see that we’ve got our main menu here, at the top of the screen. And I suspect that if I…no, I don’t. But you can see that we’ve got some menus over here on the left-hand side and often we’ll have a menu down at the bottom of the screen and so on and so forth.

That being said, there’s a little bit of a dropdown here that allows us to select which menu we’re gonna be working with and in this case we’re gonna be working with the main menu. I know that just because I know it. Generally, the top menu will be called the main menu.

Alright! So I’ve selected Main Menu from the dropdown. I’ll now click Select and this is gonna update the screen, showing the options that we have in our main menu. Now, the main things that got updated are these blocks here and you can see that each one has a title and it’s called Home and Shop and Contact Us in this example and you can see that they match up with these: Home, Shop and Contact Us.

Alright, so for the first short example we’ll reorder them, and in order to do that we just have to drag and drop. So let’s just imagine we want Shop to go to the end. All I need to do is just click once with my left mouse button, drag to the end… You can see how it’s picking up and it’s following me around. And you can see that this little box that’s overshadowed itself there and if I just let go now it’s gonna snap into place like that. It will make sense once you have a go.

Now that I’ve reordered these menu options, all I do now is I click Save Menu, with that button, that friendly little blue button there on the right-hand side. The screen tells us that it’s been updated. So now if I go back into our website and I click on Refresh; we’ll see that Shop and Contact Us have had their positions changed and that’s exactly what we’re expecting.

Alright. So let’s go back to what we were saying originally. What we’re gonna be doing now is we’re going to add a page into the menu. Now, that’s easy to do. You notice over here on the left-hand side we’ve got a box that says Pages. Coincidentally enough, this box lists all of the pages in the website. We’ve got a page here that’s called Our New Cool Page and that sounds inviting enough that we wanna add it into the menu. So we’re gonna put a little tick in the box next to that one. Let’s do two, the FAQ as well. So that’s gonna add two pages into our menu. All I have to do now is I click on “Add to menu” and what you can see now is we’ve got two new boxes. Now, just as before, I will drag and drop these and put them into different orders and if I just click on Save Menu now, and then I come back up to the website and I click Refresh, we’re gonna see that we’ve got a couple more options here. OK? So these are page options. Alright, so it’s all pretty straightforward so far.

So what else you might want to do is because this is a Woocommerce website, you might decide that you want to add one of your product categories onto the screen. Now, I do have a couple of product categories. Alright. So we’ll go to the top of our Shop and you can see the categories. We’ve got Clothing, Music and Posters. They’re missing category images, but that’s OK for the moment. Alright.

So let’s imagine that we wanted to add Music into our menu here, OK? Alright. So again, we’re going to the back-end. We’re still in Appearance and we’re still in Menus. And you may look at this Categories list here and say “That’s it!” but it’s not. So those Categories have to…those Categories relate to Pages and Posts. What we need is product categories, but it’s not listed here on the menu. This is one little trap of WordPress’s. It gets a lot of people, it gets me sometimes also. You actually need to add Product Categories to the screen, and the way to do that is by this Screen Options tab you’ll find here on right-hand side. If I click on this, it shows me all the things that I can possibly have on the screen right now and you notice that some of these boxes have ticks in them and some of them don’t. You’ll see that there’s a box here that’s Product Categories and it doesn’t have a tick. I’ll put a tick in it now and immediately you can see that Product Categories has been added down here. So let’s get rid of Screen Options now. We’ve got what we want, thank you very much!

Alright. So we just open up Product Categories and you can see here are the Product Categories that we’ve got and if you’re using Woocommerce and WordPress at home, this is exactly what you’ll see as well. I mean, the categories will be different, but it’s the same. Alright, so let’s get rid of one of these menu options first, because I know that there’s not a great deal of space here. We’re gonna run out very shortly, so let’s just get rid of one. Let’s get rid of that Cool New Page, even though we do like it a lot. To get rid of something I click on the downer, and then I just click on the Remove button. And to add something, add a Product Category, it’s exactly like adding a page. I just have to put a tick in a box and then just save that to menu. And you’ll see that a new item has showed up and I want it to go right to the head of pack, and that’s good enough for us right now. So we just click on Save Menu.

Now that that’s updated, if I click on Refresh we’ll notice that our Cool New Page is gone and Music have taken up a position. OK, so that’s pretty cool. So if I click on Music now,it’s gonna take us straight into the Music category. And we’re looking good.

Alright. So that’s the basics of working with menus in WordPress and Woocommerce. If you have any questions, hit us up here, bloom360. Otherwise, we’ll see you next time.