Off Canvas Sidebar/Product Filter

[xbsmarketing]

Hi!

I’m hoping someone can help me out with this.

I’m building out a shop page via WooCommerce and am trying to achieve filters (sidebar widgets) that have an off canvas toggle on mobile views.

Currently, all filters get pushed under the products on mobile which does’t yield the best user experience.

Any help would be greatly appreciated!

[ruenel]

Hello ComDoc,

Thanks for writing in!

The Product filter were added in your sidebar. By default, sidebars will collapse in smaller screens. It usually displays below the content area. In your case, the sidebar display after the shop index.

• What you can do is to go to Pro > Global Block. You will need to create a global block that has a widget area element in it. In the widget area element, select the widget area that displays the product filter.

• And back for the header, please create a custom header which will then be assigned for your shop page. In that header, you can insert a content area off canvas.

• Take note of the global block shortcode and then insert it in the content area off canvas content.

• Finally, you make sure that the content area off canvas element in your header is only visible for smaller screens. You can make this possible by utilizing the Hide During Breakpoint option. To know more about it, please check this: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Hope this helps.