Products Filter for WooCommerce:商品のフィルタリング機能を追加できる

2019年3月6日

WooCommerce に商品のフィルタリング機能を追加できる WordPress 用プラグインの紹介です。
それは「WOOF – Products Filter for WooCommerce」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。

WOOF – Products Filter for WooCommerce

Screenshot of wordpress.org

Products Filter for WooCommerce は、WooCommerce に商品のフィルタリング機能を追加できます。

フィルタリングの条件には、商品価格・商品カテゴリー・商品タグ・属性等を設定可。
拡張機能により、オススメ商品・在庫あり・発売中・商品評価・メタフィールド等も指定可。
検索フォームは、ウィジェットまたはショートコードで表示できます。

ユーザーが指定したフィルタリング条件を保存できたり、
条件を購読し、該当した新商品が見つかるとメールで通知を受け取ることもできます。

また、検索された条件を自動分析し統計情報を表示可能。

記事を作成もしくは更新時点でのバージョン:v 1.2.2.1
マルチサイトでの利用:可

Gutenberg エディターでの動作

Gutenberg エディターに追加される機能は無いので、気にする必要は無いです。

インストール手順

下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
Products Filter for WooCommerce – WordPress.org

もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Products Filter for WooCommerce」と入力します。

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。

プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。

WordPressプラグインのインストール手順を解説 – WordPress活用術

日本語化

Products Filter for WooCommerce を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。

WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。

※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。

日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。

WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術

専用メニュー

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

Products Filter for WooCommerce は、ダッシュボードには専用メニューは無いです。
WooCommerce の「設定」画面に「Products Filter」タブが追加されています。

使い方

「Products Filter」タブから必要な設定を行います。

Structure

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

フィルタリング条件として表示する項目を選択します。
※「商品 ボタン」と「商品 色」は、属性の項目(自動検出されます。)です。
表示するタイプ(ラジオボタン・チェックボックスなど)を選択します。
除外したい項目値がある場合には「excluded terms ids」に id で入力します。
カンマで区切ると複数指定可。

additional options

「additional options」ボタンをクリックすると追加オプションの設定ができます。

価格の場合

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Show button
    ボタンを表示するかどうか。
    初期値:No
  • Title text
    必要であればタイトルを入力します。
  • Tooltip
    ツールチップを表示するかどうか。内容を入力すると表示されます。

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Drop-down OR radio
    ドロップダウンまたはラジオでの価格の範囲を指定します。
  • Drop-down price filter text
    ドロップダウンでのオプションテキストを入力できます。
  • Ion Range slider
    ステップ幅を指定します。
    初期値:0
  • Taxes
    税込にしたい場合には税率を入力できます。
    初期値:0

価格以外の場合

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Show title label
    項目のタイトルを表示するかどうか。
    初期値:No
  • Show toggle button
    トグルボタンを表示するかどうか。
    初期値:No
  • Tooltip
    項目のツールチップを表示するかどうか。内容を入力すると表示されます。

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Not toggled terms count
    トグルボタンを押した際にデフォルトで表示する項目数を入力します。ここの数値よりも項目数が多いと「Show more」リンクが表示されます。
  • Taxonomy custom label
    商品カテゴリのタイトルをカスタマイズしたタイトルにしたい場合に入力します。

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Max height of the block
    このブロックの最大の高さを px 単位で入力します。
    初期値:0 px
  • Display items in a row
    項目を 1 行で表示するかどうか。
    初期値:No
  • Sort terms
    並び替え順で指定する項目を選択します。
    初期値:Default
  • Sort terms
    並び順を昇順または降順かを選択します。
    初期値:ASC(昇順)

Options

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Set filter automatically
    ショップページで自動的にフィルターを設定するかどうか。
    初期値:No
  • Autosubmit
    検索フォームの条件を変更したら即検索するかどうか。
    初期値:Yes
  • Show count
    各項目に該当する商品数を表示するかどうか。
    初期値:Yes
  • Dynamic recount
    該当する商品数を動的に再取得するかどうか。
    初期値:No
  • Hide empty terms
    Pro 版のみの機能。
    初期値:No

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Try to ajaxify the shop
    Ajax でのフィルタリングテストを行う場合には「Yes」を選択します。
    初期値:No
  • Hide childs in checkboxes and radio
    チェックボックスとラジオボタンで子項目を隠すかどうか。
    初期値:Yes
  • Hide woof top panel buttons
    検索実行時にショップページの上部にある赤いボタンを隠すかどうか。
    初期値:No
  • Lets checked terms will be on the top
    選択した項目を一番上に表示するかどうか。
    初期値:No
  • Filter button text
    Pro 版のみの機能。
  • Reset button text
    Pro 版のみの機能。

