メニューバーにWooCommerceのショッピングカートアイコンを追加したいですか？
WooCommerceのショッピングカートアイコンをメニューに追加することで、買い物客はカートを表示し、より早くチェックアウトすることができます。ショッピング体験を向上させ、カート放棄を減らす最も簡単な方法の一つです。
オンラインストアを運営する上で、最高のユーザーエクスペリエンスを生み出すことは非常に重要です。買い物客のニーズに応えられていなければ、より使い勝手の良いサイトを求めて離れていってしまうでしょう。
お店でのお買い物をより簡単にするために、WooCommerceのメニューにカートアイコンを追加し、商品数を表示することができます。そうすることで、買い物客はカートの中身を確認し、いつでも好きな時にチェックアウトすることができます。
この記事では、メニューにWooCommerceのショッピングカートアイコンを追加する方法をステップバイステップで紹介します。
アマゾンで買い物をするとき、このようなカートアイコンを見たことがあるだろう：
異なる商品ページをクリックしても、アイコンはナビゲーションメニューに表示されたままです。
メニューにWooCommerceショッピングカートアイコンを追加する理由
ナビゲーションメニューにカート数アイコンを追加する主な利点は、買い物客がカートに入れた商品の数を確認しやすくなることです。さらに、チェックアウトページに向かう前に、いくらかかるかを知ることができます。
さらに、ショッピングカートのメニューアイコンは、ユーザーがカートページに到達するための迅速かつ簡単な方法を提供します。その結果、チェックアウトプロセスがスムーズになり、訪問者がショッピングカートを放棄しない可能性が高くなります。
WordPressのメニューにWooCommerceのカートアイコンを追加する方法（アイテム数付き）
WooCommerceにはデフォルトでメニュー用のショッピングカートアイコンが含まれていません。代わりに、WooCommerceプラグインをインストールするか、ゼロからその機能をコーディングする必要があります。
コードを書くのが怖いという方もご安心ください。WooCommerceのショッピングカートアイコンをメニューに追加する超簡単な方法を2つご紹介します。
方法1：SeedProdを使用してメニューにWooCommerceカートアイコンを追加する（コードなし）
最初の方法は、強力なWordPressプラグインを使用してWooCommerceストアをカスタマイズすることです。
SeedProdは、100万人以上のユーザーを持つWordPressのための最高のウェブサイトビルダーです。カスタムWordPressテーマ、WooCommerceウェブサイト、高コンバージョンのランディングページをコードなしで作成できます。
200種類以上のテンプレートが用意されているので、簡単に使い始めることができます。ビジュアルなドラッグ＆ドロップビルダーとレスポンシブなブロックとセクションで、どんなレイアウトもカスタマイズできます。
特に注目すべきは、専用のWooCommerceブロックです。数回クリックするだけで、WooCommerceサイトのあらゆる部分をカスタマイズすることができます。
SeedProdを使用してメニューにWooCommerceショッピングカートアイコンを追加するには、以下の手順に従ってください。
ステップ1.SeedProdウェブサイトビルダーをインストールする
まず、SeedProdウェブサイト・ビルダー・プラグインをダウンロードしてください。
注：SeedProdには無料版があります。しかし、私たちが必要とするWooCommerceの機能にはSeedProd Eliteプランを使用します。
SeedProdをダウンロードしたら、WordPressウェブサイトにプラグインをインストールして有効化する必要があります。WordPressプラグインのインストール方法については、こちらのガイドをご参照ください。
次に、WordPressの管理メニューからSeedProd " Settingsに進みます。ここでSeedProdのライセンスキーを入力し、Proプラグインの機能をアンロックします。
ライセンスキーは、SeedProdのウェブサイトにアクセスし、アカウントにログインすることで確認できます。そこから、「ダウンロード」セクションからライセンスキーをコピーしてください。
テキスト・フィールドにキーを貼り付け、Verify Keyボタンをクリックする。
ステップ2.新しいWooCommerceテーマを作成する
次のステップは、SeedProd " Theme Builder ページに移動することです。ここでWooCommerceウェブサイト用の新しいカスタムテーマを作成することができます。
このオプションをお勧めする理由は、既存のWordPressテーマを、ドラッグ＆ドロップで簡単にカスタマイズできる高速で軽量なテーマに置き換えることができるからです。また、別の子テーマを作成したり、余分なWordPressプラグインをインストールしたりする必要もありません。
SeedProdのテーマビルダーでテーマを作成するには2つの方法があります：
- 既製のテーマ： オンラインストアに必要なすべてのページを自動的に作成する既製のWooCommerceテーマをインポートします。
- 個別のテーマパーツ：WooCommerceストアのさまざまなパーツを個別に構築できます。
このガイドでは、すべて自動で行われるビルド済みテーマを使用します。テーマ」 ボタンをクリックすると、WordPressとWooCommerceのテーマ一覧が表示されます。
各テーマは100％モバイルフレンドリーで、SeedProdのドラッグ＆ドロップ式ページビルダーで簡単に編集できます。
任意のテーマにマウスカーソルを合わせ、チェックマークアイコンをクリックすると、テーマビルダーにインポートされます。
このチュートリアルでは、スポーツウェア・ストアのテーマを使用します。
テーマをインポートすると、WooCommerceウェブサイトのデザインを構成するすべてのテンプレートが表示されます。SeedProdのページビルダーを使用して、サイトのニーズに合わせて各テンプレートを個別にカスタマイズすることができます。
次に、「ヘッダーナビ」テンプレートのカスタマイズ方法をご紹介します。
ステップ3.WooCommerceナビゲーションメニューをカスタマイズする
SeedProdの多くの既成テーマには、ナビゲーションバーにWooCommerceショッピングカートのアイコンが自動的に付いています。ヘッダーナビゲーションテンプレートを開いて、どのように機能するか見てみましょう。
テンプレートリストから「Header nav」テンプレートを探し、「Edit Design」リンクをクリックしてビジュアルページビルダーで開きます。
ページを開くと、右側にヘッダーレイアウトが表示されます。左側には、デザインに追加できるブロックとセクションがあります。
ページにブロックを追加するには、左からドラッグしてデザインにドロップします。
ご覧のように、ヘッダーにはすでに3つのブロックがある：
- ウェブサイトロゴ用画像
- ワードプレスのナビゲーションメニュー
- メニューカートブロック
メニューカートブロックには、カートアイコン、カート内の商品数、小計が表示されます。左側のメニューカート設定パネルで見た目や機能を変更することができます。
例えば、カートが空になるとカートを非表示にしたり、小計を表示したり非表示にしたり、カートの配置を変更したりできます。
詳細設定]タブをクリックすると、さらに詳細な設定が可能です。例えば、カートとカートバッジの色を変更したり、間隔を調整したり、モバイルデバイスやデスクトップデバイスでバッジを非表示にすることもできます。
メニューカートアイコンの見た目が気に入ったら、緑色の保存ボタンをクリックします。
ステップ4.WooCommerceテーマをカスタマイズする
これで、WooCommerceテーマを構成する他のテンプレートをカスタマイズすることができます。手順は前のステップと似ていますが、助けが必要な場合は、ここにステップバイステップの説明があります：
ステップ5.SeedProd WooCommerceテーマを有効にする
SeedProdでWooCommerceテーマをカスタマイズした後、あなたのウェブサイト上でそれをライブにする準備が整いました。
そのためには、SeedProd " Theme Builderにアクセスしてください。右上の "Enable SeedProd Theme "トグルを "Yes "にしてください。
これで、メニューカートのアイコンをプレビューして、どのように見えるかを確認することができます。
買い物客がメニューのカートアイコンをクリックすると、ショッピングカートのページに移動します。また、SeedProdでWooCommerceのショッピングカートをカスタマイズすることもできます。
こちらもSeedProdで作ったAmazonのメニューカートの例です：
方法2：無料プラグインでWooCommerceメニューカートアイコンを追加する
次に紹介するのは、既存のWordPressテーマを変更したくない場合に使えるソリューションだ。代わりに、無料のWooCommerceプラグインを使用して、wpのナビメニュー項目にアイコンを追加することができます。
今回使用するプラグインはWooCommerce Menu Cartです。このプラグインはWooCommerce、Easy Digital Downloads、その他多くのWordPress eCommerceプラットフォームで動作し、数分でセットアップが完了します。
ステップ1.WooCommerceメニューカートプラグインをインストールする
まず、WordPressのダッシュボードからプラグイン " 新規追加に進み、検索ボックスに「WooCommerce Menu Cart」と入力してください。
次に、Installボタンをクリックし、Activateをクリックしてプラグインを有効にします。
ステップ 2.WooCommerceショッピングカートアイコンを設定する
プラグインをインストールした後、WordPressの管理画面からWooCommerce " Menu Cart Setupにアクセスしてください。このページでは、eコマースプラットフォームの選択、Wooカートアイコンを表示するメニューの選択、カートアイコンの選択などを行うことができます。
カートアイコンの設定を行い、「変更を保存」ボタンをクリックします。
これであなたのサイトにアクセスし、WooCommerceショッピングカートのアイコンメニューを見ることができます。
メニューのWooCommerceカートアイコンに関するFAQ
WooCommerceのショッピングカートアイコンをメニューに追加することで、訪問者がチェックアウトしやすくなり、より多くの売上を達成することができます。
SeedProdのドラッグ＆ドロップビルダーを使っても、無料のプラグインを使っても、コードや複雑な設定は必要ありません。数回クリックするだけで完了です。
次に、WooCommerceストアをカスタマイズし続けるために、これらのガイドをチェックすることをお勧めします：
- WooCommerceの追加情報タブをカスタマイズする方法
- WooCommerceにカートを見るボタンを追加する方法
- WooCommerceでショップページのタイトルを変更する方法
- WooCommerceで美しい商品画像ギャラリーを作成する方法
- WooCommerceの商品ページに星評価を追加する方法
- WooCommerceで関連商品を表示する方法
- WooCommerceで商品カテゴリーとタグを表示する方法
- WooCommerceで商品説明を取得して表示する方法
- WooCommerceのカートが表示されない場合の対処法
- WooCommerceで在庫切れの商品を非表示にする方法
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
