Smart WooCommerce Search：商品のライブ検索ができる

2019年11月30日

WooCommerce の商品のライブ検索ができる WooCommerce 用プラグインの紹介です。
それは「Smart WooCommerce Search」です。
その導入手順から日本語化・使い方と設定などを解説していきます。

Smart WooCommerce Search

Smart WooCommerce Search は、WooCommerce の商品（バリエーション商品を含む）のライブ検索ができます。

WordPress と WooCommerce 標準の検索フォームをプラグインの検索フォームと置換可。
WordPress と WooCommerce 標準の検索フォームへの設定は別々に設定可。

検索結果には、抜粋・サムネイル画像・価格・SKU を表示できます。
選択した商品カテゴリでの検索を許可＆禁止にもできます。
「在庫切れ」の商品を検索結果から除外することもできます。
あいまい検索もできます。

記事を作成もしくは更新時点でのバージョン：v 1.5.11

Gutenberg エディターでの動作

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

Gutenbergでのショートコードの挿入手順

このプラグインは、ショートコードを使用します。
挿入手順については、下記の記事にて詳しく解説していますので、御覧ください。

Gutenberg でのショートコードの挿入手順 – WordPress活用術

インストール手順

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

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

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

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

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

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

日本語化

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

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

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

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

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

専用メニュー

ダッシュボードの「コメント」メニューの下に追加されています。

使い方

設定画面から必要な設定を行いましょう。

設定（Settings）

WordPress Default Search

一般（General）

Default Search Widget
WordPress 標準の検索ウィジェットでプラグインの機能を有効にするかどうか。
Character Amount
ライブ検索を実行するのに必要な最小文字数を入力します。
初期値：3
Results Listing Amount
検索結果で表示する最大件数を入力します。
初期値：3

Default Output on Search Page
検索結果ページでプラグインによる検索結果の変更を無効にするかどうか。
Search Page Layout with Posts
使用中のテーマの検索結果ページを使用して商品を表示するかどうか。デフォルトでは「商品で検索」オプションが選択されている場合、WooCommerce の検索結果ページを使用して商品のみが表示されます。
“No Results" text
検索結果が 0 件であった場合に表示するメッセージを入力します。

Display Image
検索結果でサムネイル画像を表示するかどうか。
Display Excerpt
検索結果で抜粋を表示するかどうか。
Excerpt Symbols Amount
検索結果で表示する説明文の最大文字数を指定します。
初期値：50

Display Price
商品の価格を表示するかどうか。
Display SKU
商品の SKU を表示するかどうか。
“View all" Link Text
検索結果の下部に表示するボタンのラベルを入力します。
初期値：View all

Accent Words on Search Page
「Default Output on Search Page」オプションが無効時のみ機能します。
Fuzzy Search
あいまい検索の検索方法を選択します。

検索設定（Items to Search through）

Search in 投稿
投稿を検索できるようにするかどうか。
Search in 固定ページ
固定ページを検索できるようにするかどうか。
Search in 商品
商品を検索できるようにするかどうか。
Search in Variations
バリエーション商品を検索できるようにするかどうか。

Search in Title
タイトルを検索できるようにするかどうか。
Search in Content
内容を検索できるようにするかどうか。
Search in Excerpt
抜粋を検索できるようにするかどうか。
Search in Post Tag
投稿のタグをを検索できるようにするかどうか。

Search in Post Category
タイトルを検索できるようにするかどうか。
Search in Product Tag
内容を検索できるようにするかどうか。
Search in Product Category
抜粋を検索できるようにするかどうか。
Search in Product SKU
投稿のタグをを検索できるようにするかどうか。

Exclude “Out of stock"
検索結果から在庫切れ商品を除外するかどうか。
Allowed Product Categories
検索を許可する商品のカテゴリーを指定できます。カンマ区切りで複数指定可。
Disallowed Product Categories
検索を許可しない商品のカテゴリーを指定できます。カンマ区切りで複数指定可。

スタイル（styling）

Image Size
検索結果で表示する画像のサイズを px 単位で指定します。
初期値：50
Border Color
枠線の色を選択します。
Background Color
背景色を選択します。
Title Text Color
タイトルの文字色を選択します。

