ウェブサイトにWooCommerceの特集商品を表示する簡単な方法をお探しですか？
特集商品カテゴリを使えば、買い物客の目に留まりやすい場所に最も重要な商品を表示することができます。これにより、WooCommerceで最も重要な商品を強調することができ、ユーザーエクスペリエンスを向上させ、より早く売上を達成することができます。
多くのストアオーナーは、WooCommerceのホームページの目玉商品を追加して、訪問者の目に留まるようにします。
この記事では、WooCommerceストアに目玉商品を追加する3つの簡単な方法をご紹介します。
WooCommerceの注目商品とは？
Featured商品とは、WooCommerceが強調しやすい商品を特集するために使用される特別な表示カテゴリです。一度商品を「Featured」に設定すると、通常のカタログとは別に、サイト上の特別なセクションに表示することができます。
例えば、買い物客が商品カタログの表示を「注目商品」でフィルタリングし、お勧めの商品を表示できるようにすることができます。その結果、買い物客はウェブサイト上の全商品をスクロールすることなく、イチオシの商品を見つけやすくなります。
特定の商品をフィーチャーすることは、WooCommerceの商品レコメンデーションの一形態としても機能し、買い物客を売れ筋商品や季節商品に誘導します。
WooCommerceで注目商品を追加する方法
特集商品をウェブサイトに表示する前に、まずWooCommerceの商品表示設定で「特集」オプションを選択し、特定の商品をマークする必要があります。WooCommerceで既存の商品を編集するか、新しい商品を追加してください。
注目商品」設定を既存の商品に追加するには、WordPressの管理エリアから商品 " すべての商品に移動します。次に、商品の上にマウスカーソルを置き、編集オプションをクリックします。
次に、WordPressエディターの右側にある "Publish "パネルを見つけてください。そこから、「カタログの表示」の見出しの横にある「編集」をクリックします。
This is a featured product "チェックボックスをクリックし、"OK "を選択します。更新」をクリックして変更を保存します。
注目商品として設定したいすべての商品について、このプロセスを繰り返します。より迅速に行うには、クイック編集オプションをクリックし、そのパネルで「注目商品」チェックボックスを見つけることができます。
また、各商品の横にある星のアイコンをクリックすると、その商品を特集することができます。
どの商品を紹介すればいいかわからない？まずはトップセラーや季節限定商品から始めましょう。これらはWooCommerceで紹介するのに最適な商品です。
WooCommerceサイトに掲載する商品を選択したら、商品ページに表示する準備が整いました。
ここでは、SeedProdを使用した私のお気に入りの方法を含む、3つの異なる方法を使用してWooCommerceで目玉商品を紹介する方法を説明します。
WooCommerceで注目の商品を表示するには？
WooCommerceサイトで特集商品を表示するには、いくつかの方法があります。まずは、コードなしでウェブサイトのスタイルやブランディングに合わせて商品フィードをカスタマイズできる、超簡単な方法をご紹介します。
2番目と3番目の方法は、カスタマイズのオプションは少ないですが、WooCommerceの組み込みウィジェットとショートコードを使用して、注目の商品を表示することができます。
- 方法1：SeedProdでWooCommerceの注目商品を表示する
- 方法2：WooCommerceの注目商品ウィジェットを使用する
- 方法3：WooCommerce Featured Productショートコードを使う
- WooCommerceの注目商品に関するFAQ
- WooCommerceをカスタマイズするその他の方法
方法1：SeedProdでWooCommerceの注目商品を表示する
最初の方法は、SeedProdを使用してWooCommerceのページごとに複数の特集商品を表示します。
SeedProdは、100万人以上のユーザーを持つ最高のWordPressウェブサイトビルダーの一つです。その強力なドラッグアンドドロップビルダーで、コーディング不要のあらゆるタイプのウェブサイトを作成できます。
簡単なWordPressテーマビルダーでカスタムWordPressテーマを作成し、WooCommerceとの統合でオンラインストア全体を構築し、強力なページビルダーでコンバージョンの高いランディングページを作成することができます。
SeedProdはまた、あなたのサイトのあらゆる部分をカスタマイズするのに役立つ様々なブロックやセクションを提供しています。
例えば、WooCommerceウェブサイトのオーナーは、WooCommerceテンプレートタグを使用して、動的な商品データをどこにでも表示することができます。さらに、柔軟な商品グリッドにより、買い物客を魅了し、コンバージョンさせる美しい商品レイアウトを作成することができます。
そんな中、SeedProdでWooCommerceの商品を特集設定で表示する方法をご紹介します。
ステップ1.SeedProdのインストールとアクティベート
最初のステップは、WooCommerceウェブサイトにSeedProdをインストールすることです。
注：SeedProdのWooCommerce機能を利用するには、SeedProd Eliteプランが必要です。
WordPressプラグインのインストール方法については、こちらのガイドを参照してください。
SeedProdプラグイン.zipファイルをインストールした後、SeedProd " Settingsに 行き、SeedProdライセンスキーを入力してください。
ライセンスキーは、SeedProdウェブサイトのアカウントダッシュボードの「ダウンロード」セクションにあります。
ライセンスキーを入力後、Verify Keyボタンをクリックしてアカウント情報を保存します。
ステップ2.WooCommerceテーマを作成する
次のステップは、WooCommerceの商品ページを作成することです。SeedProdでこれを行うには2つの方法があります：
WooCommerceテーマ
既製のWooCommerceテーマテンプレートをインポートすることで、WooCommerceテーマ全体を作成することができます。テーマテンプレートは、WooCommerceストアに必要なすべてのページを自動的に作成します。
個別テーマ・パート
また、テーマテンプレートボタンを使用して、WooCommerceストアのさまざまな部分を個別に構築することもできます。
このガイドでは、ビルド済みのテーマを使うことにする。
新しいWooCommerceテーマを作成するには、SeedProd " Theme Builderに 行き、Themesボタンをクリックします。
このボタンをクリックすると、SeedProdのWordPressとWooCommerceのテーマライブラリが開きます。各テーマは100%モバイル対応で、SeedProdのページビルダーでデザインやレイアウトを編集することができます。
任意のデザインにマウスカーソルを合わせ、チェックマークアイコンをクリックすると、テーマビルダーにインポートされます。このガイドでは「WooCommerce Starter Theme」を使用します。
テーマをインポートすると、ウェブサイトのデザインを構成するすべての異なるテンプレートが表示されます。また、SeedProdのページビルダーを使用して、サイトのニーズに合わせて各テンプレートを個別にカスタマイズすることもできます。
ショップページをカスタマイズして、その方法をご紹介しましょう。
ステップ3.WooCommerce注目商品グリッドを追加する
このステップでは、Shopページのテンプレートを編集し、SeedProdの商品グリッドブロックを使用して、特集設定で多数の商品を表示します。
テーマビルダーダッシュボードで「ショップ」ページテンプレートを見つけ、「デザインを編集」をクリックしてドラッグ＆ドロップでページビルダーを開きます。
SeedProdのページビルダーはとても使いやすい。左側にブロックとセクションがあり、右側にライブプレビューがあります。
どの要素をクリックしても、既存のデザインを編集することができます。例えば、商品をクリックすると、商品グリッド設定パネルが表示され、以下のことができます：
- 列番号の変更
- 商品をタイプ別に表示し、WooCommerceの商品をカテゴリー別に表示することで、よりフォーカスした商品レイアウトが可能になります。
- ページネーションの表示
- 商品の順序を変更する
詳細設定タブで、フォント、フォントサイズ、色、間隔などをカスタマイズできます。
ページにコンテンツを追加するのも簡単です。左のパネルからブロックをドラッグしてプレビューにドロップするだけです。
それが、ショップページに注目商品を追加する方法です。
まず、左サイドバーのWooCommerceブロックパネルまでスクロールダウンします。そして、Featured Productsブロックを見つけ、ページにドラッグします。
そこをクリックしてブロック設定を開きます。ご覧のように、このブロックはWooCommerceの商品を「注目商品」のステータスで自動的にフィルタリングします。
あとは、あなたのニーズに合わせて製品グリッドをカスタマイズするだけです。
例えば、目玉商品をもっと目立たせたいと思うかもしれません。その場合、バッジの色を変えたり、画像の境界線を変えたり、さらにユーザーが商品を見つけやすいように見出しを追加することもできます。
ページの外観に満足したら、緑色の保存ボタンをクリックします。同じ手順で、新しいWooCommerceテーマのデザインをカスタマイズすることができます：
ステップ4.WooCommerceテーマを公開する
特集商品をサイトに追加し、テーマをカスタマイズした後、あなたのウェブサイト上でライブにすることができます。
そのためには、SeedProd " Theme Builderに 行き、Enable SeedProd Themeトグルを "On "の位置にします。
それだけだ！
WooCommerceテーマをプレビューし、カスタム特集商品のレイアウトを確認できるようになりました。
方法2：WooCommerceの注目商品ウィジェットを使用する
オンラインストアに目玉商品を表示するもう一つの方法は、WooCommerceに内蔵されている目玉商品ウィジェットを使用することです。このウィジェットを使用して、特集商品をページ、投稿、ウェブサイトのサイドバーに追加することができます。
この方法には、前の方法ほど多くのカスタマイズ・オプションは含まれていない。しかし、最も重要な商品を表示するシンプルな方法が必要な場合は、良い解決策です。
この方法を使用するには、ページを作成または編集し、WordPressブロックエディタでプラス（+）アイコンをクリックして新しいブロックを追加します。次に、検索フィールドに「WooCommerce」と入力し、Featured Productsブロックをクリックします。
そこから、表示する製品を選択し、「完了」をクリックします。
選択した商品があなたのページに直接埋め込まれます。ブロックの設定では、以下をカスタマイズできます：
- 説明
- 価格
- オーバーレイ
- オーバーレイの不透明度
また、各商品をカラムブロックにドラッグして、より魅力的なレイアウトにすることもできる。
すべての外観に満足したら、「公開」または「更新」ボタンをクリックします。これで、ウェブサイト上で商品をプレビューすることができます。
同じウィジェットを使用して、WooCommerceサイドバーに注目商品を表示することができます。そのためには、外観 " ウィジェットに行き、サイドバーのプラスアイコンをクリックし、注目商品ウィジェットを追加します。
変更を保存することを忘れないでください; その後、サイドバー・ウィジェットを表示するために、そのサイドバーを持つページを訪問することができます。
方法3：WooCommerce Featured Productショートコードを使う
最後に紹介するのは、ショートコードを使ってWooCommerceの目玉商品をオンラインストアに追加する方法です。この方法は、クラシックなWordPressエディタを使用している場合や、WordPressテーマ内で特集商品を表示したい場合に使用できます。
ショートコードを使用するには、ページを編集または新規作成し、以下のWooCommerceショートコードをエディタに貼り付けます。
[featured_products]
ページをプレビューすると、"featured "を設定した商品がページ上のグリッドに表示されます。
さらに商品やカラムを追加することで、ショートコードをカスタマイズして商品を表示することができます。例えば、ショートコードは次のようになります：
[featured_products per_page="2" columns="2"]
あなたのストアに合ったレイアウトが見つかるまで、ショートコードを弄ってみましょう。カスタマイズのオプションは限られていますが、目玉商品を顧客の前に表示する簡単な方法です。
WooCommerceの注目商品に関するFAQ
WooCommerceをカスタマイズするその他の方法
特集商品の表示は、あなたのストアを微調整するための多くの方法の一つに過ぎません。その他のWooCommerceカスタマイズについては、以下のガイドをご覧ください：
- WooCommerceの追加情報タブをカスタマイズする方法
- WooCommerceにカートを見るボタンを追加する方法
- WooCommerceでショップページのタイトルを変更する方法
- WooCommerceで美しい商品画像ギャラリーを作成する方法
- WooCommerceの商品ページに星評価を追加する方法
- WooCommerceで関連商品を表示する方法
- WooCommerceで商品カテゴリーとタグを表示する方法
- WooCommerceで商品説明を取得して表示する方法
- WooCommerceのカートが表示されない場合の対処法
- WooCommerceで在庫切れの商品を非表示にする方法
そうだ！
この記事が、あなたのウェブサイトにWooCommerceの目玉商品を表示する方法を学ぶのにお役に立てば幸いです。
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
