Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Creating the Mega Menu

In this lesson, we’ll write the code that adds product attributes as options for navigation menus. Then we’ll create a mega menu using the free Max Mega Menu plugin for WordPress.

Related Links

3.3 Creating the Mega Menu

Hello, and welcome back to this TUTS+ course on WooCommerce. In this part of the course, we're going to continue working on our mega menu. Firstly, we'll enable custom attributes in navigation menus. Then we'll install the mega menu plug-in, we'll make some tweaks to our product to make it easier to add them to the menu. And then we'll create our Mega Menu. The plugin we're going to use to create our Mega Menu is called Max Mega Menu, and you can get it for free from the plugin directory. I've installed and activated it on my site already, as you can see here. So, let's move to the Menus screen in the admin. The Mega Menu Settings are here, but we're not going to worry about those just at the moment. Because what we need to do is add attributes to our menu. And the problem at the moment, is that you can't add attributes to the menu by default. They're not even up here in the screen options. Fortunately, there is a little bit of code that we can add to our theme that lets you do that. And there's guidance on that here in the Woo Commerce website. Her we have a filter that we can hook into with a function that registers custom attributes for navigation menus. Now, I'm going to add this function in my Themes Function file because that's part of the code bundle. But it might be better practice for you to create a plug in to do it because this is about functionality and not appearance. If you want to use the functions file it'll work fine but don't forget if you ever change your theme you'll need to copy that code into your new theme or create a flash plugin for it. So, here I am in my themes function file encoder and I'll scroll down to the bottom to add my new function. First I'll add a comment so I know what I'm doing. [SOUND] Then, I'll create my function. As we can see from the instructions here, I need to include these parameters. And then I add my function inside the braces. What we're doing here is identifying whether the name variable, which is actually the slug for each of my attributes, is either pa_range or pa_audience. And Woo Commerce adds the pa prefix to all of your attribute slugs. And if so, it's registering them for menus. But to make this work, I need to attach it to a filter. And that filter is called woocommerce attribute show in nav menus. And then I have the name of my function which I'll complete from here. And I need to add a priority. So I'll save my functions file. And then go back to my site, open my menu screen and refresh it. And now range and audience have been added on the left-hand side. So, I can add all my ranges and all of my audience types to my menu when I want to. So let's do that. Now I'm going to add a top level link here to a new page that I've created called Our Ranges. At the moment that page is empty but I could add some content to it, linking to the ranges, maybe including a slideshow or a gallery. So I'll add that to the menu. And it'll get placed on the bottom. I'm going to leave it there for the moment while I add the ranges themselves. I'll select all of those, add them to the menu as well, and then I'll drag them across here so that they're sub-items of that our ranges page. And then finally, I'll drag the whole lot up So it's immediately after the homepage. Now I'll save my menu. And let's take a look at it. The first thing you'll notice is that the Mega Menu plugin has added styling to the menu, which has overridden all the styling we added for our navigation menu. In the first course. We'll come back to that in the next part of the course and we'll fix it. But here's the our ranges section. Now I want to turn that into a megamenu. So let's go back to the menus admin screen. Click on our ranges, and here is a megamenu link. And to turn that into a megamenu I change this setting here from Flyout Menu to Mega Menu. And that's it. Save the menu. Go back to my store. Refresh. And you can see I've now got a mega menu here. Now this doesn't look fantastic at the moment. It's not in line with the styling on my store and it's not laid out very nicely. But we'll come back and fix that in the next part. Now, I'm going to add some more mega-menus. So I'll turn clothing into a mega-menu. I'll turn music into a mega-menu. And I'll turn posters into a mega-menu. Now some of these haven't got very many items in them, so they're not really gonna be very good mega menus. So what I'll do is add products to them. Let me save the menu first. Now to make my products easier to find and add to my navigation menu, I've made some changes to them. I've changed the names of those products where it was difficult to see what sort of product they were. So, for example, this poster was just called flying ninja. Now for me trying to find that in my menu screen and add it would've taken ages. So I've changed some of the names. So I can find them quite easily and add them to my navigation menu. If you want to, when you've done this, you can go back and change them back again. And I did this really easily using the Quick Edit function, which works right in this screen. So I click on Quick Edit. Edit the name of my product. That's now called Woo Logo Poster. And I click on Update. Now you can see that that says Woo Logo Poster. I did that for all of my hoodies, posters, and t-shirts. I just need to do this one to finish off, making sure I make it consistent with the rest of the products. Scroll down and click on Update. Now I'm going back to my menu's Admin screen to add these to the menu. So let's open up products here, and we can do a search. I'm going to search for all my t-shirts to which I added the word tee. And here are my three t-shirts, I'll click on all of them and add them to the menu. And here they are down the bottom. I'll drag them up so they're underneath the T-shirts item in my menu. Here we go, I'll do that with all three of them... and then you can see they've been added to my menu. If I save my menu now, and go back to my site, refresh the screen, and that clothing is looking a bit more recognizable as a mega menu. I've now spent a bit of time working on my menu, and I've added a whole load more links to it. Let's take a look at it in the front end of the site. So I'll refresh my screen. And as you can see, there's a whole load of content here that people can access. Now, the other thing you can do with a mega menu is you can add widgets to it. So for example, this About This Store section. I'm going to add a widget here With some text to tell people about the store. So, I'll go back into my menus item, and I don't need to go through the widget screen to do this. I can add them from right within the menu screen. So I work my way down to About This Store. Click on Mega Menu. Select Mega Menu here. And there are no widgets at the moment but I can select one and I'm going to select text. I open up my text widget, I don't want a title for it but I just want to type in some text. [SOUND] I'll save that, close it down, get back to my front end and refresh, and you can see that this gets added to the mega menu. This text widget accepts HTML so you could add anything you wanted to here. Now, I'm going to add a text widget to one of the other mega menus to insert an image. So here in clothing, I'm going to add a text widget with an image of some of my clothing. So first, I'll go into my media library and find a suitable image. Let's use this one. Here's my URL for it, I'll copy that. I'll come back out of there and into my Menus screen. Move down to my Clothing Mega Menu and then add a Widget, which will be the Text Widget. And I'm going to add the HTML to display that image. I'll save that, close it, don't forget to save the menu, and then go back to my front end, hit refresh and take a look at that clothing. And here you can see the image displayed as part of that. At the moment that image is slightly too big. We'll move it to the right hand hand side. That's how you set it to the main menu. Add links, widgets, images, and anything else you want too it. You could install any plug-in that adds a widget to your site. So for example if there's a widget for a slide show you could install that plug-in and activate it, set up a slide show and add it to your mega menu as a widget. There's really nothing you can't add to your mega menu because of this ability to insert widgets. But that styling is still a problem, so what we're gonna do in the next part of the course is check out the styling that the Mega Menu plugin is adding, and override it with our own styling. See you next time, and thanks for watching!

Back to the top