新しい商品を「公開」した瞬間の高揚感は素晴らしいものです。オーディエンスのために何か新しいものを準備し、それを共有する準備ができました。
次のステップは、それが見られるようにすることです。ショップの10ページ目に隠された新商品は誰の役にも立ちません。
新着商品専用のスペースがあれば、リピート顧客は他のすべてをかき分けることなく、新しい在庫を閲覧できます。WooCommerceの組み込みツールでほとんどのニーズがカバーでき、カスタムデザインのページにはSeedProdを使えば簡単です。
今からWooCommerceで新着商品を表示する2つの方法をご紹介します。あなたのストアのセットアップ方法に合った方を選んでください。
要約：WooCommerceで新着商品を表示する方法
WooCommerceストアで新着商品を表示するには、完全にカスタムなページから組み込みブロックまで、2つの方法があります。
- SeedProdで新着商品ページを作成する – SeedProdのビジュアルエディターを使用して、ブランディング、フィルター、CTAを備えたカスタム新着商品ページを作成します。
- WooCommerce Product Collectionブロックまたはショートコードを使用する – 追加のプラグインなしで、既存のページ、投稿、またはウィジェットエリアに新着商品グリッドをドロップします。
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 » Settingsに移動し、ライセンスキーを入力します。これはSeedProdウェブサイトのアカウントエリアで見つけることができます。
2. 新着商品ページのテンプレートを選択する
SeedProd » Templatesに移動します。何百もの既製のランディングページテンプレートから開始点として選択し、カテゴリでフィルタリングしてストアに合ったものを見つけます。
目的のテンプレートを見つけたら、カーソルを合わせてチェックアイコンをクリックします。このガイドでは、eCommerce Thank You Page テンプレートを使用します。
ページに名前を付けて、保存してページ編集を開始をクリックします。
3. 最近の製品ブロックをドラッグします
テンプレートがSeedProdのビジュアルエディターで開きます。左側にはページにドラッグできるブロックとセクションがあり、右側にはライブプレビューが表示されます。
左側のパネルで、WooCommerce セクションまでスクロールします。最近の製品ブロックを見つけて、ページにドラッグします。
ブロックをクリックして設定を開きます。設定パネルでは、次のことができます。
- 製品列の数を選択します
- 製品のページネーションを有効にします
- 在庫管理のためのアイテム数を表示します
- フィルターのドロップダウンメニューを追加します
- 表示する製品数を制限します
クエリタイプを最近の製品から、おすすめ、セール品、ベストセラー、トップ評価、またはカスタムクエリに変更することもできます。
高度な設定タブでは、製品説明のタイポグラフィ、価格フォント、セールバッジの色、ボタンのスタイル、スペーシングなど、さらに多くの制御が可能です。
製品の追加が完了したら、保存をクリックします。
4. ページのデザインとレイアウトをカスタマイズします
製品を追加したら、ブランドに合わせてページをカスタマイズします。デモコンテンツを削除することから始めます。ブロックにカーソルを合わせてゴミ箱アイコンをクリックして削除します。
見出しまたはテキストブロックをクリックして直接編集します。セクションをクリックし、背景スタイルを選択し、メディアライブラリまたは無料のストックフォトライブラリから写真を選択して、任意のセクションに背景画像を追加することもできます。
デザインに満足したら、保存をクリックします。
5. 新しい製品ページをプレビューして公開します
公開する前に、モバイルビューを確認します。下部のナビゲーションバーにあるモバイルアイコンをクリックし、製品列を減らしたり、ボタンをタップしやすくしたりするなど、小さい画面に合わせてレイアウトを調整します。
ページがモバイルでうまく表示されたら、[保存]ボタンの横にあるドロップダウン矢印をクリックし、[公開]をクリックします。
新しい到着ページが公開されました。ここから、WordPressのナビゲーションメニューに追加して、訪問者が最新の製品を簡単に見られるようにすることができます。
SeedProdを使用すると、コンバージョンを改善するためにカスタマイズを続けることができます。これには、短い製品説明の追加、バリエーション製品の表示、CTAボタンの色の変更、ショッピングカートの表示、アニメーション見出しの追加などが含まれます。
方法2：プラグインなしでWooCommerceに新製品を表示する
既存のWooCommerceページまたはWordPress投稿に新製品を表示したい場合は、別のプラグインは必要ありません。WooCommerceには、製品コレクションブロックと組み込みのショートコードが含まれており、オンラインストアのどこにでも新着セクションを追加するために使用できます。
Gutenbergで製品コレクションブロックを使用する
WooCommerce の新しいバージョン (8.0 以降) では、商品コレクションブロックが使用されます。これは、WooCommerce が古いレガシーブロック（「新着商品」など）をより柔軟なオプションに置き換えるために導入したものです。古いバージョンを実行している場合は、代わりに「新着商品」を検索してください。
追加するには、ストアの投稿またはページを編集し、+ アイコンをクリックします。商品コレクションを検索してクリックして追加します。
ブロック内で、「コレクションを選択」をクリックし、「新着 商品」オプションを選択します。
右側のブロックオプションで、1 ページあたりの表示商品数、カラム数、セール中の商品のフィルタリング、在庫状況などを選択します。
すべてが希望どおりに見えるようになったら、更新または公開をクリックします。
WooCommerce ショートコードで新商品を追加する
クラシックエディターを使用している場合は、[recent_products] ショートコードを使用します。これを任意のページ、投稿、またはウィジェットに貼り付けて、最近公開された商品のグリッドを表示します。
パラメータを使用して、表示する商品数とカラム数を制御できます: [recent_products limit="4" columns="4"]。
ページを更新または公開すると、訪問者は最新の商品がそこに表示されていることに気づくでしょう。
ショートコードでサイドバーに新商品を表示する
同じショートコードを使用して、WordPress サイドバーに新商品を表示できます。
外観 » ウィジェットに移動し、新しい段落ブロックを追加して、[recent_products] ショートコードを貼り付け、保存をクリックします。
ストアをプレビューすると、新商品がすべてのページでサイドバーに表示されます。
よくある質問
WooCommerce で新商品のみを表示するにはどうすればよいですか？
専用の新着商品ページには、SeedProd の「新着商品」ブロックを使用します。既存のページの一部には、商品コレクションブロック (WooCommerce 8 以降) または [recent_products] ショートコードを使用します。どちらの方法でも、メインのショップレイアウトに触れることなく、新商品がどこに表示されるかを正確に制御できます。
WooCommerce の新商品のショートコードは何ですか？
新商品を表示するための WooCommerce ショートコードは [recent_products] です。表示する商品数を制御するには limit="4" を追加し、グリッドレイアウトを設定するには columns="2" を追加します。日付の並べ替えを明示するには orderby="date" を追加することもできます。
WooCommerce に「新着商品」ページを追加できますか？
はい。SeedProd を使用すると、新着商品ブロックを使用して完全にカスタマイズされた「新着商品」ページを作成し、そのページをナビゲーションメニューに追加できます。これは、メインのショップページを煩雑にすることなく、最新の在庫の可視性を高める良い方法です。
WooCommerce の新商品をサイドバーに表示するにはどうすればよいですか？
[recent_products] ショートコードをサイドバーウィジェットに貼り付けます。外観 » ウィジェットに移動し、段落ブロックを追加して、ショートコードを挿入します。最新の商品がストア全体でサイドバーに表示されます。
WooCommerce では、商品はどのくらいの期間「新しい」と見なされますか？
WooCommerceには、「新着」ラベルの組み込みタイマーはありません。[recent_products]ショートコードと商品コレクションブロックは公開日で並べ替えられた商品を取得するため、新しい商品を追加すると古い商品は自然に後方に移動します。どの商品を「新着」として表示するかを制御したい場合は、limitパラメータを調整するか、新着商品専用の商品カテゴリを使用してください。
どの方法を使用すべきか？
デザインとレイアウトを完全に制御したい場合は、SeedProdが最適です。完全にカスタムされたWooCommerceの新着商品ページを作成し、CTAや商品フィルターなどのコンバージョン要素を追加し、コードに触れることなくすべてを視覚的にスタイル設定できます。
既存のページやサイドバーに簡単なセクションが必要な場合は、商品コレクションブロックまたは[recent_products]ショートコードを、追加のプラグインなしでうまく機能します。
WooCommerceストアをさらに改善したいですか？次にこれらのチュートリアルを確認してください：
- WooCommerceサイトのセキュリティを高める方法
- WooCommerceで在庫切れ商品を非表示にする方法
- WooCommerceの「追加情報」タブをカスタマイズする
- WooCommerceのカート表示が機能しない問題を修正する方法
- WooCommerceでショップページのタイトルを変更する方法
- WooCommerceで商品画像ギャラリーを改善する
- WooCommerce製品にスター評価を追加する方法
- WooCommerceで関連商品を制御する方法
この記事が気に入ったら、ビジネスを成長させるための役立つコンテンツについては、YouTube、Twitter、Facebookでフォローしてください。
