WooCommerceのオフキャンバス商品フィルター：スライドアウトパネルの設定と対処法

4 November 2026

WooCommerceのオフキャンバス商品フィルターを使えば、ショップページをすっきり保てます。フィルターは画面の端にあるパネルの中で待機し、訪問者がフィルター (Filter)タブやボタンをタップするとスライドして現れます。HUSKYには、これがスライドアウト拡張機能として標準で組み込まれているため、テーマのドロワーやポップアップ用プラグインは不要です。このガイドでは、パネルの仕組み、ショップページとカテゴリーページだけに表示を限定する方法、独自のボタンで開き、絞り込み後に閉じる方法、そしてスクロールできない、ヘッダーの後ろに隠れる、まったく表示されないといったパネルの不具合の直し方を説明します。

スライドアウトパネル、モバイルモード、テーマのドロワー

HUSKYには、必要になるまでフィルターを隠しておく方法が3つあります。1ページにつき1つを選んでください。組み合わせると、フィルターが2つ表示されたり、何も開けないボタンになったりします。

スライドアウト (Slideout)（詳細設定 (Advanced) → スライドアウト (Slideout)、または [woof_slideout] ショートコード）：ウィンドウの左、右、上、下の端に固定されたパネルで、開くためのタブが付きます。パソコンでもスマートフォンでも動作します。このガイドの主題です。
モバイルモード：スマートフォンのみで、フィルターがフィルターを開く (Open filter)ボタンに置き換えられ、ボタンを押すと全画面のパネルとして開きます。モバイルフィルターのガイドを参照してください。
自動フィルターをデフォルトで非表示 (Hide auto filter by default) = はい (Yes) の自動フィルター：商品の上にあるボタンで、フィルターをグリッドの上に引き下ろして表示します。商品の上の横並びフィルターを参照してください。

テーマやページビルダーのドロワーやオフキャンバスサイドバーも、ページの読み込み時にすでに含まれているフィルターのHTMLを表示・非表示にするだけであれば、問題なく機能します。ドロワーが後からコンテンツを挿入する場合、フォームが初期化されず、クリックしても何も起こりません。そのようなケースの見分け方はElementorのガイドで説明しています。また、そうしたドロワーでは、AJAXによる絞り込みのあとに閉じるための独自コードも必要です。これはモバイルとデスクトップで異なるフィルターで説明しています。

スライドアウトパネルを有効にする

スライドアウトは組み込みの拡張機能で、常に有効です。設定は WooCommerce → 設定 → Products Filter → 詳細設定 (Advanced) → スライドアウト (Slideout) にあります。

グローバル表示 (Global visibility)：表示 (Show)にすると、WooCommerceのページにパネルが自動的に追加されます。
ボタンの種類 (Button as)：画像 (as Image)は、ボタン画像のサイズ (Button image size)で設定したサイズでスライドアウト画像 (Slideout image)を使用します。テキスト (as Text)は、タブにスライドアウトのテキスト (Slideout text)を表示します。
位置 (Position)：パネルがスライドしてくる端です。オフセット (Offset)は、ウィンドウの上端（左と右の位置の場合）または左端（上と下の位置の場合）からの距離です。
アクション (Action)：クリック (Click)またはホバー (Hover)。スマートフォンにはホバーがないため、スマートフォン向けのパネルではクリック (Click)を使用してください。
コンテナのサイズ (Container size)：パネルの幅と高さです。グローバル表示 (Global visibility)がオンで幅が設定されていない場合、パネルの幅は350pxになります。
初期化後の状態 (State after init)：いいえ (No)にすると、ページの読み込み時にパネルは閉じたままになります。
モバイルでの動作 (Mobile behavior)：すべてのデバイスで表示 (Show on all devices)、モバイルのみ表示 (Show only on mobile)、デスクトップのみ表示 (Show only on desktop)。

グローバル表示 (Global visibility)がオンの場合、プラグインはページのフッターに [woof_slideout ...][woof][/woof_slideout] を出力します。これは、position: fixed のパネルの中にある通常のフィルターフォームで、ウィンドウの外に待機しています。タブをクリックするとスライドして現れ、パネルの外のどこかをクリックすると元に戻ります。パネル内に閉じるボタンはありません。フォームは最初からページの一部なので、AJAXモードを含め、すべてのフィルタータイプがサイドバーと同じように機能します。

