WordPress & WP e-Commerce. How to create your custom menu and add product categories

I see these questions a lot…….

I have two home links on my menu how do I remove one?
How do I make a custom menu?
I made a custom menu but it does not appear?
How do I add Product Categories to my custom menu?
I can not see Product Categories in the menu screen?

So let’s answer all of those questions in one post!

Notes:
WP e-Commerce plugin fro WordPress shall be referred to as WPEC.
this information was created in response to questions from Storefront Themes users but should be applicable to all

First why do you have two home pages showing on your menu?

WordPress has a shiny new menu system called “Custom Menus”. This new and powerful system requires input from you, it needs you to actually create a menu. So when you first add a theme and WPEC to WordPress it uses the old default system of automatically adding a “Home” to the menu which links to your sites location, it is just a link, not a page you could edit. WordPress will continue under the old system to add any pages you create to the menu bar automatically. If you create a page called “Home” it is automatically added to the menu and now you have two Homes. You do not have two home pages, just two references to Home. WordPress automatically adds pages to the menu bar UNTIL you setup a custom menu. The custom menu completely replaces this auto-generated menu.

The custom menu system allows you much quicker and more powerful control over your menus. For things to work properly with WPEC  you must have a custom menu. If you have two Homes you do not have your custom menu setup properly yet..

How do I make a custom menu?

Lets  make this easy shall we, many a person has asked how to do this before, it is basic WordPress functionality. I shall not write a long explanation when a video will reveal all. This video covers creating a custom menu in WordPress very well. Watch out though, before you leap in, finish reading the rest of this post. There are specific things to be aware of when building your custom menu for WPEC. So onto the video..


creating WordPress custom menus video

I made a custom menu but it does not appear?

The problem is you have not assigned your menu to the navigation area. You must have your custom menu made and saved in the Menus screen. Then towards the top left of your WordPress Menu Screen, you will see the “Theme Locations” panel. Here you choose your custom menu from the drop down list and assign it to “Main Navigation”. Now you must click the Save button in the “Theme Locations” panel, problem solved.

How do I add Product Categories to my custom menu?

First some brief explanation of how you use Categories in WPEC. You create Product categories (not regular Post categories) and assign your products to them. How to do that properly is a topic for another post! I will for now point you to the right areas. Create your Product Categories here…


The WPEC Product Category screen, WordPress menu access is bold

Then you assign your products to one OR more Product Categories in the individual product editing screen by checking the boxes as shown below…


The WPEC Product screen showing assignment of Product to Product categories

Ok you have all of your Product Categories created and products assigned to them, well OK you just made a couple so you can try it out, that’s fine. Now go to the WordPress Appearance/Menus section. Below pages and categories boxes, like in the video above, you will also see Products and the Product Categories you created. Just add the product categories to your menu. Arrange them as you wish, remember you can make them into pull down menus by staggering them. Don’t forget to add your Home page to your menu from the pages box!

I can not see Product categories in the menu screen?

Oh oh, what is he talking about, there are no Products or product Category boxes on my menu screen! In the very top right corner of the screen you should see “Screen Options”. Click it, a panel will slide open with lots of checkboxes.
Check the ones you want, Products, Product Categories, maybe even Posts if you will be blogging. Click “Screen Options” to close the panel. You should now have the extra panels for adding things to your menu. Confusingly sometimes you will have two checkboxes labeled Categories. One of them is your Product Categories, one your Post categories, you can figure it out. I have faith! By the way, every area of WordPress has that Screen Options panel with different related options that you may wish to see or not.


Screen Options panel showing options for the Menu Screen with WPEC installed

Ok Th-th-th-that’s all folks! as the famous pig said, get to work.

10 Comments

  1. Andrew Tran
    May 28, 2014

    Thanks so much! I don’t think about “Screen Options” 😀

    Reply
  2. ??ng-T?ng
    March 4, 2014

    Tks for “Screen Option” … tks u so much

    Reply
  3. sDee
    June 28, 2013

    Thank you for the post!!!! Just the solution I needed – who’da ever guess the answer was in the SCREEN OPTIONS TAB.

    Reply
  4. Jeremy From Seattle
    July 10, 2012

    Do you know how to change the Category Page Header from ‘Products in the “_____” Category’?

    I want it to just say the category…should be simple but I cant find where it is.

    Reply
    • Jeremy From Seattle
      July 10, 2012

      Never mind, found your answer in the forums. Thanks!

      Reply
    • mgason
      July 10, 2012

      Hi,
      it is not just a setting. You need to edit some PHP. See this post, it is easy. The post is for Xyloto theme, but has a note for the edit location in Elegance. I am assuming you have that theme?
      http://gasolicious.com/storefront-xyloto-theme-remove/

      Reply
  5. Bonita
    June 24, 2012

    Thanks, you rock! I started adding in all of my Product Categories into the menu manually, but I thought: “This makes no sense, WordPress MUST be able to pull this straight out of the Product Categories I’ve already created?!!?” So I did a search, landed on this page, and got the answer! 😀

    Thanks so much!

    Reply
  6. Phil Barnes
    March 6, 2012

    Thanks for the great info, you just saved my screen from a right jab 😉

    that screen options gets me everytime, I was starting to wonder why I could not see “Product Categories” on my menu setup, but could on another install I had.

    Thanks again,

    Phil
    @phil_at_101

    Reply
  7. Madeline
    December 19, 2011

    Hello, Thank you for this wonderful tutorial! I am running into one problem and wonder if you might know a way around it. When I am on the front end of the site, and I am trying to move my mouse from the first tier of menu options to the second tier, both of those lists are too far away from each other for me to be able to drag my mouse and click on the second tier. Any suggestions on how to fix this?

    Reply
    • mgason
      December 19, 2011

      Hi Madeline
      you can use the contact form to send me a link to your site. Then we will be in email contact. OR if you are using a Storefront themes, theme you can post on their forums and it will be me who answers your question.
      If it is the Edge theme as I suspect it may be, then the answer is in this post on the Storefront Forums. http://storefrontthemes.com/forums/topic/submenu-problems#post-14670
      You will need to tweak the number in top: 35px ! important; to suit your gap

      Reply

Leave a Reply