【解決方法】WooCommerceのヘッダ内のカート（ミニカート/MiniCart）が正しく更新されない（反映されない）

WooCommerceで、ヘッダにミニカートが設置されていますが、Chromeベースのブラウザで、カート内に商品が追加されているのにもかかわらず、（商品を追加したのに、）金額や商品数が反映されない事象が起こっています。この問題について原因と解決方法を解説します。

原因

原因は「Chromeの実行速度が速すぎて、本来ならページレンダリング後に実行される wc_fragment_refresh イベントが、早く実行されすぎてしまう」からです。

解決方法

簡潔に答えだけ書くと、プログラミング的には、「ページ表示後、短い時間をおいて、wc_fragment_refreshをトリガーする」でOKです。すべてのページのヘッダに以下のスクリプト（Javascript）を追加すればいいです。

(function ($) {
	// *** MiniCart Bugfix *** //
	$(window).on("pageshow", function (e) {
		console.log("pageshow...");
		setTimeout(function () {
			updateWCFragmentReflesh();
		}, 500); // 少し時間をおいて実行
	});
	function updateWCFragmentReflesh() {
		console.log("wc_fragment_refresh");
		$(document.body).trigger("wc_fragment_refresh");
		setTimeout(function () {
			updateWCFragmentReflesh();
		}, 5000); // 5秒おきに更新
	}
})(jQuery);

スクリプトを追加する方法は、色々ありますので、googleとかで検索していただけたらともいます。参考：『wordpress ヘッダにjavascriptを追加 – Google 検索』

その他

もし質問などあればコメントいただけたらと思います～。

参考情報

ちなみに、このページにたどり着いた時点で説明不要かと思いますが、WooCommerceとは、WordPressをベースにしたオープンソースのeコマースプラグインです。これにより、WordPressのウェブサイトを簡単にオンラインストアに変換し、物理的なものからデジタルダウンロードまで、あらゆる種類の商品を販売することができます。フレキシブルでカスタマイズが容易なため、小規模の個人事業主から大きな企業に至るまで、幅広い用途に利用されています。また、さまざまなアドオンが提供されており、決済ゲートウェイの統合や在庫管理、注文処理、カスタマーサービスとの連携など、機能を拡張することが可能です。

上述のWordPressとは、オープンソースのコンテンツ管理システム（CMS）であり、PHPとMySQLを基盤としています。元々はブログを作成するためのプラットフォームとして開始されましたが、その柔軟性と拡張性の高さから、単なるブログを超えて、フルフレッジのウェブサイト、eコマースストア、オンラインコミュニティ、そしてメディアギャラリーなどを構築するために使用されるようになりました。

WordPressはWooCommerceのような追加プラグインによりeコマース機能を持つオンラインストアを構築できるため、世界中で最も人気のあるCMSの一つとなっています。

JavaScriptとは、ウェブページを動的に操作可能にするためのプログラミング言語です。ボタンを押すと何かが起こるような機能や、ウェブページ上のテキストを変更する機能などを作ることができます。