WooCommerceで新商品を表示する方法（2つの簡単な方法） 

新製品を「公開」する瞬間は最高の気分だ。視聴者のために新しいものを準備し、それを共有する準備ができたのだから。

次のステップは、確実に見てもらうことだ。ショップの10ページ目に新商品が隠れていても、誰の役にも立ちません。

新着商品専用のスペースを設けることで、リピーターのお客様は他の商品をいちいち探す手間なく、新しい商品だけを手軽に閲覧できるようになります。WooCommerceの標準機能で必要な機能のほとんどはカバーできることが分かりましたが、カスタムデザインのページを作成する場合、SeedProdを使えば簡単に実現できます。

ここでは、WooCommerceで新商品を表示する2つの方法をご紹介します。ご自身のショップの構成に合わせて、適切な方法をお選びください。

WooCommerceで新商品を表示する2つの方法

以下に3つの方法をご紹介します。カスタマイズ性が高いものから順に、最も手っ取り早いものまで並べています。

まず、100万以上のウェブサイトで利用されているドラッグ＆ドロップ式のWordPressサイトビルダー「SeedProd」を使って、新商品専用のページを作成する方法を学びます。次に、WooCommerceに標準搭載されている「Product Collection」ブロックとショートコードを活用し、ストア内の任意の場所に「新着商品」セクションを追加する方法を学びます。

さあ、飛び込もう！

方法1：SeedProdを使ってWooCommerceに新しい商品ページを作成する

最初の方法は、SeedProdを使用して、WooCommerce ストア専用の新商品ページを作成する方法です。

SeedProdを使えば、WooCommerce専用の新着商品ページを作成したり、個々の商品向けにコンバージョン率の高いランディングページを構築したり、さらには商品の発売前にWooCommerceの「近日公開」ページを作成したりすることも可能です。このプラグインには、商品を読み込んで表示方法をカスタマイズできるWooCommerce用ブロックがいくつか含まれています。

SeedProdを使えば、コーディングなしでWooCommerceストア全体を構築することも可能です。

1.SeedProdプラグインをインストールする

最初のステップは、SeedProdプラグインをインストールすることです。

WordPressにプラグインをインストールする方法については、こちらのステップバイステップガイドをご覧ください。

注：SeedProdには無料版もありますが、WooCommerceの高度な機能を利用するには「Elite」プランが必要です。

プラグインを有効にした後、SeedProd » 設定に移動し、ライセンスキーを入力してください。ライセンスキーは、SeedProd ウェブサイトのアカウントページで確認できます。

2.新商品ページのテンプレートを選ぶ

SeedProd » テンプレート に移動します。数百種類ある既成のランディングページテンプレートから出発点として選び、カテゴリで絞り込んで、ご自身のストアに合ったテンプレートを見つけてください。

希望のテンプレートが見つかったら、その上にカーソルを合わせてチェックマークのアイコンをクリックしてください。このガイドでは、「eCommerce Thank You Page」テンプレートを使用しています。

ページに名前を付けて、「保存して編集を開始」をクリックしてください。

3.最近の製品ブロックをドラッグする

テンプレートがSeedProdのビジュアルエディタで開きます。左側にはページにドラッグして配置できるブロックやセクションが表示され、右側にはリアルタイムプレビューが表示されます。

左側のパネルで、「WooCommerce」セクションまでスクロールします。「最近の商品」ブロックを見つけて、ページ上にドラッグします。

ブロックをクリックして設定画面を開きます。設定パネルでは、以下の操作が可能です：

• 商品の列数を選択する
• 商品ページでのページネーションを有効にする
• 在庫管理のために品目ごとの数量を表示する
• フィルタのドロップダウンメニューを追加する
• 表示商品数を制限する

クエリの種類を「最近の商品」から「おすすめ商品」、「セール商品」、「ベストセラー」、「高評価商品」、または「カスタムクエリ」に変更することもできます。

[詳細設定]タブでは、商品説明のタイポグラフィ、価格のフォント、セールバッジの色、ボタンのスタイル、余白など、さらに詳細な設定が可能です。

商品の追加が完了したら、「保存」をクリックしてください。

4.ページのデザインとレイアウトをカスタマイズする

商品を追加したら、ブランドイメージに合わせてページをカスタマイズしましょう。まずはデモコンテンツを削除します。任意のブロックにカーソルを合わせ、ゴミ箱アイコンをクリックして削除してください。

見出しやテキストブロックをクリックすると、直接編集できます。また、セクションをクリックして背景スタイルを選択し、メディアライブラリまたは無料のストックフォトライブラリから写真を選ぶことで、どのセクションにも背景画像を追加できます。

デザインに問題がなければ、「保存」をクリックしてください。

5.新商品ページのプレビューと公開

公開する前に、モバイル表示を確認してください。下部ナビゲーションバーのモバイルアイコンをクリックし、画面が小さい場合に備えてレイアウトを調整してください。例えば、商品の表示列を減らしたり、ボタンをタップしやすくしたりするなどです。

ページがモバイル端末で見栄えが良くなったら、「保存」ボタンの横にあるドロップダウン矢印をクリックし、「公開」をクリックしてください。

「新着商品」ページが公開されました。ここからWordPressのナビゲーションメニューに追加すれば、訪問者が最新の商品を簡単に閲覧できるようになります。

