Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

カスタムWooCommerceカートページの作成方法(コーディングなし)

WooCommerceでオンラインストアを運営している場合、お買い物カゴページをカスタマイズしたいと思うかもしれません。初期設定のお買い物カゴページはコンバージョンを最大化するようには設定されていません。

いくつかの変更を加えることで、売上を伸ばし、カスタマーのショッピング体験を向上させることができます。そして一番の利点は?コーディングの知識は必要ありません。

しかし、適切なツールを選ぶのは難しいものです。そこで、私たちは様々なページビルダーをリサーチし、テストしました。私たちがテストしたすべてのプラグインの中で、私たちはSeedProdに最も感銘を受けました。ドラッグ&ドロップで簡単にお買い物カゴのページをカスタマイズできます。

この投稿では、カスタムのWooCommerceカートページを作成する手順を説明します。素早く、シンプルで、あなたのストアのパフォーマンスに大きな違いをもたらすことができます。

How to create a custom WooCommerce cart page (no coding)

なぜWordPressでカスタムWooCommerceカートページを作成するのか?

WooCommerceにはお買い物カゴページがビルトインされています。このプラグインをインストールして有効化するだけで、あなたのオンラインストアは初期設定のカートページを自動的に使い始めます。

The default WooCommerce cart page

訪問者がお買い物カゴに項目を入れているとき、彼らは購入に非常に近づいています。しかし、調査によると、10人中7人近くのカスタマイザーが お買い物カゴを放棄し、二度と戻ってこないことが分かっています。

このことを念頭に置いて、お買い物カゴのページは販売を確保するために可能な限りのことをしなければなりません。

初期設定をカスタムカートページに置き換えることで、オンラインストアのコンバージョン率を向上させることができます。

独自のブランディングやカスタマイザーロゴでページをカスタマイズするだけでも、顧客体験を向上させ、コンバージョン率を高めることができます。

それを念頭に置いて、コードなしでWooCommerceのカートページをカスタマイズする方法を共有します。ここでは、以下のセクションで説明するすべてのことを簡単に説明します:

さっそく飛び込んでみよう!

WordPressでカスタムWooCommerceカートページを作成する方法

WooCommerceストアのカスタムページを作成する最も簡単な方法は、SeedProdを使用することです。

SeedProdは最高のドラッグアンドドロップページビルダーで、300以上のプロがデザインしたテンプレートが付属しています。これらには、販売ページやリードスクイーズページを作成するためのeコマーステンプレートが含まれています。

さらに、SeedProdはWooCommerceをフルサポートしており、売れ筋商品、人気項目、最新セールなどを表示できる特別なWooCommerceブロックまで付属しています。

さて、最初に行う必要があるのは、プラグインのインストールと有効化です。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

注: SeedProdには無料版もありますが、このガイドでは必要なWooCommerceブロックがビルトインされているPro版を使用します。また、すでに使用しているメールマーケティングサービスすべてと統合し、より多くの売上とコンバージョンを得ることができます。

有効化した後、SeedProd ” Settingsに移動し、ライセンスキーを入力しましょう。

Enter SeedProd license key

この情報は、SeedProdサイトのあなたのアカウントの下にあります。ライセンスを入力した後、「Verify Key」ボタンをクリックしてください。

それができたら、SeedProd ” ランディングページに行き、’新規ランディングページを追加’ボタンをクリックします。

SeedProd's page design templates

その後、お買い物カゴページのテンプレートを選択する必要があります。

SeedProdのテンプレートは、近日公開や 404ページなど、様々なキャンペーンタイプに分類されています。画面上部のタブをクリックすると、キャンペーンタイプに基づいてテンプレートをフィルターすることができます。

使いたいテンプレートが見つかったら、マウスオーバーして「チェックマーク」アイコンをクリックします。

このチュートリアルでは、必要なセクションだけを追加できる「ブランク・テンプレート」を使用します。

Select SeedProd template

次の画面では、お買い物カゴのページに名前を付けます。

SeedProdはページのタイトルに基づいて自動的にURLを作成しますが、このURLは好きなものに変更できます。

入力した情報に問題がなければ、「保存してページの編集を開始する」ボタンをクリックしましょう。

Creating a custom cart page using SeedProd

これはSeedProdページビルダーを読み込みます。これはシンプルなドラッグ&ドロップエディターで、右側にお買い物カゴページのライブプレビューが表示され、左側にいくつかの設定が表示されます。

