【解決】WooCommerceで商品の絞り込み検索を付ける方法|VK Filter Search Proプラグインで実装したサンプルサイト

そんな疑問に答えます。

WooCommerceには商品のカテゴリーやタグがありますよね？これ以外に、独自の分類オプションを追加したもので絞り込み検索できる方法を紹介します。

ちなみにプログラムの知識は不要です。コードは書きません。

【サンプル】WooCommerceに絞り込み検索機能を実装してみた

まずは絞り込み検索を実装したサンプルを紹介します。

WordPress有料プラグインを検索できるポータルサイトを作ってみました。使っているテーマはWordPress公式ディレクトリーに公開されている無料の「Arkhe（アルケー）」です。Arkhe自体に絞り込み検索機能は付いていません。

【トップページ】メインビジュアルの絞り込み検索

トップページに絞り込み検索機能を付けてみました。プラグインの用途、条件、ライセンスを各カテゴリーから選択して、検索できるようにしています。

絞り込み検索

項目	選択オプション
用途	ECサイト、フォーラム、セキュリティーなど
こだわり条件	日本人開発者、サポートあり、返金保証ありなど
ライセンス	GPL、その他

【下層ページ】サイドバーの絞り込み検索

下層ページのサイドバーに絞り込み検索を実装しました。トップページはプルダウン形式ですが、サイドバーはチェックボックス形式です。

選択オプションは一覧で見れたほうが楽ですよね？チェックボックスだと、複数の選択肢をまとめて選択できるので、あれこれ選択したいユーザーにとって選びやすい仕様です。

【やり方】VK Filter Search Proプラグインを使っただけ

WooCommerceには独自に追加した分類機能を絞り込みできる機能はありませんので、コードを書くかプラグインを組み合わせる必要があります。

対処方法

VK Filter Search Proプラグインって何だ？

VK Filter Search ProはWordPress専用のプラグインです。開発している会社は日本の会社なので、管理画面やマニュアルは全て日本語。無料で使えるプラグインは海外のエンジニアが開発したものが多いですよね？

VK Filter Search Pro はバッチリ日本語対応します。

VK Filter Search Pro
開発会社	株式会社ベクトル
価格	29,700円 （税込み価格）
ライセンス	GPL（複数サイトに使える）
公式サイト	ダウンロードする

VK Filter Search ProにはVK Filter Searchという無料バージョンがあります。無料版も試してみましたが、標準のカテゴリーとタグのみ検索する機能のため、商品検索には使えませんでした。

コード不要で検索システムを作れる

VK Filter Search Proプラグインはノーコードで商品検索フォームを作ることができます。まずは導入する全体の流れです。

全体の流れ

【ステップ①】絞り込みオプションを作る

サンプルサイトは以下のように「用途」「こだわり条件」「ライセンス」で絞り込み検索できるカスタマイズです。

項目	選択オプション
用途	ECサイト、フォーラム、セキュリティーなど
こだわり条件	日本人開発者、サポートあり、返金保証ありなど
ライセンス	GPL、その他

この項目は無料プラグインの Custom Post Type UI で作成しています。

設定はプラグインの案内に沿って入力していくだけなので、コードを編集する必要はありません。

【ステップ②】商品を登録する

WooCommerceで商品を追加する時に、編集ページ右側の選択オプションから任意のオプションを選択します（下記図参照↓）。

選択オプションは無料プラグインCustom Post Type UIで何個でも追加できます。WooCommerce標準のカテゴリーやタグに限らず、自由に分類項目を増やせるのがポイントです。

【ステップ③】検索フォームを作る

検索フォームを作るステップです。

絞り込み検索フォームは好きな場所に、好きな形式で設置できます。サンプルサイトのように、「トップページはプルダウン形式で横並び」。「サイドバーはチェックボックスで縦並び」といったアレンジができます。

検索フォームはブロックエディターから直感的に作るシステムなので、プログラムの知識は不要です。以下の動画は、VK Filter Search Pro開発会社の公式動画です。検索フォームを作っている様子を確認できます。

VK Filter Search ProはWooCommerce意外にも使える

VK Filter Search ProプラグインはWooCommerce以外にも使えます。

例えば以下のような業種のサイトなんかにも導入できます。

導入できる業種

VK Filter Search Proを使ったサイト事例

VK Filter Search Proプラグインで作ったサンプルサイトです。

ライセンス的にクライアントのサイト制作も使える

VK Filter Search ProはGPLライセンスです。仕事でクライアントへ導入するさい追加料金は必要ありません。いわゆる「使い回しOK」なライセンスです。

受託制作などの場合は別途費用が発生しますか？

弊社の製品はすべて100%GPLを遵守しております。受託案件でも自由に利用いただいてかまいません。

引用：FAQページ

以下は有料テーマや有料プラグインのライセンス形態の一例を表にまとめたものです。サイト単位で購入の必要なものや、自分の運営するサイト以外だと追加料金で特別ライセンスを購入するタイプがあります。

ライセンス形態

ライセンス形態	自分のサイト	第三者のサイト
GPL( VK Filter Search Pro )	追加料金なし	追加料金なし
独自ライセンスA	追加料金なし	特別料金あり
独自ライセンスB	サイトごとに費用がかかる	サイトごとに費用がかかる

まとめ

WordPressプラグイン「WooCommerce」に絞り込み検索を導入する方法を紹介しました。絞り込み検索プラグインを色々試しましたが、WooCommerceに最適なのは個人的にVK Filter Search Proでした。

コードの編集をせず、絞り込み検索オプションを好きなだけ増やせるし、コードが一切わからないクライアントのサイトへの納品にも使えるが便利。

WooCommerce以外のサイトにも使えるので、僕みたいなサイト制作事業者向けです。

公式 絞り込み検索プラグイン「VK Filter Search Pro」