メニューバーにWooCommerceショッピングカートアイコンを追加したいですか？
メニューにWooCommerceショッピングカートアイコンを追加すると、特にライブアイテム数が表示される場合、買い物客はカートを確認してより速くチェックアウトできるようになります。これは、ショッピング体験を向上させ、カート放棄を減らす最も簡単な方法の1つです。
オンラインストアを運営する場合、最高のユーザーエクスペリエンスを作成することが重要です。買い物客のニーズを満たしていない場合、より優れた、よりユーザーフレンドリーな代替手段のためにあなたのサイトを離れるでしょう。
ストアでの買い物を容易にするために、アイテム数が表示されるカートアイコンをWooCommerceメニューに追加できます。そうすれば、買い物客はカートの内容を確認し、いつでもチェックアウトできます。
この記事では、メニューにWooCommerceショッピングカートアイコンをステップバイステップで追加する方法を説明します。
Amazonで買い物をするときに、このようなカートアイコンを見たことがあるでしょう：
異なる商品ページをクリックしても、アイコンはナビゲーションメニューに残ります。
メニューにWooCommerceショッピングカートアイコンを追加する理由
ナビゲーションメニューにカート数アイコンを追加する主な利点は、買い物客がカートに追加した商品の数を確認できることです。さらに、チェックアウトページに進む前に、商品の価格の目安を知ることができます。
さらに、ショッピングカートメニューアイコンは、ユーザーがカートページにすばやく簡単にアクセスできる方法を提供します。その結果、チェックアウトプロセスがスムーズになり、訪問者がショッピングカートを放棄する可能性が低くなります。
WordPressメニューにWooCommerceカートアイコンを追加する方法（アイテム数付き）
WooCommerceにはデフォルトでメニュー用のショッピングカートアイコンが含まれていません。代わりに、WooCommerceプラグインをインストールするか、その機能をゼロからコーディングする必要があります。
コーディングが怖い場合は、心配しないでください。メニューにWooCommerceショッピングカートアイコンを追加するための、コード不要の非常に簡単な2つの方法を次に示します。
方法1：SeedProdを使用してWooCommerceカートアイコンをメニューに追加する（コード不要）
最初のアプローチは、WooCommerceストアをカスタマイズするための強力なWordPressプラグインを使用することです。
SeedProdは、100万人以上のユーザーを持つWordPress向けの最高のウェブサイトビルダーです。コードなしでカスタムWordPressテーマ、WooCommerceウェブサイト、およびコンバージョン率の高いランディングページを作成できます。
200以上の既製のテンプレートがあり、簡単に始めることができます。ビジュアルドラッグアンドドロップビルダーとレスポンシブブロックおよびセクションを使用して、任意のレイアウトをカスタマイズできます。
特に注目すべきは、専用のWooCommerceブロックです。これらを使用すると、数回クリックするだけでWooCommerceサイトのすべての部分をカスタマイズできます。
SeedProd を使用してメニューに WooCommerce ショッピングカートアイコンを追加する手順は以下のとおりです。
ステップ 1. SeedProd ウェブサイトビルダーをインストールする
まず、SeedProd ウェブサイトビルダープラグインのコピーをダウンロードします。
注意: SeedProd の無料版も使用できます。ただし、ここでは必要な WooCommerce 機能のために SeedProd Elite プラン を使用します。
SeedProd をダウンロードしたら、WordPress ウェブサイトにプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、このガイドに従って WordPress プラグインをインストール してください。
次に、WordPress 管理メニューから SeedProd » 設定 に移動します。ここで SeedProd ライセンスキーを入力し、Pro プラグインの機能をアンロックできます。
ライセンスキーは、SeedProd ウェブサイトにアクセスして アカウントにログイン することで確認できます。そこから、「ダウンロード」セクションでライセンスキーをコピーします。
次に、キーをテキストフィールドに貼り付け、キーを確認 ボタンをクリックします。
ステップ 2. 新しい WooCommerce テーマを作成する
次のステップは、SeedProd » テーマビルダー ページに移動することです。ここで、WooCommerce ウェブサイトの新しいカスタムテーマを作成できます。
このオプションをお勧めするのは、既存の WordPress テーマ を、ドラッグアンドドロップで簡単にカスタマイズできる、高速で軽量なテーマに置き換えることができるからです。また、個別のチャイルドテーマを作成したり、追加の WordPress プラグインをインストールしたりする必要もなくなります。
SeedProd のテーマビルダーでテーマを作成するには、2 つの方法があります。
- プリビルドテーマ: すぐに使える WooCommerce テーマをインポートすると、 オンラインストア に必要なすべてのページが自動的に作成されます。
- 個別のテーマパーツ: WooCommerce ストアのさまざまなパーツを個別に構築します。
このガイドでは、プリビルドテーマの方法を使用します。これにより、すべてが自動的に行われます。テーマボタンをクリックして、既製の WordPress および WooCommerce テーマのリストを表示します。
各テーマは 100% モバイルフレンドリーで、SeedProd のドラッグアンドドロップページビルダーで簡単に編集できます。
いずれかのテーマの上にマウスカーソルを合わせ、チェックマークアイコンをクリックしてテーマビルダーにインポートします。
このチュートリアルでは、Sportswear Store テーマを使用します。
テーマをインポートすると、WooCommerce ウェブサイトのデザインを構成するすべてのテンプレートが表示されます。SeedProd のページビルダーを使用して、各テンプレートを個別にカスタマイズし、サイトのニーズに合わせて調整できます。
次に、「ヘッダーナビゲーション」テンプレートをカスタマイズする方法を説明します。
ステップ 3. WooCommerce ナビゲーションメニューをカスタマイズする
SeedProd の多くのプリメイドテーマには、ナビゲーションバーに WooCommerce ショッピングカートアイコンが自動的に付属しています。ヘッダーナビゲーションテンプレートを開いて、その仕組みを確認しましょう。
テンプレートリストで「ヘッダーナビゲーション」テンプレートを見つけ、デザインを編集 リンクをクリックしてビジュアルページビルダーで開きます。
右側には、ページを開いたときにヘッダーレイアウトが表示されます。左側には、デザインに追加できるブロックとセクションがあります。
ブロックをページに追加するには、左側からドラッグしてデザインにドロップします。
ご覧のとおり、ヘッダーにはすでに3つのブロックがあります。
- ウェブサイトのロゴの画像
- WordPressナビゲーションメニュー
- メニューカートブロック
メニューカートブロックには、カートアイコン、カート内のアイテム数、小計が表示されます。左側のメニューカート設定パネルで、外観と機能を変更できます。
たとえば、カートが空の場合にカートを非表示にしたり、小計を表示または非表示にしたり、カートの配置を変更したりできます。
詳細タブをクリックすると、さらに設定を見つけることができます。たとえば、カートとカートバッジの色を変更したり、間隔を調整したり、モバイルまたはデスクトップデバイスでバッジを非表示にしたりすることもできます。
メニューカートアイコンの外観に満足したら、緑色の保存ボタンをクリックします。
ステップ4. WooCommerceテーマのカスタマイズ
次に、WooCommerceテーマを構成する他のテンプレートをカスタマイズできます。プロセスは前のステップと同様ですが、ヘルプが必要な場合は、次のステップバイステップの手順を参照してください。
ステップ5. SeedProd WooCommerceテーマの有効化
SeedProdでWooCommerceテーマをカスタマイズしたら、ウェブサイトで公開する準備が整いました。
これを行うには、SeedProd » テーマビルダーに移動します。次に、右上隅にある「SeedProdテーマを有効化」トグルをはいの位置に切り替えます。
これで、メニューカートアイコンをプレビューして、どのように見えるかを確認できます。
買い物客がメニューカートアイコンをクリックすると、ショッピングカートページに移動します。SeedProdを使用してWooCommerceショッピングカートをカスタマイズすることもできます。
これは、SeedProdで作成したAmazonのメニューカートの例です。
方法2：無料プラグインでWooCommerceメニューカートアイコンを追加する
次に、既存のWordPressテーマを変更したくない場合に利用できるソリューションです。代わりに、無料のWooCommerceプラグインを使用して、wpナビゲーションメニューアイテムにアイコンを追加できます。
使用するプラグインはWooCommerce Menu Cartと呼ばれます。WooCommerce、Easy Digital Downloads、およびその他の多くのWordPress eコマースプラットフォームと連携し、セットアップにはわずか数分しかかかりません。
ステップ1. WooCommerceメニューカートプラグインのインストール
まず、WordPressダッシュボードからプラグイン » 新規追加に移動し、検索ボックスに「WooCommerce Menu Cart」と入力します。
次に、インストールボタンをクリックし、有効化をクリックしてプラグインを有効にします。
ステップ2. WooCommerceショッピングカートアイコンの設定
プラグインをインストールしたら、WordPress管理パネルからWooCommerce » メニューカート設定に移動します。このページでは、eコマースプラットフォームの選択、カートアイコンを表示するメニューの選択、カートアイコンの選択などを行うことができます。
カートアイコンの設定を行い、変更を保存ボタンをクリックしてください。
これで、サイトにアクセスしてWooCommerceショッピングカートアイコンメニューを確認できます。
WooCommerceカートアイコンのメニューに関するFAQ
メニューにWooCommerceショッピングカートアイコンを追加すると、訪問者がチェックアウトしやすくなり、完了する販売数が増えます。
SeedProdのドラッグ＆ドロップビルダーを使用する場合でも、無料プラグインを使用する場合でも、コードや複雑な設定なしで機能させることができます。数回クリックするだけで完了します。
次に、WooCommerceストアのカスタマイズを続けるために、これらのガイドを確認してください。
- WooCommerce追加情報タブをカスタマイズする方法
- WooCommerceにカート表示ボタンを追加する方法
- WooCommerceでショップページタイトルを変更する方法
- WooCommerceで魅力的な商品画像ギャラリーを作成する方法
- WooCommerceの商品ページに星評価を追加する方法
- WooCommerceで関連商品をどのように表示するか
- WooCommerceで商品カテゴリとタグを表示する方法
- WooCommerceで商品概要を取得して表示する方法
- WooCommerceのカート表示が機能しない問題を修正する方法
- WooCommerceで在庫切れの商品を非表示にする方法
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
