OpenByt - 無料のWordPressに関する究極の情報源

WooCommerceで商品情報を追加・カスタマイズする完全ガイド

トムスクム

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

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

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

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

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

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

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

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

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

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

ステップ 3: 属性の追加

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

ステップ 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. 素材-これは、"オーク "や "メープル "など、特定の木材の種類を入力するための "テキスト "フィールドです。
  1. お手入れ方法 - 乾いた布で拭いてください。直射日光は避けてください。"
  1. 認証ロゴ - 認証シールやエコバッジをアップロードするには、「画像」フィールドを使用します。

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

ステップ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 )；



    unset( $tabs['additional_information'] )；

    return $tabs；

}

結論

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

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

モバイルバージョン終了