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

長年にわたり WooCommerce ストアオーナーと協力してきた経験から、些細なディテールが売上に影響を与えることがあるのを目の当たりにしてきました。

一貫して役立つ機能の1つは、短い商品紹介文です。これは、注意を引き付け、コンバージョン率を向上させる簡単な方法です。

成功しているWooCommerceストアには、各アイテムが何であるかを迅速に説明する、明確で簡潔な商品概要が含まれていることに気づきました。

これらの説明は、カテゴリページや検索結果などの重要な場所に表示され、買い物客がどの製品を選択するかを決定するのに役立ちます。

このガイドでは、WooCommerceストアに商品概要を追加する簡単な手順を説明します。これにより、顧客の関心を高め、売上を向上させることができます。

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

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

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

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

これにより、買い物客は、製品の説明全体にスクロールして詳細を確認するか、製品画像ギャラリーを確認するかどうかを迅速に判断できます。言い換えれば、魅力的な説明は、製品ページの残りの部分に対するセールストークとして機能します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次に、「コードタイプ」ドロップダウンを開き、「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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPress プラグインをインストールして有効化した後、SeedProd はライセンスキーを要求します。

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

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

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

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

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

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

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

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

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

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

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

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

たとえば、「製品タイトル」ブロックをクリックすると、フォントサイズを変更したり、テキストの配置などを変更したりできます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SeedProdを使用してコンバージョン率の高いカートページを構築するためのステップバイステップの説明については、カスタムWooCommerceカートページの作成方法に関するガイドを参照してください。

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

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

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。