まず始めに、ページ上部に画像を追加します。お店の通常のヘッダーと同じような画像を使用することをお勧めします。

ヘッダー画像をお買い物カゴページの全幅いっぱいに表示したいので、「レイアウトを選択」ボックスで最初のレイアウトをクリックしてみましょう。

Choosing a layout for a custom page

これで全幅レイアウトになる。

次に、左側のメニューから「Image」ブロックを選択し、レイアウト上にドラッグします。

Add image block header

画像をアップするには、「Image」ブロックをクリックして選択します。

左側のメニューで「Use Your Own Image」をクリックし、メディアライブラリから画像を選択するか、コンピューターから新しいファイルをアップロードしましょう。

Adding your logo to a custom cart page in WooCommerce

左側の設定では、画像をさらにカスタマイズすることができます。例えば、画像のaltテキストを追加したり、画像のサイズを変更することができます。

ヘッダーの見た目に満足したら、’Drag a new block here’セクションの’Add Columns’アイコンをクリックします。

Adding new blocks to a WooCommerce cart page

メインカートページエリアに使用するレイアウトを選択することができます。

コンテンツとサイドバーレイアウトをクリックしてください。

Select SeedProd layout

これにより、お買い物カゴ用のセクションと、コンバージョンを高めるためにカスタマイザーを表示できるエリアを作成できます。

左側のメニューで’WooCommerce’セクションまでスクロールします。ここで’お買い物カゴ’ブロックを見つけ、レイアウトにドラッグしましょう。

Add WooCommerce cart block

その後、左側のメニューを使用してお買い物カゴの各部をカスタマイズすることができます。

これには、フォント、色、ボタンなどの変更が含まれます。

Customize WooCommerce cart block

お買い物カゴエリアの見た目に満足したら、次はお客様の声ブロックを追加しましょう。これは、訪問者に購入を完了するよう促す社会的証明の一形態です。

Testimonials」ブロックを見つけてレイアウトにドラッグするだけです。

Add testimonials block

オンラインストアのお客様の声の表示を変更することができます。

例えば、左側のメニューには、コメントする吹き出しの色を変更したり、配置を変更したり、カスタマイザーを追加したりする設定があります。

Customize testimonials block

もう一つの素晴らしいアイデアは、あなたの声の下に星の評価を表示することです。

これを行うには、「星評価」ブロックを見つけて、証言ブロックの下にドラッグするだけです。

Add star rating block

希少性は、カスタマイザーが商品を買い逃すリスクや待つよりも、今すぐ購入することを促します。それを念頭に置いて、訪問者のお買い物カゴの有効期限が切れるまでの時間をカウントダウンするカウントダウンタイマーを追加するとよいでしょう。

この切迫感を演出するには、「カウントダウン」ブロックを見つけ、お買い物カゴの一番上にドラッグします。

各訪問者に新鮮なタイマーを表示したいので、「カウントダウンタイプ」のドロップダウンを開き、「訪問者タイマー(エバーグリーン)」を選択します。

Countdown timer evergreen block

初期設定では、タイマーは30分から始まりますが、「Set Timer For」に新しい数字を入力して変更することができます。

タイマーが0になったらお買い物カゴの有効期限が切れることを買い物客に知らせたいので、その上に「ヘッドライン」ブロックを追加しましょう。

次に、買い物客に見せたいテキストを入力します。

Countdown timer header

人気商品コーナーを設けることで、お買い物カゴに多くの項目を追加してもらうことができます。

売れ筋商品をアピールするには、「ベストセラー商品」ブロックをレイアウトにドラッグ&ドロップするだけです。

Add SeedProd products block

初期設定では、このブロックには一番人気の商品が表示されますが、設定を使ってセール中の商品や最新の商品などを表示させることができます。

これを行うには、’Type’ドロップダウンを開き、新規設定を選択するだけです。

Showing popular products on your cart page

詳しくは、WooCommerceで人気商品を表示する方法をご覧ください。

お買い物カゴページの見た目に満足したら、いよいよ公開しましょう。保存’の隣にあるドロップダウンの矢印をクリックし、’公開する’オプションを選択します。

Publish cart live

次に、WooCommerceの設定でお買い物カゴのURLを変更する必要があります。

WooCommerce ” 設定に行き、’高度な’タブに切り替えるだけです。

Changing the WooCommerce URLs

