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’)