Archived topic
Make a off canvas product filter only on mobile
3 replies · Started by Joren on May 5, 2021
I'm trying to add a off canvas product filter on mobile only. I would like to appaer the off canvas filter button just above the products in product catgories. When I add the off canvas filter it is placed in menu instead. The mobile primary menu should only contain the menu items. The off canvas panel should be displayed just above products in product categories. How can I fix this?
Hi there,
you will need to Hook in the Off Canvas toggle:
1. Create a new Hook element
2. Add this code to the hook text area:
<?php
$icon = '';
if ( function_exists( 'generate_get_svg_icon') ) {
$icon = generate_get_svg_icon( 'menu-bars' );
}
?>
<span class="slideout-toggle woo-filter-toggle hide-on-mobile has-svg-icon"><a href="#"><?php echo $icon; ?> FILTER</a></span>3. Set the Hook to: woocommerce_before_shop_loop
4. Check the Execute PHP option.
5. Set the Display Rules to: Product Archives for the shop and/or Product Category Archives
Once thats done it may require some CSS to remove the toggle in the Nav and position the before the product loop - but i would need to see the site.
Hi David,
Thanks for your quick reply! It worked on desktop now, but on mobile it dissapears and the off canvas only shows up in the main menu. The main menu should stay a dropdown menu on mobile and the on mobile filter button which activates the off canvas panel should be just above products. How can I achieve that?
I can see the Toggle in the Shop page above the product loop.
The Off Canvas was never designed for this kinda of function - on Mobile it will replace the default Mobile Navigation. It was done in the Niche website but that has a Menu ( which is hidden on desktop ) in the Off Canvas panel as well as the Filters.
Its complicated to set up - I have seen a few users opt for this plugin to create a dedicated off canvas panel for filters:
