WooCommerceで商品説明を取得して表示する方法 

WooCommerceは商品説明を2つのフィールドに保存します：完全な商品説明と短い説明です。両方をWordPress管理画面から追加または取得できます。PHPを使用する場合は $product->get_description()または、SeedProdのようなページビルダーでストアのレイアウトをカスタマイズすることで。

このガイドでは、WooCommerceで商品説明を取得して表示する方法を紹介します：

• WooCommerceの商品説明を正しく書いて追加する
• ショップページでWooCommerceショートディスクリプションを使用する
• SeedProdで製品ページをカスタマイズ、コーディング不要

なぜWooCommerceの商品説明が重要なのか？

買い物客がオンラインストアを訪れる理由はいくつかあります：

1. あなたが提供するものを研究する
2. 特定の製品を探す
3. 他の選択肢との比較
4. ウィンドウショッピング

訪問者が必要な情報を得るのが難しいと感じれば、購入前にサイトを離れてしまうでしょう。しかし、ユニークで詳細な商品説明を提供すれば、買い物客は探しているものをすぐに見つけることができます。

WooCommerceの商品説明文は、潜在的な顧客にクリックしてもらい、商品についてさらに詳しく知ってもらうこともできます。

例えば、ユーザーがショップページで短い商品説明を見た場合、クリックして詳しい説明を読むかもしれません。そこから、ユーザーは次のことができます：

• 価格を知る
• 商品画像を見る
• 製品仕様
• レビューと評価を読む

その情報によって、ユーザーはその場で商品を購入するよう説得されるかもしれない。

あなたの次の質問は、おそらく「WooCommerceで商品説明を追加するには？ということでしょう。

PHPでWooCommerceの商品説明を取得する方法

WooCommerceは、プログラムで商品説明を取得するための2つのPHPメソッドを提供します： get_description() 完全な説明については get_short_description() 短い説明用です。カスタムテンプレート、子テーマの関数、またはフックで使用します。

任意の商品の両方の説明を取得する完全なコードは以下の通りです：

// Get the WooCommerce product object
$product = wc_get_product( $product_id );

// Get the full product description
$description = $product->get_description();

// Get the short product description
$short_description = $product->get_short_description();

両方のメソッドはHTML文字列を返します。

例えば、こうだ： <p>Your description text.</p>.

WooCommerceは説明をWordPressエディターを通じて保存します。それらを出力するには echo $description 直接テンプレート内で使用しないでください。 esc_html() ここでは、HTMLタグを文字通り出力する代わりに、それらをレンダリングします。

ループやフック内で作業している場合、既に $product グローバルな場合、これらのメソッドを直接呼び出すことができます。 wc_get_product()上記のパターンは、ループ外で商品IDによって説明文を取得するためのものです。

次に、下にスクロールし、製品データセクションに製品詳細を入力します：

• 製品タイプ
• 通常価格とセール価格
• インベントリー
• 送料
• リンク製品
• 属性
• 上級

そのセクションの下にあるのが、「商品の短い説明」です。これは、ユーザーのクリックを誘うために表示できる、商品説明のショートバージョンです。

商品カテゴリーを追加し、商品画像をアップロードすることを忘れないでください。更新」または「公開」をクリックすると、変更が反映されます。

SeedProdでWooCommerceの商品説明を取得して表示する方法

SeedProdを使えば、WooCommerceにカスタム商品説明を追加するのはとても簡単です。

SeedProdはWordPressのための最高のウェブサイトビルダーとランディングページプラグインです。カスタムWordPressテーマ、WooCommerceサイト、柔軟なウェブサイトレイアウトをコードなしで作成できます。

180種類以上のランディングページテンプレートと25種類以上のWordPressテーマで簡単に始められます。SeedProdのドラッグ＆ドロップビジュアルページビルダーで各デザインをカスタマイズできます。

SeedProdのカスタマイズ可能なブロックとセクションを使えば、オンラインストアのカスタマイズに時間がかかりません。WooCommerceテンプレートタグで簡単にWooCommerce商品を表示し、ポイント＆クリックでカスタマイズできます。 

SeedProdを使用して、ユニークな商品ページ、ショッピングカート、チェックアウト、アーカイブ、ショップページを備えたeコマースサイト全体を作成することもできます。このプラグインは、電光石火の速さで、肥大化することなく、あなたのサイトがウェブサイトの訪問者のために迅速に実行されることを保証します。

WooCommerceで商品説明を取得し、SeedProdで表示するには、以下の手順に従ってください。

ステップ1.SeedProdウェブサイトビルダーをインストールする

まず、SeedProdプラグインファイルをコンピュータにダウンロードします。