バージョン3.4.6には、2つの注意点があります。1つ目は、オプションの「ショップページ」とは、WooCommerceの is_woocommerce() が true になるすべてのページを意味し、単一商品ページも含まれることです。2つ目は、グローバルパネルがタブのテキストを引用符なしでショートコードに書き込むため、複数の単語からなるテキストは最初のスペースで切れてしまうことです。「Show filters」は「Show」になります。そこでは1語のテキストを使うか、引用符を付けられる下記のショートコードを使用してください。モバイルでの動作 (Mobile behavior)は、ブラウザの識別情報に基づいてサーバー側で判断されるため、モバイルガイドで説明しているとおり、ページキャッシュはスマートフォン用とパソコン用のコピーを別々に保持する必要があります。

パネルを表示したい場所だけに表示する

表示するページを制御するには、グローバル表示 (Global visibility)を非表示 (Hide)にして、ショートコードを自分で配置します。スライドアウトタブの下部にあるショートコードを生成 (Generate shortcode)ボタンは、現在のオプションからショートコードを作成します。その値をグローバルな設定にしたくない場合は、保存せずにページを再読み込みしてください。スペースを含む値は引用符で囲みます。典型的なショートコードは次のとおりです。

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

image="null" を指定すると、タブがテキストタブになります。コンテンツがない場合、ショートコードは内側の [woof] を自分で構築し、スライドアウトの設定ではないすべての属性をそこに渡します。tax_only、by_only、sid、btn_position、redirect、そして[woof] の属性の残りです。[woof_slideout] と [/woof_slideout] の間にコンテンツがある場合は、そのコンテンツが代わりに表示されるため、見出しやカスタムフォームを入れることができます。[woof_slideout text="Filters" image="null"]<h3>Filter products</h3>[woof btn_position="t"][/woof_slideout] のようにします。この形式では、[woof] の属性は内側のショートコードに指定します。

ショートコードは、ページコンテンツやフッターのウィジェットエリアに置けますが、テーマがスマートフォンで非表示にするサイドバーには置けません。パネルはそのサイドバーの内側にあるため、一緒に消えてしまいます。ショップと商品アーカイブのページだけにパネルを表示するには、テーマから出力します。