SeedProdを使えば、商品の短い説明文の追加、バリエーション商品の表示、CTAボタンの色の変更、ショッピングカートの表示、アニメーション付き見出しの追加など、コンバージョン率を向上させるためのカスタマイズを継続的に行うことができます。

方法2：プラグインなしでWooCommerceに新商品を表示する

既存のWooCommerceページやWordPressの投稿に新商品を表示したい場合、別途プラグインを導入する必要はありません。WooCommerceには「Product Collection」ブロックと組み込みのショートコードが用意されており、これらを使用すればオンラインストアのどこにでも新着商品セクションを追加できます。

Gutenbergで「プロダクトコレクション」ブロックを使用する

WooCommerceの新しいバージョン（8.0以降）では、「Product Collection」ブロックが使用されます。WooCommerceは、「Newest Products」を含む従来のブロックをより柔軟なオプションに置き換えるため、このブロックを導入しました。古いバージョンを使用している場合は、代わりに「Newest Products」を検索してください。

追加するには、ストア内の投稿またはページを編集し、[+]アイコンをクリックします。「商品コレクション」を検索してクリックし、追加してください。

ブロック内で「コレクションを選択」をクリックし、「新着」オプションを選択してください。

右側のブロック設定では、1ページあたりの商品表示数や列数を設定したり、セール中の商品や在庫状況などで商品を絞り込んだりすることができます。

すべての内容に問題がなければ、「更新」または「公開」をクリックしてください。

WooCommerceショートコードで新しい商品を追加する

クラシックWordPressエディタを使用している場合は、 [recent_products] ショートコード。ページ、投稿、またはウィジェットに貼り付けると、最近公開された商品のグリッドが表示されます。

パラメータを使用して、商品数や列数を設定できます： [recent_products limit="4" columns="4"].

ページを更新または公開すると、訪問者には最新の商品がページ上で目立つように表示されます。

ショートコードでサイドバーに新商品を表示する

同じショートコードを使って、WordPressのサイドバーに新着商品を表示することができます。

こちらへ 外観 " ウィジェット、新しい段落ブロックを追加し、 [recent_products] ショートコードを入力し、クリックしてください セーブ.

ストアをプレビューすると、すべてのページのサイドバーに新商品が表示されます。

よくある質問

WooCommerceで新商品だけを表示するには？

新着商品専用のページを作成するには、SeedProdの「Recent Products」ブロックをご利用ください。既存のページ内にセクションを設ける場合は、「Product Collection」ブロック（WooCommerce 8+）または [recent_products] ショートコード。どちらの方法でも、ショップのメインレイアウトを変更することなく、新商品の表示場所を細かく指定することができます。

WooCommerceの新商品用のショートコードは何ですか？

WooCommerceで新着商品を表示するためのショートコードは [recent_products]. 追加 limit="4" 表示する商品の数を制御し、 columns="2" グリッドレイアウトを設定するには。また、次のように追加することもできます orderby="date" 日付の並べ替えを明示的に行うため。

WooCommerceに「新着商品」ページを追加できますか？

はい。SeedProdを使えば、「最近の商品」ブロックを利用して完全にカスタマイズされた「新着商品」ページを作成し、そのページをナビゲーションメニューに追加することができます。これは、メインのショップページを煩雑にすることなく、最新の商品の露出を高めるのに効果的な方法です。

WooCommerceの新商品をサイドバーに表示するには？

以下を貼り付けてください [recent_products] ショートコードをサイドバー・ウィジェットに追加する。下記へ 外観 " ウィジェット、段落ブロックを追加し、ショートコードを挿入してください。ストア全体のサイドバーに、最新の商品が表示されます。

WooCommerceの商品はいつまで「新品」のままですか？

WooCommerceには、「新着」ラベル用の組み込みタイマー機能はありません。 [recent_products] ショートコードと「Product Collection」ブロックは、公開日順に商品を表示するため、新しい商品を追加するにつれて、古い商品は自然と下位に表示されるようになります。「新着」として表示される商品を制御したい場合は、 limit パラメータを設定するか、新着商品専用の商品カテゴリを使用してください。

どの方法を使うべきか？

デザインやレイアウトを完全に自由にコントロールしたいなら、SeedProdが最適です。コードを一切触ることなく、WooCommerceの新商品ページを完全にカスタマイズして作成したり、CTAや商品フィルターなどのコンバージョン要素を追加したり、視覚的にすべてのスタイルを設定したりすることができます。

既存のページやサイドバーに素早くセクションを追加したい場合は、「Product Collection」ブロック、または [recent_products] ショートコードは、追加のプラグインがなくても問題なく動作します。

WooCommerceストアをさらに改善したいですか？次は、以下のチュートリアルをご覧ください：

• WooCommerceサイトを安全に保護する方法
• WooCommerceで在庫切れ商品を非表示にする方法
• WooCommerceの「追加情報」タブをカスタマイズする
• WooCommerceのカートが表示されない場合の対処法
• WooCommerceでショップページのタイトルを変更する方法
• WooCommerceの商品画像ギャラリーの改善
• WooCommerceの商品に星評価を追加する方法
• WooCommerceで関連商品を管理する方法

この記事が気に入っていただけましたら、YouTube、Twitter、Facebookで当チャンネル・アカウントをフォローしてください。ビジネスを成長させるのに役立つコンテンツをさらに配信していきます。