WooCommerceの追加情報タブをカスタマイズする方法 

商品ページに空白のタブが表示されたり、場違いに見えたり、単に「追加情報」と表示されて買い物客に役立つ情報が何も伝わらない場合でも、諦める必要はありません。WooCommerceの追加情報タブは完全にカスタマイズ可能で、ほとんどの変更は数分で完了します。

このガイドでは、WooCommerceの追加情報を編集して、ストアに合わせて名前の変更、スタイルの変更、移動、または完全に削除する方法を説明します。

WooCommerceの追加情報タブとは？

WooCommerceの追加情報タブは、商品の重量、寸法、カスタム属性を自動的に表示する商品ページタブです。商品に少なくとも1つの属性または配送詳細が割り当てられている場合にのみ表示されるため、空のタブが表示される場合は、通常それが原因です。

しかし、追加情報タブは仕様をリストする以上のことができます。買い物客が商品が自分に適しているかを確認するために最初に確認する場所の1つです。汎用的または空のままにしておくと、販売機会を失う可能性があります。

WooCommerceの商品に追加情報を追加する方法

カスタマイズオプションを検討する前に、WooCommerceの追加情報タブに商品詳細を追加する方法を見てみましょう。WooCommerceの組み込み属性機能は、素材、寸法、またはケア指示などの追加に最適な出発点です。

WordPressダッシュボードで、[商品] > [属性]に移動します。ここで、すべての商品の属性を管理します。

「バッテリー寿命」、「素材」、「保証情報」など、わかりやすい名前を属性に付けます。これが顧客がフロントエンドで目にするものです。

次に、[属性を追加]をクリックします。

次に、この情報を追加したい商品を編集し、[商品データ]セクションまでスクロールダウンして、[属性]タブをクリックします。

ドロップダウンメニューから新しい属性を選択し、[値]フィールドに関連情報を追加します。

次に、[属性を保存]をクリックし、次に商品を[更新]します。

新しい属性は、商品ページの追加情報タブにきれいに整理されて表示されるようになります。

WooCommerce追加情報タブをカスタマイズする方法

追加情報タブに貴重な商品詳細を追加しました。次に、ストアでより効果的に活用しましょう。一般的なタブでは、購入を促すことはできません。これらの方法により、表示内容とその見た目を実際に制御できます。

追加情報タブのスタイルを変更する

SeedProdのビジュアルエディターを使用すると、コードに触れることなくWooCommerceの商品タブをカスタマイズできます。ドラッグアンドドロップインターフェイスから、ブランドに合わせて色、タイポグラフィ、スペーシング、境界線を変更できます。

追加情報タブのスタイルを設定する準備ができたら、WordPressダッシュボードからSeedProd » Theme Builderに移動し、商品ページテンプレートの「デザインを編集」をクリックします。

ビジュアルエディターに入ったら、商品データタブというブロックを探します。これが、追加情報セクションを含む、WooCommerceの商品タブのレイアウトを制御します。

ブロックをクリックしてデザイン設定を開くと、以下の項目を完全に制御できます。

• タブの色：アクティブ状態と非アクティブ状態の背景色、テキスト色、境界線の色を変更します。
• タイポグラフィ：タブのテキストのフォント、サイズ、太さ、スタイルを調整します。
• スペーシングとパディング：タブコンテンツの周囲および内部のスペーシングを制御します。
• 境界線：タブを目立たせるために境界線を追加またはカスタマイズします。
• テーブルスタイル：テキストの色、パディング、さらには影の効果を追加するなど、商品データテーブルをスタイル設定します。

デザインに満足したら、「保存」をクリックして変更をプレビューします。商品ページをプレビューしたときの私の変更は次のとおりです。

SeedProdは初めてですか？このガイドをチェックして、WordPressでオンラインストアをセットアップする方法を学びましょう。

追加情報を説明タブに移動する

商品ページを簡素化し、重要な情報を簡単に見つけられるようにしたいですか？SeedProd内で、追加情報のコンテンツをWooCommerceの商品説明の直下に移動できます。

まず、商品ページを編集してビジュアルエディターを表示します。使用しているブロックに応じて、商品データタブを現在の場所から商品説明の下にドラッグします。

次に「保存」をクリックして商品ページをプレビューし、どのように表示されるかを確認します。

WooCommerceの追加情報を非表示にする

商品に関連する属性や配送の詳細がない場合、追加情報タブを非表示にすることで商品ページをすっきりと保つことができます。空またはまばらなタブを買い物客に表示するよりも良い選択です。

