長い間、WooCommerceに任せきりで関連商品を扱っていました。いくつかアップセルやクロスセルを設定して、そのままにしていました。しかし、顧客が何も探さずに離れていくことが多いことに気づき始めました。特に、提案が顧客が本当に探しているものと一致しない場合です。
関連商品の表示方法を色々試すようになりました。ページの上部に移動させたり、カートに追加したり、SeedProdを使って意味のあるレイアウトをデザインしました。これらの小さな変更が、より多くのクリックとより大きな注文につながりました。
このガイドでは、私にとって最も効果的だった方法に基づいて、組み込みツールとドラッグ＆ドロップのビジュアルビルダーの両方を使用してWooCommerceの関連商品を表示する方法を説明します。
クイックサマリー：WooCommerceで関連商品を表示する方法
- WooCommerceで関連商品をセットアップする
デフォルトの商品エディターを使用して、個々の商品にアップセルやクロスセルを追加します。 - プラグインを使用せずに、関連商品を表示する
WooCommerceが商品カテゴリやタグに基づいて提案を自動的に表示するようにします。 - SeedProdで関連商品のレイアウトをカスタマイズする
ドラッグ＆ドロップビルダーを使用して、ストア全体で関連商品が表示される場所と方法を制御します。 - カートまたはチェックアウトページに商品のおすすめを追加する
SeedProdブロックを使用して、チェックアウト直前に最後の購入を促します。 - 単一商品ページにアップセルのオファーを表示する
WooCommerceのデフォルトを、よりクリーンでコンバージョン率の高いレイアウトに置き換えます。
| 特徴 | デフォルトのWooCommerce | SeedProdビルダー |
|---|---|---|
| セットアップの難易度 | 中程度（商品ごと） | 簡単（ドラッグ＆ドロップ） |
| デザインコントロール | 限定的 | 完全なビジュアルコントロール |
| 配置オプション | 商品ページのみ | 商品、カート、または任意の場所 |
| カスタムレイアウト | サポートされていません | 完全にカスタマイズ可能 |
| アップセル＆クロスセル | はい | はい |
| モバイルプレビュー | いいえ | はい |
| プラグインは必要ですか？ | いいえ | はい（SeedProd） |
さて、WooCommerceで関連商品をディスプレイする方法を見てみましょう。
WooCommerceで関連商品をセットアップする方法（プラグイン不要）
WooCommerceテーマを変更したくない、またはサイトに関連商品プラグインを追加したくない場合は、ストアオーナーはデフォルトのWooCommerce設定を使用して関連商品をディスプレイできます。
この方法では多くのカスタマイズオプションはありませんが、ストア売上の平均注文額を増やすために、アップセルやクロスセルを簡単に行うことができます。
ステップ1. WooCommerceエディタでリンクされた商品を追加する
まず、WordPress管理画面から**商品 » 全商品**に移動し、任意のWooCommerce商品を編集します。商品オプション内で、商品データセクションまでスクロールし、**リンクされた商品**タブを見つけます。
ステップ2. 各商品にアップセルとクロスセルを選択する
リンクされた商品セクションには、アップセルとクロスセルの2つの異なるオプションがあります。
アップセルは元の商品に似ているが価格が高い商品であり、クロスセルはメイン商品に加えて買い物客が購入したいかもしれない類似商品であることを覚えておいてください。
使用したいフィールドに商品名を入力し始め、表示されたら正しい項目をクリックします。
ステップ3. 商品ページで関連商品をプレビューする
WooCommerce商品にクロスセルまたはアップセルを追加した後、ページを上にスクロールして**変更をプレビュー**ボタンをクリックします。
現在の商品の説明の下に関連商品が表示されます。
SeedProdでWooCommerce関連商品をカスタマイズする方法
次に、SeedProdを使用してカスタム関連商品のおすすめを表示する方法を見てみましょう。
SeedProdは、WordPress向けの最高のドラッグ＆ドロップウェブサイトおよびページビルダーの1つです。コードなしで、WordPressサイトのどの部分でも視覚的に作成およびカスタマイズできます。
SeedProdを使用してWooCommerceストアをカスタマイズすることもできます。完全なWooCommerceウェブサイトテンプレートと強力なWordPressブロックを使用して、開発者を雇うことなく、特定のデザインニーズに合わせてオンラインストアを調整できます。
たとえば、カスタム商品カテゴリページを作成したり、商品特徴の説明を設定したり、ストアのナビゲーションにメニューカートを追加したりできます。
この方法では、現在のWooCommerceテーマがカスタムデザインに置き換えられます。
コード、ショートコード、子テーマ、アドオン、または推奨される商品プラグインは必要ありません。functions.phpファイルを編集する必要すらありません。代わりに、手間なく視覚的にすべてをカスタマイズできます。
ですので、以下の手順に従って、SeedProdのテーマビルダーでWooCommerceに新しい推奨商品をお気軽に追加してください。
ステップ1：SeedProdをWooCommerceサポート付きでインストールして有効化する
この方法を開始するには、SeedProdのEliteバージョンを入手する必要があります。
これには、完全なWooCommerceサポートと、ストアでの商品のカスタマイズ、クロスセル、アップセルに必要なすべてのブロックとセクションが含まれています。
プランを選択してアカウントを作成したら、SeedProdアカウントのダウンロードタブに移動し、プラグインをダウンロードしてください。
その際に、商品ライセンスキーをコピーしておいてください。これはすぐに必要になります。
次にWordPressウェブサイトに移動し、SeedProdの.zipファイルをストアにアップロードします。これにヘルプが必要な場合は、WordPressプラグインのインストールと有効化に関するこれらの手順に従ってください。
プラグインが有効になったら、WordPressダッシュボードのSeedProd » 設定に移動し、先ほどコピーしたライセンスキーを利用可能なフィールドに貼り付けます。
キーを確認ボタンをクリックすると、WooCommerceサイトのカスタマイズを開始する準備が整います。
ステップ2：SeedProdでWooCommerceテンプレートキットを選択する
次に、WordPressダッシュボードからSeedProd » テーマビルダーに移動します。ここでWooCommerceテーマのすべての部分をカスタマイズできますが、まずテンプレートを選択する必要があります。
テンプレートを選択するには、テーマボタンをクリックします。
WooCommerceフィルターを選択して、WooCommerceテンプレートキットのみを表示することもできます。
気に入ったキットを見つけたら、カーソルを合わせてチェックマークアイコンをクリックします。
SeedProdは、商品ページ、ショッピングカート、チェックアウト、商品アーカイブ、ショップページを含むキット全体をWordPressサイトにインポートします。これらのテンプレートパーツはすべてテーマビルダーダッシュボードで確認できます。
また、SeedProdはテンプレートデモから、会社概要、お問い合わせ、サービスページなどのコンテンツページを自動的に作成します。これらのページはデフォルトのWordPressページメニューで見つけることができ、SeedProdのドラッグアンドドロップビルダーで編集するためにクリックできます。
テンプレートをインストールしたら、ストアに関連商品を追加する準備が整いました。まず、カートページに関連商品を表示することから始めましょう。
カートページを編集するには、テーマビルダーダッシュボードにいることを確認し、カートテンプレートを見つけて、カーソルを合わせてデザインを編集リンクをクリックします。
ショッピングカートページがSeedProdのビジュアルエディターで開きます。
ステップ3：カートページのレイアウトに関連商品を追加する
カートページが開くと、左側にWordPressブロックとセクション、右側にライブプレビューがある2列のレイアウトが表示されます。
プレビューのどこかをクリックすると、数回のクリックでそのブロックの設定とスタイリングオプションをカスタマイズできます。たとえば、カートブロックの設定では、タイポグラフィ、ボタンのスタイル、フィールドの色などを変更できます。
SeedProd を使用すると、関連商品をカートページに追加するのは非常に簡単です。
左側のサイドバーにある「WooCommerce テンプレートタグ」の見出しまでスクロールし、「商品関連」ブロックを見つけます。次に、ブロックをクリックしてページプレビューにドラッグします。
ブロック設定内では、列を調整したり、関連商品の数を変更したりできます。ドロップダウンメニューでオプションを選択して、特定の商品を並べ替えることもできます。
- 日付
- 商品ID
- メニュー順
- 人気
- ランダム
- 評価
- タイトル
「詳細」設定タブでは、関連商品ブロックのスタイリングを調整できます。たとえば、タイポグラフィ、色、ボタン、画像の影などを変更できます。
すべてが希望どおりに見えるようになったら、画面右上隅にある「保存」ボタンをクリックします。
次に、SeedProd を使用して WooCommerce で商品をアップセルする方法を見てみましょう。
ステップ 4. 個別商品ページにアップセルオファーを表示する
WooCommerce 商品をアップセルしたい場合は、SeedProd の「アップセル」ブロックを使用できます。ただし、まず、方法 1 の手順に従って、WooCommerce 商品設定で商品をリンクする必要があります。
SeedProd のアップセルブロックは 個別商品ページテンプレートでのみ機能するため、テーマビルダーダッシュボードに戻り、「商品ページ」テンプレートを編集する必要があります。
使用しているテンプレートには、すでに商品レコメンデーションが含まれています。したがって、ゴミ箱アイコンをクリックして関連商品を削除しましょう。
次に、「WooCommerce テンプレートタグ」セクションで「アップセル」ブロックを見つけ、ページにドラッグします。
このブロックのライブプレビューは表示されませんが、関連商品ブロックと同様にカスタマイズできます。
WooCommerce サイトが希望どおりに見えるようになるまでカスタマイズを続けます。変更を定期的に保存するために、「保存」ボタンをクリックすることを忘れないでください。
ステップ 5. テーマを公開してライブにする
変更をウェブサイトでライブにする準備ができたら、「テーマビルダー」ページに移動し、「SeedProd テーマを有効にする」トグルを見つけます。「はい」の位置に切り替えると、変更が公開されます。
これで、個別商品ページやカートページをプレビューして、類似の商品レコメンデーションを確認できます。
カートページの例を次に示します。
そして、商品ページでのアップセルの例を次に示します。
関連商品を非表示にしたい場合は、新しいセクションをページから削除するだけです。
以上です！
WooCommerce の関連商品に関するよくある質問
WooCommerce で関連商品を表示することは、単にページスペースを埋めるだけではありません。これは、買い物客が欲しいものをさらに見つけるのを助ける簡単な方法であり、その過程で収益を静かに増やすことができます。
デフォルト設定で問題なければ、WooCommerceはすぐに始められるだけの機能を提供します。しかし、見た目や表示場所をより細かく制御したい場合は、SeedProdを使えばコードを一行も書かずに簡単にすべてをカスタマイズできます。
これらの他のWooCommerceチュートリアルやヒントも役立つかもしれません。
- あなたのストアに最適なWooCommerceプラグイン
- WooCommerceでカスタム「カートに追加」ボタンを追加する方法
- WooCommerceのサンキューページを簡単に作成する方法
- WooCommerce追加情報タブをカスタマイズする方法
- WooCommerceにカート表示ボタンを追加する方法
- WooCommerceでショップページタイトルを変更する方法
- WooCommerceで魅力的な商品画像ギャラリーを作成する方法
- WooCommerceの商品ページに星評価を追加する方法
- WooCommerceで商品概要を取得して表示する方法
- WooCommerceで注目の商品を表示する方法
- WooCommerceで在庫切れの商品を非表示にする方法
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
