How to Move Primary Menu Storefront WooCommerce

Storefront Move Primary MenuDo you want to move the primary menu to a different location in your WooCommerce store? WooCommerce is flexible for customization, which is why it powers many online stores. WooCommerce is backed up by more than 5 million active installations in the WordPress community. With all that user-data, they can get enough feedback to improve significantly towards what their users want.

Storefront Move Primary Menu

WooCommerce does not have a built-in option to change the position of the primary menu. It is very easy to set the primary menu in the WordPress Menu Editor. The Storefront theme supports the primary menu, secondary menu, and a handheld menu. Menus can be edited using the built-in WordPress Menu Editor located at Appearance > Menu.

The WooCommerce Storefront theme displays the primary menu just below the site tag line.primary menu

However, most themes list pages as the menu items by default if you do not edit the menus. The primary menu allows the Storefront theme to use more than one menu. You can switch between the menus you have created.

Steps to Move the Primary Menu in the Storefront Theme

If you want to move the navigation menu below or outside the header, you need to enter a few code lines. There is no need to create a new header.php file. All you need to do is add the code I will share in the functions.php file.

Here are the steps that you need to follow:

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to move the header’s primary menu.
  3. Add the following code to the function.php file:
function child_theme_init()

{

remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );

add_action( 'storefront_before_content', 'storefront_primary_navigation', 5 );

}

add_action( 'init', 'child_theme_init' );
  1. This will be the outcome:move primary menu

Conclusion

In this post, you have seen how it is very easy to move the primary menu position. However, you need to redo all the menu styles, which might take a longer time. You also need to be careful when adding code to the functions.php file. This is because if you make an error, your site will crash. Now you know how to move the navigation menu outside of the header for the storefront theme. Additionally, if you are not comfortable with handling code, please contact a WordPress developer.

Similar Articles

  1. How to Create Custom Widget Area in WordPress Step by Step