要約：WooCommerce おすすめ商品と関連商品を表示する方法
おすすめ商品はWooCommerceで手動でスターを付けた商品です。関連商品は、ストアがそれらの隣に表示する提案です。両方の表示方法を説明します。
- 商品をおすすめとしてマークする：[商品] » [すべての商品] で、任意の商品名の横にある星アイコンをクリックします。
- SeedProd（推奨）：デザインを完全に制御するには、おすすめ商品グリッドブロックをショップページにドラッグします。
- ブロックエディターまたはショートコード：WooCommerceの組み込みブロックを追加するか、
[featured_products]を貼り付けて、すばやく基本的な表示を行います。 - 関連商品の設定：各商品の「関連商品」タブでアップセルとクロスセルを追加します。
- 提案の表示場所をカスタマイズ：カートページと商品ページでSeedProdの「関連商品」ブロックと「アップセル」ブロックを使用します。
私が管理していたWooCommerceストアでは、デフォルトのレイアウトに買い物客が見るものを任せていました。顧客は、アクセスした商品以外を何も探さずに離れていくことがよくありました。
2つの小さな変更でそれが修正されました。WooCommerceのおすすめ商品で、人々が実際に注目する場所に最高のアイテムを配置し、関連商品で適切な次の購入を提案します。これらを組み合わせることで、クリック数と注文額が増加しました。
このガイドでは、おすすめ商品を表示する3つの方法、次に、関連商品、アップセル、クロスセルを設定およびカスタマイズする方法を示します。
WooCommerce のおすすめ商品とは？
おすすめ商品とは、WooCommerce でハイライトするために手動でマークした商品です。「おすすめ」として商品を設定すると、通常のカタログとは別に、サイトの特別なセクションに表示できます。
おすすめするのに最適な商品は、通常、売れ筋商品、新着商品、または高利益率の商品です。多くのストアオーナーは、季節ごとに featured products をローテーションしており、12月には冬物、8月には新学期用品をおすすめしています。
おすすめ商品と関連商品は同じではありません。おすすめ商品は自分で選択しますが、WooCommerceは共通のカテゴリとタグに基づいて関連商品を自動的に選択します。このガイドの後半で、関連商品を設定する方法を説明します。
WooCommerce でおすすめ商品を追加する方法
おすすめ商品を表示する前に、まず WooCommerce でマークする必要があります。既存の商品を編集することで、これを行うことができます。
WordPress管理画面から商品 » すべての商品に移動します。次に、商品にマウスカーソルを合わせ、編集オプションをクリックします。
次に、WordPress エディターの右側にある「公開」パネルを見つけます。そこから、「カタログの表示設定」の見出しの横にある [編集] をクリックします。
「この商品はおすすめ商品です」チェックボックスをクリックし、OKを選択します。次に、変更を保存するために更新をクリックします。
おすすめにしたいすべての商品についてこのプロセスを繰り返します。作業を迅速に進めるには、「クイック編集」オプションをクリックし、そのパネルで「おすすめ商品」チェックボックスを見つけます。
または、各商品の横にある星のアイコンをクリックしておすすめ商品にすることもできます。
どの商品を特集するか迷っていますか？商品ページで、トップセラーや季節限定の商品から始めてください。
商品におすすめ商品としてマークを付けたら、ストアに表示する3つの方法を以下に示します。
方法1：SeedProd を使用して WooCommerce おすすめ商品を表示する
この最初 の方法では、SeedProd を使用して、ストアに複数の推奨商品を一度に表示します。
SeedProdは、100万人以上のユーザーを持つ最高のWordPressウェブサイトビルダーの1つです。コーディング不要のドラッグアンドドロップビルダーで、カスタムWordPressテーマを作成できます。
ストアオーナーにとって、便利なのはWooCommerceとの統合です。サイトのどこにでもライブ商品データを表示でき、柔軟な商品グリッドにより、コードなしでカスタムレイアウトを簡単に構築できます。
SeedProd を使用して WooCommerce のおすすめ商品を表示する方法は次のとおりです。
ステップ1. SeedProdのインストールと有効化
まず、WordPressサイトにSeedProdをインストールして有効化します。
開始前のプラン確認：このガイドで使用されているブロックを含む、SeedProdのWooCommerceブロックは、Eliteプランに含まれています。
ヘルプが必要な場合は、WordPress プラグインのインストール方法に関するこのガイドに従ってください。
SeedProd を有効化した後、SeedProd » 設定 に移動し、SeedProd ライセンスキーを入力します。
ライセンスキーは、SeedProd ウェブサイトのアカウントダッシュボードの「ダウンロード」セクションにあります。
ライセンスキーを入力したら、「ライセンスキーの検証」ボタンをクリックしてアカウント情報を保存します。
ステップ2. WooCommerceテーマの作成
次に、WooCommerceストアを設定します。
SeedProdでは、これを行うために2つの方法があります。
- 既製のWooCommerceテーマ：既製のWooCommerceテーマテンプレートをインポートすると、SeedProdがすべてのストアページを自動的に作成します。
- 個別のテーマパーツ：「テーマテンプレート」ボタンを使用して、ストアの各パーツを一度に構築します。
このガイドでは、すべてをワンクリックで設定できるプリビルドテーマを使用します。
新しいWooCommerceテーマを作成するには、SeedProd » Theme Builder に移動し、Themesボタンをクリックします。
これにより、SeedProdのテーマライブラリが開きます。すべてのテーマはモバイルフレンドリーであり、ドラッグアンドドロップビルダーでデザインを編集できます。
デザインにカーソルを合わせ、チェックマークをクリックしてインポートします。ここでは「WooCommerce Starter Theme」を使用します。
インポート後、サイトを構成するすべてのテンプレートが表示されます。ショップページをカスタマイズするように、SeedProdのビルダーでそれぞれを編集できます。
ステップ3. WooCommerceおすすめ商品グリッドを追加する
このステップでは、ショップページを編集し、おすすめ商品のみを表示する商品グリッドを追加します。
テーマビルダーでショップページテンプレートを見つけ、Edit Designをクリックします。
SeedProdのページビルダーは、左側にブロックとセクション、右側にライブプレビューを表示します。
いずれかの要素をクリックして、その設定を編集します。
商品をクリックして、[Product Grid]パネルを開きます。ここでは次のことができます。
- 列数を変更する
- より的を絞った商品レイアウトのために、タイプまたはカテゴリ別に商品を表示する
- ページネーションを表示する
- 商品の並び順を変更する
フォント、フォントサイズ、色、間隔などを高度タブでカスタマイズできます。
コンテンツの追加も同様の方法で行います。左側のパネルからブロックをドラッグして、ページにドロップします。
左側のサイドバーにあるWooCommerceブロックパネルまでスクロールします。次に、おすすめ商品ブロックを見つけて、ページにドラッグします。
ブロックをクリックして設定を開きます。おすすめステータスで自動的に商品をフィルタリングします。
残りは、ニーズに合わせて商品グリッドをカスタマイズすることです。バッジの色、画像の境界線、またはグリッドの上にヘッダーを追加することで、おすすめ商品を際立たせることができます。
レイアウトに満足したら、緑色の保存ボタンをクリックします。
このプロセスを繰り返して、以下を含む残りのテーマをカスタマイズできます。
ステップ4. WooCommerceテーマを発行する
おすすめ商品の設定が完了したら、公開する準備ができました。
これを行うには、SeedProd » Theme Builder に移動し、Enable SeedProd Themeトグルを「On」の位置に切り替えます。
これで完了です！ストアをプレビューして、おすすめ商品がライブで表示されていることを確認できます。
方法2：WooCommerce注目商品ブロックを使用する
WooCommerceには、オンラインストアの任意のページまたは投稿に追加できる組み込みの「おすすめ商品」ブロックがあります。追加のプラグインは不要です。
SeedProdよりもオプションは少ないですが、基本的な表示が必要なだけであれば、すばやく設定できます。
この方法を使用するには、ページを作成または編集し、WordPressブロックエディターのプラス（+）アイコンをクリックして新しいブロックを追加します。次に、検索フィールドに「WooCommerce」と入力し、おすすめ商品ブロックをクリックします。
そこから、表示する商品を選択し、Doneをクリックします。
商品がすぐにページに表示されます。
ブロックの設定で、次のことを制御できます。
- 説明
- 価格
- オーバーレイ
- オーバーレイの不透明度
「おすすめ商品」ブロックは一度に1つの商品を表示します。複数の「おすすめ商品」のグリッドを表示するには、代わりに商品コレクションブロックを追加し、「おすすめ商品」コレクションを選択します。これは、おすすめステータスでフィルタリングしてくれます。
完了したら「公開」または「更新」をクリックします。次にページをプレビューして、製品がライブで表示されていることを確認します。
ストアでクラシックテーマを実行している場合は、同じブロックを使用して、WooCommerceサイドバーにおすすめ商品を表示できます。外観 » ウィジェットに移動し、いずれかのサイドバーのプラスアイコンをクリックして、そこにブロックを追加します。
変更を保存してから、そのサイドバーがあるページにアクセスしてウィジェットを確認します。
方法3：WooCommerce おすすめ商品ショートコードを使用する
3番目の方法ではショートコードを使用します。これは、クラシックWordPressエディターで使用する場合、またはWordPressテーマテンプレートに直接注目の製品を追加したい場合に機能します。
ページを編集または作成し、このショートコードをエディターに貼り付けます。
[featured_products]
ページをプレビューすると、すべての注目の製品がグリッドに表示されます。
表示する製品数や使用するカラム数を制御できます。たとえば：
[featured_products limit="2" columns="2"]
category="slug"を使用してカテゴリでフィルタリングしたり、orderby="date"またはorderby="popularity"で並べ替え順序を変更したり、order="ASC"またはorder="DESC"で方向を設定したりすることもできます。
WooCommerceの現在のドキュメントでは[products visibility="featured"]のみがリストされていますが、これは同じジョブを実行します。どちらのショートコードも機能しますが、productsバージョンがドキュメント化されているものです。
最適なレイアウトが見つかるまでさまざまな値を試してください。SeedProdと比較するとオプションは限られていますが、セットアップなしで注目の製品を最も迅速に表示する方法です。
WooCommerceで関連商品をセットアップする方法（プラグイン不要）
おすすめ商品は、最高のアイテムを買い物客の前に置きます。関連商品は反対のジョブを実行します。つまり、現在表示している商品に基づいて、次に必要になる可能性のあるものを提案します。
WooCommerceは、共有カテゴリとタグから「関連商品」セクションを自動的に生成するため、プラグインなしではこれらの提案を手動で選択することはできません。制御できるのは、アップセルとクロスセルであり、これらは商品ごとに設定します。
アップセルは、顧客が閲覧している商品よりも高価なバージョンです。クロスセルは、カートに入っている商品と組み合わせて使用される商品で、例えば電話の横に提案されるケースのようなものです。
デフォルト設定とSeedProdで関連商品をカスタマイズした場合の比較を見てみましょう。
| 特徴 | デフォルトのWooCommerce | SeedProdビルダー |
|---|---|---|
| セットアップの難易度 | 中程度（商品ごと） | 簡単（ドラッグ＆ドロップ） |
| デザインコントロール | 限定的 | 完全なビジュアルコントロール |
| 配置オプション | 商品ページのみ | 商品、カート、または任意の場所 |
| カスタムレイアウト | サポートされていません | 完全にカスタマイズ可能 |
| アップセル＆クロスセル | はい | はい |
| モバイルプレビュー | いいえ | はい |
| プラグインは必要ですか？ | いいえ | はい（SeedProd） |
まずは組み込みの方法から始めましょう。
ステップ1. WooCommerceエディタでリンクされた商品を追加する
WordPress管理画面から「商品 » 全商品」に移動し、任意のWooCommerce商品を選択して編集します。商品オプション内で、商品データセクションまでスクロールし、「関連商品」タブを見つけます。
ステップ2. 各商品にアップセルとクロスセルを選択する
関連商品セクションには、アップセルとクロスセルの2つのオプションがあります。
使用したいフィールドに商品名を入力し始め、表示されたら正しい項目をクリックします。
ステップ3. 商品ページで関連商品をプレビューする
WooCommerce商品にクロスセルまたはアップセルを追加した後、ページを上にスクロールして「変更をプレビュー」ボタンをクリックします。現在の商品の説明の下に関連商品が表示されます。
この方法では多くのカスタマイズオプションはありませんが、アップセルとクロスセルをすばやく開始できます。提案の表示場所や見た目を制御したい場合は、次のセクションで説明します。
SeedProdでWooCommerce関連商品をカスタマイズする方法
デフォルトの関連商品セクションは商品ページにのみ存在し、その見た目を変更することはできません。SeedProdを使用すると、カートページ、商品ページ、またはその他の場所に商品のおすすめを表示し、ストアに合わせてスタイルを設定できます。
これにはSeedProdのインストールとWooCommerceテーマのインポートが必要です。まだ行っていない場合は、まず「方法1」のステップ1と2に従ってください。
ステップ1：カートページレイアウトに関連商品を追加する
カートページは、購入を決めた買い物客がいるため、おすすめを表示するのに適した場所です。これを編集するには、テーマビルダーダッシュボードに移動し、カートテンプレートを見つけて、カーソルを合わせ、「デザインを編集」をクリックします。
ショッピングカートページが、先ほど使用したのと同じビジュアルエディターで開きます。プレビューのどこかをクリックすると、カートブロックのタイポグラフィ、ボタンのスタイル、フィールドの色など、そのブロックの設定をカスタマイズできます。
次に、左側のサイドバーにある「WooCommerceテンプレートタグ」の見出しまでスクロールし、「関連商品」ブロックを見つけます。ブロックをクリックしてドラッグし、ページプレビューの場所に配置します。
ブロック設定内では、列を調整したり、関連商品の数を変更したりできます。また、日付、人気順、評価順、タイトル順などで商品を並べ替えることもできます。
「高度な設定」タブでは、タイポグラフィ、色、ボタン、画像シャドウなど、関連商品ブロックのスタイルを調整できます。
すべてが希望どおりに見えるようになったら、画面右上隅にある「保存」ボタンをクリックします。
ステップ2：単一商品ページにアップセルオファーを表示する
WooCommerce商品をアップセルするには、SeedProdの「アップセル」ブロックを使用します。これは、先ほどWooCommerceの商品設定でリンクしたアップセルから取得されるため、まずそれらを設定してください。
アップセルブロックは単一商品ページテンプレートでのみ機能するため、テーマビルダーダッシュボードに戻り、「商品ページ」テンプレートを編集してください。
使用しているテンプレートには、すでに商品のおすすめが表示されています。関連商品を削除するには、ゴミ箱アイコンをクリックして、アップセルのスペースを確保しましょう。
次に、「WooCommerceテンプレートタグ」セクションで「アップセル」ブロックを見つけて、ページにドラッグします。
このブロックのライブプレビューは表示されませんが、関連商品ブロックと同様にカスタマイズできます。完了したら、必ず保存をクリックしてください。
ステップ3：関連商品を公開してプレビューする
SeedProdテーマがまだ公開されていない場合は、メソッド1で行ったのと同じように、SeedProdテーマを有効にするトグルをオンにします。次に、商品ページとカートページをプレビューして、おすすめを表示します。
カートページでの関連商品の例を次に示します。
そして、商品ページでのアップセルの例を次に示します。
関連商品を非表示にしたい場合は、テンプレートからブロックを削除して、再度保存してください。
WooCommerce おすすめ商品と関連商品のよくある質問
WooCommerceで製品の注目のステータスを削除するにはどうすればよいですか？
WordPressダッシュボードの[製品] » [すべての製品]に移動し、製品の横にある星アイコンをクリックして注目のステータスをオフにします。クイック編集を使用して、注目の製品ボックスのチェックを外してから保存することもできます。製品は、注目の製品の表示やショートコードに表示されなくなります。
WooCommerceショップページに注目の製品のみを表示するにはどうすればよいですか？
最も簡単な方法は、SeedProdを使用してWooCommerceのショップページをカスタマイズし、おすすめステータスで自動的にフィルタリングされる「おすすめ商品」ブロックを追加することです。デフォルトのショップループを好む場合は、おすすめフラグで商品をフィルタリングするプラグインまたはコードスニペットが必要です。
表示する注目の製品数を制限できますか？
はい。ショートコードメソッドでは、数値を設定するためにlimit="4"を追加します：[featured_products limit="4"]。SeedProdのプロダクトグリッドブロックでは、ブロック設定パネルで直接商品数を設定できるため、コードは不要です。
WooCommerceの注目の製品はホームページに自動的に表示されますか？
いいえ。製品を注目の製品としてマークしても、WooCommerce内でそのステータスが付与されるだけです。表示するには、ブロック、ショートコード、またはウィジェットをページに追加する必要があります。ほとんどのストアオーナーは、このガイドの3つの方法のいずれかを使用して、注目の製品をショップページまたはホームページに手動で追加します。
WooCommerceのアップセルとクロスセルとの違いは何ですか？
アップセルは、現在の商品のより高価またはアップグレードされたバージョンであり、単一商品ページに表示されます。クロスセルは、チェックアウト時のカートページに表示される補完的な商品です。どちらも、商品編集時の「関連商品」セクションで追加できます。
WooCommerceに関連商品の数に制限はありますか？
厳密な制限はありませんが、3〜5個に抑えるのが最善です。多すぎると買い物客を圧倒し、ページが散らかってしまいます。SeedProdのようなツールを使用すると、表示する関連商品の数と表示場所を正確に選択できます。
WooCommerceをカスタマイズするその他の方法
WooCommerceストアでもっと多くのことをしたいですか？
役立つガイドをいくつかご紹介します。
- WooCommerce追加情報タブをカスタマイズする方法
- WooCommerceカートページをカスタマイズする方法
- WooCommerceの商品ページに星評価を追加する方法
- WooCommerceで商品カテゴリとタグを表示する方法
- WooCommerceで商品概要を取得して表示する方法
- WooCommerceでカスタム「カートに追加」ボタンを追加する方法
- WooCommerceのサンキューページを簡単に作成する方法
- WooCommerceのカート表示が機能しない問題を修正する方法
- WooCommerceで在庫切れの商品を非表示にする方法
これで、おすすめ商品を3つの方法で表示する方法と、関連商品、アップセル、クロスセルを買い物客が見る場所に正確に配置する方法がわかりました。ストアに合った方法を選択してください。
商品のおすすめにカスタムの外観を与える準備はできましたか？コードに触れる必要はありません。SeedProdを入手して、今日からストアのデザインを始めましょう。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
