要約：WooCommerceにカートを見るボタンを追加する方法
WooCommerceにはデフォルトで基本的な「カートを見る」リンクが含まれています。ストアのどこにでも永続的で完全にカスタマイズされたボタンが必要な場合は、SeedProd Eliteを使用してください。
- デフォルトを確認する – WooCommerceは、追加購入通知に自動的に「カートを見る」リンクを追加します。
- SeedProd Eliteをインストールする – WooCommerceテーマビルダーが有効になります。
- WooCommerceキットを選択する – 事前に構築されたストアテーマをワンクリックでインポートします。
- ボタンを追加する – ボタンブロックを商品ページ、ストアページ、またはヘッダーにドラッグし、カートURLにリンクします。
- テーマを公開する – テーマビルダーダッシュボードからSeedProdをオンに切り替えて公開します。
プロのヒント：カスタマイズしたボタンをSeedProdの保存済みブロックとして保存すると、再構築せずにページ全体で再利用できます。
WooCommerceにカートを見るボタンを追加する方法を知りたいですか？
カートを見るボタンがあると、潜在顧客はショッピングカート内のすべてのアイテムを確認し、チェックアウトページにすばやくアクセスできます。これにより、チェックアウトプロセスでの不要なステップが排除され、コンバージョン率が向上する可能性があります。
このガイドでは、WooCommerceにカートを見るボタンをステップバイステップで追加する方法を説明します。ここでは、WordPressのビジュアルウェブサイトビルダーであるSeedProdを使用します。これにより、コードに触れることなくWooCommerceストアをカスタマイズできます。
WooCommerceにカートを見るボタンを追加する理由
WooCommerceストアにカートを見るボタンを追加することは、ストアオーナーがユーザーエクスペリエンスを向上させるための優れた方法です。顧客はアイテムを確認し、変更を加え、チェックアウトするのが簡単になります。これにより、売上と顧客満足度の向上が期待できます。
カートを見るボタンは、ショッピングカート放棄を減らすのにも効果的です。Baymard Instituteの調査によると、オンラインショッピングカートの69.57％が放棄されています。
カート放棄の一般的な理由の1つは、顧客がカートに何が入っているかを忘れてしまうことです。カートを見るボタンは、顧客がアイテムを簡単に追跡できるようにすることで、カート放棄を減らすのに役立ちます。
最終的に、オンラインストアにカートを見るボタンを追加することは、顧客エクスペリエンスを向上させ、売上を伸ばすための簡単な方法です。
デフォルトのWooCommerceの方法
WooCommerceには、基本的な「カートを見る」リンクがすでに含まれています。買い物客がカートに商品を追加すると、WooCommerceは「カートを見る」リンクを含む追加購入通知を表示します。多くのストアオーナーはすでにこれを持っており、それに気づいていません。
デフォルトの通知は自動的に表示されるため、何もせずにカートを見るリンクがすでに表示されている可能性があります。ただし、それは小さく、数秒後に消えます。あまり注意していない買い物客は簡単に見逃す可能性があります。
商品ページ、ストアページ、メニューに常に表示されるカートを見るボタンが必要な場合は、より柔軟な設定が必要です。以下の手順で説明します。
SeedProdを使用してWooCommerceにカートを見るボタンを追加する方法
SeedProdはオンラインストアをすばやく簡単にセットアップできるだけでなく、カート表示ボタンを好きな場所に追加できます。その方法については、以下の簡単な手順に従ってください。
ステップ1. SeedProdのインストールと有効化
まず、WordPressウェブサイトにSeedProd Eliteをインストールして有効化する必要があります。
Eliteプランでは、SeedProdのWooCommerceカスタマイズ機能、テーマビルダー、Easy Digital Downloadsサポート、ドメインマッピングにアクセスできます。
セットアップのヘルプについては、SeedProdのインストール方法に関するドキュメントをご覧ください。
ステップ2. WooCommerceサイトキットを選択
プラグインを有効化したら、WordPressダッシュボードから SeedProd » Theme Builder に移動します。
カート表示ボタンとWooCommerceカスタムカート追加ボタンを追加するには、カスタムWooCommerceテーマを構築する必要があります。しかし、心配しないでください。これは簡単で、数分しかかかりません。
Theme Builder ページで、Theme Template Kits ボタンをクリックします。
次の画面で、SeedProdの既製のウェブサイトキットが表示されます。 WooCommerce タブをクリックして、eコマースストア用に設計されたすべてのキットを表示します。
デザインを閲覧して気に入ったものを見つけたら、カーソルを合わせてチェックマークアイコンをクリックします。
数秒で、SeedProdがテーマをウェブサイトに追加します。以下の例のように、WordPressテーマを構成するすべてのテンプレートがリスト表示されます。
これらのテンプレートは、Edit Design リンクをクリックすることでカスタマイズできます。これにより、テンプレートがSeedProdのビジュアルページビルダーで開き、既製のデザインをストアのニーズに合わせて調整できます。
完全なステップバイステップのカスタマイズ手順については、WordPressでオンラインストアをセットアップする方法に関する究極のガイドをご覧ください。ドラッグアンドドロップページビルダーの使用方法、テンプレート要素のカスタマイズ方法、各ページへの新しいデザイン要素の追加方法について説明しています。
SeedProdのビルダーの仕組みに慣れたら、次のステップに進むことができます。ここでは、商品ページにカート表示ボタンを追加する方法を説明します。
ステップ3. WooCommerce商品ページにカート表示ボタンを追加
商品ページにカート表示ボタンを追加するには、Theme Builderダッシュボードで 単一商品ページテンプレート を開く必要があります。見つけたら、テンプレートにカーソルを合わせて Edit Design リンクをクリックします。
このテンプレートが開くと、ストアの個々の商品の詳細が表示されます。選択したテーマによっては、商品概要、バリエーション商品情報、商品写真、価格、および カート追加ボタン が表示されます。
カート表示ボタンを追加するには、左側のサイドバーから Button ブロックをドラッグする必要があります。
次に、このブロックをクリックしてカスタマイズオプションを開くことができます。ここでは、ボタンのテキストを変更したり、配置を調整したり、カスタムボタンリンクを追加したりできます。
ボタンのテキストを「カートを見る」に変更し、配置を左に設定しましょう。
「アイコン」タブを展開して、Font Awesomeのアイコンライブラリからカートアイコンを選択することもできます。
次に、ボタンをショッピングカートページにリンクする必要があります。これを行うには、カートページのURLを「リンク」テキストフィールドに貼り付けます。
カートボタンビューにさらにスタイリングオプションを追加したい場合は、ブロック設定の「詳細」タブをクリックしてください。
このパネルでは、ボタンのフォント、ボタンの色、角丸、間隔などを変更できます。
見た目に満足するまで、ボタンのカスタマイズを続けてください。
次に、サイトの他のエリアに同じボタンを追加したい場合に時間を節約するトリックを紹介します。プレビューでボタンにカーソルを合わせ、次に「保存」アイコンをクリックします。
これにより、ボタンに名前を付けて保存済みブロックに保存できるウィンドウが開きます。保存後、最初から再度構築することなく再利用できるようになります。
このページを終了する前に、右上隅にある「保存」ボタンをクリックして変更を保存してください。
これで、テーマビルダーダッシュボードに戻り、オンラインストアのカスタマイズを続けることができます。
ステップ4. WooCommerceショップページにカート表示ボタンを追加
あなたのWooCommerceショップページも、カートを見るボタンを追加できる場所です。これを行うには、ショップページテンプレートの「デザインを編集」リンクをクリックする必要があります。
このページのページビルダーに入ったら、下にスクロールして「保存済みブロック」セクションを探し、前のステップで作成したカスタムカートを見るボタンを探します。
このブロックをショップページの好きな場所にドラッグします。この例では、ページの上部に追加しましたが、好きな場所に配置できます。
以前と同様に、ブロック設定を開いて、特定のページに合わせてカスタマイズできます。たとえば、背景色を変更したり、ボタンを大きくして目立たせたりできます。
ページを終了する前に必ず「保存」ボタンをクリックしてください。
ステップ5. WooCommerceメニューにカート表示ボタンを追加
カートを見るボタンを追加するのに適したもう1つの場所は、WooCommerceメニューです。買い物客はメニューを使ってストアをナビゲートするため、ここにボタンを追加するとカートページの見つけやすさが向上します。
SeedProdテーマビルダーダッシュボードから、ヘッダーテンプレートを見つけて「デザインを編集」リンクをクリックしてカスタマイズする必要があります。
以前に作成したカートを見るボタンを追加する代わりに、SeedProdの既製のブロックのいずれかを使用できます。
左側にあるWooCommerceテンプレートタグパネル内で、「メニューカート」というブロックを見つけます。
このブロックは、アイコンと買い物客のカート合計金額の推定値を表示します。それをクリックすると、ショッピングカートに直接移動し、チェックアウトまたは変更を行うことができます。
このボタンをヘッダーにドラッグした後、他のSeedProdブロックと同じようにカスタマイズできます。
ボタンの配置を変更したり、カートに何も入っていない場合に非表示にしたり、カート小計を表示または非表示にしたりできます。
高度なタブでは、バッジの色、アニメーション、間隔など、さらに多くのスタイリングオプションを調整できます。
希望どおりの外観になったら、保存ボタンをクリックしてページビルダーを終了します。
ステップ6：WooCommerceウェブサイトの変更を公開する
このガイドの最後のステップは、カスタムWooCommerceテーマを公開することです。テーマビルダーダッシュボードから、「SeedProdテーマを有効にする」というタイトルのヘッダーを見つけ、トグルボタンをクリックしてはいの位置に切り替えます。
これで完了です！カスタムストアが公開され、買い物客はメニュー、ショップページ、商品ページでカートを見るボタンを確認できるようになります。
今日行った変更の例をいくつかご紹介します。画像をクリックすると新しいウィンドウで開き、詳しく見ることができます。
これらの手順に従ってもカートを見るボタンが表示されない場合は、WooCommerceカートを見るが機能しない場合の対処法を参照して、一般的な原因と修正方法を確認してください。
WooCommerceにカートを見るボタンを追加することに関するFAQ
- WooCommerceでショップページタイトルを変更する方法
- WooCommerceの追加情報タブをカスタマイズする方法
- WooCommerceの商品ページに星評価を追加する方法
- WooCommerceのカート表示が機能しない問題を修正する方法
- WooCommerceで1商品ウェブサイトを作成する方法
- WooCommerceで関連商品をどのように表示するか
- カスタムWooCommerceサンキューページを作成する方法
- WooCommerceで商品カテゴリとタグを表示する方法
- WooCommerceで注目の商品をディスプレイする方法
- WooCommerceで在庫切れの商品を非表示にする方法
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
