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:

Discover Divi Gallery Booster

Transform your Divi galleries with the Divi Gallery Booster. This plugin provides all the styling options you need to make your galleries stand out. Enhance your Divi Supreme Filterable Gallery and more with its easy-to-use features.

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, 

7 Comments

  1. 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.