このタブで、「お買い物カゴページ」のドロップダウンを開き、カスタムページのURLを入力します。

適切なページが表示されたら、それをクリックして選択するだけだ。

Changing the WooCommerce cart URL

動画チュートリアル

WooCommerceのカスタムカートページを作成する方法については、動画チュートリアルをご覧ください:

Subscribe to WPBeginner

ボーナスヒント:WooCommerceカートページのコンバージョンをさらに向上させる方法

WooCommerceのカスタムカートページを作成したら、カート放棄を減らし、より多くの売上を得るための方法がたくさんあります。これにより、既存のトラフィックからより多くの収益を上げることができます。

そのための簡単な方法をいくつか紹介しよう。

1.コンバージョンをトラッキングする

お買い物カゴの放棄は、すべてのオンラインショップにとって大きな問題です。実際、お買い物カゴに項目を入れた人の60~80%は購入しない。(出典:カート放棄の統計)

コンバージョントラッキングは、お買い物カゴページで何が有効で何が有効でないかを理解するのに役立ちます。そして、SeedProdを使用してお買い物カゴページを微調整し、より多くのお客様がお買い物を完了できるようにすることができます。

WooCommerceのコンバージョンをトラッキングする最も簡単な方法は、Googleアナリティクスを使用することです。しかし、手動でアナリティクスを設定し、Googleアナリティクスの目標を作成するには、多くのカスタムコードを書く必要があります。

その点を考慮し、MonsterInsightsの使用をお勧めします。WooCommerceに最適なGoogleアナリティクスプラグインで、数クリックでコンバージョントラッキングを有効化するeコマースアドオンが付属しています。

MonsterInsights

WooCommerceのお買い物カゴのコンバージョンをトラッキングするには、WooCommerceのコンバージョントラッキングの設定方法のステップバイステップガイドをご覧ください。

2.WooCommerceの時間指定ポップアップでお買い物カゴの放棄を減らす

時間指定ポップアップでお買い物カゴの放棄を減らすこともできます。これを行う最も簡単で効果的な方法は、OptinMonsterを使用することです。

最高のWordPressポップアッププラグインであり、そのユニークなExit-Intent®テクノロジーは、買い物客がお買い物カゴのページから離れようとするときに、正確にポップアップを表示します。このソフトウェアを使用して、買い物客が今購入を完了した場合に特別割引コードを提供することもできます。

OptinMonster popup WooCommerce

OptinMonsterは、強力なターゲティングとパーソナライゼーション機能を備えています。

例えば、買い物客にすでにクーポンを提供している場合、代わりに教育的なポップアップを表示することができます。例えば、商品に関する質問をするよう促すことができます。

WPForms exit intent popup

OptinMonsterでは、ポップアップ、フルスクリーンウェルカムマット、フローティングバー、スクロールボックス、スライドインなどの様々なキャンペーンを作成することができます。

例えば、カスタマイザーがお買い物カゴに商品を入れても購入が完了しなかった場合、スライドインを使ってその商品のクーポンを提供することができます。

OptinMonster cart reminder

詳しくは、WooCommerceポップアップの作り方ガイドをご覧ください。

3.WooCommerceのソーシャル活動通知で売上を伸ばす

ソーシャル活動通知は、買い物客が購入しているすべての商品をリアルタイムで表示します。これにより、買い物客に人気のある信頼できるサイトであることを安心させ、またFOMOを利用して購買意欲を高めることができる。

お買い物カゴページにソーシャルプルーフ通知を追加する最も簡単な方法は、TrustPulseを使うことです。

TrustPulse's homepage

WordPressとWooCommerce用のソーシャルプルーフのプラグインとしては市場で最も優れており、コンバージョンを15%増加させることが証明されています。

あなたのサイトにTrustPulseをほんの数分で追加することができ、誰かが商品を購入したり、無料トライアルを開始したりするたびに通知バブルを表示し始めることができます。

TrustPulse alert notification

詳しくは、WordPressサイトでのFOMOの使い方ガイドをご覧ください。

この投稿が、コードを書かずにカスタマイカートページを作成するのにお役に立てば幸いです。ブログのトラフィックを増やす方法のステップバイステップガイドや、専門家が選んだあなたのストアに最適なWooCommerceプラグインもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

コメント

  1. おめでとうございます!この記事の最初のコメント投稿者になるチャンスです。
    ご質問やご提案がおありですか?ディスカッションを始めるためにコメントを残してください。

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。