Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

スマートなWooCommerce商品検索の作り方 (ステップバイステップ)

WooCommerceには検索機能がビルトインされていますが、商品を見つけるのはあまり得意ではありません。よりスマートで高速な検索ツールに置き換えることで、ユーザーエクスペリエンスを向上させ、WooCommerceストアの売上を増やすことができます。

強力な検索機能により、カスタマイザーは探しているものを的確に見つけることができ、フラストレーションを軽減し、購入の可能性を高めることができます。

長年にわたり、SearchWPをビジネスサイトで使用し、カスタマイザーに直感的な検索体験を提供してきました。この強力なプラグインはサイトナビゲーションを改善し、エンゲージメント率の向上とコンバージョンの増加をもたらしました。

この投稿では、WooCommerceの商品検索をスマートに行う方法をご紹介します。私たちはこのトピックについて実地経験がありますので、信頼できるアドバイスのみを提供しますのでご安心ください。

Adding a smarter WooCommerce product search to your online store

なぜWooCommerce商品検索を追加するのか?

WooCommerceにはビルトイン商品検索がありますが、非常に限定的です。

初期設定では、商品属性、レビュー、カスタムフィールド、商品説明の一致を検索しません。このため、買い物客がオンラインストアで購入したい商品を見つけられず、売上が減少する可能性があります。

Product search showing no products found

また、非常に時間がかかるので、せっかちな買い物客は探しているものを見つける前にサイトを離れてしまうかもしれない。

幸いなことに、より役立つ検索結果を表示し、より速く検索結果を取得し、より多くの売上を得ることを可能にする優れたWooCommerceプラグインがいくつかあります。

それでは、WooCommerceでカスタム商品検索を追加する方法を見ていきましょう。チュートリアルのナビゲーションには、以下のクイックリンクをご利用ください:

ステップ1:SearchWPのインストールとセットアップ

私たちが試したすべてのWooCommerce商品検索プラグインの中で、スマートなWooCommerce商品検索を作成する最も簡単な方法は、SearchWPを使用することです。

SearchWPはWordPressの検索プラグインで、WordPressが初期設定で無視しているコンテンツを検索できるようにします。例えば、ブログのコメントを検索できるようにしたり、PDFのインデックスと検索をサイトに追加することができます。

また、独自の関連性尺度を作成し、コードを書くことなくアルゴリズムを調整することもできる。このようにして、適切な検索結果を適切な人に適切なタイミングで表示することができる。

また、WooCommerceとの統合により、WooCommerceの商品検索を改善し、商品属性やタグなどを検索結果に含めることができます。

詳しくはSearchWPのレビューをご覧ください。

最初に行う必要があるのは、SearchWPプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、管理サイドバーからSearchWP ” 設定ページにアクセスし、’一般’タブをクリックします。

Activating the SearchWP plugin's license

ここで、ライセンスキーを入力する必要があります。この情報は、SearchWPアカウントで、または購入確認メールを確認することで見つけることができます。

完了したら、必ず「Verify Key」ボタンをクリックしてください。

次に、WooCommerce Integrationエクステンションをインストールして有効化する必要があります。WordPressダッシュボードで、SearchWP Extensionsにアクセスしてください。

ここでWooCommerce Integration拡張機能を見つけて、その「インストール」ボタンをクリックします。

Installing the WooCommerce integration for SearchWP

ステップ2:カスタムWooCommerce検索アルゴリズムの作成

拡張機能を手に入れたら、WordPressブログ用のカスタムサイト検索エンジンを作成する準備が整いました。これにより、SearchWPが見るコンテンツと、買い物客に結果を表示する方法を完全に理解することができる。

まずは、SearchWP “ Algorithmにアクセスしてください。そして、「ソースと設定」ボタンをクリックしてください。

Creating an improved WooCommerce product search

SearchWPの検索結果に含めるコンテンツを指定するポップアップが開きます。例えば、WordPressの検索結果からページを除外したり、カスタム投稿タイプを含めることができます。

WooCommerceの検索を改善するには、「商品」の横にあるチェックボックスをオンにします。

Searching WooCommerce products using SearchWP

WooCommerceの商品レビューはコメントとして保存されます。レビューを検索可能にしたい場合は、「コメントする」ボックスもチェックする必要があります。

その後、「完了」ボタンをクリックしてポップアップを閉じます。下にスクロールすると、新しい「製品」セクションが表示されます。

初期設定では、SearchWPは商品タイトル、コンテンツ(説明)、スラッグ、抜粋(短い説明)を検索して一致を探します。サイト、ストア、オンラインマーケットプレイスの設定によっては、カスタマイザーやタグなど他のコンテンツを検索したい場合もあります。

