ウェブサイトにWooCommerceの特集商品を表示する簡単な方法をお探しですか？
特集商品カテゴリーを使えば、最も重要な商品を買い物客の目に留まりやすい場所に表示することができます。そうすることで、ユーザーが欲しいものを即座に提供することができ、ユーザーエクスペリエンスを向上させ、より早く売上を達成することができます。
この記事では、WooCommerceストアに目玉商品を追加する3つの方法をご紹介します。
WooCommerceの注目商品とは？
Featured商品とは、WooCommerceのカテゴリーIDで、ストア内で特定の商品を紹介することができます。WooCommerceの商品を「注目商品」に設定すると、他の商品とは別にウェブサイトに表示することができます。
例えば、買い物客が商品カタログの表示を「注目商品」でフィルタリングし、お勧めの商品を表示できるようにすることができます。その結果、買い物客はウェブサイト上の全商品をスクロールすることなく、イチオシの商品を見つけやすくなります。
WooCommerceで注目商品を設定するには？
特集商品をウェブサイトに表示する前に、まず「特集」商品の表示設定で特定の商品を設定する必要があります。これは、WooCommerceで既存の商品を編集するか、新しい商品を追加することで行うことができます。
既存の商品に「注目の商品」設定を追加するには、WordPressの管理エリアから商品 " すべての商品に移動します。次に、商品の上にマウスカーソルを置き、編集オプションをクリックします。
次に、WordPressエディターの右側にある "Publish "パネルを見つけてください。そこから、「カタログの表示」の見出しの横にある「編集」をクリックします。
This is a featured product "チェックボックスをクリックし、"OK "を選択します。更新」をクリックして変更を保存します。
注目商品として設定したいすべての商品について、このプロセスを繰り返します。より迅速に行うには、クイック編集オプションをクリックし、そのパネルで「注目商品」チェックボックスを見つけることができます。
また、各商品の横にある星のアイコンをクリックすると、その商品を特集することができます。
WooCommerceサイトに掲載する商品を選択したら、商品ページに表示する準備が整いました。
次はその方法を紹介しよう。
WooCommerceで注目の商品を表示するには？
WooCommerceサイトで特集商品を表示するには、いくつかの方法があります。まずは、コードなしでウェブサイトのスタイルやブランディングに合わせて商品フィードをカスタマイズできる、超簡単な方法をご紹介します。
2番目と3番目の方法は、カスタマイズのオプションは少ないですが、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ブロックパネルまでスクロールダウンします。そして、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 Productsショートコードを使う
最後にご紹介するのは、ショートコードを使ってWooCommerceの目玉商品をオンラインストアに追加する方法です。この方法は、クラシックなWordPressエディタを使用している場合や、WordPressテーマ内で特集商品を表示したい場合に使用できます。
ショートコードを使用するには、ページを編集または新規作成し、以下のWooCommerceショートコードをエディタに貼り付けます。
[featured_products]
ページをプレビューすると、"featured "を設定した商品がページ上のグリッドに表示されます。
さらに商品やカラムを追加することで、ショートコードをカスタマイズして商品を表示することができます。例えば、ショートコードは次のようになります：
[featured_products per_page="2" columns="2"]
あなたのストアに合ったレイアウトが見つかるまで、ショートコードで遊んでみてください。カスタマイズのオプションは限られていますが、目玉商品を顧客の前に表示する簡単な方法です。
More Ways to Customize WooCommerce
Displaying featured products is just one of the many ways to tweak your store. For more WooCommerce customizations, please see the following guides:
- How to Customize the WooCommerce Additional Information Tab
- How to Add View Cart Button in WooCommerce
- WooCommerceでショップページのタイトルを変更する方法
- WooCommerceで美しい商品画像ギャラリーを作成する方法
- How to Add Star Rating to WooCommerce Product Pages
- How to Display Related Products in WooCommerce
- WooCommerceで商品カテゴリーとタグを表示する方法
- WooCommerceで商品説明を取得して表示する方法
- WooCommerceのカートが表示されない場合の対処法
- How to Hide Out of Stock Products in WooCommerce
そうだ！
この記事が、あなたのウェブサイトにWooCommerceの目玉商品を表示する方法を学ぶのにお役に立てば幸いです。
お読みいただきありがとうございました！ご質問やご意見がありましたら、お気軽にコメントをお寄せください。
また、YouTube、X（旧Twitter）、Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。