Design

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Radio and checkboxes skin
    ラジオボタンとチェックボックスのスキンを選択します。
    初期値:
  • Overlay skins
    オーバーレイスキンを選択します。
    初期値:
  • Loading word
    ロード中に表示するテキストを入力できます。

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Use chosen
    ドロップダウン用の Javascript ライブラリーを使用するかどうか。
    初期値:Yes
  • Use beauty scroll
    各ブロックに最大の高さを適用するためにスクロールを使用するかどうか。
    初期値:No
  • Range-slider skin
    レンジスライダー用のスキンを選択します。
    初期値:skinNice

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Tooltip icon
    ツールチップとして表示する画像を設定できます。
  • Auto filter close/open image
    閉じる・開くで使用する画像を設定できます。下記のテキストだけを使用したい場合には「none」を指定します。
  • Auto filter close/open text
    閉じる・開くで使用するテキストを入力できます。

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Image for subcategories [open]
    「Hide childs in checkboxes and radio」を選択している時のみ有効。画像を設定できます。デフォルトでは緑色の「+」画像。
  • Image for subcategories [close]
    「Hide childs in checkboxes and radio」を選択している時のみ有効。画像を設定できます。デフォルトでは緑色の「-」画像。

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Toggle block type
    ブロックあるトグルのタイプを選択できます。ブロックのタイトルが非表示の場合に機能します。
    初期値:Text
  • Text for block toggle [opened]
    開いているブロックのテキストを変更できます。
  • Text for block toggle [closed]
    閉じているブロックのテキストを変更できます。
  • Custom front css styles file link
    カスタム CSS ファイルのへのリンクを指定できます。

Advanced

CODE

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Custom CSS code
    カスタム CSS コードを入力できます。
  • JavaScript code after AJAX is done
    Ajax で商品を再描画した後に追加のアクションが必要な場合の Javascript コードを入力できます。
  • Init plugin on the next site pages only
    プラグインの初期化を除外するページを指定できます。

OPTIONS

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Search slug
    Pro 版のみの機能。
  • Products per page
    検索時のページあたりの商品数を指定できます。
    初期値:-1
  • Optimize loading of WOOF JavaScript files
    このプラグインの JavaScript ファイルをサイトのフッターに配置するかどうか。
    初期値:No

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Override no products found content
    Pro 版のみの機能。
  • Hide terms count text
    Pro 版のみの機能。

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Listen catalog visibility
    カタログの表示設定を聞くかどうか。
    初期値:No

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Disable swoof influence
    [woof-search]の影響を確認したい時に無効にします。
    初期値:No
  • Cache dynamic recount number for each item in filter
    「dynamic recount」有効時にキャッシュするかどうか。
    初期値:No

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Cache terms
    キャッシュのクリア期間を設定するかどうか。
    初期値:No
  • Show blocks helper button
    「Set filter automatically」が [Yes] の場合にョートコード [woof] のヘルパーボタンを表示するかどうか。
    初期値:Yes
  • Custom extensions folder
    拡張フォルダへのパスを指定できます。

Extensions

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

追加できる拡張機能一覧が表示されます。
「Premium Version」限定のものもあります。

  • Searching by Author
    商品の作成者によるフィルタリングを行えます。
  • Featured products
    おすすめ商品のチェックボックスを検索フォームに追加できます。
  • In stock checkbox
    在庫有りのチェックボックスを検索フォームに追加できます。
  • On sale checkbox
    発売中のチェックボックスを検索フォームに追加できます。
  • By rating
    評価で商品をフィルタリングできるドロップダウンを検索フォームに追加できます。
  • Searching by Text
    タイトル、コンテンツ、抜粋で検索できるようになります。
  • Meta filter
    メタフィールドでフィルタリングできるようになります。無料版では 2 個のメタフィールドを指定できます。
  • Products Messenger
    ユーザーがフィルタリングした商品結果を購読してもらって、該当商品が新たに見つかった場合にユーザーにメールで通知できます。
  • Saver of Search query
    ユーザーが自分の現在のフィルタリング条件を「お気に入り」として保存できます。
  • Quick search
    [ woof_quick_search ] と [ woof_quick_search_results ] を使用してのクイック検索ができます。
  • Statistic
    ユーザーが行った検索条件を分析し統計情報としてグラフなどで確認できます。

Info

ビデオチュートリアルなどがあります。

専用ウィジェット

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Title
    ウィジェットのタイトルを入力します。
  • Additional text before
    追加テキストを入力できます。
  • Redirect to
    任意のページにリダイレクトさせたい時に使用します。(非推奨)

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Hide search form by default and show one button instead
    デフォルトで検索フォームを非表示にして、代わりにボタンを 1 つ表示するかどうか。
    初期値:default
  • Dynamic recount
    自動的に該当数を再カウントをするかどうか。
    初期値:No

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

  • Autosubmit
    検索フォームの選択項目が変更されると即時反映を行うかどうか。「No」にするとフィルターボタンをクリックする必要があります。
    初期値:Default
  • Submit button position
    検索フォームの送信ボタンとリセットボタンの配置位置を選択します。
    初期値:Bottom
  • Form AJAX redrawing
    Ajax で検索フォームを再描画するかどうか。
    初期値:No

WordPressプラグイン「WOOF - Products Filter for WooCommerce」のスクリーンショット

実際に表示させると上のような感じで表示されます。

URL

Products Filter for WooCommerce – WordPress.org

本ページはアフィリエイトプログラムによる収益を得ています