WooCommerceの「追加情報」タブは、詳細なスペックや配送情報、お手入れ方法など、買い物客が好む商品の詳細を表示するのに便利な場所です。しかし、ここで注意が必要です：WooCommerceにはすでにそのための機能が組み込まれています。
このガイドでは、「追加情報」タブの本当の力を引き出す方法をご紹介します。冗長な部分を削除し、残った部分をカスタマイズして、コンバージョンにつながる商品ページを作成します。
追加情報タブは、WooCommerceの商品データと連動していますが、見た目や表示内容にこだわる必要はありません。このガイドでは、追加情報タブの変更、名前の変更、スタイルの変更、削除の方法を説明します。
目次
WooCommerce追加情報タブとは？
追加情報タブは商品ページの説明タブと並んで表示され、買い物客がWooCommerceのカートページに到達する前に見るレイアウトの一部です。デフォルトでは、WooCommerceはサイズ、重量、素材などの基本的な商品属性を表示するためにこのタブを使用します。
しかし、「追加情報」タブはそれ以上のことができる。基本的な詳細を掲載するだけでなく、このスペースは売上アップのための一等地だと考えてください。
なぜか？なぜなら、消費者の87％は、最初の購入が不正確または不完全な製品情報に悩まされた場合、その企業から再び購入する可能性は低いからです。(ソース）
このガイドでは、「追加情報」タブを無味乾燥な余計なものから、ポジティブなカスタマージャーニーの重要な部分へと変える方法を紹介します。
WooCommerceの商品に追加情報を追加する方法
カスタマイズオプションを検討する前に、WooCommerceの追加情報タブに商品詳細を追加する方法を検討しましょう。
WooCommerceに内蔵されている属性機能は、素材、寸法、お手入れ方法などの簡単な追加をするのに最適な場所です。
WordPressのダッシュボードで、Products " Attributesに進みます。ここで商品のすべての属性を管理します。
属性には、"バッテリー寿命"、"素材"、"保証情報 "など、わかりやすい名前をつけましょう。これは、顧客がフロントエンドで目にするものです。
次に、Add Attributeをクリックする。
次に、この情報を追加したい商品を編集し、商品データセクションまでスクロールダウンして、属性タブをクリックします。
ドロップダウンメニューから新しい属性を選択し、「値」フィールドに関連する情報を追加します。
ここで、Save Attributesをクリックし、Updateyour productをクリックします。
新しい属性は、商品ページの「追加情報」タブに整然と表示されます。
WooCommerceの追加情報タブをカスタマイズする方法
追加情報タブに貴重な商品詳細を追加しました。しかし、一般的なタブでは「私を見て！」とは言えません。今こそ、このタブを自分だけのものにし、買い物客を購入へと導くために使う時です。
追加情報タブのスタイル変更
追加情報タブは商品ページの一等地です。SeedProdを使えば、あなたのブランドに合わせて簡単にスタイルをカスタマイズし、この貴重な情報に注目を集めることができます。
SeedProdは、魅力的でコンバージョン重視のWooCommerceストアを作成するための最高のWordPressウェブサイトビルダーです。ドラッグアンドドロップのインターフェースとあらかじめ構築されたブロックにより、コーダーでなくても自由にデザインすることができます。
SeedProdは初めてですか？WordPressでオンラインストアを設定する方法を学ぶには、このガイドをチェックしてください。
追加情報タブをスタイルする準備ができたら、WordPressのダッシュボードからSeedProd " Theme Builderにアクセスし、商品ページテンプレートの「デザインを編集」をクリックします。
ビジュアルエディタに入ったら、Product Data Tabsというブロックを探してください。これは追加情報セクションを含むWooCommerce商品タブのレイアウトをコントロールします。
ブロックをクリックすると、デザイン設定が開きます：
- タブの色：アクティブな状態と非アクティブな状態の背景色、テキスト色、ボーダー色を変更します。
- タイポグラフィ：タブのテキストのフォント、サイズ、太さ、スタイルを調整します。
- スペーシングとパディング：タブの前後の間隔を調整します。
- ボーダー：タブを目立たせるためにボーダーを追加またはカスタマイズします。
- テーブルスタイル：テキストの色、パディング、シャドウ効果の追加など、商品データテーブルのスタイルを設定できます。
デザインに満足したら、「保存」をクリックし、変更をプレビューします。商品ページをプレビューすると、私の変更は以下のように見えます：
追加情報を説明文に移動
商品ページをシンプルにして、重要な情報を見つけやすくしたいですか？追加情報のコンテンツをSeedProdの商品説明に直接移動することができます。
まず、商品ページを編集してビジュアルエディターを表示します。使用しているブロックに応じて、商品データタブを現在の位置から商品説明の下にドラッグします。
保存」をクリックし、商品ページをプレビューして、どのように見えるかを確認してください。
WooCommerceの追加情報を隠す
余分な詳細は必要ないほど素晴らしい製品をお持ちですか？それはわかります。少ない方がいいこともあります。もし追加情報タブを使わないのであれば、完全に削除して超ストリーム化した商品ページを作成するのがベストです。
SeedProdを使用してWooCommerce商品ページをカスタマイズしている場合、数回クリックするだけで商品データタブブロックを削除することができます。
商品データタブ」ブロックにカーソルを合わせ、ゴミ箱アイコンをクリックして削除します。
以上です。これで、商品ページに不要なごちゃごちゃがなくなりました。
WooCommerceの追加情報を削除する
もっと細かく管理したいですか？商品ごとに追加情報を削除することができます。このオプションは、特定の商品ページだけを削除したい場合に便利です。
これを行うには、WordPressダッシュボードの "商品 "に移動し、編集したい商品を選択します。
商品データ」パネルで、「属性」タブをクリックします。次に、削除したい属性の削除をクリックします。
その商品ページを表示すると、「追加情報」タブがなくなります。
追加情報タブの名前を変更する
"追加情報" - 口が悪いですよね？WooCommerceの「追加情報」タブを編集して商品内容をより反映させたい場合は、簡単なコードスニペットでタブ名を変更することができます。
まだの場合は、WPCodeプラグインをインストールして有効にしてください。
アクティベート後、Code Snippets " Add Newに進み、"Add Your Custom Code (New Snippet) "を選択してください。
次に、スニペットにタイトルを付けます：リネーム・アディショナル・インフォ・タブ（追加情報タブの名前を変更する）」のようなものでよい。次に、以下のコードをコード・エディターに貼り付けます：
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 New Tab Name」を希望のタブ名（例：「Product Specs」、「More Info」など）に置き換える。私は「商品情報」を使いました。
テーマのテキストドメインが不明な場合は、'your-theme-text-domain'を'woocommerce'のままにしておくことができます。
Code Type "で "PHP Snippet "を選択する。
次に、"スニペットを保存 "ボタンをクリックし、"非アクティブ "スイッチを "アクティブ "に切り替える。
これで完了です。追加情報タブに新しい名前が追加されました。
追加情報タブにカスタムコンテンツを追加する
基本的な商品属性を超える準備はできていますか？追加情報タブを完全なコンテンツハブにすることができます。動的コンテンツを追加する2つの方法を見てみましょう：柔軟性を高めるためにPHPスニペットを使用するか、使いやすさを高めるためにWordPressプラグインを使用します。
方法1：PHPスニペットを使う
もしあなたがちょっとしたコードに慣れているなら、PHPスニペットを使えば、タブに表示されるコンテンツをより自由にコントロールできる。信頼できるWPCodeプラグインを使って、整理整頓しましょう。
説明的なタイトル（例："Add Custom Content to Additional Info Tab"）で新しいスニペットを作成します。
次に、以下のコードをスニペット・エディターに貼り付ける：
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文の中の例の内容は、好きな内容に置き換えることができます。私の例では、配送情報の詳細を追加します。
その後、スニペットを保存し、「Code Type」を「PHP Snippet」に設定し、有効化します。
これで、商品ページを表示して新しい情報を確認することができます：
方法2：WordPressのプラグインを使う
もっと視覚的なアプローチがお好みですか？いくつかのWooCommerceプラグインは、WooCommerceの追加情報タブにカスタムコンテンツを簡単に追加することができます：
- タブマネージャープラグイン： YITH WooCommerce Tab Managerや WooCommerce Product Tabsのようなプラグインを使えば、ドラッグ＆ドロップで全く新しいタブを作成できます（既存のタブをカスタマイズするだけではありません）。
- カスタムフィールドプラグイン Advanced Custom Fields(ACF)のようなプラグインを使用してカスタム商品データを管理している場合、その機能を使用して追加情報タブにコンテンツを表示することもできます。
コンバージョンを生む商品ページを作る準備はできていますか？
ここまでで、あなたはWooCommerceの追加情報タブを使いこなすことができるようになりました。価値のあるコンテンツを追加する方法、ごちゃごちゃしたものを取り除く方法、スタイリングをカスタマイズする方法、そしてよりスムーズで説得力のあるショッピングエクスペリエンスを作るためにものを移動させる方法まで、あなたは学びました。
次はあなたの番です。SeedProdを使えば、美しい、コンバージョン重視の商品ページが驚くほど簡単に作れます。
WooCommerceのヒント、トリック、チュートリアルはこちらです：
- WooCommerceにカートを見るボタンを追加する方法
- WooCommerceでショップページのタイトルを変更する方法
- WooCommerceで美しい商品画像ギャラリーを作成する方法
- WooCommerceの商品ページに星評価を追加する方法
- WooCommerceで在庫切れの商品を非表示にする方法
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
