WooCommerceの商品ページにX・Facebook・LINEなどのシェアボタンを付けるには、シェア系プラグインで商品ページだけに表示する方法と、WooCommerceが用意している woocommerce_share フックにリンク型のボタンを出す方法の2通りがあります。この記事では、両方の手順に加えて、シェアしたときに商品画像と価格が正しく表示されるようにするOGPの確認、ブロックテーマで表示されないときの対処までを解説します。
どちらの方法を選ぶか
- プラグイン：ボタンの種類を管理画面で選べ、アイコンやシェア数の表示も用意されています。コードを触りたくない場合や、ブログ記事にも同じボタンを付けたい場合に向いています。
- コード（リンク型）：各SNSのシェア用URLへのリンクを並べるだけなので、外部のJavaScriptを読み込まずに済み、表示速度やプライバシーへの影響が小さくなります。商品ページだけに、決まったデザインで出したい場合に向いています。
どちらの場合も、シェアされたときの見た目を決めるのはボタンではなく、商品ページの OGP（og:title、og:image など）です。ボタンを付ける前に、OGPが出ているかを確認しておくと手戻りがありません。
方法1：プラグインで追加する
実在して更新が続いている代表的なものに AddToAny Share Buttons があります。また、Jetpack を使っているサイトなら、Jetpack の共有ボタン機能（ブロックテーマでは「共有ボタン」系のブロック）でも追加できます。どちらも設定画面の構成やブロック名は版によって変わるため、ここでは目的ごとに説明します（2026年10月現在）。
- プラグインをインストールして有効化します。導入前にサイトのバックアップを取り、できればステージング環境で試します。
- 設定画面で、表示するサービス（X、Facebook、LINE、Pinterest など）を選びます。日本向けのストアならLINEを入れておくと、購入検討中の家族や友人への共有に使われやすくなります。
- 表示する場所の設定で、投稿や固定ページとは別に「商品」（WooCommerceの投稿タイプ
product）に表示するかを選びます。プラグインによっては、商品ページへの表示がWooCommerce用の位置指定として別に用意されています。 - 商品ページを開き、ボタンの位置と、スマホでの折り返しを確認します。
シェア数を表示する機能は、SNS側がシェア数の提供をやめたり制限したりしているため、サービスによっては表示されません。数字が0のまま並ぶと逆効果になることもあるので、表示しない設定にしておくのも一つの判断です。
方法2：woocommerce_share フックでリンク型ボタンを出す
クラシックテーマの商品ページでは、商品概要エリアの最後のほう（カテゴリーやタグの表示の後）で woocommerce_share アクションが呼ばれます。ここにボタンを出すと、テーマを問わず価格やカートボタンの下に並びます。
コードは子テーマの functions.php か、mu-plugin（wp-content/mu-plugins/ に置くPHPファイル）に書きます。親テーマを直接編集すると、テーマの更新で消えるためです。
<?php
defined( 'ABSPATH' ) || exit;
/**
* 商品ページにリンク型のシェアボタンを出力する。
*/
function my_wc_share_buttons() {
if ( ! is_product() ) {
return;
}
$url = get_permalink();
$title = wp_strip_all_tags( get_the_title() );
$image = get_the_post_thumbnail_url( get_the_ID(), 'large' );
$links = array(
'X' => 'https://twitter.com/intent/tweet?url=' . rawurlencode( $url ) . '&text=' . rawurlencode( $title ),
'Facebook' => 'https://www.facebook.com/sharer/sharer.php?u=' . rawurlencode( $url ),
'LINE' => 'https://social-plugins.line.me/lineit/share?url=' . rawurlencode( $url ),
);
if ( $image ) {
$links['Pinterest'] = 'https://www.pinterest.com/pin/create/button/?url=' . rawurlencode( $url )
. '&media=' . rawurlencode( $image ) . '&description=' . rawurlencode( $title );
}
echo '<div class="my-share" aria-label="この商品をシェア">';
foreach ( $links as $name => $href ) {
printf(
'<a class="my-share__link my-share__link--%1$s" href="%2$s" target="_blank" rel="noopener noreferrer">%3$s</a>',
esc_attr( strtolower( $name ) ),
esc_url( $href ),
esc_html( $name )
);
}
echo '</div>';
}
add_action( 'woocommerce_share', 'my_wc_share_buttons' );
/**
* 商品ページでだけボタン用のCSSを追加する。
*/
function my_wc_share_style() {
if ( ! is_product() ) {
return;
}
$css = '.my-share{display:flex;flex-wrap:wrap;gap:.5em;margin-top:1em}'
. '.my-share__link{display:inline-block;padding:.4em .9em;border:1px solid currentColor;border-radius:4px;text-decoration:none;font-size:.9em}'
. '.my-share__link:focus-visible{outline:2px solid;outline-offset:2px}';
wp_register_style( 'my-wc-share', false, array(), '1.0' );
wp_enqueue_style( 'my-wc-share' );
wp_add_inline_style( 'my-wc-share', $css );
}
add_action( 'wp_enqueue_scripts', 'my_wc_share_style' );コードのポイントは3つです。
- URLのエンコードとエスケープ：商品名に「&」や日本語が入ってもリンクが壊れないよう、各パラメーターを
rawurlencode()で処理し、出力時にesc_url()とesc_html()を通しています。 - **
rel="noopener noreferrer"**：新しいタブで開くリンクに付け、開いた先のページから元のページを操作されないようにします。 - CSSは商品ページだけ：
wp_add_inline_style()で、商品ページを表示したときにだけ小さなCSSを足しています。ボタンはテキストのリンクなので、外部アイコンの読み込みでレイアウトがずれる（CLS）心配もありません。アイコンを使う場合は、SVGをテーマ内に置き、幅と高さを指定してください。
XのシェアURLは、2026年10月現在 twitter.com/intent/tweet の形式が引き続き使えますが、X側の仕様変更で変わる可能性があります。各SNSのシェア用URLは、公式の開発者向けドキュメントで定期的に確認してください。
シェアしたときの表示（OGP）を確認する
ボタンを押すとSNSは商品ページのURLを読みに来て、OGPタグから題名・説明・画像を取り出します。OGPが無いと、画像が出ない、ストア名だけが出る、といった状態になります。
Yoast SEO や Rank Math などのSEOプラグインを使っていれば、商品ページにもOGPが出力されているのが一般的です。ブラウザで商品ページのソースを開き、og:image に商品画像のURLが入っているかを見ます。Facebook のシェアデバッガーなど、各SNSが用意している確認ツールを使うと、キャッシュされた古い情報の再取得もできます。
画像は横長（おおむね1.91:1）で十分な大きさのものが推奨されることが多い一方、商品画像は正方形が多いため、SNSによっては上下が切れて表示されます。重要な文字を画像の端に置かないようにしておくと安心です。
ブロックテーマで表示されないとき
Twenty Twenty-Five などのブロックテーマでは、商品ページがブロックで組まれたテンプレートで表示されます。WooCommerceは一部のクラシック用フックを互換のために呼び出していますが、テンプレートの構成によっては woocommerce_share の位置に出ない、または出力されないことがあります。
その場合は、次のどちらかで対応します。
- サイトエディターで「単一商品」テンプレートを開き、ボタンを出したい位置に、プラグインが用意しているブロックやショートコードのブロックを置く。
- 上のコードの出力部分をショートコードとして登録し（
add_shortcode()）、テンプレートのショートコードブロックから呼び出す。
テンプレートを編集する前に、サイトエディターでの変更内容を書き出しておくと、元に戻したいときに困りません。
確認方法
- PCとスマホで商品ページを開き、ボタンが価格やカートボタンの近くに並ぶか、折り返しで崩れないかを見る。
- 各ボタンを押し、シェア画面に商品名とURLが正しく入るかを見る（実際に投稿する必要はありません）。
- キーボードのTabキーでボタンに移動でき、フォーカスの枠が見えるかを確かめる。
- バリエーションのある商品でも、URLが親商品のものになっているかを確認する。
まとめ
- 手軽さ重視ならAddToAnyやJetpackの共有機能、軽さ重視ならリンク型ボタンを
woocommerce_shareフックで出す。 - リンクは
rawurlencode()でパラメーターを処理し、esc_url()とesc_html()でエスケープする。 - シェア時の見た目はOGPで決まる。
og:imageに商品画像が入っているかを先に確認する。 - ブロックテーマで出ないときは、単一商品テンプレートにブロックかショートコードで配置する。
- SNSのシェア用URLや仕様は変わるため、公式ドキュメントを定期的に確認する。