WooCommerceで短い商品概要を追加する方法

WooCommerceストアを運営していると、ちょっとしたディテールが購入の決定に影響を与えることがあります。その一つが商品紹介文で、販売しているものを買い物客がどれだけ早く理解できるかに大きな違いをもたらします。

多くのストアオーナーがこの点に苦労しています。なぜなら、WooCommerceでは短い紹介文の役割がすぐに明確にならないからです。しかし、これらの要約は、訪問者がクリックするものを決める前に素早く確認する、カテゴリページ、商品グリッド、検索結果などの重要な場所に表示されます。

私たちは十分な数のWooCommerceストアを見てきたので、より明確で簡潔な紹介文がいかにエンゲージメントを向上させ、顧客がより早く選択できるようにするかを理解しています。

このガイドでは、WooCommerceで短い商品紹介文を追加および最適化する方法を説明します。これにより、商品が際立ち、ストアでの買い物がより簡単になります。

WooCommerceで短い商品概要を追加する理由

投稿の抜粋と同様に、短い製品説明は、買い物客が製品についてもっと知りたいと思わせることができます。

WooCommerce WordPressテーマのほとんどは、個々の商品ページで価格のすぐ下に説明を表示します。

これは買い物客が最初に目にするものの一つなので、この紹介文は、サイズや素材などの重要な商品詳細を共有するのに最適です。

これにより、買い物客は、完全な説明を読むためにスクロールするか、商品画像ギャラリーを確認するかどうかをすばやく決定できます。言い換えれば、魅力的な説明は、商品ページ全体のセールストークとして機能します。

それを念頭に置いて、WooCommerceで短い商品概要を追加する方法を見てみましょう。

WooCommerceで短い商品概要を追加する方法

短い説明を作成するには、WordPress ダッシュボードで 製品 » 全製品 に移動します。

次に、短い説明を追加したい製品を見つけて、「編集」リンクをクリックします。

それが終わったら、「商品の短い説明」ボックスまでスクロールします。

テキストエリアに説明を入力できるようになりました。

入力した情報に満足したら、通常通り製品ページを更新または公開してください。

これで、オンラインマーケットプレイスで商品ページにアクセスすると、画面の上部付近に短い説明が表示されます。

ほとんどのテーマでは、この説明は商品の価格と「カートに追加」ボタンのすぐ下に表示されます。WordPressテーマによっては異なる場合がありますが、通常はページの上部付近に表示されます。

メインストアページに短い商品概要を表示する方法

デフォルトでは、ほとんどのWooCommerceテーマでは、個々の商品ページにのみ短い紹介文が表示されます。

通常、製品カテゴリページやストアのメインページでは、以下の画像でご覧いただけるように、説明は表示されません。

ただし、場合によっては、この情報をメインストアページやカテゴリページに表示したいことがあります。これにより、顧客はフル製品ページにアクセスすることで、さらに詳しく知りたい製品を見つけやすくなります。

メインストアページや商品カテゴリページに短い説明を表示するには、ウェブサイトにコードを追加する必要があります。

WordPressにカスタムコードを追加する最良の方法は、WPCodeを使用することです。これは最高のコードスニペットプラグインであり、オンラインストアにカスタムCSS、PHPなどを追加できます。

このツールを徹底的にテストした結果、コードを追加する最も安全な方法であることがわかりました。詳細については、WPCodeレビューを参照してください。

ステップ1：WPCodeのインストールと有効化

まず、無料のWPCodeプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

プラグインが有効になったら、Code Snippets » Add Snippet に移動します。

ステップ 2: 新しいカスタムスニペットを作成する

ここでは、サイトに追加できる既製のスニペットがすべて表示されます。これには、コメントを完全に無効にする、通常WordPressでサポートされていないファイルタイプをアップロードする、添付ファイルページを無効にするなどを行うスニペットが含まれます。

次の画面で、「カスタムコードを追加（新しいスニペット）」オプションにマウスカーソルを合わせ、「スニペットを使用」ボタンが表示されたらクリックします。

ステップ 3: PHPコードスニペットを追加する

