如何为 WooCommerce 产品页面添加自定义字段与元数据

プロフェッショナルなWooCommerceストアを構築する際、デフォルトの商品ページのフィールドだけではすべてのビジネスニーズを満たすことはできません。例えば、電子製品には「型番」や「保証期間」を、衣類には「素材の構成」や「洗濯方法」を追加する必要があるかもしれません。このような場合、商品にカスタムフィールドやメタデータを追加することが非常に重要になります。これにより、商品情報が豊富になり、ユーザー体験が向上するだけでなく、後の検索、フィルタリング、高度な機能の開発にもデータの基盤が提供されます。

この記事では、WooCommerceで製品のカスタムフィールドを実装するためのいくつかの基本的な方法について詳しく説明します。最も基本的なコードの追加方法から、高度なプラグインの活用方法までを解説し、完全で実行可能なコード例も提供します。

WooCommerceに内蔵されているアクションフックを使用してフィールドを追加する方法

WooCommerceは豊富なアクションフック（Action Hooks）を提供しており、開発者は製品データパネルの特定の場所にコンテンツを挿入することができます。これは最も直接的で、ネイティブシステムへの影響が最小限に抑えられた方法です。

推薦図書 WordPressのカスタムフィールドを徹底的に解析する：入門から高度な応用実践まで。

最もよく使われるフックは woocommerce_product_options_general_product_dataこれは、「通常の製品データ」セクションにフィールドを追加するために使用されます。

UltaHostのWordPressホスティングサービス

30日間の返金保証、無制限の帯域幅とデータベースサービス、無料のDDoS防御機能が付きます。3年契約をすると、501TPから4Tまでのプランで割引が適用されます。

アクセスページ

通常の製品データパネルにフィールドを追加する

以下のコードは、「シンプルな製品」と「変動する製品」の共通データパネルにテキスト入力ボックスとドロップダウン選択ボックスを追加する方法を示しています。

add_action( 'woocommerce_product_options_general_product_data', 'add_custom_general_fields' );
function add_custom_general_fields() {
    global $post;

echo '<div class="options_group">';

// 文本字段示例：产品型号
    woocommerce_wp_text_input(
        array(
            'id'          =&gt; '_product_model',
            'label'       =&gt; __( '产品型号', 'woocommerce' ),
            'placeholder' =&gt; '例如：X-2024Pro',
            'desc_tip'    =&gt; 'true',
            'description' =&gt; __( '请输入此产品的具体型号。', 'woocommerce' ),
        )
    );

// 下拉选择框示例：保修期
    woocommerce_wp_select(
        array(
            'id'          =&gt; '_warranty_period',
            'label'       =&gt; __( '保修期', 'woocommerce' ),
            'options'     =&gt; array(
                ''        =&gt; __( '请选择...', 'woocommerce' ),
                '1year'   =&gt; __( '一年', 'woocommerce' ),
                '2years'  =&gt; __( '两年', 'woocommerce' ),
                'lifetime'=&gt; __( '终身保修', 'woocommerce' ),
            ),
            'desc_tip'    =&gt; 'true',
            'description' =&gt; __( '请选择该产品提供的保修时长。', 'woocommerce' ),
        )
    );

echo '</div>';
}

カスタムフィールドの値を保存する

単にバックエンドでフィールドを表示するだけでは不十分です。ユーザーが入力した値を製品のメタデータに保存する必要があります。これには以下の処理が必要です： woocommerce_process_product_meta この保存フックです。

add_action( 'woocommerce_process_product_meta', 'save_custom_general_fields' );
function save_custom_general_fields( $post_id ) {
    // 保存产品型号字段
    $product_model = isset( $_POST['_product_model'] ) ? sanitize_text_field( $_POST['_product_model'] ) : '';
    update_post_meta( $post_id, '_product_model', $product_model );

// 保存保修期字段
    $warranty_period = isset( $_POST['_warranty_period'] ) ? sanitize_text_field( $_POST['_warranty_period'] ) : '';
    update_post_meta( $post_id, '_warranty_period', $warranty_period );
}

フロントエンドの製品ページにカスタムフィールドを表示する

最終的な目的は、保存されたフィールドの値をフロントエンドの製品ページに表示することです。そのために、以下の方法を利用することができます： woocommerce_product_additional_information または woocommerce_single_product_summary フックなどを使用して、データを商品説明の後ろやタグページ内に出力します。

「追加情報」タブページに表示する

