Mobile menu is a new helpful feature updated in Woostify 2.0.6. In this tutorial, I will show you some useful options of mobile menu and how to customize the mobile menu in your WooCommerce site with Woostify.
What does Woostify mobile menu offer?
In the previous versions of Woostify, there is also mobile menu but you are not allowed to enable/disable or edit it on your site.
Now, with the presence of Woostify 2.0.6, you can have full control over mobile menu on your site. Let’s get started!
How to customize mobile menu on your WooCommerce site?
Follow the steps below to activate the menu tab on mobile option and customize it on your WooCommerce store.
Step 1: Access the Mobile menu option.
From your WordPress dashboard, go to Appearance > Customize > layout > Mobile menu
Step 2: Customize mobile menu
There are 2 sections that you can customize within the Mobile menu, including General and Design.
General
In the General section, you can:
- Hide Search Box: turn the button into green to hide the search box.
- Hide Login/ Register Link: turn the button into green to hide the login/register link.
- Show Categories Menu on Mobile: turn the button into green to enable the menu tab on mobile.
Design
In the Design section, you can edit:
- Hamburger icon color
- Menu background color
- Text color
- Tab color
- Tab background color
- Tab Padding
- Nav Tab spacing bottom
Once finishing all things, click the Publish button to save your changes.
With the steps above, you have customize mobile menu and enable the option Show Categories Menu on Mobile on your site.
To really show your product categories on mobile menu, you need to create a menu then assign it as the categories mobile menu.
Step 3: Create a menu and set it as categories menu on mobile
Follow the process below to create a menu on WordPress site and display it as the mobile menu tab.
- Click Appearance > Menus
- On the menu customization page, click on the link called “create a new menu” to create a new WordPress menu.
- Give your menu a name and remember to check the box called “Mobile Categories Menu (Currently set to: Category menu)” so that it will be shown on the Categories menu tab on mobile. After that, click Create Menu to save it.
- Then, you add items to the menu by choosing any items on the left side and clicking the Add to Menu button to add them to the menu you have created.
- You can also rearrange the position of each element with some drag and drop.
- Finally, hit the Save Menu button.
- Now, take a look at the site frontend to check if it works as you expect.
