Slider Revolution 6.4 NOW available!

This article will show you how to reorder filters for Custom Grids using Custom JavaScript Code.

Step 1: Create a Custom Grid

Step 2: Assign filters to your grid item following the instructions here

Step 3: Insert the custom JS code below into the grid JS section and set up your preferred filter order by editing the "customOrder" part.

Important Note:

Filter names should be entered all lowercase and without spaces.

(function() {
 
    /* ******************* */
    /* BEGIN USER SETTINGS */
    /* ******************* */
 
    // Filter names such as 'Hello There' needs to be written as "hellothere" in the customOrder Array below
    // Filter named "-1" is equivalent to "Filter - All"
    // Replace filter2, filter3 with filter data-fid "filter name"
    var customOrder = ['-1', 'filter2', 'filter3', 'filter1'];
 
    /* ******************* */
    /* END USER SETTINGS */
    /* ******************* */
 
    for(var i = 0; i < customOrder.length; i++) {
        var $this = jQuery('.esg-filterbutton[data-fid="' + customOrder[i] + '"]');
        $this.appendTo($this.parent());
    }
})();

Popular Solutions