以下のコードにより、カスタムフィールドがWooCommerceのデフォルトの「追加情報」タブに追加されます。

推薦図書 WooCommerceの徹底解析：高性能なeコマースサイトを構築するための完全ガイド。

add_action( 'woocommerce_product_additional_information', 'display_custom_fields_on_product_page' );
function display_custom_fields_on_product_page() {
    global $product;

$product_model = get_post_meta( $product->get_id(), '_product_model', true );
    $warranty_period = get_post_meta( $product->get_id(), '_warranty_period', true );

if ( $product_model ) {
        echo '<div class="product-model"><strong>' . esc_html__( '产品型号：', 'woocommerce' ) . '</strong>'`. esc_html($product_model).`'</div>';
    }

if ( $warranty_period ) {
        // 将存储的值转换为可读的标签
        $warranty_options = array(
            '1year'    =&gt; __( '一年', 'woocommerce' ),
            '2years'   =&gt; __( '两年', 'woocommerce' ),
            'lifetime' =&gt; __( '终身保修', 'woocommerce' ),
        );
        $warranty_label = isset( $warranty_options[ $warranty_period ] ) ? $warranty_options[ $warranty_period ] : $warranty_period;
        echo '<div class="warranty-period"><strong>' . esc_html__( '保修期：', 'woocommerce' ) . '</strong>'`. esc_html($warranty_label).`'</div>';
    }
}

高度カスタマイズされたフィールドプラグインを使用して、視覚化設定を行います。

コードに不慣れなユーザーや、画像、関係選択、リピーターなどの複雑なフィールドタイプが必要な場合には、プラグインを使用する方がより効率的な選択肢です。Advanced Custom Fields これはその分野の業界標準です。

フィールドグループを作成し、製品と関連付けます。

ACFプラグインをインストールして有効にすると、WordPressの管理画面で直感的にフィールドグループを作成できるようになります。例えば、「製品仕様」という名前のフィールドグループを作成し、その中に「型番」（テキストフィールド）と「保証期間」（選択フィールド）を含めることができます。次に、「位置規則」で、このフィールドグループを「記事のタイプが『製品』に該当する場合にのみ表示する」と設定します。

ACFは、フィールドのバックエンドでのレンダリング、データの保存、およびフロントエンドでの値の取得を自動的に処理します。管理インターフェース用のコードを一切記述する必要はありません。

hosting.com 共有ホスティング

AMD EPYC CPU、NVMe SSDストレージ、LiteSpeedによる高いパフォーマンス、24時間365日の専門家による社内サポート、SSL、ブルートフォース、マルウェア、DDoS保護などの高度なセキュリティ対策、最大73%のコスト削減

アクセスページ

フロントエンドテンプレート内でACFフィールドを呼び出す

フロントエンドで表示する際には、ACFが提供する機能を使用します。 get_field() 関数を使って値を取得します。

add_action( 'woocommerce_single_product_summary', 'display_acf_fields_on_product_page', 25 );
function display_acf_fields_on_product_page() {
    $product_model = get_field( 'product_model' );
    $warranty_period = get_field( 'warranty_period' );

if ( $product_model ) {
        echo '<p class="acf-product-model"><strong>製品型番：</strong>'`. esc_html($product_model).`'</p>';
    }

if ( $warranty_period ) {
        echo '<p class="acf-warranty-period"><strong>保証期間：</strong>'`. esc_html($warranty_period).`'</p>';
    }
}

変動する製品に対して、バリアントレベルのカスタムフィールドを追加する

可変製品の場合、異なるサイズや色などの各バリエーションに対して個別のカスタムフィールドを設定する必要があることがあります。これには、バリエーションに関連するフック（hook）を使用する必要があります。 woocommerce_product_after_variable_attributes。

変種パネルにフィールドを追加する

