Change Filter Tab Order in Divi Supreme Filterable Gallery Module

Written by Dan Mossop

Divi Supreme Pro is a third-party plugin which adds 40+ new modules to Divi. One of these modules is the Divi Filterable Gallery Module, which lets you display a gallery (similar to Divi's built-in gallery module), but with several enhancements including category-based filter tabs. If you'd like to change the order of these filter tabs, here's how to do it.

First, here's an example of the type of tabs it adds above the gallery: 

Change the Filterable Gallery Category Tabs with CSS

In the Divi Supreme filterable gallery module, there isn't currently a built-in option for setting a custom tab order. However, it's possible to do it with some CSS code.

You can put your tabs in a custom order using CSS similar to the following:

.dsm_filterable_gallery .dsm-filterable-category-container {
    display: flex;
    justify-content: center;
}
.dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category] {
    margin-right: 10px !important;
}
.dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="all"] {
    order: 1;
}
.dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="donuts"] {
    order: 2;
}
.dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="cookies"] {
    order: 3;
}
.dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="bananas"] {
    order: 4;
}
.dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="apples"] {
    order: 5;
}

As you can probably tell, after a bit of setup, there are 5 rules which each affect a single category filter tab (identified by its category slug), setting its "order" in the filter tab list.

You can add this in the "Divi > Theme Options > General > Custom CSS" box, but note that that will apply it to all filterable galleries. If you plan on using more than one gallery, then I'd recommend giving your module a CSS Class such as "filterable_gallery_custom_tab_order" at:

Supreme Filterable Gallery Settings > Advanced > CSS ID & Classes > CSS Class

Then replace the ".dsm_filterable_gallery" at the start of each block in the CSS code above with ".filterable_gallery_custom_tab_order". That way, the CSS code will only apply to that one Divi Supreme filterable gallery.

Here's the result, after sorting the tabs with the CSS above:

Enhance Your Divi Galleries with More Flexibility

Unlock new design possibilities with the Divi Supreme Pro plugin. Featuring the powerful Divi Filterable Gallery Module, you can create engaging galleries with custom filter tabs and advanced styling. Perfect for showcasing your creative content.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

11 Comments

  1. Hi Dan, Thank you for the code! It doesn't seem to be working for me though.. I inserted the code below into my custom divi CSS area but the tabs are still in ascending order (https://eudoramicroblading.com/portfolio/) any help would be greatly appreciated!

    .dsm_filterable_gallery .dsm-filterable-category-container {
    display: flex;
    justify-content: center;
    }
    .dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category] {
    margin-right: 10px !important;
    }
    .dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="microblading"] {
    order: 1;
    }
    .dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="powder-ombre"] {
    order: 2;
    }
    .dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="combo-brow"] {
    order: 3;
    }
    .dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="nano-machine"] {
    order: 4;
    }
    .dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="healed-brows"] {
    order: 5;
    }

    Reply
    • Hey Olivia,

      I think the problem here is that the data-category values in your CSS don't exactly match the values the gallery module is outputting in the page. Try this instead:

      .dsm_filterable_gallery .dsm-filterable-category-container {
      display: flex;
      justify-content: center;
      }
      .dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category] {
      margin-right: 10px !important;
      }
      .dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="microblading"] {
      order: 1;
      }
      .dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="powder ombré"] {
      order: 2;
      }
      .dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="combo"] {
      order: 3;
      }
      .dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="nano machine"] {
      order: 4;
      }
      .dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="healed brows"] {
      order: 5;
      }
      

      Note that I've removed hyphens, added the accented "é" in "powder ombré" and changed "combo-brow" to just "combo".

      I hope that helps, but let me know if it still doesn't work for you. Thanks!

      Reply
      • that worked! thank you for your quick response.

        Reply
        • You're very welcome, Olivia! I'm glad I could help :)

          Reply
  2. Hey Dan,

    Thank you for the great article. I will definitely use your code! Beside of this, I'm struggeling with another issue of the Supreme filterable Gallery and thought that you maybe have some hints for me:

    I use the Supreme filterable Gallery to show my photos. For example "environmental", "wedding" and "traditional" portraits. I want the pictures to be opened in a Lightbox when clicked. But the lightbox shows ALL the pictures of the whole gallery. How can I tell the lightbox to only show the pictures of the selected category?

    Do you have yome idea? Thank you very much!!!

    Reply
    • Hey Nils, thanks for asking. That behavior of showing all images in the lightbox seems to be quite deeply embedded in the module. I don't think there's a simple fix (as there was for the tab order) – it will probably require some more involved code.

      Can I suggest first asking Divi Supreme themselves about it:

      https://divisupreme.com/contact/

      They may already have some code for this or a workaround they can give you.

      If they aren't able to help, let me know and I'll try to do some deeper digging in the code to see what can be done about it.

      Reply
      • Hey!!! Thanks for the quick reply! I already wrote to the Divi Supreme team yesterday. So I will let you know whatever they answer… Thank you again and keep up the great work! Have a good day!!!

        Reply
      • Hey Dan,

        Now I got the answer from Divi Supreme support:

        Unfortunately, due to the current limitations of the Divi theme, the lightbox is unable to display images by category as you've described.

        We anticipate that the upcoming Divi 5 update might include enhancements that could potentially address this limitation.

        So there doesn't seem to be a simple solution…

        Reply
        • Ah, no luck. I just took a look in their code but can't see any simple way to achieve this behavior, I'm afraid.

          An alternative approach that could do what you need is to split your galleries up into one gallery per category, and then set up tab buttons (in place of the filters) to show / hide the correct galleries.

          This post explains how to do it with code:

          Reveal a Divi Module (or Row / Section) when Button Clicked

          If you want to avoid messing with code, you can do it more easily with my Divi Show / Hide Button module.

          Give me a shout if I can help any further with it.

          Reply
          • Wow!! Genious! I wouldn't have come around this solution… You really solved my problems!! I bought your module and its already working fine!!! Thank you so much!

          • You're very welcome, Nils! I'm glad the module is working for you! If you need any further help with it, just let me know. Thanks!

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.

Latest From Divi Booster

Fix Divi Text Module "Regular" Font Weight Not Working

Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

Make the Divi Gallery Module Swipeable

The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to...

How to Use Divi Dynamic Content in Woo Modules Product Selector

Divi's Dynamic Content is a powerful feature that lets you populate your Divi modules and theme builder templates with data pulled in various sources, such as custom fields. This allows for efficient organization and maintenance of your sites.Unfortunately, Divi's...

Removing Gaps in Divi Builder Layouts

Designing a seamless, professional-looking website is often about managing space effectively. Gaps in Divi Builder - particularly excessive white space between sections, rows, or modules - can disrupt your layout, leading to a fragmented and less engaging user...

Random Divi Posts