WordPressのテーマでWooCommerceのカート数をヘッダーに表示する方法

WooCommerce のカート内の商品数をヘッダーに出すには、ブロックテーマならWooCommerce付属の「ミニカート」ブロックをヘッダーに置くのが最短です。クラシックテーマでは、WC()->cart->get_cart_contents_count() で数を取得してヘッダーに表示し、「カートに追加」したときに数が更新されるようカートフラグメントの仕組みに登録します。この記事では両方の手順と、数が更新されない・古い数が出るといったつまずきへの対処を解説します。

まず使っているテーマの種類を確認する

管理画面の「外観」メニューに「エディター」があればブロックテーマ、「カスタマイズ」と「ウィジェット」が中心ならクラシックテーマです。どちらかで手順が変わります。

また、WooCommerce 公式の Storefront など、ECサイト向けのテーマにはヘッダーのカート表示が最初から入っていることがあります。自作する前に、テーマのカスタマイズ画面やヘッダーの設定にカート表示の項目がないかを確認してください。既存の機能で足りるなら、それを使うほうが更新時の手間がかかりません。

ブロックテーマ：ミニカートブロックを置く

ブロックテーマでは、コードを書かずに対応できます。

1. 「外観」→「エディター」を開き、「パターン」または「テンプレートパーツ」から「ヘッダー」を選びます（画面の表記はWordPressのバージョンによって異なります）。
2. ナビゲーションの横など、置きたい位置にブロックを追加し、「ミニカート」を検索して挿入します。
3. ブロックの設定で、商品数のバッジや合計金額の表示有無、カートが空のときの表示などを調整します。設定項目は WooCommerce のバージョンによって変わります（2026年10月現在）。
4. 保存して、フロント側で商品をカートに追加し、数が増えるかを確かめます。

ミニカートブロックは、クリックするとカートの中身がドロワー（横から開くパネル）で表示されるのが標準の動きです。見た目だけを変えたい場合は、ブロックのスタイル設定や子テーマのCSSで調整します。

クラシックテーマ：コードで表示する

作業前の準備

コードは子テーマの functions.php と header.php に書きます。親テーマを直接編集すると、テーマ更新で上書きされるためです。functions.php の書き間違いはサイトが表示されなくなる原因になるので、編集前にファイルのバックアップを取り、FTPやファイルマネージャーで元に戻せる状態で作業してください。ECサイトは稼働中に止まると影響が大きいため、テスト環境があれば先にそちらで試します。

カート数のHTMLを返す関数

ヘッダーへの表示と、後述する自動更新の両方で同じHTMLを使うため、関数にまとめます。

<?php
// 子テーマの functions.php
function mytheme_header_cart_html() {
	if ( ! function_exists( 'WC' ) || ! WC()->cart ) {
		return '';
	}

	$count = WC()->cart->get_cart_contents_count();

	return sprintf(
		'<a class="header-cart" href="%1$s" aria-label="%2$s"><span class="header-cart__label">カート</span><span class="header-cart__count">%3$s</span></a>',
		esc_url( wc_get_cart_url() ),
		esc_attr( sprintf( 'カートを見る（%d点）', $count ) ),
		esc_html( $count )
	);
}

get_cart_contents_count() は、商品の種類数ではなく数量の合計を返します。同じ商品を3個入れれば「3」です。種類数を出したい場合は count( WC()->cart->get_cart() ) を使います。

最初の条件分岐は、WooCommerce を停止したときや、カートが読み込まれていない場面（管理画面や一部のREST APIリクエストなど）で、致命的エラーにならないようにするためのものです。

header.php に表示する

親テーマの header.php を子テーマにコピーし、ナビゲーションの近くなど表示したい位置に次の1行を追加します。関数の中でエスケープ済みなので、そのまま出力して問題ありません。

<?php echo mytheme_header_cart_html(); ?>

