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

【比較】SWELLとJIN:Rの違いは?両方買って比べてみた。どっちが本当にお勧めのWordPressテーマかを解説
初心者

WooCommerceの商品を複数の条件で検索したい…
絞り込み検索機能を付けたい…
なんかプラグインないの?

そんな疑問に答えます。

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

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

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

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

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

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

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

かんた

WooCommerceに実装した絞り込み検索機能を解説します。

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

WooCommerceの商品絞り込み検索|プルダウン

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

絞り込み検索

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

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

WooCommerceの商品絞り込み検索|チェックボックス

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

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

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

VK Filter Search Proプラグインで絞り込み機能を付けた

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

対処方法

  1. プログラムコードを追加する
  2. プラグインを組み合わせる
かんた

サンプルサイトでは、VK Filter Search Proプラグインを組み込みました。

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

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

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

かんた

ちなみに無料テーマLightningを開発したベクトルさんの製品です。

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

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

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

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

全体の流れ

  1. 絞り込みオプションを作る
  2. 商品を登録する
  3. 検索フォームを作る
かんた

それぞれのステップを解説します。

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

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

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

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

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

Custom Post Type UIの編集画面
Custom Post Type UIの編集画面

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

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

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

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

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

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

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

かんた

フォーム作りにプログラムコードの知識は不要です。

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

【備考】VK Filter Search Proはこんな使い方が出来る

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

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

導入できる業種

  1. 不動産サイト
  2. 転職サイト
  3. 旅行代理店サイト
  4. アフィリエイトサイト

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

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

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

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

かんた

公式サイトにもしっかり書いてあります↓

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

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

引用:FAQページ

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

ライセンス形態

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

使いまわしOKなライセンスは、お得感があります。

まとめ

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

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
目次