[woof_slideout]

The [woof_slideout] shortcode creates a slide-out filter panel that appears from the edge of the screen. This is a space-saving solution that keeps the filter hidden until the user needs it — ideal for mobile devices, product archive pages, or any layout where screen space is limited.

The slideout panel supports both image and text triggers, configurable animation, mobile-specific behavior, and passes all unknown attributes through to the inner [woof] shortcode.

Attributes

Attribute	Default	Description
`image`	Plugin default icon	URL to the trigger image. Set to `null` to use a text button instead.
`image_h`	`50`	Height of the trigger image in pixels
`image_w`	`50`	Width of the trigger image in pixels
`action`	`click`	Trigger action: `click` or `hover`
`location`	`right`	Slide-out position: `left`, `right`, `top`, or `bottom`
`speed`	`100`	Animation speed in milliseconds
`offset`	`100px`	Offset from the top (for left/right location) or left (for top/bottom location). Supports px, %, em, etc.
`onloadslideout`	`true`	Whether the panel should be open when the page loads (`true` or `false`)
`mobile_behavior`	`0`	Visibility control: `0` = show on all devices, `1` = show on mobile only, `2` = show on desktop only
`width`	`auto`	Panel width (e.g., `350px`, `30%`, `auto`)
`height`	`auto`	Panel height (e.g., `500px`, `auto`)
`text`	`Filter`	Button text displayed when `image` is set to `null`. Also used as the handle label.
`class`	`''`	Additional CSS class for the slideout container
`redirect`	`''`	Redirect URL after filter application

Basic Usage


[woof_slideout]

Renders a slide-out filter panel from the right side with default settings. The panel contains the standard [woof] filter.

Slide-out from the Left


[woof_slideout location="left" speed="300" width="400px"]

Slides out from the left side with a 300ms animation and 400px panel width.

Text Button Instead of Image


[woof_slideout image="null" text="Filter Products"]

Uses a text button ("Filter Products") instead of an image as the trigger handle.

Mobile-Only Filter


[woof_slideout mobile_behavior="1" location="bottom" height="80%"]

The slideout appears only on mobile devices, from the bottom, taking 80% of the screen height. Perfect for mobile-first designs.

Auto-Open on Load with Hover Trigger


[woof_slideout onloadslideout="true" action="hover" speed="200"]

The panel is open by default and responds to hover (not click). Animates in 200ms.

Advanced: Custom Content Inside


[woof_slideout location="right" width="350px"]
  [woof taxonomies="product_cat" sid="slideout-cat"]
[/woof_slideout]

Any content placed between the opening and closing tags is used as the slideout content. In this example, a specific [woof] shortcode with category taxonomy filtering is placed inside the slideout.

Passing Attributes to the Inner [woof] Shortcode


[woof_slideout location="left" taxonomies="product_cat" sid="sidebar-filter" by_text="1"]

Attributes that are not part of the slideout itself (taxonomies, sid, by_text, etc.) are automatically forwarded to the inner [woof] shortcode. This means any [woof] attribute works transparently.

Desktop-Only with Offset


[woof_slideout location="right" offset="200px" mobile_behavior="2" width="320px"]

Visible only on desktop, positioned on the right with 200px offset from the top, 320px wide.

PHP Example: Override the Slideout Template

You can override the slideout template by placing a file at:


wp-content/themes/your-theme/woof/ext/slideout/views/shortcodes/woof_slideout.php

Or programmatically filter the slideout behavior:


add_filter('woof_slideout_options', function($options) {
    if (is_product_category()) {
        $options['width'] = '100%';
        $options['location'] = 'bottom';
    }
    return $options;
});

Notes

The slideout extension must be enabled in the HUSKY plugin settings for the shortcode to work.
When using an image as the trigger, the recommended size is around 50×50 pixels.
The redirect attribute, when set, will redirect the page to the specified URL after filter values are selected.
Multiple slideout instances on the same page are supported — each gets a unique key.