WooCommerceストアを設定したものの、買い物客はメニューからカートを確認できません。商品を1つ追加しても、チェックアウトする前にカートへのリンクを探さなければなりません。
WooCommerceショッピングカートアイコンがあれば、それが解決します。サイトヘッダーに、買い物客が商品を追加するたびに更新されるライブアイテム数が表示されるため、チェックアウトへの道は常にワンクリックでアクセスできます。
このガイドでは、WooCommerceショッピングカートアイコンをメニューに追加する2つのコード不要の方法、見た目をカスタマイズする方法、そして表示されないアイコンを修正する方法を説明します。
メニューカートアイコンとは（そしてなぜ役立つのか）
メニューカートアイコンとは、プライマリWooCommerceナビゲーションメニューに配置され、買い物客のカート内のアイテム数を示す小さなショッピングカートです。買い物が商品ページを閲覧している間も、追加または削除するたびにカウントが更新され、アイコンはメニューに残ります。
Amazonで買い物をするときに、このようなカートアイコンを見たことがあるでしょう：
ストアに1つ追加すると、次の2つの効果があります：
- 買い物客にカートの中身を表示：アイテム数と小計は、チェックアウトページに到達する前に合計金額を示します。
- チェックアウトを迅速化：ワンクリックでカートにアクセスできるため、プロセスがスムーズになり、訪問者がカートを放棄する可能性が低くなります。
WordPressメニューにWooCommerceカートアイコンを追加する方法（アイテム数付き）
WooCommerceには、デフォルトでメニュー用のショッピングカートアイコンは含まれていません。WooCommerceプラグインをインストールするか、自分でコードを追加する必要があります。
ここでは、それを実行するための2つのコード不要の方法を紹介します。最初の方法はSeedProdを使用してアイコンをテーマヘッダーに組み込みます。2番目の方法は、現在のテーマを変更したくない場合に無料プラグインを使用します。
方法1：SeedProdを使用してWooCommerceカートアイコンを追加する（コード不要）
SeedProdは、WordPress用のドラッグアンドドロップウェブサイトビルダーであり、コードに触れることなくカスタムWooCommerceストアを構築できます。その専用WooCommerceブロックには、ヘッダーにカートアイコンを追加するためのメニューカートブロックが含まれています。
私は自分のサイトを構築するためにSeedProdを使用しており、メニューカートブロックはここで私が頼りにしている部分です。なぜなら、アイテム数、小計、スタイリングをすべて1か所で処理してくれるからです。300以上のテンプレートから始められるので、午後のうちにヘッダーを構築できます。
SeedProdを使用してWooCommerceショッピングカートアイコンをメニューに追加するには、以下の手順に従ってください。
ステップ1：SeedProdのインストール
まず、SeedProd ウェブサイトビルダープラグインのコピーをダウンロードします。
SeedProdをダウンロードしたら、WordPressウェブサイトにプラグインをインストールして有効化します。ヘルプが必要な場合は、このガイドに従ってWordPressプラグインをインストールしてください。
次に、WordPress管理メニューからSeedProd » Settingsに移動します。ここでSeedProdライセンスキーを入力して、Pro機能のロックを解除します。
ライセンスキーは、SeedProdのウェブサイトにアクセスし、アカウントにログインすることで見つけることができます。そこから、「ダウンロード」セクションでライセンスキーをコピーしてください。
次に、キーをテキストフィールドに貼り付け、ライセンスキー認証ボタンをクリックします。
ステップ 2. 新しい WooCommerce テーマを作成する
次に、SeedProd » テーマビルダーページに移動します。ここで、WooCommerceウェブサイト用のカスタムテーマを作成します。
このオプションをお勧めするのは、既存のWordPressテーマを、ドラッグ＆ドロップで編集できる、高速で軽量なものに置き換えることができるからです。また、カートアイコンに必要なメニューカートブロックも提供されます。
SeedProdのテーマビルダーでテーマを作成するには、2つの方法があります。
- 既製テーマ：すぐに使えるWooCommerceテーマをインポートすると、オンラインストアに必要なすべてのページが作成されます。
- 個別のテーマパーツ：WooCommerceストアの各部分を、一度に1つずつ構築します。
ここでは既製テーマの方法を使用します。これは、セットアップを自動で行ってくれるからです。テーマボタンをクリックして、既製のWordPressテーマキットのリストを表示します。
各テーマはモバイルフレンドリーで、SeedProdのドラッグ＆ドロップページビルダーで簡単に編集できます。
いずれかのテーマにカーソルを合わせ、チェックマークアイコンをクリックしてインポートします。
このチュートリアルでは、スポーツウェアストアのテーマを使用します。
インポート後、WooCommerceウェブサイトのデザインを構成するすべてのテンプレートが表示されます。それぞれをストアに合わせて編集できます。
次に、「ヘッダーナビ」テンプレート、つまりカートアイコンがある場所をカスタマイズする方法を説明します。
ステップ 3. WooCommerce ナビゲーションメニューをカスタマイズする
SeedProdの既製テーマの多くには、すでにナビゲーションバーにWooCommerceショッピングカートアイコンが含まれています。ヘッダーナビゲーションテンプレートを開いて確認し、調整してください。
テンプレートリストで「ヘッダーナビ」テンプレートを見つけ、デザインを編集リンクをクリックしてビジュアルビルダーで開きます。
ヘッダーのレイアウトが右側に表示されます。左側には、追加できるブロックとセクションがあります。
ブロックを追加するには、左側からドラッグしてデザインにドロップします。
ヘッダーにはすでに3つのブロックがあります。
- ウェブサイトのロゴの画像
- WordPressナビゲーションメニュー
- メニューカートブロック
メニューカートブロックは、カートアイコン、アイテム数、小計を表示します。これをクリックするとメニューカートの設定が開かれ、表示方法や動作を制御できます。
設定パネルから、次のことができます。
- カートが空の場合は非表示：買い物客が商品を追加した場合にのみアイコンを表示します。
- 小計の表示/非表示：カウントの横に合計金額を表示するか、カウントのみを表示します。
- 配置の設定：ヘッダー内のカートを左、中央、または右に配置します。
- 色、間隔、モバイル表示の調整：詳細タブを開いて、カートとバッジの色、間隔、およびバッジがモバイルで表示されるかどうかを変更します。
カートアイコンの外観に満足したら、緑色の保存ボタンをクリックします。
ステップ4. WooCommerceテーマのカスタマイズ
これで、WooCommerceテーマの他のテンプレートを編集できます。手順はヘッダーと同じです。ヘルプが必要な場合は、次のガイドを参照してください。
ステップ5. SeedProd WooCommerceテーマを有効化する
テーマをカスタマイズしたら、公開する準備が整います。
SeedProd » Theme Builder に移動します。右上隅にある「SeedProdテーマを有効化」トグルを はい の位置に切り替えます。
これで、メニューのカートアイコンをプレビューして、ライブストアでどのように表示されるかを確認できます。
買い物客がカートアイコンをクリックすると、カートページに直接移動します。SeedProd を使用して WooCommerce ショッピングカートをカスタマイズ することもできます。
これは、SeedProd で作成した Amazon スタイルのメニューカートの例です。
カートアイコンをカスタマイズする方法
デフォルトのカートアイコンでも機能しますが、ほとんどのストアではブランドに合わせてカスタマイズしたいと考えています。SeedProd メニューカートブロックの高度な設定で変更できること、および別のテーマを使用している場合の対処法を以下に示します。
- アイテム数バッジの表示または非表示： アイコンの小さな数字は常に表示しておくことも、カートにアイテムが追加されたときにのみ表示することもできます。
- 色とサイズの変更： アイコンとバッジをブランドカラーに合わせ、高度なタブでサイズを拡大または縮小します。
- アイコンを別のテーマに置き換える： SeedProd を使用していない場合、ほとんどのカートアイコンプラグインでは、設定で別のアイコンを選択したり、「カート」や「バスケット」などのテキストに置き換えたりできます。
自分のストアでこれを設定したとき、カートにアイテムがあるまでバッジを非表示にすることで、ヘッダーがすっきりし、重要なときにカウントを見失うこともありませんでした。
方法2：無料プラグインでWooCommerceメニューカートアイコンを追加する
現在の WordPress テーマを変更したくない場合は、代わりに無料のプラグインを使用してください。テーマファイルを変更せずに、既存のメニューにカートアイコンを追加します。
使用するプラグインは WooCommerce Menu Cart と呼ばれます。WooCommerce、Easy Digital Downloads、およびその他の多くの WordPress eコマースプラットフォームで動作します。
ステップ 1. WooCommerce Menu Cart プラグインのインストール
まず、WordPress ダッシュボードから プラグイン » 新規追加 に移動し、検索ボックスに「WooCommerce Menu Cart」と入力します。
次に、インストール ボタンをクリックし、次に 有効化 をクリックしてプラグインをライブにします。
ステップ 2. ショッピングカートアイコンの設定
プラグインをインストールしたら、WordPress 管理パネルから WooCommerce » Menu Cart Setup に移動します。ここで eコマースプラットフォームを選択し、カートアイコンを表示するメニューを選択します。
カートアイコンの設定を構成し、変更を保存 ボタンをクリックします。
これでサイトにアクセスして、メニューに WooCommerce ショッピングカートアイコンを表示します。
WooCommerce カートアイコンが表示されない理由
カートアイコンを追加したのにメニューに表示されない場合、原因は通常、いくつかの一般的な問題のいずれかです。他の設定を変更する前に、これらを確認してください。
- テーマにネイティブのカートアイコンがない： ほとんどの標準的な WordPress テーマは WooCommerce 用にカートアイコンを追加しないため、そもそも SeedProd またはプラグインが必要になります。
- カートが空の場合に非表示に設定されている： 「空の場合に非表示」をオンにした場合、アイコンはカートに商品を追加した後にのみ表示されます。アイテムを追加して更新して確認してください。
- キャッシュが古いバージョンを表示しています：キャッシュプラグインまたはホストのキャッシュが、アイコンを追加する前のページを提供している可能性があります。キャッシュをクリアして再読み込みしてください。
- ブロックテーマを使用しています：テーマがWordPressサイトエディターを使用している場合、プラグインなしでヘッダーテンプレートにネイティブのカートまたはミニカートブロックを直接追加できます。外観 » エディターに移動し、ヘッダーテンプレートを開いて、ミニカートブロックを追加してください。
それでもアイコンが表示されない場合は、カートリンク自体が機能しているかを確認する価値があります。カートページが壊れていると、アイコンが表示されない可能性があります。
WooCommerceカートアイコンのメニューに関するFAQ
WordPressメニューにカートアイコンを追加するにはどうすればよいですか？
WordPressとWooCommerceにはデフォルトでカートアイコンが含まれていないため、プラグインまたはウェブサイトビルダーで追加します。SeedProdを使用すると、メニューカートブロックをヘッダーテンプレートにドロップします。
WooCommerce Menu Cartのような無料プラグインを使用すると、インストールして、アイコンをどのメニューにアタッチするかを選択します。どちらの方法もコード不要です。
WooCommerceでカートアイコンをヘッダーに追加するにはどうすればよいですか？
カートアイコンはページコンテンツではなく、ヘッダーテンプレートに追加してください。SeedProdのテーマビルダーでは、「ヘッダーナビゲーション」テンプレートを編集し、メニューカートブロックをドロップします。
ブロックテーマを使用している場合は、サイトエディターを開き、ヘッダーテンプレートを編集して、同じ場所にミニカートブロックを追加してください。
WooCommerceのカートアイコンがメニューに表示されないのはなぜですか？
最も一般的な理由は、カートが空の場合に非表示になるように設定されているため、買い物客が商品を追加した後にのみ表示されることです。キャッシュがページの古いバージョンを提供している可能性もあるため、キャッシュをクリアして再読み込みしてください。
どちらの方法でも解決しない場合は、テーマがネイティブのカートアイコンをサポートしていない可能性があります。その場合は、SeedProdまたはプラグインを追加する必要があります。
WooCommerceカートアイコンにアイテム数を表示するにはどうすればよいですか？
アイテム数はカートアイコンの小さなバッジであり、ほとんどのツールはデフォルトで表示します。SeedProdのメニューカート設定では、買い物客が商品を追加するとカウントが自動的に更新されます。
表示されない場合は、詳細設定タブを開き、モバイルを含め、バッジが非表示になっていないことを確認してください。
今すぐWooCommerceカートアイコンを追加しましょう
ライブアイテムカウント付きのカートアイコンは、買い物客にチェックアウトへの明確な道筋を提供し、より多くの販売完了につながります。SeedProdのドラッグアンドドロップビルダーを使用すれば、コード不要で今すぐ作成できます。
SeedProdで始めましょう。数分でWooCommerceショッピングカートアイコンを追加できます。
次に、WooCommerceストアのカスタマイズを続けるために、これらのガイドを確認してください。
- WooCommerce追加情報タブをカスタマイズする方法
- WooCommerceで「カートを見る」ボタンを追加する方法
- WooCommerceでショップページのタイトルを変更する方法
- WooCommerceで素晴らしい商品画像ギャラリーを作成する方法
- WooCommerce商品ページに星評価を追加する方法
- WooCommerceで関連商品をどのように表示するか
- WooCommerceで商品カテゴリとタグを表示する方法
- WooCommerceで商品概要を取得して表示する方法
- WooCommerceで在庫切れの商品を非表示にする方法
お読みいただきありがとうございます！ご意見をお聞かせいただければ幸いですので、ビジネスを成長させるための役立つアドバイスやコンテンツについては、お気軽にYouTube、X、Facebookで会話にご参加ください。
