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
The topic ‘Scrollable product categories widget’ is closed to new replies.
.