テーマによっては、header.php をコピーしなくても、テーマ独自のアクションフックでヘッダーに要素を追加できる場合があります。テーマのドキュメントにヘッダー用のフックが記載されていれば、そちらを使うと header.php の更新に追従しやすくなります。

「カートに追加」で数を更新する

ここまでで表示はできますが、商品一覧で「カートに追加」ボタンを押したとき（ページ移動のない追加）には、ヘッダーの数は古いままです。WooCommerce には、追加後にページの一部を差し替える「カートフラグメント」という仕組みがあるので、そこにヘッダーの要素を登録します。

<?php
add_filter( 'woocommerce_add_to_cart_fragments', function ( $fragments ) {
	// キーは差し替え対象のCSSセレクタ。値の要素で丸ごと置き換えられる
	$fragments['a.header-cart'] = mytheme_header_cart_html();
	return $fragments;
} );

add_action( 'wp_enqueue_scripts', function () {
	if ( function_exists( 'WC' ) ) {
		wp_enqueue_script( 'wc-cart-fragments' );
	}
} );

フラグメントの値は、キーのセレクタに一致する要素と置き換えられます。そのため、値のHTMLにも同じクラス（ここでは header-cart）を付けた要素を丸ごと入れる必要があります。中身の数字だけを返すと、2回目以降の更新で要素が見つからなくなります。

後半の wp_enqueue_script() は、カートフラグメント用のスクリプトを読み込む指定です。WooCommerce 7.8 前後のバージョンから、このスクリプトはミニカートウィジェットなどを使っているページでしか自動で読み込まれなくなりました。自作のヘッダー表示だけでは読み込まれず、数が更新されない原因になるため、明示的に読み込みます。カートフラグメントは各ページで追加の通信を発生させるので、パフォーマンスが気になる場合は、ショップ関連のページだけに条件を絞ることも検討してください。

見た目を整える

.header-cart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}
.header-cart__count {
	min-width: 1.6em;
	padding: 0 6px;
	border-radius: 999px;
	background: #d63638;
	color: #fff;
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
}

CSSは子テーマの style.css や、子テーマで読み込んでいるCSSファイルに追加します。

数が更新されない・古い数が出るときの確認

• ページキャッシュ: ヘッダーはページ全体と一緒にキャッシュされるため、キャッシュされたHTMLには「最初に生成した時点の数」が残ります。カートフラグメントが読み込まれていれば表示後に正しい数へ差し替わりますが、読み込まれていないと古い数のままです。また、カート・決済・マイアカウントのページはキャッシュ対象から外す設定になっているかを、キャッシュプラグイン側で確認してください。
• スクリプトの読み込み: ブラウザの開発者ツールで、wc-cart-fragments のスクリプトが読み込まれているか、「カートに追加」後に wc-ajax=get_refreshed_fragments などの通信が発生しているかを見ます。
• セレクタの不一致: フラグメントのキーと、ヘッダーに出している要素のタグ・クラスが一致しているかを確認します。
• ブロックで作った商品一覧からの追加: 商品一覧を WooCommerce のブロックで組んでいる場合、カートへの追加の仕組みが従来と異なり、自作の表示がすぐに更新されないことがあります。その場合はミニカートブロックの利用も検討してください。
• PHPエラー: ヘッダーが途中で切れる場合は、WP_DEBUG_LOG を有効にして wp-content/debug.log を確認します。

まとめ

• ブロックテーマなら、ヘッダーのテンプレートパーツに「ミニカート」ブロックを置くだけでカート数を表示できます。
• クラシックテーマでは、WC()->cart->get_cart_contents_count() で数量の合計を取得し、子テーマの header.php で表示します。
• 「カートに追加」で数を更新するには、woocommerce_add_to_cart_fragments フィルターに要素を登録し、wc-cart-fragments スクリプトを読み込みます。
• 古い数が出るときは、ページキャッシュ、スクリプトの読み込み、セレクタの一致を順に確認します。

• WordPressのheader.phpをカスタマイズする方法
• フルサイト編集でヘッダー・フッターのテンプレートを作る方法