WooCommerce Off-Canvas Product Filter: Slide-out Panel Setup and Fixes

4 November 2026

A WooCommerce off-canvas product filter keeps the shop page clean: the filter waits in a panel at the edge of the screen and slides in when the visitor taps a Filter tab or button. HUSKY has this built in as the Slideout extension, so no theme drawer or popup plugin is needed. This guide explains how the panel works, how to limit it to the shop and category pages, how to open it from your own button and close it after filtering, and how to fix a panel that does not scroll, hides behind the header or does not appear at all.

Slide-out panel, mobile mode or a theme drawer

HUSKY offers three ways to keep the filter out of sight until it is needed. Pick one per page; combining them gives two filters or a button that cannot open anything.

Slideout (Advanced → Slideout, or the [woof_slideout] shortcode): a panel fixed to the left, right, top or bottom edge of the window, with a tab that opens it. Works on computers and phones. This is the subject of this guide.
Mobile mode: on phones only, the filter is replaced by an Open filter button that opens it as a full-screen panel. See the mobile filter guide.
The automatic filter with Hide auto filter by default = Yes: a button above the products that drops the filter down over the grid. See the horizontal filter above the products.

A drawer or off-canvas sidebar from the theme or a page builder also works, as long as it only shows and hides filter HTML that is already in the page when it loads. If the drawer inserts its content later, the form is never initialised and clicks do nothing; the Elementor guide shows how to recognise that case. Such drawers also need their own code to close after AJAX filtering, described in different filters for mobile and desktop.

Turn on the slide-out panel

Slideout is a built-in extension and is always active. Its settings are in WooCommerce → Settings → Products Filter → Advanced → Slideout:

Global visibility: Show adds the panel to WooCommerce pages automatically.
Button as: as Image uses Slideout image in the size set by Button image size; as Text shows Slideout text on the tab.
Position: the edge the panel slides from. Offset is its distance from the top of the window (left and right positions) or from the left (top and bottom).
Action: Click or Hover. Phones have no hover, so use Click when the panel is meant for them.
Container size: width and height of the panel. With Global visibility on and no width set, the panel is 350px wide.
State after init: No keeps the panel closed when the page loads.
Mobile behavior: Show on all devices, Show only on mobile or Show only on desktop.

With Global visibility on, the plugin prints [woof_slideout ...][woof][/woof_slideout] in the page footer: an ordinary filter form inside a panel with position: fixed, parked outside the window. A click on the tab slides it in, and a click anywhere outside the panel slides it back; there is no close button inside. Because the form is part of the page from the start, every filter type works as it does in a sidebar, AJAX mode included.

Two details in version 3.4.6. First, "shop pages" in the option means every page where WooCommerce's is_woocommerce() is true, and that includes single product pages. Second, the global panel writes the tab text into the shortcode without quotes, so a text of several words is cut at the first space: "Show filters" becomes "Show". Use a one-word text there, or the shortcode below, where you can quote it. Mobile behavior is decided on the server from the browser identification, so a page cache must keep separate copies for phones and computers, as explained in the mobile guide.

Show the panel only where you want it

For control over the pages, set Global visibility to Hide and place the shortcode yourself. The Generate shortcode button at the bottom of the Slideout tab writes one from the current options; reload the page afterwards instead of saving if those values should not become the global ones, and put quotes around values with spaces. A typical shortcode:

[woof_slideout location="left" image="null" text="Filters" width="320px" onloadslideout="false"]

image="null" turns the tab into a text tab. Without content, the shortcode builds the inner [woof] itself and passes it every attribute that is not a slideout setting: tax_only, by_only, sid, btn_position, redirect and the rest of the [woof] attributes. With content between [woof_slideout] and [/woof_slideout], that content is shown instead, so a heading and a custom form are possible: [woof_slideout text="Filters" image="null"]<h3>Filter products</h3>[woof btn_position="t"][/woof_slideout]. In that form the [woof] attributes go on the inner shortcode.

The shortcode can sit in the page content or a footer widget area, but not in a sidebar that the theme hides on phones: the panel is inside that sidebar and disappears with it. To show the panel on the shop and product archives only, print it from the theme:

/*
 * HUSKY: slide-out filter on the shop and product archive pages,
 * not on single products. Set Advanced → Slideout → Global visibility = Hide.
 * Child theme functions.php or a code snippets plugin.
 */
add_action('wp_footer', function () {
    if (!is_shop() && !is_product_taxonomy()) {
        return;
    }
    echo do_shortcode('[woof_slideout location="left" image="null" text="Filters" width="320px" onloadslideout="false"]');
}, 5);

Keep the priority below 10. The extension writes the panel's width and height styles in its own footer callback at priority 10, using the last panel printed before it runs; a panel printed later gets no size. For a different filter per category, test is_product_category('shoes') and give each panel its own tax_only="pa_size,pa_color". To offer the panel on blog or home pages too, add redirect="https://example.com/shop/" so the results open on the shop page.

Use one panel per page. The slideout script prepares only the first panel it finds; a second one, for example the global panel plus a shortcode panel, keeps the start-up style that parks it outside the window, so its tab is missing or misplaced.