ここに、コードスニペットのタイトルを入力します。これは参照用ですので、好きなものを自由に使用できます。

次に、「コードタイプ」ドロップダウンを開き、「PHPスニペット」を選択します。

これが完了したら、次のコードをコードエディターに貼り付けるだけです。

add_action( 'woocommerce_after_shop_loop_item', 'woo_show_excerpt_shop_page', 5 );
function woo_show_excerpt_shop_page() {
	global $product;

	echo $product->post->post_excerpt;
}

ステップ 4: スニペットをアクティブ化して保存する

その後、「非アクティブ」スライダーをクリックして「アクティブ」と表示されるようにします。

次に、「スニペットを保存」または「更新」ボタンをクリックするだけで、コードスニペットが公開されます。

これで、メインのストアページと商品カテゴリページに、さまざまな商品の短い紹介が表示されるようになります。

ほとんどのWooCommerceテーマでは、この情報は商品の価格と「カートに追加」ボタンの間に表示されます。次の画像で確認できます。

ストアページや商品カテゴリページに単語が多すぎると、サイトが乱雑でわかりにくく見える可能性があることに注意してください。

特定の短い商品紹介の外観が気に入らない場合は、上記と同じ手順に従っていつでも変更できます。

カスタムWooCommerceテーマで短い説明を表示する方法（上級）

商品ページでの説明の外観に満足できない場合は、ページビルダープラグインを使用して、オンラインストアのカスタムWordPressテーマを作成することができます。

SeedProdは、WordPress向けの最高のランディングページビルダーおよびテーマビルダーであり、一行のコードを書かずに独自のWooCommerceテーマを作成できます。これにより、短い商品概要が商品ページに表示される場所を正確に制御できます。

当社のパートナーブランドのいくつかは、これを使用してウェブサイト全体をデザインしており、それを気に入っています。詳細については、SeedProdレビューを参照してください。

このセクションでは、WooCommerce ストアの完全にカスタムなシングルプロダクトレイアウトを作成する方法を説明します。

このプロセスを繰り返し、オンラインストアの各ページにユニークなレイアウトを作成する必要があります。例えば、SeedProdを使用してストアのホームページとアーカイブページのデザインを作成します。

これにより、ストア全体のレイアウトを完全に制御できます。これは、完全にカスタムなWooCommerceストアをデザインしたい人にとって、強力で柔軟なオプションになります。

ステップ1：SeedProdのインストールと有効化

WordPressプラグインをインストールしてアクティブ化した後、SeedProdはライセンスキーを要求します。

この情報は、SeedProd ウェブサイトのアカウントページ、および SeedProd を購入した際に届いた購入確認メールで確認できます。

ステップ 2: 新しい単一商品テンプレートを作成する

キーを入力したら、SeedProd » テーマビルダーに移動します。ここで、「新しいテーマテンプレートを追加」ボタンをクリックします。

表示されたポップアップで、「名前」フィールドに商品ページデザインの名前を入力し、「タイプ」ドロップダウンを開いて「単一商品」をクリックします。

それが完了したら、「保存」ボタンをクリックします。

ステップ 3: カスタム商品ページをデザインする

ここでSeedProdのドラッグ＆ドロップページビルダーが表示されます。右側には商品ページのライブプレビューが表示されますが、デフォルトでは空白です。

左側には、カスタム WooCommerce 製品ページに追加できるさまざまなブロックとセクションを示すメニューがあります。

SeedProdには、いくつかの特別なWooCommerceブロックを含む、多くの既製のブロックが付属しています。たとえば、「関連商品」ブロックを使用して、WooCommerceで最も人気のある商品を表示することができます。

これらの既製の WooCommerce ブロックを使用すると、数分で完全にカスタムな製品ページを作成できます。

空のテンプレートを使用しているため、WooCommerceの商品ページ要素はすべて自分で追加する必要があります。これには、「商品メイン画像」や「商品タイトル」、「短い説明」などの要素が含まれます。

スペーサー、列、区切り線などのSeedProdブロックを使用して、WooCommerceページに適切な構造と整理されたレイアウトを与えることもできます。

