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

Facebook0
Twitter0
Google+1
LinkedIn2

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

  • Choosing a Theme for WooCommerce – What to Consider?Choosing a Theme for WooCommerce – What to Consider?
  • How to Change the Arrows in Pagination for Storefront and WooCommerceHow to Change the Arrows in Pagination for Storefront and WooCommerce
  • How to Move the Navigation Menu Outside of Header for StorefrontHow to Move the Navigation Menu Outside of Header for Storefront
  • How to Add a Top Bar in Storefront ThemeHow to Add a Top Bar in Storefront Theme
Facebook0
Twitter0
Google+1
LinkedIn2

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

  • Security Vulnerability in Spam protection, AntiSpam, FireWall by CleanTalk
  • How to Fix Any Issue in WooCommerce – A Step by Step Guide
  • Do This Right Now to Protect Your WooCommerce Website from Credit Card Attacks (And Save Yourself From Enormous Fees)
  • Elementor Ecosystem of Plugins Rocked by Vulnerabilities
  • How to Fix Your Website Structure
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 © 2022 · Wooassist

Yours FREE!

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