add_action( 'woocommerce_product_after_variable_attributes', 'add_custom_field_to_variations', 10, 3 );
function add_custom_field_to_variations( $loop, $variation_data, $variation ) {
    // 变体专属字段：例如，每个颜色变体的 Pantone 色号
    woocommerce_wp_text_input(
        array(
            'id'          => '_pantone_code[' . $variation->ID . ']',
            'label'       => __( 'Pantone 色号', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_pantone_code', true ),
            'placeholder' => '例如：PMS 185 C',
            'wrapper_class' => 'form-row form-row-first',
        )
    );
}

変種フィールドの値を保存する

変種フィールドの保存には、専用のフックを使用する必要があります。 woocommerce_save_product_variation。

推薦図書 プロフェッショナルなウェブサイトを構築するための完全ガイド：ゼロからWordPressテーマの開発を始めましょう。

add_action( 'woocommerce_save_product_variation', 'save_custom_variation_field', 10, 2 );
function save_custom_variation_field( $variation_id, $loop ) {
    $pantone_code = isset( $_POST['_pantone_code'][ $variation_id ] ) ? sanitize_text_field( $_POST['_pantone_code'][ $variation_id ] ) : '';
    update_post_meta( $variation_id, '_pantone_code', $pantone_code );
}

概要

WooCommerceの商品にカスタムフィールドを追加することは、ストア機能を深くカスタマイズするための基本です。ネイティブのアクションフックを利用することで、開発者はフィールドの配置、タイプ、データ処理のロジックを正確に制御し、軽量な統合を実現することができます。また、迅速なデプロイが必要である場合や複雑なフィールドタイプが関わるプロジェクトにおいては、以下のようなツールや手法を活用すると効果的です： Advanced Custom Fields この種のプラグインは開発効率を大幅に向上させることができます。シンプルな製品であれ変動する製品であれ、これらの方法を習得することで製品のデータ構造を柔軟に拡張し、多様なeコマースビジネスのニーズに応えることができます。これにより、ウェブサイトの専門性とユーザー体験が向上します。

FAQ よくある質問

カスタムフィールドのデータは、製品のエクスポート/インポート時にも一緒に移動しますか？

はい、しかし追加の処理が必要です。WooCommerceの組み込みCSVインポート/エクスポートツールを使用する場合、コードで追加したカスタムフィールドはデフォルトでエクスポートされる列に含まれません。そのため、CSVファイルに対応する列のタイトルを手動で追加する必要があります。 _product_modelまたは、エクスポート時に「すべてのメタデータをエクスポート」オプションを使用してください。ACFフィールドのエクスポート/インポートは、通常、ACFプラグイン自体、またはWP All Importのような関連するインポート/エクスポートプラグインによってより優れたサポートが提供されます。

インターサーバー共有ホスティング

共有ホスティング月$2.50米ドル, 最初の月$0.1米ドルプロモーションコードtryinterserver, 461クラウドアプリケーションスクリプト, 1クリックインストール.

アクセスページ

カスタムフィールドに基づいて製品フィルターを作成することはできますか？

はい、可能ですが、これは単にフィールドを追加するだけの範囲を超えています。カスタムフィールドの値をWooCommerceの製品分類（product taxonomy）にインデックス化するか、またはWooCommerce Product Filtersのような第三者のフィルタープラグインを使用してこれらのカスタムメタデータを識別する必要があります。さらに高度な方法としては、カスタムクエリを作成することもできます。 pre_get_posts または woocommerce_product_query フック内でメインループを修正し、特定のメタデータを持つ製品をフィルタリングする。

コードによって追加されたフィールドとACFプラグインによって追加されたフィールドの間には、根本的な違いがあります。

根本的な違いは、データの管理方法と保存方法にあります。コードを使って手動でデータを追加する場合、フィールドのHTML出力や検証、保存のロジックを直接制御でき、WordPressの機能を活用することができます。 update_post_meta と get_post_meta 関数を使用してデータにアクセスします。ACFプラグインはその上に完全な管理層を構築し、ユーザーフレンドリーなインターフェースを提供してフィールドグループやルールを定義し、データをより構造化された形で保存します（おそらく同じ配列内に）。 get_field() これらの関数は、形式化された値を返します。ACFはプロセスを簡素化していますが、コードの仕組みはより軽量で、より直接的に制御できます。

フィールドを追加した後、製品アーカイブページ（ストアページ）にどのように表示するか？

製品アーカイブページ（例：ストアのホームページやカテゴリページ）にカスタムフィールドを表示するには、通常、製品情報を表示するテンプレートを修正する必要があります。最も安全な方法は、WooCommerceのテンプレートファイルをコピーして使用することです。 templates/content-product.php 対応するサブトピックのパスにアクセスして内容を上書きし、その中の適切な場所（例えば価格の後ろなど）で関連する処理を実行してください。 get_post_meta() フィールドの値を出力するには、これを使用することもできます。 woocommerce_after_shop_loop_item_title この種のフックはコンテンツの挿入に使用されますが、レイアウトはテーマによって異なる場合があるので注意が必要です。