開始するには、左側のメニューでWooCommerceテンプレートタグを見つけ、追加するブロックを選択します。その後、ブロックをページレイアウトにドラッグするだけです。

ブロックを変更するには、SeedProdプレビューでクリックして選択するだけです。左側のメニューに、そのブロックをカスタマイズするために使用できるすべての設定が表示されます。

例えば、「商品タイトル」ブロックをクリックすると、フォントサイズ、テキストのアライメントなどを変更できるようになります。

デザインに短い説明を追加するには、左側のメニューで「短い説明」ブロックを見つけるだけです。

次に、このブロックをデザインにドラッグアンドドロップするだけです。

商品ページを作成する際、ブロックをドラッグアンドドロップしてレイアウト内を移動できます。これにより、SeedProdで完全にカスタムレイアウトのWooCommerce商品ページを簡単に作成できます。

ステップ 4: テンプレートを保存して公開する

WooCommerceの製品ページのデザインに満足したら、右上にある「保存」ボタンをクリックできます。

最後に、「公開」ボタンをクリックして変更を保存します。

これで、オンラインストアの完全にカスタムされた商品ページが作成されました。

上記で説明したのと同じ手順で、すべての異なるWooCommerceページのテンプレートを作成できるようになりました。次に作成するデザインがわからない場合は、[新しいテーマテンプレートを追加]ボタンをクリックしてください。

次に、「タイプ」ドロップダウンメニューをクリックします。

これで、ヘッダー、フッター、シングル投稿など、作成する必要のあるさまざまなテンプレートのリストが表示されます。

WooCommerceの全ページを編集したら、カスタムテーマを公開する準備が整います。

単純にSeedProd » Theme Builderに移動し、「SeedProdを有効にする」スライダーをクリックして、「いいえ」（グレー）から「はい」（緑）に切り替えます。

ボーナス：その他のWooCommerceページをカスタマイズする方法

商品ページの見た目に満足したら、他の主要なWooCommerceショップページのデザインを変更することも検討できます。これにより、ショッピング体験が向上し、カート放棄率を減らし、より多くの売上を上げることができます。

調査によると、10人中7人近くの顧客がカートを放棄し、二度と戻ってきません。それを念頭に置いて、あなたのカートページは販売を確保するために可能な限りのことをすべきですが、デフォルトのWooCommerceカートページは販売のために最適化されていません。

SeedProdを使用してコンバージョン率の高いカートページを作成する手順については、カスタムWooCommerceカートページの作成方法に関するガイドをご覧ください。

その後、ソーシャルメディアリンク、顧客レビュー、独自のブランディングなどを含むカスタムWooCommerceチェックアウトページを作成することで、チェックアウトプロセスの最後の部分を最適化することもできます。

商品紹介文の追加に関するよくある質問

WooCommerceストアに商品の短い説明を追加する前に、読者から寄せられた質問を以下に示します。

良い商品紹介文の書き方は？

良い短い商品紹介文を書くには、顧客にとっての主なメリットに焦点を当てます。箇条書きで主要な機能を強調し、文章を短く保ち、購入者がさらに知りたくなるような説得力のある言葉を使用します。

商品の短い説明とは何ですか？

WooCommerceの商品短い説明とは、商品ページの上部近く、通常は商品画像と「カートに追加」ボタンの横に表示される簡単な概要です。その目的は、重要な詳細を迅速に提供し、購入者の関心を引くことです。

WooCommerceで商品を追加するにはどうすればよいですか？

シンプルな商品を追加するには、WordPressダッシュボードの商品 » 新規追加に移動します。次に、商品タイトルを入力し、メインの説明を追加し、「商品データ」セクションで価格を設定し、「商品の短い説明」ボックスに入力します。

この記事が、WooCommerceに短い商品紹介を追加する方法を学ぶのに役立ったことを願っています。また、初心者向けのストアに最適なWooCommerceプラグインのガイドや、WooCommerceのパフォーマンスを高速化するための究極のガイドも参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。