これを行うには、「属性の追加/削除」ボタンをクリックします。

How to make WooCommerce product attributes searchable

ポップアップが表示され、さまざまなボックスにチェックを入れたり、カスタムフィールドやタクソノミーを選択することができます。前のステップで’コメント’を有効化した場合、’レビュー’の隣にあるボックスにもチェックを入れることができます。

以下の画像では、検索可能なカスタムフィールドとして‘color’と’size’を、タクソノミーフィールドには商品タグとカテゴリーを追加しています。

Managing WooCommerce product attributes

使用したい商品属性をすべて選択したら、「完了」をクリックします。

これで、各属性にそれぞれ「適用属性の関連性」スライダーがあることがわかります。これは、WordPressで検索結果ページを作成する際に、SearchWPが商品をどのようにランク付けするかをコントロールします。

関連性の高い属性は、検索結果に大きな影響を与えます。例えば、商品のタイトルを商品スラッグよりも重視したい場合は、それに応じてスライダーを調整する必要があります。

Making an improved WooCommerce product search for an online store

スマート商品検索の設定に満足したら、画面を一番上までスクロールし、「保存」ボタンをクリックします。

SearchWPはインデックスを再構築します。

Saving your smart product search algorithm

インターネット接続の速度やWordPressホスティングサービスによっては、数分かかる場合があります。

Index Status 100%」と表示されれば、SearchWPがすべての商品データを検索インデックスに追加したことがわかります。

Rebuilding the WooCommerce product search

ステップ3: オンラインストアの任意の場所に検索フォームを追加する

お使いのWooCommerceテーマにすでに検索フィールドがある場合は、何も変更する必要はありません。SearchWPはより適切な検索結果をすぐに提供し始めます。

しかし、もしあなたのテーマが初期設定で商品検索フォームを持っていない場合は、下記のチュートリアルのどれかに従ってページに追加することができます:

ユーザーが入力すると即座に検索候補を表示したいですか? WordPressにAjaxライブ検索を追加する方法のガイドをご覧ください。

WooCommerce商品検索:よくある質問

WooCommerceサイトにカスタマイザー機能を追加する方法がわかったところで、このトピックに関するよくある質問にお答えしましょう。

WooCommerceメニューに商品検索を追加するには?

WooCommerceメニューに商品検索を追加する方法をご紹介します:

  • ブロックテーマを使用する: フルサイトエディターを開き、「ナビゲーション」エリアを開き、「検索」ブロックを追加するだけです。店舗のデザインに一致するように外観をカスタマイズできます。
  • ページビルダーを使う: SeedProdや同様のビルダーを使用している場合、検索要素をヘッダーエリアにドラッグ&ドロップするだけです。これらのツールは、検索バーの配置とスタイルを完全にコントロールすることができます。
  • クラシックテーマを使う: 最も簡単な方法は、無料のSearchWP Modal Search Formプラグインをインストールすることです。ナビゲーションメニューのメニュー項目として検索バーを追加できます。

WooCommerceで商品フィルターを作成するには?

YITH WooCommerce Ajax Product Filterプラグインで商品フィルターを作成することができます。このプラグインを使用すると、商品カテゴリー、タグ、属性、レビュー、または価格帯など、カスタマイザーエクスペリエンスを向上させるパラメータを選択することができます。

詳しくはWooCommerce商品フィルターの追加方法のチュートリアルをご覧ください。

さらに詳しくプラグインを知りたい方は、YITH WooCommerce Ajax Product Filterのレビューをご覧ください。

WooCommerceの商品ページをカスタマイズできますか?

WooCommerce商品ページのカスタマイザーは可能ですが、そのプロセスはWordPressテーマの種類によって異なります:

ブロックテーマを使用している場合、WordPressのフルサイトエディターで商品ページを直接カスタマイズすることができます。これにより、レイアウトやスタイリングの基本的なコントロールを行うことができます。

クラシックテーマの場合、テーマカスタマイザーを使うか、特定のテーマと統合できるページビルダーを見つけるかもしれない。

SeedProdページビルダーはどんなテーマにも対応し、最も柔軟性があるため、私たちの推奨はSeedProdページビルダーを使用することです。WooCommerceに特化したテンプレートとeコマースブロックが付属しており、コーディングなしでコンバージョンの高い商品ページを簡単に作成することができます。

この投稿が、あなたのオンラインストアにスマートなWooCommerce検索を簡単に作る方法を学ぶのにお役に立てば幸いです。WooCommerceで商品をアップセルする方法やWordPressで検索トグル効果を追加する方法についてのチュートリアルもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

Comments

  1. Congratulations, you have the opportunity to be the first commenter on this article.
    Have a question or suggestion? Please leave a comment to start the discussion.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.