WooCommerceにおいて、商品属性は様々なタイプの商品に対して様々な特徴を定義する柔軟な方法を提供します。商品属性を設定することで、顧客は以下のような重要な詳細を素早く見つけることができ、ユーザーエクスペリエンスを向上させることができます。 カラー, サイズまたは 材料.商品ページに詳細情報を充実させることで、コンテンツの厚みが増し、検索エンジン最適化（SEO）に有利になり、商品の認知度が向上します。

この記事では、WooCommerceの商品ページに追加情報を追加する方法について説明します。 WooCommerceの 内蔵機能 アドバンスドカスタムフィールド（ACF） プラグインと カスタムコード.あなたのニーズに最も適した方法を選択してください。

追加情報を追加することで、ユーザーエクスペリエンスとSEOが向上する理由

例えば、アパレルを販売する場合、顧客は色、サイズ、生地について知りたいと思うかもしれません。これらの属性を設定することで、WooCommerceは自動的に"追加情報「タブが追加され、ユーザーは必要な詳細情報にすばやくアクセスできるようになりました。この機能は、ユーザーにとってより良い製品比較を可能にし、関連するコンテンツを追加することでページのSEOパフォーマンスを向上させます。

方法1：WooCommerceの組み込み機能を使って追加情報を追加する方法

WooCommerceは、商品編集画面に直接商品属性を追加する簡単な方法を提供しています。以下はその手順です：

ステップ1: WooCommerceダッシュボードにログインします。

WordPressのダッシュボードに移動し、"製品紹介をクリックし、情報を追加したい製品を選択します。

ステップ2：「製品データ」セクションを探す

プロダクトエディターで"製品データ「を選択します。属性タブ

ステップ 3: 属性の追加

をクリックしてください。新規追加" ボタンをクリックすると、次のような新しい属性を定義できます。カラー「またはサイズ.”

• 属性名を入力します。カラー.”
• 属性値は縦棒（｜）で区切ります。"Red｜Blue｜Green "のように。

ステップ 4: 属性の可視性の設定

商品ページに表示する」オプションをチェックして、これらの属性が商品ページの「追加情報」タブに表示されるようにします。

ステップ5：製品の保存と更新

をクリックしてください。更新" ボタンをクリックして変更を保存します。保存されると、商品ページの「追加情報」タブにこれらの属性が自動的に表示されます。

例

3色（Red, Blue, Green）と3サイズ（S, M, L）のTシャツを販売している場合、"Color "属性を "Red | Blue | Green "に、"Size "属性を "S | M | L "に設定することができます。商品ページに表示する」オプションをチェックすると、顧客は「追加情報」タブの下にこれらのオプションを見ることができます。

方法 2: Secure Custom Fields (SCF) プラグインを使用して追加情報を追加する方法

WooCommerceの組み込み属性は便利ですが、特定のニーズにはより多くの属性が必要です。WooCommerceの セキュアカスタムフィールド（SCF） プラグインにカスタムフィールドを追加することで、素材やお手入れ方法など、商品の詳細を表示することができます。

ステップ1：ACFプラグインのインストール

" に移動します。プラグイン「を検索してください。セキュアなカスタムフィールドをクリックし、"インストール "と "アクティベート "をクリックします。

ステップ2：フィールドグループの作成

" に移動します。スタンダードMIDIファイル「をクリックし、"新しいフィールドグループを追加 "を選択します。これにより、商品のカスタムフィールドを定義することができます。

ステップ 3: フィールドの定義

フィールドグループ内に、""のような新しいフィールドを追加します。素材「またはお手入れ方法."必要に応じて、テキスト、テキストエリア、画像などのフィールドタイプを選択します。

一般的なフィールドタイプの内訳は以下の通りです：

• テキスト:このフィールドは短い1行入力に最適です。例えば、"100% Cotton "や "Stainless Steel "のような1つか2つの素材をリストする必要がある場合、"Material "フィールドに使用することができます。
• テキストエリア:これは長い説明文に便利です。手洗いのみ。タンブラー乾燥はしないでください。"
• 画像:このオプションでは、画像を追加することができます。製品認証」のように、認証ロゴや品質シールを表示したいフィールドに使用できます。

例

木製家具を販売しており、以下のカスタムフィールドを追加したいとします：

1. 素材-これは、"オーク "や "メープル "など、特定の木材の種類を入力するための "テキスト "フィールドです。

2. お手入れ方法 - 乾いた布で拭いてください。直射日光は避けてください。"

3. 認証ロゴ - 認証シールやエコバッジをアップロードするには、「画像」フィールドを使用します。

これらのフィールドを定義すると、製品エディタに表示され、各製品固有の情報を入力できるようになります。

ステップ4：表示ルールの設定

