First, go to Appearance > Menus and click on Screen Options at the top. Ensure that CSS Classes is ticked.
To make a mega dropdown menu, first edit the top level menu item and add a class to it. To make it 5 columns, add col-5 to the CSS Classes field.
You can also make it 3 columns - 3-col and 4 columns - 4-col
You'll need to nest menu items under it like so to make columns. To include a heading within a column add the class heading to a sub menu item.
Adding an image
To add an image, first go into the Media section of WordPress and upload an image. Copy the URL of the file uploaded.
Next, add a 'Custom Link' to our menu. It should be a sub level menu item.
In this example we've called it Feature One and have a # for it's URL. This is not displayed on the frontend.
The key part is the Menu item markup.
Add this HTML code below, but replace the image path with the URL of the image you've uploaded.
<a href="#"><img src="https://themedemo.commercegurus.com/hypermart/wp-content/uploads/sites/56/2018/10/menu_feature_c.jpg" alt="Feature"/><span>Outdoor Clothing Sale now on</span></a>
That should now display in the dropdown menu.
Adding a product
This is done by first adding a Custom Link to the menu.
Replace the Link Text with the item shortcode – it will look like this.
The product id is unique to each product. To find out what id your featured product should have – go to the Products section in WooCommerce and hover over an item – and viola, the id will be revealed. Use this id in your menu label and the item should appear within the mega dropdown.
