Scrollable product categories widget

Hi, how can I get the product categories widget to be like the layered nav widget with a max height and scrollable.

I have a store with a lot of categories and sub categories so it takes to much height and all the other filters get so far down that customers are not using them.

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body #woocommerce_product_categories-1{
height:100px;
overflow:auto;
}
 #woocommerce_product_categories-1::-webkit-scrollbar {
		width: 3px;
}
		
 #woocommerce_product_categories-1::-webkit-scrollbar-track {
	background-color: rgba(0,0,0,.15);
}
		
 #woocommerce_product_categories-1::-webkit-scrollbar-thumb {
		background-color: rgba(0,0,0,.25);
}
		
 #woocommerce_product_categories-1::-webkit-scrollbar-thumb {
		background-color: rgba(0,0,0,.25);
}

If it does not work (it may be as I do not know which ID is applied) please provide page URL with your categories.

Best Regards

I made it a little bit better, this way the Widget title doesn’t get hidden when scrolling

body #woocommerce_product_categories-3 .product-categories{
	height:280px;
	overflow:auto;
}
#woocommerce_product_categories-3 .product-categories::-webkit-scrollbar {
	width: 3px;
}
#woocommerce_product_categories-3 .product-categories::-webkit-scrollbar-track {
	background-color: rgba(0,0,0,.15);
}
#woocommerce_product_categories-3 .product-categories::-webkit-scrollbar-thumb {
	background-color: rgba(0,0,0,.25);
}
#woocommerce_product_categories-3 .product-categories::-webkit-scrollbar-thumb {
	background-color: rgba(0,0,0,.25);
}

It only target the UL element.

Thank you so much

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts