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;
}Related Post: Adding CSS to the Divi Theme
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:
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;
}
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!
that worked! thank you for your quick response.
You're very welcome, Olivia! I'm glad I could help :)
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!!!
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.
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!!!
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…
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.
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!
I found a different solution by adding a Code Snippet with the following JS
jQuery(document).ready(function ($) {
// *************************************************
// Apply Filter via URL Query Param (e.g., ?filter=Coastal)
// *************************************************
function getFilterFromURL() {
const params = new URLSearchParams(window.location.search);
return params.get("filter");
}
function applyFilter(filterName) {
if (!filterName) return;
const $targetButton = $(`.dsm-filterable-gallery-filter-item[data-category="${filterName}"]`);
if ($targetButton.length === 0) {
console.warn(`No filter button found for: ${filterName}`);
return;
}
$targetButton.trigger("click");
}
// Run only after DOM and gallery buttons are loaded
setTimeout(function () {
const filter = getFilterFromURL();
if (filter) {
applyFilter(filter);
}
}, 500); // Adjust delay as needed depending on load/render time
});
Hi Laura, thanks for sharing your solution for applying a filter via a URL query parameter in the Divi Supreme Filterable Gallery Module. Much appreciated!