About this:
If you have many categories or perhaps your color filter contains a lot of colors, and your side-bar is longer than the amount of products on the page. You might want to hide excess amounts and only show them when the customer clicks to see more.
- category 1
- category 2
- category 3
- category 4
- category 5
Where to add the script?
Add the script in the Flatsome Advanced settings which can be accessed from your dashboard. Paste the script (including the script tag) in Global Settings > Footer Scripts.
It can also be place in the footer.php if you’re familiar with FTP, coding and have placed the footer.php in your child-theme.
The Script
<script type="text/javascript">
jQuery(document).ready(function() {
// The button
jQuery('<span class="toggle">More</span>').appendTo('#shop-sidebar .product-categories, #shop-sidebar .woocommerce-widget-layered-nav-list');
// Hide categories when more than 5
jQuery("#shop-sidebar .product-categories li").slice(5).hide();
// Hide attribute filter options when more than 5
jQuery("#shop-sidebar .woocommerce-widget-layered-nav-list").each(function() {
jQuery(this).find('li').slice(5).hide();
});
// Button function and toggle
jQuery(".woocommerce .toggle").click(function(){
jQuery(this).siblings("li").slice(5).slideToggle();
jQuery(this).text(jQuery(this).text() == "More" ? "Less" : "More");
});
});
</script>Editing the script
You can edit the script for purpose of translation or amount of items shown. Or perhaps to collapse the filter but not the categories.
Stay Connected
Flatsome is the perfect theme for your shop, company websites or client websites. It has all the tools needed to create super fast responsive websites with amazing user experience.
Starting a project?
Looking to start a website project for a new Flatsome website or webshop? Already got a Flatsome site but looking to redesign it?
Got a question?
Want to ask a question of request more information on what we do within Flatsome? Shoot us a message or feedback.