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:

Link
Appears in the three line menu.

Button

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

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

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.

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

Not the solution you are looking for? Check other articles, or open a support ticket.