Excerpt Text Color
抜粋の文字色を選択します。
Excerpt Position
抜粋の表示位置を選択します。
Price Color
価格の色を選択します。

“View all" Link Text Color
検索結果で表示される「すべて表示」リンクのテキストの文字色を選択します。
“View all" Link Text Background
検索結果で表示される「すべて表示」リンクのテキストの背景色を選択します。

WooCommerce Default Product Search

一般（General）

Product Search Widget
WooCommerce 標準の検索ウィジェットでプラグインの機能を有効にするかどうか。
Character Amount
ライブ検索を実行するのに必要な最小文字数を入力します。
初期値：3
Results Listing Amount
検索結果で表示する最大件数を入力します。
初期値：3

Default Output on Search Page
検索結果ページでプラグインによる検索結果の変更を無効にするかどうか。
Search Page Layout with Posts
使用中のテーマの検索結果ページを使用して商品を表示するかどうか。デフォルトでは「商品で検索」オプションが選択されている場合、WooCommerce の検索結果ページを使用して商品のみが表示されます。
“No Results" text
検索結果が 0 件であった場合に表示するメッセージを入力します。

Display Image
検索結果でサムネイル画像を表示するかどうか。
Display Excerpt
検索結果で抜粋を表示するかどうか。
Excerpt Symbols Amount
検索結果で表示する説明文の最大文字数を指定します。
初期値：50

Display Price
商品の価格を表示するかどうか。
Display SKU
商品の SKU を表示するかどうか。
“View all" Link Text
検索結果の下部に表示するボタンのラベルを入力します。
初期値：View all

Accent Words on Search Page
「Default Output on Search Page」オプションが無効時のみ機能します。
Fuzzy Search
あいまい検索の検索方法を選択します。

検索設定（Items to Search through）

Search in Variations
バリエーション商品を検索できるようにするかどうか。

Search in Title
タイトルを検索できるようにするかどうか。
Search in Content
内容を検索できるようにするかどうか。
Search in Excerpt
抜粋を検索できるようにするかどうか。

Search in Product Tag
内容を検索できるようにするかどうか。
Search in Product Category
抜粋を検索できるようにするかどうか。
Search in Product SKU
投稿のタグをを検索できるようにするかどうか。

Exclude “Out of stock"
検索結果から在庫切れ商品を除外するかどうか。
Allowed Product Categories
検索を許可する商品のカテゴリーを指定できます。カンマ区切りで複数指定可。
Disallowed Product Categories
検索を許可しない商品のカテゴリーを指定できます。カンマ区切りで複数指定可。

スタイル（styling）

Image Size
検索結果で表示する画像のサイズを px 単位で指定します。
初期値：50
Border Color
枠線の色を選択します。
Background Color
背景色を選択します。

Title Text Color
タイトルの文字色を選択します。
Excerpt Text Color
抜粋の文字色を選択します。
Excerpt Position
抜粋の表示位置を選択します。

Price Color
価格の色を選択します。
“View all" Link Text Color
検索結果で表示される「すべて表示」リンクのテキストの文字色を選択します。
“View all" Link Text Background
検索結果で表示される「すべて表示」リンクのテキストの背景色を選択します。

専用ウィジェット

ウィジェットで選択できるカスタマイズした検索設定一覧

カスタマイズ設定作成例

一覧画面とウィジェットで識別できる名前を入力します。

設定（Settings）

一般（General）

Placeholder
検索キーワードの入力フィールドで表示するプレースホルダーを入力します。
Character Amount
ライブ検索を実行するのに必要な最小文字数を入力します。
初期値：3
Results Listing Amount
検索結果で表示する最大件数を入力します。
初期値：3

Default Output on Search Page
検索結果ページでプラグインによる検索結果の変更を無効にするかどうか。
Search Page Layout with Posts
使用中のテーマの検索結果ページを使用して商品を表示するかどうか。デフォルトでは「商品で検索」オプションが選択されている場合、WooCommerce の検索結果ページを使用して商品のみが表示されます。
“No Results" text
検索結果が 0 件であった場合に表示するメッセージを入力します。