注：SeedProdには無料版もありますが、ここではWooCommerce機能のためにSeedProd Eliteプランを使用します。

次に、WordPressウェブサイトにSeedProdをインストールし、有効化します。WordPressプラグインのインストールについては、こちらのガイドをご参照ください。

SeedProdをインストールした後、SeedProd " Settingsに進み、ライセンスキーを入力します。

ライセンスキーは、SeedProdアカウントにログインし、[ダウンロード]タブをクリックして見つけることができます。

ここで、テキスト・フィールドにキーを入力し、Verify Keyボタンをクリックする。

ステップ2.カスタムWooCommerceテーマを作成する

SeedProdのWooCommerce機能を使用するには、SeedProdで新しいWordPressテーマを作成する必要があります。これは既存のテーマをカスタムデザインに置き換えるもので、初心者でも簡単にできます。

そのためには、SeedProd " Theme Builderに行き、Themesボタンをクリックします。

次に、SeedProdの既成ウェブサイトテンプレートのライブラリが表示されます。気に入ったテンプレートが見つかったら、そのテンプレートにカーソルを合わせ、チェックマークアイコンをクリックしてください。

あなたのテーマをインポートした後、SeedProdはテーマのデモからすべてのパーツを作成します。

注：私たちはテーマの個々のパーツを "テンプレート "と呼んでいます。 

各テンプレートをクリックすると、SeedProdのドラッグ＆ドロップ・エディターが開き、コンテンツやデザインをカスタマイズすることができます。

このチュートリアルで編集する最初のテンプレートは商品ページです。訪問者があなたのショップの商品をクリックすると、その商品の詳細ページが表示されます。

ステップ3.商品ページテンプレートを編集する

商品ページをカスタマイズするには、商品ページテンプレートにマウスカーソルを合わせ、デザイン編集リンクをクリックします。

テンプレートはSeedProdのビジュアル・ドラッグ＆ドロップ・エディターで開き、ポイント＆クリックでデザインやレイアウトを変更できます。

まず、ページに短い商品説明を追加する方法を見てみましょう。

画面の左側で、WooCommerce Template Tagsセクションを見つけ、Short Descriptionブロックをデザインにドラッグします。

このブロックの WooCommerce の出力はデフォルトで短い説明タグになっていますが、お店のニーズに合わせてカスタマイズすることができます。また、ブロックの設定で説明文の見え方をカスタマイズすることもできます。

例えば、説明文の配置やフォントサイズを変更したり、ダイナミックテキストを挿入することができます。

詳細設定タブでは、色、フォント、スペーシングなどのブロックスタイルをカスタマイズすることができます。

同様の手順で、商品ページに長い説明文を追加することができます。左のパネルから商品コンテンツブロックをドラッグして、所定の位置にドロップするだけです。

従来通り、数回のクリックで内容、スタイル、色をカスタマイズできる。

注：ライブエディターでは、商品コンテンツブロックのプレビューは表示されません。

ステップ4.WooCommerceサイトの残りの部分をカスタマイズする

ページに商品説明を追加した後は、ストアの残りの部分のカスタマイズを続けることができます。どのテンプレートでも「デザインを編集」リンクをクリックするだけで、表示するコンテンツや見た目を変更できます。

例えば、こんなことができる：

• 商品カテゴリーページのカスタマイズ
• 注目商品を表示する
• WordPressのカスタムサイドバーを追加する

完全にカスタムされたWooCommerceストアが完成し、買い物客を顧客に変える準備が整います。

ステップ5.WooCommerceウェブサイトを公開する

新しいデザインに満足したら、いよいよ本番です。

これを行うには、SeedProd " Theme Builderページにアクセスし、右上隅にあるEnable SeedProd Themeトグルを "on "の位置になるまでクリックします。

あなたのサイトで商品をプレビューし、短い説明文と長い説明文を実際に見ることができます。

短い説明文はこのようになります：

そして、レイアウトによって、長い説明文がどのように見えるかは以下の通り：

WooCommerceショップページに商品説明を表示する方法

WooCommerceでは、デフォルトではショップページ、カテゴリページ、アーカイブページに商品説明（ショート説明またはフル説明）は表示されません。これらのページに説明を表示するには、以下の3つの方法があります。

オプション1: SeedProd（ノーコード）

SeedProdの製品アーカイブテンプレートを使用すると、ビジュアルエディターでショップページやカテゴリページをカスタマイズできます。

ショップページテンプレートに「ショート説明」ブロックを追加すると、商品グリッドの各商品下に表示されます。コードは不要です。

これは上記のSeedProdセクションで説明したのと同じ手法で、単一商品ページではなくアーカイブページテンプレートに適用したものです。

