Add Search & Filter Pro Filters In Off-Canvas Menu

Adding the Search & Filter Pro filters in an off-canvas menu can be a better user experience on mobile devices. This guide uses UABBs Off-Canvas Module with a WooCommerce main shop page built in Beaver Themer.

With a desktop/tablet layout already in place, this example uses a 2-column layout, WooCommerce shop page on the right with the Search & Filter Pro filters on the left.

Beaver Builder Two Column Layout

 

Set the Search & Filter Pro column to appear on Desktop and tablet only, thus hiding it on mobile.

Then using UABB Off-canvas Module bring in the module in a separate column above the Posts Module and set it to just display on mobile – add in the Search & Filter shortcode.

 

Search Filter Off Canvas Menu

 

I have found that you need to use a separate S&F shortcode to solve some reliability issues with filters not updating, so duplicate the original make what changes you need and use that in the off-canvas menu.

 

Search Filter Duplicate Search

 

An error displays ”Error: There are 2 Search Forms using display mode WooCommerce Shop – you may only have 1′, but I’ve found the 2 are needed, one for each of the locations. Add the correct shortcodes in both locations.

The last thing to do is to close the off-canvas menu when the products have finished loading and return the user to the products column. Create and enqueue this Javascript.

(function($){

    $(function() { // Document Ready
    
	    // detects the end of an ajax request being made
	    $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	        
	       $('#offcanvas-5eae1af4d1283').removeClass('uabb-off-canvas-show').attr("style","left:-300px");
	    });
	    

    });


})(jQuery);

This is a callback – sf:ajaxfinish,  S&F provides when the Ajax refresh is finished, I am targetting the off-canvas div, removing a class and adjusting a style attribute to hide the menu when the Ajax call is finished.

 

Search Filter Filter Buttonh

Filter Button Showing

 

Search Filter Filter Off Canvas Showing

Off Canvas menu in view

Leave all Comment