Open it from your own button and close it after filtering

The panel reacts to three events: open, close and toggle. One detail matters for a custom button: the panel closes on any click outside itself, and a button in the header is outside. If the click event travels on to the document, the panel opens and closes again in the same moment. The handler below stops it and also closes the panel after each AJAX filtering, using the plugin's woof_ajax_done event:

/*
 * HUSKY slide-out panel: custom open/close buttons, close after AJAX filtering.
 * Child theme functions.php or a code snippets plugin.
 * Buttons: <a href="#" class="open-husky-filter">Filter</a>
 *          <a href="#" class="close-husky-filter">Close</a> (inside the panel)
 */
add_action('wp_footer', function () {
    ?>
    <script>
    jQuery(function ($) {
        $(document.body).on('click', '.open-husky-filter', function (e) {
            e.preventDefault();   // a link with href="#" would jump to the top
            e.stopPropagation();  // otherwise the outside-click rule closes it at once
            $('.woof-slide-out-div').trigger('toggle');
        });
        $(document.body).on('click', '.close-husky-filter', function (e) {
            e.preventDefault();
            $('.woof-slide-out-div').trigger('close');
        });
        $(document).on('woof_ajax_done', function () {
            $('.woof-slide-out-div').trigger('close');
        });
    });
    </script>
    <?php
}, 100);

To use only your button, hide the tab with .woof-slide-out-div .woof-handle { display: none; }. Put the close link into the panel through the shortcode content, before [woof].

Closing after filtering suits a Filter button. With Autosubmit on, every click filters, and the panel would close after each choice; set Autosubmit to No in the Options tab so visitors make all their choices and the panel closes once. Without AJAX the page reloads after filtering and the panel starts closed, provided State after init is No. Until the plugin settings are saved for the first time, a shortcode without onloadslideout opens on every page load; the examples set onloadslideout="false" to be independent of that.

Tab, colours, size and scrolling

The panel's own script sets a few values inline, so some rules need !important, and its stylesheet loads in the footer, after most others, so some selectors start with body:

/* HUSKY slide-out panel. Advanced → Code → Custom CSS code,
   or the theme's Additional CSS. */

/* Tab colours; an image tab gets its background inline */
.woof-slide-out-div .woof-handle {
    background-color: #f5c200 !important;
    color: #000;
}

/* Left or right position: move only the tab down, not the panel */
.woof-slide-out-div .woof-handle {
    top: 40px !important;
}

/* No transparency, above sticky headers and cookie bars */
body .woof-slide-out-div {
    opacity: 1 !important;
    z-index: 100000;
}

/* Scroll inside the panel when the filter is longer than the screen */
.woof-slide-out-div .woof-slide-content {
    max-height: calc(100vh - 140px); /* 100px offset + room at the bottom */
    overflow-y: auto;
}

/* Dim the page while the panel is open; a click on the dark area closes it */
.woof-slide-out-div.ui-slideouttab-open {
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
}

Why the scrolling rule is needed: when the page loads, the script shrinks the panel to fit the screen if it is too tall or too wide, but only once. Sections that open later, a "show more" list or a rotated phone make the content taller than the window, and the lower part cannot be reached. A max-height with overflow-y: auto keeps a scrollbar in every state. Set the subtracted value to your Offset plus some room.

The panel is 95% opaque by default, which makes products show through on phones. Its stacking level is 9999; a sticky header, a theme overlay or a cookie banner with a higher one covers it or catches its clicks, which looks like a filter that cannot be clicked. If raising the panel does not help, inspect the element that lies on top and lower its z-index.

When the panel does not work

The tab is missing on phones. The shortcode is in a sidebar the theme hides on small screens, Mobile behavior excludes phones, or a page cache serves the desktop copy.
The panel is on product pages or everywhere. Global visibility is Show; switch it to Hide and use the footer snippet.
It opens on every page load. Set State after init to No and add onloadslideout="false" to your shortcodes.
Only one of two tabs appears or works. Two panels are on the page; keep one.
The tab appears late or does nothing. JavaScript optimization delays or combines the plugin's scripts. Exclude /wp-content/plugins/woocommerce-products-filter/ from delay and combine, as described in the guide on optimization plugins, and clear all caches.
Filtering starts from the panel but the products do not change. That is the product grid, not the panel; the same causes apply as for a filter in a sidebar, see the URL changes but the products stay the same.

Checklist

One way of hiding the filter per page: Slideout, mobile mode, the auto filter button or a theme drawer.
One panel per page; Global visibility on Hide when you place the shortcode yourself.
The shortcode outside sidebars that the theme hides on phones, or printed from wp_footer with priority below 10.
Text tab with quotes: image="null" text="Show filters"; onloadslideout="false".
Custom buttons stop the click from reaching the document; the panel closes on woof_ajax_done.
Panel content limited with max-height and scrollable; z-index above the header.

If the panel still misbehaves, open a topic on the HUSKY support forum with the page link and the shortcode or settings you use, and we will check it.