オプション2: WooCommerce ショップページ商品説明プラグイン

WooCommerce Product Description on Shop Pageプラグインは、ショップページ設定に商品説明の表示オプションを追加する無料のWordPressプラグインです。インストールして有効化し、商品グリッドに表示する説明の種類を設定してください。

オプション3: PHPフック（開発者向けアプローチ）
コードベースの解決策を好む場合、以下のスニペットを使用すると、ショップページで各商品タイトルの下に短い説明文を追加できます。この方法を使用する前に、WordPressへのコードスニペットの追加方法を理解するか、安全に追加するためにコードスニペットプラグインを使用してください。

/**
 * SeedProd - Add short description to products listing on shop page (only)
 */
add_action( 'woocommerce_after_shop_loop_item_title', 'sp_wc_add_short_description' );
function sp_wc_add_short_description() {
    if( is_shop() ){
        global $product;
        ?>
        <div class="woocommerce-loop-product-description">
            <?php echo apply_filters( 'woocommerce_short_description', $product->get_short_description() ) ?>
        </div>
        <?php        
    }
}

WooCommerceのショップページをプレビューすると、カートに追加ボタンの上に商品説明が表示されます。

トラブルシューティング：WooCommerceで商品説明が表示されない

商品説明が期待した場所に表示されない場合、最も一般的な原因は以下の通りです：

• 誤った説明タイプを使用している（詳細説明と簡略説明は異なる場所に表示される）
• WooCommerceのデフォルトテンプレートファイルを上書きするテーマ
• WooCommerceのデフォルト動作（短い説明文は商品詳細ページにのみ表示され、ショップページやカテゴリページには初期設定では表示されません）。

商品エディタで入力した説明文を確認し、表示されるはずの場所と比較してください。

カスタムテーマを使用している場合は、そのテーマに woocommerce_short_description アクションフックまたは .woocommerce-product-details__short-description 単一商品テンプレート内のコンテナ

WooCommerceをカスタマイズするその他の方法

WooCommerceが商品を表示する方法をカスタマイズする方法は他にも多数あります。その他のWooCommerceカスタマイズについては、以下のガイドをご覧ください：

• WooCommerceの追加情報タブをカスタマイズする方法
• WooCommerceにカートを見るボタンを追加する方法
• WooCommerceでショップページのタイトルを変更する方法
• WooCommerceで美しい商品画像ギャラリーを作成する方法 
• WooCommerceの商品ページに星評価を追加する方法
• WooCommerceで関連商品を表示する方法
• WooCommerceで商品カテゴリーとタグを表示する方法 
• WooCommerceのカートが表示されない場合の対処法
• WooCommerceで在庫切れの商品を非表示にする方法

WooCommerce商品説明FAQ

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

WooCommerceには2つの説明フィールドがあります。完全な商品説明は、メインエディタータブの製品タイトル下に表示され、単一商品ページでは専用のタブまたはセクションに表示されます。短い説明は「商品の短い説明」フィールドに入力する簡潔な要約です。デフォルトでは製品タイトルの下、「カートに入れる」ボタンの上に表示されます。プラグイン、コード、またはSeedProdのようなページビルダーで追加しない限り、ショップページやカテゴリページにはどちらも表示されません。

WooCommerceのショップページで商品説明を表示するにはどうすればよいですか？

WooCommerceはデフォルトではショップページに商品説明を表示しません。以下の3つの選択肢があります：- SeedProdの商品アーカイブテンプレートを使用して、コードなしでショップページレイアウトに「商品概要」ブロックを追加する- 「WooCommerce Product Description on Shop Page」プラグインをインストールする- PHPフックを使用して追加する woocommerce_after_shop_loop_item_title アクションと $product->get_short_description().

WooCommerceの商品説明が表示されないのはなぜですか？

最も一般的な原因は以下の通りです：- 間違った説明フィールドに入力した（詳細説明と簡易説明は表示場所が異なります）- テーマがWooCommerceのデフォルトテンプレートを上書きしている- WooCommerceがデフォルトで表示しないページで説明文の表示を期待している入力したフィールドを確認し、そのフィールドが表示されるべき場所を確かめ、テーマが出力を抑制していないか検証してください。

そうだ！

この記事がWooCommerceで商品説明を取得し、顧客に表示する方法を学ぶのにお役に立てば幸いです。 

SeedProdには、WordPressウェブサイトやWooCommerceストアのあらゆる部分をカスタマイズするのに必要なものがすべて含まれています。このケーススタディでMustard Seedが行ったように、SeedProdを使ってクライアントのウェブサイトを立ち上げることもできます。

お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。