WooCommerce商品詳細ページのタブ内容をカスタマイズする実践ガイド（「アフターサービス」の追加など）

ある WooCommerce デフォルトでは、ショップの商品詳細ページには、"説明"、"追加情報"、"レビュー "などのタブが含まれていますが、実際の運用では、マーチャントのビジネスニーズに合わせて、より多くのカスタマイズされたコンテンツを追加する必要があることがよくあります。しかし、実際の運用では、マーチャントはビジネスニーズを満たすために、例えば、より多くのカスタムコンテンツを追加する必要があることがよくあります：

アフターサービス
ブランドストーリー
配送と返品について
ユーザーガイドまたは製品ビデオ

この記事では、次のようなコード・アプローチの方法を紹介する。 WooCommerce 商品詳細ページに新しいカスタムタブ（例：「アフターサービス」）を追加し、柔軟な管理を可能にする。

I. カスタムタブの実装方法

WooCommerceは特別なフィルターを提供するホック 商品タブ商品詳細ページのタブ構造を変更するために使用します。このフックを使って新しいタブを追加するだけです。

サンプルコード：「アフターサービス」タブを追加する

以下のコードをテーマの functions.php ドキュメンテーション

add_filter( 'woocommerce_product_tabs', 'custom_add_after_sales_tab' )；
function custom_add_after_sales_tab( $tabs ) { { { $tabs['after_sales'] = array('after_sales')
    $tabs['after_sales'] = array(
        'title' =&gt; 'アフターサービス'、
        'priority' =&gt; 50, // 表示順をコントロールする
        コールバック' =&gt; 'custom_after_sales_tab_content'
    );
    return $tabs.
}

関数 custom_after_sales_tab_content() {
    echo '<h2>アフターサービス</h2>'; echo '
    エコー '<p>当店のすべての商品は、7日間返品理由なし、30日間品質問題交換サービスをお楽しみください。詳細については、顧客サービスにお問い合わせください。</p>';
}

II.カスタムコンテンツサポート HTML、画像、ビデオ（指示や例を表示するため）

あるグーテンベルクエディターの "Code "ブロックを使う。

記事を編集する際に + 新しいブロックを追加する

Code "または "Code "を検索し、挿入する。

例

echo '
    サポート7日間理由なし返品</li
    
30日間無料交換保証</li
    
国内保証、正式な請求書を提供します。
'；

ページをより魅力的にするために、動画や画像を埋め込むこともできる：

エコー<img src="https://yourdomain.com/wp-content/uploads/after-sales.jpg" alt="アフターサービス">';

III.商品ごとに異なるコンテンツを設定する（高度な使い方）

商品ごとに異なるアフターサービスの内容を表示させたい場合は get_the_ID() もしかしたら $product->get_id() 現在のプロダクトIDを取得し、判定する：

関数のcustom_after_sales_tab_content() { $product_idは、次のとおりです。
    $product_id = get_the_ID()；
    if ( $product_id==123){の場合
        echo '<p>本製品は12ヶ月間の無償修理サービスを受けることができます。</p>'; } else {
    } else {
        エコー '<p>通常のアフターマーケット・ポリシーが適用される。</p>';
    }
}

デフォルトのタブを非表示にする（例：「追加情報」）。

例えば、表示したくないデフォルトのタブを非表示にすることもできる：

add_filter( 'woocommerce_product_tabs', 'remove_unwanted_product_tabs', 98 )；
function remove_unwanted_product_tabs( $tabs ) { { { $tabs['additional_information')
    unset( $tabs['additional_information'] ); // 追加情報
    return $tabs.
}

V. よくある質問

Q1: バックエンドの設定に影響はありますか？
そうはならない。この方法は前方部分表示されても、バックエンドの製品エディタはすべてのフィールドを保持します。

Q2：複数のタブを同時に追加できますか？
はい、複数の配列構造を繰り返し追加するだけです。例えば、"ブランディング"、"ユーザーズガイド "など複数のタブを追加する。

Q3: テーマのアップデートはコードに影響しますか？
テーマの functions.phpテーマが更新されると上書きされる可能性があります。そのためサブテーマまたはCode Snippetsプラグインを使用して、そのような機能的なコードを管理することができます。

結論

カスタマイズ WooCommerce 商品詳細ページのタブコンテンツにより、マーチャントはブランド価値、アフターサービス保証、商品サービス情報をより正確に伝えることができ、ユーザーに分かりやすく信頼性の高いショッピング体験を提供することができます。プラグインがなくても、数行のコードで簡単に商品詳細ページのコンテンツを拡張し、ページをパーソナライズし、コンバージョン率と顧客満足度を向上させることができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み