Wooassist

Assistance for Your Woocommerce Store

  • How it Works
  • Pricing
  • Site Maintenance
  • Blog
    • How-To Articles
    • Code Snippets
    • SEO For E-Commerce
    • Theme and Plugin Reviews
    • Wooassist News
    • WordPress/WooCommerce News
    • Interviews
  • About Us
  • Contact
You are here: Home / Code Snippets / How to Rename Primary Menu in Mobile View for Storefront Theme

How to Rename Primary Menu in Mobile View for Storefront Theme

February 26, 2015 By Nick J 6 Comments

Updated 18/2/16 : Storefront Theme was updated. Adding a filter hook to rename the navigation.

Rename Primary Menu in Mobile View for Storefront ThemeIf you have donned the Storefront Theme by WooThemes and tested the mobile view, you might have noticed that your main navigation/menu turns into a collapsible menu. While this menu does serve its purpose in the mobile view, it being named “Primary Menu” isn’t very desirable. You most likely need to change it to something more appropriate for your needs.

Different websites have different navigations so from the theme developer’s standpoint, putting in a not very descriptive text like “Primary Menu” will serve its purpose just fine. But for a website owner like you who knows what he wants, you’d want something more specific for that mobile collapsible menu. Maybe you’re selling your own line of apparel and your menu is filled with different product categories, so you want the text to be something like “Product Categories”, “Browse Clothing Line” or maybe even make it a call-to-action like “Shop Now” or “Shop Online”. Bottomline, you know what you need the text to be on that mobile collapsible menu. Lucky for you, it’s easy enough to accomplish with a few lines of code.

Get a Child Theme

Before we proceed, make sure you are running your website on a child theme. To begin with, there is really no reason why you shouldn’t have a child theme unless you want any changes you made to your theme to disappear whenever the theme updates. If you don’t have a child theme yet, get one.

Add the Filter

Now that you have a child theme, paste this code into your child theme’s functions.php file.

add_filter( 'storefront_menu_toggle_text', 'jk_storefront_menu_toggle_text' );
function jk_storefront_menu_toggle_text( $text ) {
 $text = __( 'MY NAVIGATION' );
 return $text;
}

 

Change the Text

Do you see the line with the following code?

$text = __( 'MY NAVIGATION' );

You’ll just need to modify the text “MY NAVIGATION” and change it with the text that you want on your collapsible mobile menu.

 

People that read this article also liked

How to Move the Navigation Menu Outside of Header for Storefront How to Change the Arrows in Pagination for Storefront and WooCommerce How to Remove Horizontal Line under Page Title in Storefront Theme Choosing a Theme for WooCommerce – What to Consider?

Filed Under: Code Snippets, How-To Articles Tagged With: call-to-action, child theme, code snippet, design tweaks, how-to, mobile friendly, navigation, responsive design, Storefront, woothemes

Comments

  1. Erwin List says

    January 26, 2016 at 12:53 pm

    Thank You for the code, but it did not work, It does change the name but the menu does not display.

    Reply
    • Nick J says

      February 23, 2016 at 7:01 am

      Thanks for alerting us to this. Themes update from time to time. Unfortunately, one update rendered the code mentioned here to not work. We have updated the article with the correct code to rename the primary menu in mobile view for Storefront.

      Try using this filter hook instead.

      add_filter( 'storefront_menu_toggle_text', 'jk_storefront_menu_toggle_text' );
      function jk_storefront_menu_toggle_text( $text ) {
      $text = __( 'Navigation' );
      return $text;
      }

      Reply
      • Debbie W says

        November 24, 2016 at 1:37 am

        Tried both one in this article and one from you Nick J. Entered into my storefront, deli them functions.php,neither one worked. When I go on my iPhone to check my website the Menu with the 3 horizontal lines still shows. Have to click on menu to see the menu of the categories.

        Reply
        • Nick J says

          February 13, 2017 at 7:18 pm

          Hi Debbie, this may be because of the syntax when copying and pasting. We have updated the comment and enclosed it in a code format. It should work now.

          Reply
  2. Annie says

    September 14, 2016 at 10:09 am

    Thanks for this snippet, worked like a charme!

    Reply
    • Nick J says

      October 4, 2016 at 4:30 pm

      You’re welcome! Glad we could help!

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Woocommerce Support

wooassist-team-in-Iloilo

Get 2 Hours of
FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $75

BUY NOW

Happy Wooassist Customers

Awesome! Fantastic! I just went to our site and I see that our site has been fixed!! We are getting orders again thanks to you all at WooAssist! Our site has not worked and looked this good for many months!! You all are awesome! Thank you so much for fixing our site! You have a customer for life! Thanks for making my day wonderful!

Kenneth Arnold

We have been quite pleased working with WooAssist as they help fill in the gaps of our development needs, all at a great price. They are always timely and communicate great, I highly recommend their services.

James Grasty

My husband and I am EXTREMELY pleased with the WooAssist Team. They provide excellent service, are very knowledgeable, and super easy to communicate with. The team ALWAYS has our company's best interests in mind. I love WooAssist! All of you make my job easier.

Jennifer Taft leetaft.com

Categories

  • Code Snippets
  • How-To Articles
  • Interviews
  • SEO For E-Commerce
  • Theme and Plugin Reviews
  • Wooassist News
  • WordPress/WooCommerce News

Recent Posts

  • The Ultimate Guide on How to Set Up Shipping on Your WooCommerce Store
  • WordPress Site Gets Infected
  • Where to Hire a WooCommerce Developer?
  • Recent Spike in Attacks Targeting Outdated WordPress Plugins
  • Security Vulnerability in Spam protection, AntiSpam, FireWall by CleanTalk
Let us support your online store so you can manage your business

Get started today

Get 2 Hours of FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $75

BUY NOW

Free eBook

Your subscription could not be saved. Please try again.
Your subscription has been successful.

YOURS FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales

Quick Links

  • How it Works
  • Pricing
  • Blog
  • Contact
  • About Wooassist
  • My Account
  • Checkout
  • Privacy Policy
  • Cookie Policy
  • Terms and Conditions

Wooassist

Australia:
8 Storie St.
CLONTARF QLD 4019

Philippines:
San Miguel St.
Poblacion, Iligan City 9200

Connect

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

Copyright © 2023 · Wooassist

Yours FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales