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() {

        // Button function and toggle
        jQuery(".woocommerce .toggle").click(function(){
            jQuery(this).text(jQuery(this).text() == "More" ? "Less" : "More");

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

Get in touch

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.