SeedProdを使用してWooCommerceの商品ページをカスタマイズしている場合、数回クリックするだけで商品データタブブロックを削除できます。

商品データタブブロックにカーソルを合わせ、ゴミ箱アイコンをクリックして削除します。

これで、商品ページから不要なものがなくなりました。

特定のカテゴリの商品に対してタブを非表示にする必要がありますか？PHPスニペットアプローチ（下の削除セクションで説明）は、特定のカテゴリの商品のみを対象に拡張できます。これにより、カタログの他の部分に影響を与えることなく、関連性のない商品の追加情報を非表示にできます。

WooCommerceの追加情報を削除する

より詳細な制御が必要ですか？商品ごとに個別に追加情報を削除できます。このオプションは、特定の商品ページのみを整理したい場合に適しています。

これを行うには、WordPressダッシュボードの「商品」に移動し、編集したい商品を選択します。

「商品データ」パネルで、「属性」タブをクリックします。次に、削除したい属性の「削除」をクリックします。

その商品ページを表示すると、「追加情報」タブがなくなっています。

注意：この方法は、フロントエンドでの表示だけでなく、属性自体を削除します。後でこの情報が必要になる場合は、データを削除するのではなく、SeedProdを使用してタブを非表示にするのが最善です。

追加情報タブの名前を変更する

「追加情報」は長すぎます。WooCommerceの追加情報タブを編集して商品コンテンツをよりよく反映させたい場合は、簡単なコードスニペットでタブ名を変更できます。

注意: この方法では、テーマファイルを直接編集する代わりに、WPCode を使用してカスタムコードスニペットを追加します。WPCode の使い方はこちらをご覧ください。WPCode の使い方。続行する前に、ウェブサイトのバックアップを作成して、問題が発生した場合に何も失わないようにしてください。

まだWPCodeプラグインをインストールして有効化していない場合は、インストールして有効化してください。

有効化したら、コードスニペット » 新規追加に移動し、「カスタムコードを追加（新規スニペット）」を選択します。

次に、スニペットにタイトルを付けます。「追加情報タブの名前を変更」のようなもので十分です。次に、次のコードをコードエディターに貼り付けます。

add_filter( 'woocommerce_product_tabs', 'rename_additional_information_tab', 10, 1 );

function rename_additional_information_tab( $tabs ) {
  $tabs['additional_information']['title'] = __( 'Your New Tab Name', 'your-theme-textdomain' ); // Customize the tab name here
  return $tabs;
}

次に、「新しいタブ名」を希望のタブ名（例：「商品仕様」、「詳細情報」など）に置き換えます。私は「商品情報」を使用しました。

テーマのテキストドメインが不明な場合は、「your-theme-textdomain」を「woocommerce」のままにしておくことができます。

「コードタイプ」で、「PHPスニペット」を選択します。

次に、「スニペットを保存」ボタンをクリックし、「非アクティブ」スイッチを「アクティブ」に切り替えます。

これで完了です。商品ページを確認してください。追加情報タブに新しい名前が付きました。

WooCommerceの商品タブの順序を変更する方法

追加情報タブが商品ページの最後にあるのが望ましくない場合は、移動できます。SeedProd のビジュアルエディターを使用すると、コード不要で簡単にこれを行うことができます。

SeedProd » テーマビルダーから、商品ページテンプレートを開きます。ビジュアルエディターで、商品データタブブロックを見つけて、ページ上のタブグループを表示したい位置にドラッグします。

タブグループ内の個々のタブの順序を変更するには、WooCommerce は優先度システムを使用します。追加情報タブのデフォルトの優先度は 20 ですが、説明タブは 10、レビューは 30 です。数値が小さいほど先に表示されます。

WPCode を介した PHP スニペットでタブの順序を調整できます。追加情報タブの優先度を変更するには、このコードを追加します:

add_filter( 'woocommerce_product_tabs', 'reorder_additional_information_tab', 98 );

function reorder_additional_information_tab( $tabs ) {
  $tabs['additional_information']['priority'] = 5; // Lower number = appears first
  return $tabs;
}

優先度番号を変更して順序を制御します。値 5 は追加情報を説明タブの前に配置し、25 は説明とレビューの間に配置します。

追加情報タブにカスタムコンテンツを追加する

