新製品を「公開」する瞬間は最高の気分だ。視聴者のために新しいものを準備し、それを共有する準備ができたのだから。
次のステップは、確実に見てもらうことだ。ショップの10ページ目に新商品が隠れていても、誰の役にも立ちません。
あなたのウェブサイトは、あなたのために仕事をし、自動的にあなたの最新の追加を表示する必要があります。これはWooCommerceでダイナミックなショッピング環境を作るための核となる部分です。
複雑なプラグインやコードスニペットを探す必要はない。内蔵のツールは、正しく使えば、信じられないほどパワフルだとわかった。
今すぐできる簡単な方法を2つ紹介しよう。エレガントで管理しやすい、新商品を紹介するシステムを手に入れることができます。
なぜWooCommerceで新商品を表示するのか？
WooCommerceで新商品を表示することで、潜在顧客が新入荷商品をより簡単に見つけることができます。 例えば、常連客は見たことのない商品を簡単に見つけることができ、新規顧客は新旧の在庫の違いを見分けることができます。
さらに、画像に「新商品」バッジを追加する必要もありません。その代わり、新商品専用のページや、旧商品とは別のエリアに訪問者を誘導することができます。
この利点は、新入荷商品に多くの人の目が集まることで、売上を大きく伸ばすことができる。
WooCommerceで新商品を表示する2つの簡単な方法
この記事では、WooCommerceで新商品を表示する2つの異なる方法をご紹介します。
まず、人気のランディングページプラグインを使って新しい商品ページを作成する方法を学びます。その後、WooCommerceのネイティブWordPressブロックとショートコードを使用して、投稿、ページ、ウィジェットに新着商品を表示する方法を学びます。
さあ、飛び込もう！
方法1：SeedProdを使ってWooCommerceに新しい商品ページを作成する
最初の方法は、SeedProdを使ってWooCommerceストアの新しい商品ページを作成する方法です。SeedProdは100万以上のウェブサイトで使用されている最高のドラッグ＆ドロップWordPressページビルダーです。
このプラグインを使えば、WooCommerceの商品ページに新しい商品を簡単に追加したり、商品のランディングページを作成してコンバージョンを向上させることができます。例えば、WooCommerceのcoming soonページを数分で作成することができます。さらに、商品ページを簡単に作成・カスタマイズできるWooCommerceブロックもあります。
また、SeedProdを使用して、コードなしでWooCommerceストア全体を作成することもできます。
1.SeedProdプラグインをインストールする
最初のステップは、SeedProdプラグインをインストールすることです。
WordPressにプラグインをインストールする方法については、こちらのステップバイステップガイドをご覧ください。
注：SeedProdには無料版もありますが、ここでは高度なWooCommerce機能のためにエリート版を使用します。
プラグインを有効化した後、SeedProd " 設定に行き、ライセンスキーを入力してください。この情報はSeedProdウェブサイトのアカウントエリアにあります。
2.新商品ページのテンプレートを選ぶ
次のステップは、SeedProd " テンプレートに移動することです。このページでは、出発点として使用するために、何百もの既製のランディングページのテンプレートから選択することができます。
上部のタブをクリックすると、テンプレートを絞り込むことができます：
各テンプレートはビジュアルページエディタで簡単にカスタマイズできるので、特定のデザインに縛られることはありません。
使いたいテンプレートが見つかったら、そのテンプレートにカーソルを合わせ、「✔」アイコンをクリックします。このガイドでは、eコマースのサンキューページテンプレートを使用します。
次に、ページに名前を付け、「Save and Start Editing the Page（ページを保存して編集を開始する）」 ボタンをクリックします。
3.最近の製品ブロックをドラッグする
テンプレートを起動すると、SeedProdのビジュアルページエディタで開きます。ここで最新のWooCommerce商品入荷情報を一覧できます。
ビジュアルエディターの操作は超簡単。
左側には様々なブロックやセクションが表示され、ページにドラッグ＆ドロップすることができます。右側には、ライブページプレビューが表示されます。
ページにコンテンツを追加すると、その変更がリアルタイムで表示されます。このため、別の画面に移動することなく、完成したページをプレビューすることができます。
新しいWooCommerce製品を表示するために、SeedProdの組み込みWooCommerceランディングページブロックの1つを使用します。
左側のメニューで、「WooCommerce」と書かれたブロックセクションに向かいます。そこからRecent Productsブロックを見つけ、あなたのページにドラッグします。
その後、最近の製品ブロックのどこかをクリックして、右側のブロック設定を開くことができます。
このパネルでは、以下のことができる：
- 商品の列数を選択する
- シンプルな製品ページネーションを有効にする
- アイテム数の表示（在庫管理用）
- フィルター製品のドロップダウンメニューを追加する
- 表示商品数を制限する
また、クエリを最近の商品から変更することもできます：
- 注目商品
- セール商品
- ベストセラー商品
- 人気商品
- カスタムクエリ
詳細設定]タブをクリックすると、新しい商品リストをカスタマイズする方法がさらに表示されます。
例えば、商品説明のタイポグラフィ、通常価格のフォント、セール価格のバッジの色などをカスタマイズすることができます。
その他の高度なカスタマイズ・オプションには以下のものがある：
- ボタンのスタイルとタイポグラフィ
- 画像の影と境界線
- マージンとパディングの間隔
新しい商品の追加が完了したら、「保存」をクリックして変更を保存してください。
4.ページのデザインとレイアウトをカスタマイズする
ページに商品を追加した後、あなたのブランドに合ったデザインにカスタマイズすることができます。SeedProdではこれを簡単に行う方法をいくつか提供していますが、まずは不要なページ要素を削除することから始めましょう。
例えば、ページテンプレートにはデモ画像と説明文が付属しています。これらを削除するには、ブロックの上にマウスカーソルを置き、ゴミ箱アイコンをクリックします。
また、見出しやテキストブロックの中をクリックして、新しい内容を入力して編集することもできます。
さらに、あなた自身の画像を追加することで、目を引くページヘッダーを作成することができます。任意のセクションをクリックし、背景画像のスタイルを選択し、コンピュータ、メディアライブラリ、または何百もの無料ストックフォトの中から写真を選ぶだけです。
カスタマイズが完了したら、「保存」ボタンをクリックします。
5.新商品ページのプレビューと公開
ページを公開する前に、モバイルフレンドリーであることを確認しましょう。SeedProdにはモバイル編集オプションが組み込まれており、どのような画面やデバイスでもあなたのページが美しく見えるようにします。
ページを確認するには、ナビゲーションバー下部のモバイルアイコンをクリックしてください。そこから、あなたのページがモバイル画面で正しく表示されるように調整することができます。
例えば、ボタンを大きくしてクリックしやすくしたり、商品の列を減らしたりすることができます。
ページがモバイル対応であることを確認したら、保存ボタンの隣にあるドロップダウン矢印をクリックし、公開をクリックします。
これで、ユニークな新商品ページに最新の商品が追加されました。
SeedProdでは、コンバージョンを向上させるために、このページをほぼ無限にカスタマイズすることができます：
- 短い説明文の追加
- 可変製品の表示
- CTAボタンの色を変更する
- ショッピングカートの表示
- アニメーション見出しの追加
また、このページをWordPressのナビゲーションメニューに追加して、訪問者にWooCommerceの新商品を閲覧してもらうこともできます。
方法2：プラグインなしでWooCommerceに新商品を表示する
既存のWooCommerceページやWordPress投稿に新商品を表示したい場合は、可能です。WooCommerceには、ページやオンラインストアの他のエリアをカスタマイズするために使用できる専用のWordPressブロックと組み込みのショートコードがあります。
Gutenbergで「最新商品」ブロックを使う
ブロック付きの新しい投稿を追加するには、ストア内の投稿またはページを編集し、プラスアイコンをクリックします。次に、WooCommerceセクションまでスクロールダウンします。
ここでは、商品カテゴリやタグ、商品レベル、その他の商品データに基づいて商品を追加するいくつかのWooCommerceブロックから選択することができます。
新商品を表示するには、「新着商品」ブロックをクリックします。そうすることで、投稿やページに最新商品のグリッドが追加されます。
右側のブロックオプションで、グループ化した商品の表示・非表示を設定できます：
- 商品名
- 価格
- 評価
- カートに入れるボタン
さらに、商品をカテゴリー別にフィルタリングしたり、グリッドの配置を変更したり、行や列の数を設定することもできます。
すべての見栄えに満足したら、「更新」または「公開」をクリックします。ページをプレビューすることができます。
WooCommerceショートコードで新しい商品を追加する
クラシックなWordPressエディターを使用している場合は、WooCommerceショートコードで同じことができます。WordPressエディターで、このショートコードを貼り付けます：[recent_products].
以下のショートコードパラメータを追加することで、リンクされる商品と商品カラムの数をコントロールすることができます：products limit="3″ columns="3″.
その後、ページを更新または公開することができます。これで、訪問者はあなたの最新の商品を下にハイライトして見ることができます。
ショートコードでサイドバーに新商品を表示する
上記に加えて、WooCommerceショートコードを使用して、WooCommerceまたはWordPressのサイドバーに新商品を表示することができます。
これを行うには、外観 " ウィジェットに行き、新しい段落ブロックを追加する。そこから、上記で使用したショートコードを貼り付け、保存をクリックします。
ストアをプレビューすると、WordPressのサイドバーに新しい商品がハイライト表示されます。
よくある質問
WooCommerceで新商品だけを表示するには？
を使用することで、新商品のみを表示することができます。 [recent_products] ショートコードまたはWordPressエディタ内の "新着商品 "ブロックを使用してください。SeedProdでは、新着商品専用のランディングページも作成できます。
WooCommerceの新商品用のショートコードは何ですか？
デフォルトのWooCommerceショートコードは [recent_products].のようなパラメータを追加することもできます。 limit="4" または columns="2" 新商品の表示数やレイアウトをカスタマイズできます。
WooCommerceに「新着商品」ページを追加できますか？
はい！SeedProdのようなプラグインを使用すると、完全にカスタマイズされた「新着商品」ランディングページを作成し、メニューで強調表示することができます。最新商品の認知度を高める素晴らしい方法です。
WooCommerceの新商品をサイドバーに表示するには？
を貼り付けることができます。 [recent_products] ショートコードをサイドバー・ウィジェットに追加する。下記へ 外観 " ウィジェット段落ブロックを追加し、最新アイテムを表示するショートコードを挿入します。
WooCommerceの商品はいつまで「新品」のままですか？
WooCommerceには "新着 "ラベルタイマーは組み込まれていませんが、ソート順や商品の公開日を調整することで、最近の商品ブロックやショートコードに表示される商品をコントロールすることができます。
WooCommerceで新商品をハイライトする最後のヒント
デザインとレイアウトを完全にコントロールしたい場合は、SeedProdが最適です。完全にカスタム化されたWooCommerceの新商品ページを作成し、ビジュアル的にスタイルを整え、CTA、見出し、商品フィルターのようなコンバージョンを高める要素を追加することができます。
より迅速な方法をお探しなら、WooCommerceのショートコードやブロックも効果的です。プラグインを追加することなく、あらゆるページ、投稿、ウィジェットエリアに「新着商品」セクションを設置することができます。
いずれにせよ、最新商品専用のスペースを設けることで、顧客は新商品を見つけやすくなり、リピーターからの販売も促進される。
WooCommerceストアを改善し続けたいですか？次に役立つチュートリアルをご覧ください：
- WooCommerceサイトを安全に保護する方法
- WooCommerceで在庫切れ商品を非表示にする方法
- WooCommerceの「追加情報」タブをカスタマイズする
- WooCommerceのカートが表示されない場合の対処法
- WooCommerceでショップページのタイトルを変更する方法
- WooCommerceの商品画像ギャラリーの改善
- WooCommerceの商品に星評価を追加する方法
- WooCommerceで関連商品を管理する方法
この記事を気に入っていただけたなら、YouTube、Twitter、Facebookで、あなたのビジネスの成長に役立つコンテンツをもっとご覧ください。
