Change Filter Tab Order in Divi Supreme Filterable Gallery Module

|

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:

0 Comments

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.