• The structure of a mega menu contains Mega menu heading, sub-pages and widget area.
• Mega menu helps icons to be shown next to pages and sub-pages on the Navigation bar
Step 2: Click the triangle icon on the right of Shop pages item then it will expand into many options like:
Navigation label: name of the parent page (Shop page)
Icon: you can select an icon of the page and change size, color and position of the icon here. Click the arrow icon to opt an icon and click the stick icon to make alternations to the icon.
Enable Mega menu: ticking this box allows display of megamenu
Mega menu column: This option has a drop-down list of different numbers of columns shown in Mega menu area. The number varies from 2 to 6. On our demo site, this number is 4.
Hide Mega menu heading: Check this box if you want to hide Mega menu heading. In our demo, Shop pages item is considered to be a Mega Menu heading. When you choose option of hiding mega menu heading, Shop pages title will automatically disappear on Mega menu area.
Step 5: Mega 2, 3 and 4 constitute the widget area of Mega menu. Therefore, before making any changes to options included in these three items, please assure that you created sidebars and widgets corresponding to them:
- We have three sidebars: Menu Sidebar One, Menu sidebar Two and Menu Sidebar Three.
Learn more about creating sidebars:
- Next, navigate to Appearance > widgets > drag WooCommerce Products widget to Menu One, Menu Two and Menu Three. Click the triangle icon then you will have further options like Title, number of products to show, Show (All products, Featured products, On-sale products), Order by(Date, Price, Random and Sales), Order (Descending or Ascending), Hide Free Products, Show Hidden Products.
Learn more about adding widgets to a sidebar:
Step 6: Click Save menu