11th April 2012

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">
$('.SideCategoryListClassic ul, .SideCategoryListFlyout li').remove(":contains('Keyword'),:contains('My key phrase')");
</script>

Hidden Categories with jQuery

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.

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

David Waters
15th April 2012 at 6:31 pm

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
15th April 2012 at 7:10 pm

Hi David,

You would need to tweak the code a little to work through the selectors. I’ve just set a demo up here: http://hiddencats.mybigcommerce.com/notebook-cases/, you’ll see that 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">
$('.SideCategoryListClassic ul li ul li, .SideCategoryListFlyout ul li ul li').remove(":contains('Notebook')");
</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
16th April 2012 at 6:32 pm

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
17th April 2012 at 10:48 am

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

Leave a Reply

Would you like to improve your conversion rate?

Get a free design analysis and report for your ecommerce site

Submit your details below to receive a free, tailored 12 point conversion rate optimisation report for your website:

Free, no obligation service. We will not share your details.

Thank you for your request!

One of our conversion rate optimisation team will be reviewing your site soon, and we will send your free  report in the next 5 working days.