/*
 * 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);

優先度は10未満にしてください。拡張機能は、優先度10の独自のフッターコールバックでパネルの幅と高さのスタイルを書き込みますが、そのときそれ以前に最後に出力されたパネルを使用します。それより後に出力されたパネルにはサイズが設定されません。カテゴリーごとに異なるフィルターにするには、is_product_category('shoes') を判定し、各パネルに専用の tax_only="pa_size,pa_color" を指定します。ブログやホームのページでもパネルを提供したい場合は、redirect="https://example.com/shop/" を追加して、結果がショップページで開くようにします。

1ページにつきパネルは1つにしてください。スライドアウトのスクリプトは、最初に見つけたパネルだけを準備します。2つ目のパネル（たとえば、グローバルパネルとショートコードのパネル）は、ウィンドウの外に待機させる起動時のスタイルのままになり、そのタブは表示されないか、位置がずれます。

独自のボタンで開き、絞り込み後に閉じる

パネルは、open、close、toggle の3つのイベントに反応します。独自のボタンでは、1点が重要です。パネルは自分自身の外側でのクリックで閉じますが、ヘッダーにあるボタンは外側にあたります。クリックイベントがdocumentまで伝わると、パネルは開いた直後に閉じてしまいます。以下のハンドラーはそれを止め、さらにプラグインの woof_ajax_done イベントを使って、AJAXによる絞り込みのたびにパネルを閉じます。

/*
 * 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);

自分のボタンだけを使うには、.woof-slide-out-div .woof-handle { display: none; } でタブを非表示にします。閉じるリンクは、[woof] の前にショートコードのコンテンツとして、パネルの中に入れてください。

絞り込み後に閉じる動作は、フィルター (Filter)ボタンのあるフォームに向いています。オートサブミット (Autosubmit)がオンだと、クリックのたびに絞り込みが実行され、選択のたびにパネルが閉じてしまいます。オプション (Options)タブでオートサブミット (Autosubmit)をいいえ (No)に設定すると、訪問者がすべての選択を終えてから、パネルが一度だけ閉じます。AJAXを使わない場合は、絞り込み後にページが再読み込みされ、初期化後の状態 (State after init)がいいえ (No)であれば、パネルは閉じた状態で始まります。プラグイン設定を初めて保存するまでは、onloadslideout のないショートコードはページを読み込むたびに開きます。例では、その影響を受けないよう onloadslideout="false" を指定しています。

タブ、色、サイズ、スクロール

パネルのスクリプトはいくつかの値をインラインで設定するため、一部のルールには !important が必要です。また、そのスタイルシートはほかの多くのものより後のフッターで読み込まれるため、一部のセレクターは 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);
}

スクロールのルールが必要な理由は次のとおりです。ページの読み込み時、スクリプトはパネルが高すぎたり広すぎたりする場合に画面に収まるよう縮小しますが、それは一度だけです。あとから開くセクション、「もっと見る」リスト、スマートフォンの回転などでコンテンツがウィンドウより高くなると、下の部分に手が届かなくなります。max-height と overflow-y: auto を組み合わせれば、どの状態でもスクロールバーが維持されます。引く値は、オフセット (Offset)に余白を加えた数値にしてください。

パネルのデフォルトの不透明度は95%で、スマートフォンでは商品が透けて見えます。重ね順は9999で、それより高い値を持つ固定ヘッダー、テーマのオーバーレイ、Cookieバナーがあると、パネルを覆ったりクリックを奪ったりして、フィルターがクリックできないように見えます。パネルを前面に出しても解決しない場合は、上に重なっている要素を調べ、その z-index を下げてください。

パネルが機能しない場合

スマートフォンでタブが表示されない。ショートコードがテーマによって小さい画面で非表示にされるサイドバーにある、モバイルでの動作 (Mobile behavior)でスマートフォンが除外されている、またはページキャッシュがデスクトップ用のコピーを返しています。
パネルが商品ページやすべてのページに表示される。グローバル表示 (Global visibility)が表示 (Show)になっています。非表示 (Hide)に切り替えて、フッターのスニペットを使用してください。
ページを読み込むたびに開く。初期化後の状態 (State after init)をいいえ (No)に設定し、ショートコードに onloadslideout="false" を追加してください。
2つのタブのうち1つしか表示されない、または機能しない。ページに2つのパネルがあります。1つにしてください。
タブの表示が遅い、または何も起こらない。JavaScriptの最適化が、プラグインのスクリプトを遅延または結合しています。最適化プラグインに関するガイドの説明に従って、/wp-content/plugins/woocommerce-products-filter/ を遅延と結合の対象から除外し、すべてのキャッシュをクリアしてください。
パネルから絞り込みは始まるが、商品が変わらない。それはパネルではなく商品グリッドの問題です。サイドバーのフィルターと同じ原因が当てはまります。URLは変わるのに商品が変わらない場合を参照してください。

チェックリスト

1ページにつきフィルターを隠す方法は1つ：スライドアウト、モバイルモード、自動フィルターのボタン、テーマのドロワーのいずれか。
1ページにつきパネルは1つ。ショートコードを自分で配置する場合は、グローバル表示 (Global visibility)を非表示 (Hide)にする。
ショートコードは、テーマがスマートフォンで非表示にするサイドバーの外に置くか、優先度10未満の wp_footer から出力する。
引用符付きのテキストタブ：image="null" text="Show filters"、onloadslideout="false"。
独自のボタンはクリックがdocumentに届くのを止め、パネルは woof_ajax_done で閉じる。
パネルのコンテンツは max-height で制限してスクロール可能にし、z-index はヘッダーより上にする。

それでもパネルが正しく動作しない場合は、ページのリンクと、使用しているショートコードまたは設定を添えて、HUSKYサポートフォーラムでトピックを立ててください。私たちが確認します。