5 Minute Masterclass: Hiding Categories in BigCommerce with jQuery

5 Minute Masterclass: Hiding Categories in BigCommerce with jQuery

This article has been updated with a simpler method, which you can read here. The method described in this post still works and may suit your requirements.

There’s a hot topic at the moment on the Official BigCommerce Forums regarding hidden categories. Originally you could hide a category from being visible in the menu, but still link to it; ideal for landing pages or email promotions. This feature later disappeared, and now hidden categories are treated as disabled.

Using a bit of jQuery, we can replicate the old feature by hiding menu links matching or containing specific keywords.

To do this, we need to open the panel SideCategoryList.html in the template editor (Design > Store Design > Browse Template Files).

At the end of the file, we need to paste the following code snippet:

<script type="text/javascript"><br> $('.SideCategoryListClassic ul, .SideCategoryListFlyout li').remove(":contains('Keyword'),:contains('My key phrase')");<br> </script>

This works for both classic mode and the newer flyout/dropdown menu style category menus. To match a category, replace Keyword in the :contains(‘Keyword’) part. If you only have one category you want to hide, remove the next part ,:contains(‘My key phrase’), or add as many other phrases with extra ,:contains(‘category names here’).

Any questions, as always, drop me a comment below.

Duncan

4 Comments on “5 Minute Masterclass: Hiding Categories in BigCommerce with jQuery”

David Waters

Hi, Duncan,

It was my OP that started all this off!

I’ve tried your code, and it works fine if you want to hide the top level category, but what about those sub-categories! My need is to hide ones that are two or three levels deep, but keep those visible that are above them. I tried entering the category string ‘main/sub1/sub2/cat-tohide/’ but that didn’t work.

Is there a bit of code that would do this?

regards (and thanks for posting about this)

David


Duncan

Hi David,

You would need to tweak the code a little to work through the selectors. I’ve set a demo up here: http://hiddencats.mybigcommerce.com/notebook-cases/, this is the link to the hidden category ( Notebook Cases has been hidden from the Shop Mac category)

To achieve this, I used the following code:

<script type="text/javascript"><br> $('.SideCategoryListClassic ul li ul li, .SideCategoryListFlyout ul li ul li').remove(":contains('Notebook')");<br> </script>

You would have to be a bit selective about where you always place your hidden categories, I guess one level down would suit a lot of store owners though?


David Waters

Duncan,

Thanks for that, but it’s going to get very messy in my store as quite a few sub-cats are down at level three, with many more being at level two.

Fixes such as yours are superb if you’ve only got one or two easy ones to implement, but I have over 190 sub-categories, so I’ll probably wait now for the permanent fix that Thomas Blahnik has just suggetsed in my post on BC’s forum.

ttfn

David


Duncan

David,

Too true, jQuery hacks get the job done but it would be so much easier to have control built into the back end. I noticed the suggestion from Thomas and I look forward to seeing it implemented.

Just a matter of waiting

Duncan