How to Add off Canvas Sidebar for WooCommerce Shop Page

No results found. Try again with different words?

Search must be at least 3 characters.

    Off Canvas Sidebar for WooCommerce Shop Page

    This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

    You can manage the sidebar using the WooCommerce module available with Astra Pro. Please refer document, to begin with, WooCommerce module.

    WooCommerce Addon provides Off Canvas Sidebar option for Shop page. Settings can be found under Appearance > Customize > WooCommerce > Product Catalog.

    Off Canvas Sidebar is the part of navigation strategy. The sidebar is initially moved out off the screen and out of view as well. To make the sidebar appear you have to set trigger in the form a button, or a link is given. When you click on the trigger, Off Canvas Sidebar appears. This option works very well with all the responsive devices as well.

    Since this is a sidebar, you need set the sidebar using various WordPress widgets. Or you can even add third-party widgets.

    There are 3 ways to showcase the Off Canvas Sidebar trigger:

    Appears in the three line menu.

    Astra Pro - WooCommerce Off-canvas Filter - Link, Astra 3.0+


    Like mentioned before, the default theme color & styling is applied to the button.

    Astra Pro - WooCommerce Off-canvas Filter - Button, Astra 3.0+

    Custom Class
    This custom functionality helps you to set/place the Off Canvas Sidebar trigger anywhere you wish on the entire website.
    The trigger for Off Canvas Sidebar can be placed in the header, above header, footer or anywhere else as per the requirement.
    For example:
    A nice and simple button can be designed with the help of Custom Layout addon.
    Give some name in the advanced tab of HTML class of the button

    Astra Pro - WooCommerce Off-canvas Filter - Custom Class, Astra 3.0+

    Repeat the same class name in the Off Canvas Sidebar Custom Class option.

    Note: Custom Class will trigger off-canvas sidebar only on the shop page. It will not trigger it on any other page. For example, if the button with custom class is added to the header. Then clicking on the button will trigger off-canvas sidebar only on the shop page and not on other pages.

    After enabling the option, the off-canvas sidebar will not trigger until you add widgets in it.

    For adding widgets got to Appearance > Widgets > Off-Canvas Filters. Simply drag-drop the widgets from the Available Widget option.

    Astra Pro - WooCommerce Off-canvas Filter - Add Widgets, Astra 3.0+

    Once you add the widgets, you can manage the further customizations from the customizer

    Was this article helpful?
    Did not find a solution? We are here to help you succeed.

    Related Docs

    Scroll to Top

    Download is Just A Click Away!

    Be among the first to try the beta version of Astra’s Header Footer Builder. Filling the form will ensure you’ll be the first to learn about updates and features.

    Download is Just A Click Away!

    Enter your email address and be the first to learn about updates and new features.