Cubecart: How to show sub-categories in the sidebar

By default, Cubecart v4 shows only the ‘top-level’ product categories in the sidebar. If you’ve added additional sub-categories, you can enable the DHTML menu in Admin which gives drop down style ‘fly-out’ menus. However, what if you want to show your sub-categories all the time?

The DHTML menu option in Admin makes Cubecart creates nested lists for the subcategories. What we will do here is keep that functionality but remove the Javascript call which hides them and then style their visibility with CSS. Let’s begin:

In the skins[yourskinname]/styleTemplates/global/index.tpl file:

Find this line:

Remove the ‘initialiseMenu();’ call so you just have this:

Now, in the skins[yourskinname]styleSheets/layout.css file, near the bottom find this:

.li-nav .ul-nav {
display: none;
position: absolute;
margin-left: 100px;
margin-top: -19px;
border-left: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-top: 4px solid #70cdcc;
z-index: 99;
}

That’s what keeps the sub categories hidden until hovered over with the DHTML menu enabled in the Admin. You’ll need to remove the ‘display:none’ and other settings to get your sub categories staying visible. Then style and position at will with CSS.