2026年9月8日

OceanWPでWooCommerceのカートアイコンをヘッダーに表示する方法と表示されないときの対処

テーマ・デザイン

OceanWPはWooCommerceと連携する機能を持っていて、WooCommerceを有効にすると、ヘッダーのメインメニューの末尾にカートアイコン（メニューカート）が自動で追加されます。アイコンが出ない場合は、メインメニューの割り当て、カスタマイザーのメニューカート設定、ヘッダーのスタイルのどれかが原因であることがほとんどです。この記事では、標準機能で表示・調整する手順、表示されないときの確認点、カスタムヘッダーなど標準機能が使えない場所にショートコードで追加する方法を説明します。

前提：OceanWPのヘッダーとメニューカートの関係

OceanWPはカスタマイザーで設定するクラシックテーマです。ヘッダーは「ヘッダーのスタイル」を選び、そこにロゴとメインメニューを配置する作りになっています。メニューカートは独立した部品ではなく、「メインメニューに割り当てたメニューの末尾に追加される項目」として出力されます。

この仕組みから、次の2点が分かります。

メインメニューの位置にメニューが割り当てられていないと、カートアイコンも出ない
ヘッダーを独自テンプレート（カスタムヘッダー）で作っている場合は、OceanWP標準のメインメニューが出力されないため、カートアイコンも自動では入らない

作業でテーマのファイルを触る場合は、OceanWP公式の子テーマを使い、親テーマは直接編集しないでください。functions.php の編集前にはファイルのバックアップを取っておきます。

手順1：標準のメニューカートを表示する

WooCommerceが有効になっていることを確認する
「外観」→「メニュー」の「位置の管理」（またはカスタマイザーの「メニュー」）で、メインメニューの位置にメニューを割り当てる
「外観」→「カスタマイズ」を開き、「WooCommerce」の中にある「メニューカート」の設定に進む
表示する端末（デスクトップ・モバイルなど）や、カートの表示形式（アイコンにカーソルを合わせると開くドロップダウンか、別の形式か）、件数や合計金額を一緒に表示するかなどを選ぶ
「公開」を押して保存し、フロントで商品をカートに入れてアイコンと件数を確認する

アイコンの種類を変える項目や、カートが空のときの表示を切り替える項目もあります。ここでの説明は（2026年10月現在）の構成に基づいています。項目名と選択肢はOceanWPのバージョンによって変わることがあるため、画面上の表示に合わせて読み替えてください。

手順2：表示されないときの確認点

メインメニューが割り当てられていない

最も多い原因です。メニューを作っただけで「位置」を割り当てていない、トップバーのメニューにだけ割り当てている、という状態だとメインメニューの末尾にカートは付きません。WP-CLIが使えるなら、どの位置に何が割り当てられているかを一覧で確認できます。

wp menu location list

表示する端末の設定でオフになっている

メニューカートの設定で「デスクトップのみ」などを選んでいると、スマートフォン表示では出ません。モバイルではOceanWPのモバイルメニュー（ハンバーガーメニュー）側の表示になるため、モバイルのメニュースタイル設定と合わせて確認します。

カスタムヘッダーを使っている

ヘッダーのスタイルで「カスタムヘッダー」を選び、Elementorなどで作ったテンプレートをヘッダーにしている場合は、標準のメニューカートは出力されません。この場合は、次の手順3のショートコードをテンプレート内に配置します。

件数が更新されない・古い件数が出る

商品をカートに入れても件数が変わらない場合は、ページキャッシュが原因です。WooCommerceは「カートフラグメント」という仕組みで、ページを表示した後にカート部分だけをAJAXで最新の内容に差し替えます。キャッシュプラグインの設定で、カート・チェックアウト・マイアカウントのページと、WooCommerceのカート関連のCookieがある訪問者をキャッシュ対象から外しているかを確認します。

手順3：ショートコードでカートアイコンを好きな場所に追加する

カスタムヘッダーやトップバーなど、標準のメニューカートが使えない場所に置く場合は、子テーマの functions.php に、件数付きのカートリンクを出すショートコードを作ります。

<?php
/**
 * ヘッダー用カートリンクの HTML を返す
 */
