Parent Category Default Expanded Menu

Hi There,

is it possible to make the category menu expanded as default?
http://www.miramalas.com/mala-shop/

Also it would be good if I am in a category the menu stays expanded.

Thanks for your reply.

Yeah ! I want the same effect too as this : http://smokium.com/product-category/accessories/

When the sidebar’s product category (parent with sub-cat) is clicked, it stays expanded until you click the another category.

Of course, when you click the sub-cat, it stays expanded too.

Thanks for your help.

Hello,

Thank you for your question.

So you mean to open subcategories dropdown for category that you open? For example if I go to Accessories then in categories menu accessories subcategories will be shown, right?
If yes so this function we will add in the next update.

Regards

yes, exactly！

smokium.com is the live website you listed in themeforest as demo of basel theme.

is there a way to css to achieve this？

thanks in advance.

Yes, we will add this function in the future.

What exactly do you like about smokium website? Actually there are no any additional CSS code there, only theme settings, images and sliders.

thanks for prompt reply.

You mean they (smokium) simply did it in the theme setting to achieve it？If so, how？

Thanks in advance

What exactly you are interested in?

oh！sorry for my poor explanation in english.

As you have correctly described above:

So you mean to open subcategories dropdown for category that you open? For example if I go to Accessories then in categories menu accessories subcategories will be shown, right?

This is exactly what smokium.com can achieved.

And I wonder how they can achieve this without any additional CSS code there, as you explained.

As you can see in http://smokium.com

Actually it is a normal “vertical accordion” menu in sidebar. When you go to their shop page “http://smokium.com/shop/”, their sidebar shows all the product categories. Then when you click one of the parent categories e.g. Accessories (main menu):
① its sub-cat dropdown (sub-menu) will be shown up.
② the url become http://smokium.com/product-category/accessories/

When you then click one of its child categories e.g. Build Gear (sub-menu):
① the sub-cat dropdown under the active parent “Accessories” is still in place (still being shown up)
② the url become http://smokium.com/product-category/accessories/build-gear/

Until you click another parent category e.g. Atomizer:
① the previous sub-cat dropdown of Accessories will be collapsed.
② then the new sub-cat dropdown of Atomizer will be shown up.
③ the url become http://smokium.com/product-category/atomizer/

Hope above is good enough to explain what I want to achieve as smokium.com does (also using Basel theme)

FYI, I have done the setup at Appearance > Widgets and added the “WooCommerce Product Categories” in Shop page Widget Area, and ticked “Show hierarchy” already, but no luck. What I can see in my website is not a normal accordion menu. I need to actively click the arrow icon (besides the parent category) to expand the sub-cat menu, and it always collapses when you click something else.

.

Thank you for the detailed explanation 🙂

Try to add this code to the Custom CSS area in Theme Settings to achieve this

.basel-cats-toggle {
    display: none;
}

.categories-accordion-on .widget_product_categories .current-cat .children {
    display: block!important;
}

Regards

Thanks so much for your quick response.

It’s very good I can acheive it at 99% by the css code you provided.

The 1% not successful because after I click one of the child categories (sub-menu) under the currently “expanded” parent category, the dropdown collapsed right away 🙁 (even that parent category is still active)

Please help.

Try to replace it with this code instead

.basel-cats-toggle {
    display: none;
}

.categories-accordion-on .widget_product_categories . current-cat-parent .children,
.categories-accordion-on .widget_product_categories .current-cat .children {
    display: block!important;
}

Regards

Thanks so much！
It works perfectly.

Precisely the code should be:

.basel-cats-toggle {
    display: none;
}

.categories-accordion-on .widget_product_categories .current-cat-parent .children,
.categories-accordion-on .widget_product_categories .current-cat .children {
    display: block!important;
}

because there’s a space inserted in between “. current-cat-parent” 🙁

I have rated Basel with 5 stars in themeforest anyway. Great after sale services and quick response. Keep it on！

You are welcome. Thank you for posting the final solution here 🙂

And thank you so much for 5 stars, it is so important for us:)

Regards

[Author]

Posts