基本的な商品属性を超えて進む準備はできましたか？追加情報タブをコンテンツハブに変えることができます。WooCommerce の追加情報タブにフィールドと動的コンテンツを追加する 2 つの方法を以下に示します。

方法1：PHPスニペットを使用する

少しコードに慣れている場合は、PHP スニペットを使用すると、タブに表示されるコンテンツをより細かく制御できます。整理のために WPCode プラグインを使用します。

わかりやすいタイトル（例：「追加情報タブにカスタムコンテンツを追加」）で新しいスニペットを作成します。

次に、次のコードをスニペットエディターに貼り付けます。

add_action( 'woocommerce_product_additional_information', 'add_custom_content_to_additional_info' );
function add_custom_content_to_additional_info() {
  // Add your custom content here!
  echo '<p>This is some custom content added to the Additional Information tab!</p>';
  echo '<ul>';
  echo '<li>You can add text, HTML, shortcodes...</li>';
  echo '<li>...even output content from custom fields!</li>';
  echo '</ul>';
}

echoステートメント内の例のコンテンツを、希望のコンテンツに置き換えることができます。私の例では、配送情報に関する詳細を追加します。

次に、スニペットを保存し、「コードタイプ」を「PHPスニペット」に設定してアクティブ化します。

これで、商品ページを表示して新しい情報を確認できます。

方法2：WordPressプラグインを使用する

より視覚的なアプローチを好みますか？いくつかのWooCommerce プラグインを使用すると、WooCommerce の追加情報タブにカスタムコンテンツを追加するのが簡単になります:

• タブマネージャープラグイン:YITH WooCommerce Tab Manager やWooCommerce Product Tabs のようなプラグインを使用すると、ドラッグアンドドロップで完全に新しいタブ (既存のタブをカスタマイズするだけでなく) を作成できます。
• カスタムフィールドプラグイン:Advanced Custom Fields (ACF) のようなプラグインをすでに使用してカスタム商品データを管理している場合は、その機能を使用して追加情報タブにコンテンツを表示することもできます。

よくある質問

WooCommerce 商品に追加情報を追加するにはどうすればよいですか？

WordPress ダッシュボードの商品 » 属性に移動し、説明的な名前で新しい属性を作成します。次に、商品を開き、商品データパネルの属性タブを開き、関連する値で属性を割り当てます。属性の保存をクリックして商品を更新します。属性は、商品ページに追加情報タブに表示されます。

WooCommerce の追加情報タブを非表示にするにはどうすればよいですか？

SeedProd を使用している場合は、テーマビルダーで商品ページテンプレートを開き、商品データタブブロックを削除します。これにより、すべての商品に対してタブがグローバルに削除されます。

特定の製品カテゴリのみに表示するには、WPCodeを使用してPHPスニペットアプローチを拡張し、カテゴリ別に製品をターゲットにすることで、タブを必要とする製品に対して表示したままにすることができます。

WooCommerceの追加情報タブの名前を変更するにはどうすればよいですか？

WPCodeを使用して、woocommerce_product_tabsフックをフィルタリングするPHPスニペットを追加します。スニペット内で、$tabs['additional_information']['title']を「製品仕様」や「詳細情報」などの希望のラベルに設定します。スニペットを保存して有効にすると、製品ページに新しいタブ名がすぐに表示されます。

WooCommerceの追加情報タブが表示されないのはなぜですか？

追加情報タブは、製品に少なくとも1つの属性または配送フィールド（重量または寸法）が割り当てられている場合にのみ表示されます。タブが見つからない場合は、製品データパネルの属性タブを確認し、少なくとも1つの属性に値が保存されていることを確認してください。

SeedProdを使用しており、それでもタブが表示されない場合は、製品ページテンプレートに製品データタブブロックが存在し、削除されていないことを確認してください。

コンバージョンを生み出す商品ページを作成する準備はできましたか？

WooCommerceの追加情報タブのカスタマイズは、あらゆる製品ページで利用できる比較的簡単な改善点の一つです。SeedProdを使用すると、コードを書かずに、美しくコンバージョンを促進する製品ページを簡単に作成できます。

その他、役立つ可能性のあるWooCommerceのヒント、トリック、チュートリアルを以下に示します。

• WooCommerceにカート表示ボタンを追加する方法
• WooCommerceでショップページタイトルを変更する方法
• WooCommerceで素晴らしい商品画像ギャラリーを作成する方法
• WooCommerceの商品ページに星評価を追加する方法
• WooCommerceで在庫切れの商品を非表示にする方法

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