function my_header_cart_markup() {
	$count = WC()->cart ? WC()->cart->get_cart_contents_count() : 0;
	$icon  = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/><path d="M2 3h3l2.5 12h11l2-8H6.2"/></svg>';

	return sprintf(
		'<a class="my-header-cart" href="%1$s" aria-label="%2$s">%3$s<span class="my-header-cart__count">%4$s</span></a>',
		esc_url( wc_get_cart_url() ),
		/* translators: %d: カート内の商品数 */
		esc_attr( sprintf( __( 'カート（%d点）', 'my-child-theme' ), $count ) ),
		$icon,
		esc_html( number_format_i18n( $count ) )
	);
}

/**
 * [my_header_cart] ショートコード
 */
add_shortcode( 'my_header_cart', function () {
	if ( ! function_exists( 'WC' ) || is_admin() ) {
		return '';
	}
	// カート件数を AJAX で更新するスクリプトを読み込む
	wp_enqueue_script( 'wc-cart-fragments' );
	return my_header_cart_markup();
} );

/**
 * カートに商品が追加されたとき、リンク部分を最新の件数に差し替える
 */
add_filter( 'woocommerce_add_to_cart_fragments', function ( $fragments ) {
	$fragments['a.my-header-cart'] = my_header_cart_markup();
	return $fragments;
} );

ポイントは3つあります。

**woocommerce_add_to_cart_fragments フィルター**：WooCommerceのカートフラグメントは、ここで返したセレクターに一致する要素を、新しいHTMLで置き換えます。これがないと、カートに商品を追加しても件数がページの再読み込みまで変わりません
**wc-cart-fragments の読み込み**：WooCommerceの比較的新しいバージョンでは、このスクリプトが全ページで自動的には読み込まれなくなっています。ショートコードを表示するときに明示的に読み込むことで、件数の更新が動くようにしています
エスケープ：URLは esc_url()、属性値は esc_attr()、件数は esc_html() を通してから出力しています

作成したショートコードは、Elementorのテンプレートなら「ショートコード」ウィジェット、ブロックエディターで作ったテンプレートなら「ショートコード」ブロックに [my_header_cart] と入力して配置します。

メニューの末尾に追加したい場合

トップバーのメニューなど、メインメニュー以外のメニューの末尾に入れたい場合は、WordPressコアの wp_nav_menu_items フィルターを使えます。

<?php
add_filter( 'wp_nav_menu_items', function ( $items, $args ) {
	// 'topbar_menu' はメニューの位置の登録名。wp menu location list で確認して置き換える
	if ( 'topbar_menu' !== $args->theme_location || ! function_exists( 'WC' ) ) {
		return $items;
	}
	wp_enqueue_script( 'wc-cart-fragments' );
	return $items . '<li class="menu-item my-header-cart-item">' . my_header_cart_markup() . '</li>';
}, 10, 2 );

メニューの位置の登録名はテーマのバージョンによって異なる可能性があるため、wp menu location list の結果で確認してから書き換えてください。標準のメニューカートと独自のカートリンクを両方表示すると、アイコンが2つ並ぶので、どちらか一方にします。

見た目を整えるCSS

ショートコードで追加したリンクは、テーマのスタイルが当たらないので、子テーマの style.css か追加CSSで整えます。

.my-header-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: inherit;
}

.my-header-cart__count {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background-color: #13aff0;
	color: #ffffff;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}

件数バッジの色は、サイトのアクセントカラーに合わせて変更してください。

確認方法

キャッシュプラグインやCDNのキャッシュを削除する
ログアウトした状態（シークレットウィンドウ）で商品をカートに入れ、ページを再読み込みせずに件数が変わるかを見る
カートから商品を削除した後、別のページに移動して件数が正しいかを見る
スマートフォン幅でも、アイコンの位置と件数バッジが崩れていないかを確認する
アイコンのリンク先がカートページになっているか、クリックして確かめる

まとめ

OceanWPでは、WooCommerceを有効にするとメインメニューの末尾にメニューカートが自動で付く。表示形式などはカスタマイザーの「WooCommerce」→「メニューカート」で調整する
表示されないときは、メインメニューの位置の割り当て、表示する端末の設定、カスタムヘッダーの使用を確認する
カスタムヘッダーなど標準機能が使えない場所には、子テーマでショートコードを作り、woocommerce_add_to_cart_fragments で件数を自動更新させる
件数が古いままならページキャッシュの除外設定を見直す
テーマのファイルは子テーマで編集し、作業前にバックアップを取る