Products Filter for WooCommerce:商品のフィルタリング機能を追加できる
WooCommerce に商品のフィルタリング機能を追加できる WordPress 用プラグインの紹介です。
それは「WOOF – Products Filter for WooCommerce」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。
WOOF – Products Filter for WooCommerce
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プラグインのインストール手順を解説 – WordPress活用術
日本語化
Products Filter for WooCommerce を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。
WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。
※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。
日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。
WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術
専用メニュー
Products Filter for WooCommerce は、ダッシュボードには専用メニューは無いです。
WooCommerce の「設定」画面に「Products Filter」タブが追加されています。
使い方
「Products Filter」タブから必要な設定を行います。
Structure
フィルタリング条件として表示する項目を選択します。
※「商品 ボタン」と「商品 色」は、属性の項目(自動検出されます。)です。
表示するタイプ(ラジオボタン・チェックボックスなど)を選択します。
除外したい項目値がある場合には「excluded terms ids」に id で入力します。
カンマで区切ると複数指定可。
additional options
「additional options」ボタンをクリックすると追加オプションの設定ができます。
価格の場合
- Show button
ボタンを表示するかどうか。
初期値:No - Title text
必要であればタイトルを入力します。 - Tooltip
ツールチップを表示するかどうか。内容を入力すると表示されます。
- Drop-down OR radio
ドロップダウンまたはラジオでの価格の範囲を指定します。 - Drop-down price filter text
ドロップダウンでのオプションテキストを入力できます。 - Ion Range slider
ステップ幅を指定します。
初期値:0 - Taxes
税込にしたい場合には税率を入力できます。
初期値:0
価格以外の場合
- Show title label
項目のタイトルを表示するかどうか。
初期値:No - Show toggle button
トグルボタンを表示するかどうか。
初期値:No - Tooltip
項目のツールチップを表示するかどうか。内容を入力すると表示されます。
- Not toggled terms count
トグルボタンを押した際にデフォルトで表示する項目数を入力します。ここの数値よりも項目数が多いと「Show more」リンクが表示されます。 - Taxonomy custom label
商品カテゴリのタイトルをカスタマイズしたタイトルにしたい場合に入力します。
- Max height of the block
このブロックの最大の高さを px 単位で入力します。
初期値:0 px - Display items in a row
項目を 1 行で表示するかどうか。
初期値:No - Sort terms
並び替え順で指定する項目を選択します。
初期値:Default - Sort terms
並び順を昇順または降順かを選択します。
初期値:ASC(昇順)
Options
- Set filter automatically
ショップページで自動的にフィルターを設定するかどうか。
初期値:No - Autosubmit
検索フォームの条件を変更したら即検索するかどうか。
初期値:Yes - Show count
各項目に該当する商品数を表示するかどうか。
初期値:Yes - Dynamic recount
該当する商品数を動的に再取得するかどうか。
初期値:No - Hide empty terms
Pro 版のみの機能。
初期値:No
- 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
- Radio and checkboxes skin
ラジオボタンとチェックボックスのスキンを選択します。
初期値: - Overlay skins
オーバーレイスキンを選択します。
初期値: - Loading word
ロード中に表示するテキストを入力できます。
- Use chosen
ドロップダウン用の Javascript ライブラリーを使用するかどうか。
初期値:Yes - Use beauty scroll
各ブロックに最大の高さを適用するためにスクロールを使用するかどうか。
初期値:No - Range-slider skin
レンジスライダー用のスキンを選択します。
初期値:skinNice
- Tooltip icon
ツールチップとして表示する画像を設定できます。 - Auto filter close/open image
閉じる・開くで使用する画像を設定できます。下記のテキストだけを使用したい場合には「none」を指定します。 - Auto filter close/open text
閉じる・開くで使用するテキストを入力できます。
- Image for subcategories [open]
「Hide childs in checkboxes and radio」を選択している時のみ有効。画像を設定できます。デフォルトでは緑色の「+」画像。 - Image for subcategories [close]
「Hide childs in checkboxes and radio」を選択している時のみ有効。画像を設定できます。デフォルトでは緑色の「-」画像。
- Toggle block type
ブロックあるトグルのタイプを選択できます。ブロックのタイトルが非表示の場合に機能します。
初期値:Text - Text for block toggle [opened]
開いているブロックのテキストを変更できます。 - Text for block toggle [closed]
閉じているブロックのテキストを変更できます。 - Custom front css styles file link
カスタム CSS ファイルのへのリンクを指定できます。
Advanced
CODE
- Custom CSS code
カスタム CSS コードを入力できます。 - JavaScript code after AJAX is done
Ajax で商品を再描画した後に追加のアクションが必要な場合の Javascript コードを入力できます。 - Init plugin on the next site pages only
プラグインの初期化を除外するページを指定できます。
OPTIONS
- Search slug
Pro 版のみの機能。 - Products per page
検索時のページあたりの商品数を指定できます。
初期値:-1 - Optimize loading of WOOF JavaScript files
このプラグインの JavaScript ファイルをサイトのフッターに配置するかどうか。
初期値:No
- Override no products found content
Pro 版のみの機能。 - Hide terms count text
Pro 版のみの機能。
- Listen catalog visibility
カタログの表示設定を聞くかどうか。
初期値:No
- Disable swoof influence
[woof-search]の影響を確認したい時に無効にします。
初期値:No - Cache dynamic recount number for each item in filter
「dynamic recount」有効時にキャッシュするかどうか。
初期値:No
- Cache terms
キャッシュのクリア期間を設定するかどうか。
初期値:No - Show blocks helper button
「Set filter automatically」が [Yes] の場合にョートコード [woof] のヘルパーボタンを表示するかどうか。
初期値:Yes - Custom extensions folder
拡張フォルダへのパスを指定できます。
Extensions
追加できる拡張機能一覧が表示されます。
「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
ビデオチュートリアルなどがあります。
専用ウィジェット
- Title
ウィジェットのタイトルを入力します。 - Additional text before
追加テキストを入力できます。 - Redirect to
任意のページにリダイレクトさせたい時に使用します。(非推奨)
- Hide search form by default and show one button instead
デフォルトで検索フォームを非表示にして、代わりにボタンを 1 つ表示するかどうか。
初期値:default - Dynamic recount
自動的に該当数を再カウントをするかどうか。
初期値:No
- Autosubmit
検索フォームの選択項目が変更されると即時反映を行うかどうか。「No」にするとフィルターボタンをクリックする必要があります。
初期値:Default - Submit button position
検索フォームの送信ボタンとリセットボタンの配置位置を選択します。
初期値:Bottom - Form AJAX redrawing
Ajax で検索フォームを再描画するかどうか。
初期値:No
実際に表示させると上のような感じで表示されます。