設定」セクションで、これらのカスタムフィールドを商品ページに表示する条件を定義します。これらのフィールドをすべての商品、または特定のカテゴリ、タグ、または個々の商品に適用することができます。

ステップ5：製品エディタに情報を入力

フィールドが定義され、表示ルールが設定されたら、条件を満たす商品のWooCommerce商品エディタに移動します。作成したカスタムフィールドが表示され、それぞれに関連する情報を入力できます。

ステップ 6: 製品テンプレートの変更 (オプション)

これらのカスタムフィールドを商品ページのフロントエンドに表示するには、WooCommerceのテンプレートファイル（例えば、single-product.php）を編集する必要があるかもしれません。SCFのthe_field()関数を使用して、次のようにフィールドの値を出力します：

<div class="product-material">

    <h4>素材</h4>

    <p><?php the_field('material'); ?></p>

</div>

方法3：カスタムコードによる追加情報の追加

テーマのfunctions.phpファイルにコードを追加することで、より高度なカスタマイズのためにWooCommerceの商品編集画面に直接フィールドを追加することができます。

ステップ1：製品エディタにカスタムフィールドを追加します。

商品編集画面にカスタムフィールドを追加するには、woocommerce_product_options_general_product_dataフックを使います。

add_action( 'woocommerce_product_options_general_product_data', 'add_custom_general_fields' )；

ファンクション add_custom_general_fields() {

    woocommerce_wp_text_input( array(

        'id' => '_custom_product_text_field'、

        'label' => __( 'カスタム商品フィールド', 'woocommerce' )、

        'desc_tip' => 'true'、

        'description' => __( 'カスタムフィールドの内容を入力', 'woocommerce' )

    ));

}

ステップ 2: カスタムフィールド値の保存

カスタムフィールドの値を保存するには、woocommerce_process_product_metaフックを使います。

add_action( 'woocommerce_process_product_meta', 'save_custom_general_fields' )；



    $custom_field_value = isset( $_POST['_custom_product_text_field'] ) ? sanitize_text_field( $_POST['_custom_product_text_field'] ) : ''；

    update_post_meta( $post_id, '_custom_product_text_field', $custom_field_value )；

}

ステップ3：商品ページにカスタムフィールドを表示

カスタムフィールドをフロントエンドに表示するには、WooCommerce商品テンプレートでget_post_meta()を使用します。

エコー<div class="custom-field">';

エコー '<label>カスタムフィールド： </label> ';

echo get_post_meta( get_the_ID(), '_custom_product_text_field', true )；

echo '</div>';

WooCommerce「追加情報」タブの管理

WooCommerceの「追加情報」タブは詳細な商品属性を表示するのに便利ですが、その内容をカスタマイズしたり、場合によっては非表示にしたいこともあるでしょう。

追加情報」タブへのカスタムテキストの追加

追加情報」タブにリンクのようなカスタムコンテンツを追加するには、以下のコードを使用します：

add_action( 'woocommerce_product_additional_information', 'print_custom_html' )；

関数 print_custom_html() {

    echo '<a href="#">商品詳細はこちら</a>';

}

追加情報」タブの非表示または削除

追加情報を必要としない商品（デジタル商品など）の場合、以下のコードでこのタブを削除できます：

add_filter( 'woocommerce_product_tabs', 'remove_additional_information_tab', 98 )；

function remove_additional_information_tab( $tabs ) { { { { { $tabs

    unset( $tabs['additional_information'] )；

    return $tabs；

}

結論

WooCommerceの商品ページに追加情報を追加すると、ユーザーエクスペリエンスとSEOが向上します。WooCommerceの組み込み機能、Secure Custom Fields (SCF)のようなプラグイン、カスタムコーディングは、色、サイズ、素材、お手入れ方法、認証などの詳細情報を商品ページに追加する柔軟なオプションを提供します。

• 内蔵機能の使用:商品エディタに直接属性をすばやく追加し、「追加情報」タブに必要な詳細を表示することで、ユーザーエクスペリエンスを向上させます。
• SCFプラグインの使用:基本的な情報だけでなく、カスタムフィールドを作成し、素材やお手入れ方法など、特定の商品詳細を表示することができます。
• カスタムコードの使用:高度なカスタマイズのために、functions.phpファイルに直接コードでカスタムフィールドを追加することで、商品ページでの情報の表示方法を完全にコントロールすることができます。

追加情報」タブを管理することで、製品のニーズに応じてコンテンツを追加、修正、削除することができ、顧客が不必要な混乱を招くことなく関連情報にアクセスできるようになります。全体として、WooCommerceの商品ページを充実させることで、顧客は十分な情報を得た上で購入の意思決定を行うことができ、サイトのSEOを改善しながらコンバージョンを高めることができます。