最新のSeedProdニュース

ビジネス成長を支援するWordPressチュートリアル、ヒント、リソース

チェックアウトを壊さずにWooCommerceのカートページをカスタマイズする方法

チェックアウトを壊さずにWooCommerceカートページをカスタマイズする方法

執筆者: 著者アバター ステイシー・コリン
著者アバター ステイシー・コリン
Stacey Corrinは、WordPress、SEO、デジタルマーケティングに関する執筆経験15年以上の認定コンテンツマーケティングおよび検索スペシャリストです。彼女はSeedProdとRafflePressのコンテンツを管理しており、自身が積極的に使用しテストしているツールや戦略を取り上げています。
    
レビュー担当者: レビュアーアバター ターナー ジョン
レビュアーアバター ターナー・ジョン
ジョン・ターナーはSeedProdの共同創設者です。彼は20年以上のビジネスおよび開発経験を持ち、彼のプラグインは2500万回以上ダウンロードされています。

要約:WooCommerceカートページをカスタマイズする

ブロックテーマではWordPressサイトエディターでWooCommerceカートページをカスタマイズできます。または、SeedProdのようなビルダーを使えばどのテーマでも可能です。どちらの方法が適用されるかはテーマによって決まるため、まずそれを確認してください。

  1. テーマを確認してください:「外観」→「エディター」はブロックテーマ、「外観」→「カスタマイズ」はクラシックテーマを意味します。
  2. ブロックテーマ:サイトエディターで「テンプレート」→「WooCommerce」→「カート」を開き、カートブロックの周りのブロックを再スタイル設定します。
  3. クラシックテーマ:[woocommerce_cart]ショートコードを含むページを編集するか、ビルダーテンプレートに置き換えます。
  4. どのテーマでも:SeedProdでカートページテンプレートを作成し、カートブロックをドロップインして、合計金額の横に推薦文を配置します。
  5. 次に割り当てます:WooCommerceは、「設定」→「高度な設定」でページを選択しないと、ページを表示しません。

私が管理していたWooCommerceストアで初めてカートページを開いたとき、何かが壊れたと思いました。他のすべてのページにはクライアントのブランディングが施されていました。カートは灰色のボタンが付いた、むき出しのテーブルでした。

何も壊れていませんでした。デフォルトのWooCommerceカートは、クロスセルや信頼シグナルがなく、本当にシンプルなテーブルであり、電話ではチェックアウトボタンが画面の下の方にあります。

私は15年間WordPressテーマとページレイアウトのカスタマイズを行ってきましたが、カートはオーナーがスキップするページです。WooCommerceカートページのカスタマイズ方法はテーマによって異なるため、まずそこから始めてください。

お使いのテーマが使用するカートページルートを確認する

WooCommerceカートページを編集するには3つの方法がありますが、どの2つが利用可能かはテーマによって決まるため、何も触る前にそれを確認してください。

WordPressダッシュボードで外観を開きます。エディターが表示された場合は、ブロックテーマを使用しています。代わりにカスタマイズが表示された場合は、クラシックテーマを使用しています。

そのメニュー項目は、私が引き継ぐどのサイトでも最初に確認することです。なぜなら、このトピックに関する指示の半分は間違った答えを前提としているからです。

ブロックテーマ:サイトエディターでカートテンプレートを編集する

外観エディターに移動し、次にテンプレートWooCommerceに移動します。ページ:カートを開きます。これにより、個々のページではなく、カートページテンプレート自体に入ります。

WordPressサイトエディターのWooCommerceカートページテンプレート

WooCommerceカートアイテムブロックは、そのテンプレートで作業を行っている部分です。カートの商品、注文合計、クーポンフィールド、配送オプション、チェックアウトボタンを保持するラッパーです。

WordPressブロックエディターのWooCommerceカートページのカートアイテムブロック。

リストビューを開くと、それらの各部分を選択して個別に編集できます。カートが空の場合、ブロックはメッセージと商品の提案とともに空のカートビューに切り替わります。

テンプレートのレイアウト、色、カートの周りに追加するブロックを変更できます。簡単に変更できないのは、カート自体のフィールドとボタンの外観です。これらは、独自のパネルではなく、テーマの設定に従います。

クラシックテーマ:カートショートコードでページを編集する

クラシックテーマでは、[Pages] » [All Pages] に移動し、カートとして割り当てられたページを開きます。その中に、[woocommerce_cart] ショートコードという 1 行のコンテンツがあります。

そのショートコードがカート全体です。WooCommerce はページが読み込まれるときにカートテーブルに置き換えます。そのテーブルの外観はテーマによって決まります。

その上下にコンテンツを自由に追加できます。内部ではほとんど何も変更できません。ビルダーのカートブロックに置き換える場合を除き、ショートコードはそのままにしておいてください。これは 3 番目の方法です。

どのテーマでも:ビジュアルビルダーでカートページを構築する

ビルダーがページ全体を引き継ぐため、3 番目の方法は両方のテーマタイプで機能します。カートページテンプレートをデザインし、ビルダー独自のカートブロックを配置して、WooCommerce にそれをポイントさせます。

WordPressのSeedProdビジュアルWooCommerceカートページビルダー

長年にわたり私が使用してきた Beaver Builder、Elementor、Divi を含むすべてのビルダーは、レイアウトに対する真の制御を提供し、テーマからの指示を奪います。

このガイドの残りの部分では、SeedProd を使用してこの方法を説明します。

3つのカートページルートの比較

3 つの方法すべて、技術者でない店舗オーナーでもテンプレートファイルを開かずに実行できます。それらを区別するのは、カート自体のどの部分を再スタイル設定できるかです。

方法対象変更できることできないこと費用
サイトエディターブロックテーマのみテンプレートのレイアウト、色、カートの周りに追加するブロックテーマの設定を超えて、カート自体のフィールドとボタンを再スタイル設定することWooCommerce で無料
クラシッククラシックテーマのみ[woocommerce_cart] ショートコードの上下にあるものすべてテーマが制御するカートテーブル自体を変更することWooCommerce で無料
SeedProdすべてのテーマ、ブロックまたはクラシックカートの色、フォント、ボタン、フィールド、境界線、およびページ上のその他のブロックCart ブロックは Elite のみであるため、無料、Basic、Plus、または Pro プランで実行できます。SeedProd Elite、$599/年

ビルダーの方法をお勧めします。なぜなら、カートのボタン、フィールド、合計を継承するのではなく再スタイル設定できる唯一の方法だからです。カートが最もブランド化されていないページであるストアでは、それがすべてです。

テーマがすでにカートテーブルをうまくレンダリングしている場合、Site Editor が無料で残りを処理します。カートの周りに信頼バッジや商品グリッドを追加するために有料プラグインは必要ありません。

SeedProd は Elite プランで 完全な WooCommerce テーマを構築することもできます。ショップページ、商品アーカイブ、単一商品ページ、カート、チェックアウトをカバーするため、カートだけを変更したいページでない場合は、その方法を選択してください。

1 ページを変更するためにプラグインにお金を払うのはもっともな反論です。そのため、無料の Site Editor の方法がテーブルの最初にあります。カートだけを変更するページであれば、費用対効果は Elite には有利ではありません。

カスタムテンプレートはチェックアウトを壊しません。チェックアウトは独自のテンプレートを持つ別の WooCommerce ページだからです。それらの間の引き継ぎが壊れる可能性のある唯一のことですが、ステップ 4 ではそれが壊れなかったことを証明する方法を説明します。

カートページがない方が良い場合

ストアによっては、カートページが全く必要ない場合があり、カートを削減または削除する一般的な方法は3つあります。

  • サイドカート:購入者が商品を追加したときに商品ページの上にスライドして表示されるパネルで、閲覧中のページから離れる必要がありません。
  • カートをスキップ:「カートに追加」ボタンを押すと、購入者は直接チェックアウトに進み、手順を1つ減らします。
  • カートとチェックアウトのマージ:1つのページにバスケットの確認と支払いフォームがあり、購入者は合計金額と入力欄をまとめて確認できます。

これらのいずれもWooCommerceのコア機能ではありません。サイドカートは通常、テーマまたは専用プラグインから提供され、カートをスキップするにはそれらが必要です。

カゴのサイズが重要です。購入者が一度に1つの商品しか購入しない場合、カートページはスピードバンプとなり、削除するのが正しい選択です。

バスケットに通常複数の商品が入っている場合や、送料無料のしきい値を設けている場合は、カートページを残してください。どちらの場合も、購入者が合計金額を確認してさらに追加するかどうかを決定できる画面が必要です。

カスタムカートページは、デフォルトレイアウトが失う売上を回復させる

カスタムカートページは、デフォルトのページでは自分で確認できる詳細情報で販売機会を失うため、販売を回復させます。カートページを1つのタブで開き、ホームページを別のタブで開いて、両方を比較してください。

デフォルトのカートにはロゴ、信頼を示すシグナル、および2つ目の商品を示唆するものが何もありません。電話では、チェックアウトボタンは通常画面の下部にあります。

私がストアを引き継ぐ際に、カートページは常に手つかずの状態で見つけるページです。なぜなら、オーナーはホームページと商品ページのデザインに力を入れ、その後力尽きてしまうからです。

ベイマード・インスティテュートによると、オンラインショッピングカートの約70%が放棄されており、これは50の個別の調査の平均で70.22%です。ショッピングカートの放棄には多くの原因がありますが、カートページはあなたが管理できる部分です。

以下の各修正は、それらのギャップの1つを埋めるものです。ここでは、コンバージョンを高めるためにWooCommerceカートを最適化するいくつかの方法を紹介します。

  • 送料無料を提供する、または顧客が無料の対象にどれだけ近いかを表示する
  • 自動割引を適用する、またはクーポンコードフィールドを明確に表示する
  • カート合計を読みやすく、理解しやすくする
  • お客様の声、レビュー、セキュリティバッジなどの信頼シグナルを追加する
  • ページのリロードや個別の更新ボタンなしで、数量を変更したときに合計金額を即座に更新します。

WooCommerceカートページをカスタマイズする方法

どのテーマでも機能する方法は、ビジュアルビルダーでカートページを作成し、WooCommerceをそこにポイントすることです。既存のテーブルを再スタイル設定したいだけであれば、代わりにショッピングカートプラグインを利用する人もたくさんいます。これは妥当な選択です。

SeedProd ドラッグ&ドロップ WordPress ウェブサイトビルダー

SeedProdは、WooCommerceブロックが組み込まれたドラッグアンドドロップ式のWordPressウェブサイトビルダーです。このビルドで使用されているカートブロックも含まれているため、ビジュアルに編集して、作業中にカートページが変更されるのを確認できます。

15年以上にわたり、私は市場にあるほとんどのビジュアルウェブサイトビルダーで作業してきました。これは私が自分のサイトで使用しているものです。その方法をステップバイステップで説明します。

ステップ1. SeedProdのインストールと有効化

最初のステップは、SeedProd WordPress ランディングページプラグインのコピーをダウンロードすることです。

次に、WordPressウェブサイトにプラグインをインストールして有効化します。この手順については、WordPressプラグインのインストールに関する詳細ガイドを参照してください。

まずプランを確認してください。 SeedProdには無料版があり、Coming Soonページやメンテナンスページには本当に役立ちます。このチュートリアルで必要なWooCommerceカートブロックはEliteプランに含まれており、Basic、Plus、Proには含まれていません。

私はここでEliteプランを使用しています。なぜなら、WooCommerceブロックはそこにあるからです。以下の手順で何も変わりません。カートブロックは見つかりません。

SeedProd を WordPress サイトで有効化した後、SeedProd » 設定に移動し、製品ライセンスキーを入力します。

SeedProd設定ページ。ライセンスキーフィールドが検証準備完了の状態です。

ステップ2. 新しいWooCommerceカートページテンプレートを作成する

ライセンスキーを有効化した後、SeedProd » ページに移動し、「新しいランディングページを追加」ボタンをクリックしてカートページを作成します。

WordPressに新しいランディングページを追加する

そこから、デザインのフレームワークとして使用するカートページのテンプレートを選択できます。

WooCommerceカートページに適したテンプレートにフィルタリングされたSeedProdテンプレートライブラリ

SeedProdは、ProおよびEliteプランで300以上のモバイルフレンドリーなテンプレートを提供しており、ほとんどの業界をカバーしています。気に入ったものを見つけたら、カーソルを合わせて「チェックマーク」アイコンをクリックすると起動します。

カートページについては、カートページには2つの列とそれ以外はほとんど必要ないため、毎回空白テンプレートから始めます。マーケティングテンプレートは削除するセクションを提供するだけです。

テンプレートセレクターで選択されたSeedProdブランクテンプレート

テンプレートを選択すると、ポップアップが開きます。ページの名前とURLを追加します。次に、「保存してページの編集を開始」ボタンをクリックして、SeedProdのビジュアルエディターでテンプレートを開きます。

SeedProdの新しいWooCommerceカートページのページ名とURLダイアログ

ステップ 3. カートページのレイアウトとデザインをカスタマイズする

まず電話のビューをデザインし、次にデスクトップのビューをデザインします。なぜなら、電話で機能するカートレイアウトは、ほとんどの場合、ワイドスクリーンでも機能するからです。エディターのデバイス切り替えを使用して、両方を切り替えます。

仮定するのではなく、デスクトップとモバイルの分割について独自の分析を確認し、どちらが優勢かをデザインします。

カートページで最も機能するレイアウトは、コンテンツサイドバーです。カートは広い列に、お客様の声と星評価は狭い列に入れます。これにより、買い物客が合計金額を読んでいる間、ソーシャルプルーフは画面に残ります。

SeedProdのドラッグアンドドロップウェブサイトビルダーは、使いやすい独自の2列レイアウトを備えています。

  1. 左側には、デザインをカスタマイズするためのブロックとセクションがあります
  2. 右側には、ページのライブプレビューがあります

カートページにコンテンツを追加するのは、左側のブロックを右側のプレビューにドラッグするのと同じくらい簡単です。

左側にブロックパネル、右側にライブプレビューがあるSeedProdビジュアルエディター

ロゴは、カートページで最も安価な信頼シグナルであり、追加も最も速いです。なぜなら、ブランドのないカートにアクセスした買い物客は、まだあなたのサイトにいることを確認するために一時停止するからです。

まず、ページ要素を保持するセクションが必要です。標準セクションなどのセクションレイアウトを選択します。

新しいページセクションを追加

次に、「画像」ブロックを選択し、それを右側の新しいセクションにドラッグします。

SeedProdの画像ブロックを選択

画像ブロックをクリックすると、コンテンツ設定パネルが開きます。コンピューターまたはWordPressメディアライブラリからロゴをアップロードします。そこから、ホームページへのリンクを追加したり、ロゴのサイズを変更したり、配置を変更したりできます。

WooCommerceカートページにアップロードされたストアロゴの画像ブロック設定

WooCommerce カートの追加

次に、WooCommerceのショッピングカートをデザインに追加します。新しいセクションを追加し、コンテンツサイドバーレイアウトを選択します。

コンテンツサイドバーレイアウトセクションを追加

広い列にはカートが配置されます。狭い列にはソーシャルプルーフが配置されます。

WooCommerce カートをページに追加するには、下にスクロールして WooCommerce ブロックセクションに移動し、「カート」ブロックを新しいセクションにドラッグします。

カートページの広い列にWooCommerceカートブロックをドラッグしています

カート設定アイコンをクリックすると、スタイルタブが5つのグループに分割され、それぞれがカートの異なる部分を制御します。

  • ヘッダー:カートのヘッダー行のテキストの色、背景、フォント
  • ボタン:ボタンのスタイル(フラット、2D、ビンテージ、ゴースト、リンク)、色、角の半径
  • フィールド:クーポンコードと数量入力の背景、テキスト、境界線の色
  • アラート:情報、エラー、成功メッセージのハイライトカラー
  • カート:コンテナの境界線、背景、テキストの色、フォント

ストアのブランディングとロゴに合わせてボタンの色を変更しました。

ストアのブランディングに合わせてボタンの色が変更されたカートブロック設定パネル

チェックアウトボタンは、このページで誰かに押してもらいたい唯一のボタンです。画面で最も目立つものにしてください。

レビューとお客様の声を追加する

その2番目の列には、顧客の声と星評価を配置しました。なぜなら、ソーシャルプルーフは、チェックアウト寸前の買い物客を完了に押し上げることができるからです。

お客様の声をWooCommerceカートページに追加するには、「高度なブロック」の見出しの下にある「お客様の声」ブロックを探します。右側の狭い列にドラッグします。

お客様の声ブロックをカートページに追加する

すべてのSeedProdブロックと同様に、クリックするとコンテンツをカスタマイズするための設定が表示されます。カスタムの顔写真と顧客名を追加したり、配置を変更したりできます。複数のレビューをお客様の声カルーセルで実行できます。

カートページのお客様のヘッドショットと名前が表示されている証言ブロック設定

レビューをさらに説得力のあるものにするには、「星評価」ブロックをドラッグして、お客様の声カルーセルの下に配置します。

ソーシャルプルーフのためにスターレーティングブロックを追加する

買い物客は価格と安心感を一目で確認できるため、評価はカート合計の下ではなく、カート合計と同じレベルに保ちます。

希少性と緊急性を追加する

買い物客はすでにその商品が欲しいと決めているため、緊急性はカートページで機能します。

WooCommerceカートページに希少性を追加する最も簡単な方法は、希少性タイマーまたはカウントダウンクロックを使用することです。SeedProdにはそのオプションが組み込まれており、WooCommerceチェックアウトをクリックする最も速い方法の1つでもあります。

「高度なブロック」セクションから「カウントダウンタイマー」ブロックを選択します。カートの上部にドラッグします。次に、「訪問者タイマー」オプションを選択して、タイマーが各訪問者ごとに更新されるようにします。

カスタムWooCommerceカートページの上部にドラッグされたカウントダウンタイマーブロック

締め切りを現実的に保ちます。訪問者タイマーはページを読み込むすべてのユーザーに対して再開するため、カートが期限切れになると主張する見出しは、ストアが守れない約束であり、更新する人は誰でもそれを確認できます。

訪問者タイマーを実際のセッションベースのオファーに使用し、金曜日に終了するセールのように締め切りが現実的な場合は、固定終了日に切り替えます。

次に、高度な設定タブで、カートの残りの部分に合わせて色をカスタマイズできます。

SeedProdのカウントダウンタイマーブロックの詳細設定カラー設定

次に、オファーがどれだけ続くかを人々に伝える見出しを追加します。「見出し」ブロックをドラッグして、テキストを入力します。

カウントダウンの締め切りを説明するためにカートの上に配置された見出しブロック

WooCommerce商品のクロスセル

買い物客はすでに何かを購入することを約束しており、要求は小さいものであるため、カートはストアで2番目の商品を提案するのに最適な場所です。

SeedProdには、任意のページに製品を表示するいくつかの製品グリッドがあります。

「WooCommerce」ブロックセクションに移動し、次のものから選択します。

たとえば、「セール商品」ブロックをドラッグします。WooCommerceカートのすぐ下に配置します。

WooCommerce商品をクロスセルするためにカートの下に配置されたセール商品ブロック

これらのグリッドは静的なため、誰もが同じ商品を見ます。WooCommerceには独自のクロスセルもあり、これは商品ごとに設定され、その商品がカートにある場合にのみ表示されます。

カタログが小さく、ほとんどの商品がほとんどのバイヤーに適している場合は、静的なグリッドを使用します。適切な提案がバスケットに既に入っているものに依存する場合は、WooCommerceのクロスセルまたはSeedProdのアップセルブロックを使用します。

クーポンフィールドと配送料金計算の追加

カート合計と配送料計算ツールは、買い物客がコミットする前に探す2つのものであり、どちらも個別のブロックとしてドラッグインするのではなく、カートブロックの一部です。

クーポンコードと数量の入力は、スタイルタブの「フィールド」グループにあるため、そこで再スタイル設定します。表示されるかどうかではなく、見た目を変更しています。

表示されるかどうかはWooCommerceの判断であるため、WooCommerce »設定 »配送の下で配送料計算ツールをオンにし、マーケティング »クーポンの下でクーポンコードを作成します。

送料がわからない買い物客は最悪の事態を想定するため、カートに表示することで、チェックアウトページが表示される前にその推測を取り除くことができます。

空のカートページの設計

ほとんどのストアでは、空のカートページは行き止まりです。カートが空であることを示してそこで終了するため、1分前に買い物をしていた人の訪問を無駄にします。

WooCommerce独自のカートブロックは、ブロックテーマでこれを処理します。カートに何も入っていない場合、ブロックはメッセージと商品の提案とともに空のカートビューに切り替わります。

ビルダーページでは、その状態を自分でデザインします。カートの周りに配置するブロックは通常のページコンテンツであり、カートにアイテムが入っているかどうかにかかわらずレンダリングされ続けるためです。

狭い列を最近の商品のグリッドとショップへのリンクで埋めると、空のカートでもどこかにルートを提供できます。

自分のカートを空にして、公開する前にページを読み込んでください。これは、事故では決して見ることのない状態です。買い物客は、バスケットをクリアした後やセッションが期限切れになった後にこれに遭遇します。

カートページを高速かつアクセス可能に保つ

カートページは、ランディングページよりも多くの作業を必要とします。WooCommerceクエリを実行し、合計を再計算します。多くのストアでは、誰も要求する前に支払いスクリプトを読み込むこともあります。

それらのうち2つはあなたが制御するので、ビルダー自体の負荷を減らし、このページで不要なスクリプトの読み込みを完全に停止してください。

GTmetrixで3つのビルダーで構築された同じランディングページを測定したところ、SeedProdは556ミリ秒と16リクエストでした。Elementorは1,882ミリ秒と32リクエストでした。

Query Monitorはサーバー側でも同じパターンを示し、SeedProdは13.0 MBと86クエリに対して34 MBのメモリと34回のデータベースクエリを使用しました。

それらはランディングページであり、カートページではありません。カートページは、独自のWooCommerce作業を追加するため、これらの数値をビルダーの負荷の割合としてのみ読み取ってください。

カートはフォームなので、マウスなしで機能するかどうかを確認してください。数量フィールド、クーポン入力、チェックアウトボタンを順番にタブで移動します。次に、ボタンと合計が屋外の電話で読み取れる十分なコントラストがあることを確認します。

ステップ4. WooCommerceカートページを公開して設定する

カートページが準備できたら、緑色の保存ボタンの横にあるドロップダウン矢印をクリックし、公開を選択します。

カスタムWooCommerceカートページのSeedProd保存ドロップダウンの公開オプション

公開しても、何も切り替わりません。WooCommerceは、指示がない限り、古いカートページを提供し続けます。

切り替えはWooCommerceプラグインの設定で行われるため、WooCommerce » 設定に移動し、詳細設定タブをクリックします。

WooCommerce設定の詳細タブのカートページセレクター

次に、「カートページ」の見出しの隣で、SeedProdで作成した新しいカートページを選択します。画面下部にある「変更を保存」ボタンをクリックすることを忘れないでください。

この画面はWooCommerceのリリース間で移動するため、ストアのレイアウトが異なる場合は、WooCommerceが独自の設定ガイドで文書化しています。

これで、買い物客があなたのウェブサイトの「カートを見る」リンクをクリックすると、新しいカスタム WooCommerce カートページが表示されます。

証言、カウントダウンタイマー、カート合計を備えた完成したカスタムWooCommerceカートページ

先に進む前に、実際に切り替えが行われたことを確認する価値があります。

今すぐあなた自身のストアでそれを実行してください

ストアの他の部分と一致するカートページを出荷してください

先ほど見たカートブロック、ショップ、商品、チェックアウトテンプレートは、SeedProd Eliteにあります。開発者もテンプレートファイルも不要です。

WooCommerceカートブロックを入手する

新しいカートページが実際に表示されているか確認する

ページを公開しても、買い物客がそれを見ていることを証明するものではありません。買い物客のように、5つのステップでテストしてください。

管理者のアカウントでログインしていると、一般の買い物客とは異なるページやキャッシュされたページが表示される可能性があるため、常にプライベートウィンドウでこれを行います。

  1. 管理者のアカウントでログインしていないことを確認するため、プライベートブラウジングウィンドウでストアを開いてください。
  2. 商品をカートに追加してから、「カートを見る」をクリックします。
  3. アドレスバーのURLが、作成したページと一致していることを確認します。古いカートページではないことを確認します。
  4. 数量を変更して、合計金額が更新されることを確認します。
  5. チェックアウトに進みますが、支払い前で停止します。

これでページが機能していることがわかります。収益があったかどうかは別の問題ですが、カートは回答を確認できる数少ないページの一つです。

WooCommerceのコンバージョン計測を設定して、変更前と変更後のチェックアウトに到達するカートの割合を比較できるようにします。判断する前に1か月分のデータを収集してください。

「カートを見る」リンク自体が誤作動している場合は、別の問題です。このガイド「WooCommerceのカートを見る機能が機能しない場合の対処法」でカバーしています。

カスタムWooCommerceカートページのトラブルシューティング

この作業では3つの問題が発生し、すべてカートページが壊れているように見えます。

表示されている内容原因修正方法
カートページに商品が入っているにもかかわらず、空と表示されるページにWooCommerceカートブロックも[woocommerce_cart]ショートコードも含まれていないページを開き、どちらか一方を追加します。SeedProdテンプレートの場合、WooCommerceブロックグループのカートブロックを追加します。
カスタムテンプレートが適用されていないWooCommerceが古いカートページを指している、またはアクティブなテーマ自体のカートテンプレートが優先されているWooCommerce » 設定 » 詳細設定の「カートページ」設定を確認し、アクティブなテーマと、そのページをビルダーが制御しているかどうかを確認します。
カートページの設定が自動的に元に戻った指定されたページがゴミ箱に移動された、複製された、または置き換えられたため、WooCommerceが参照を失った元のページを公開したまま、再度設定します。WooCommerceは、この設定をURLではなくページIDとして保存します。

WooCommerceのカートページには、カートブロックまたは[woocommerce_cart]ショートコードのいずれかが含まれている必要があり、**WooCommerce » 設定 » 詳細設定**で選択されたページである必要があります。これら3つの問題は、そのいずれかに起因します。

他に何も変更する前に、これら2つを確認してください。私が管理したストアでは、ほとんどの場合、そのどちらかが原因でした。

WooCommerceカートページのカスタマイズに関するよくある質問

WooCommerceのカートページにカスタムフィールドを追加するにはどうすればよいですか?

カートブロックだけではできません。カートの既存の入力欄、クーポンコード、数量フィールドをスタイル設定するだけで、新しいフィールドを追加するわけではありません。

追加で何かを収集する必要がある場合は、代わりにチェックアウトフィールドとして追加してください。WooCommerceはチェックアウトフィールドを注文に引き継ぎます。カートの横に配置したフォームはページコンテンツであり、注文には引き継がれません。

カートページをカスタマイズすると、チェックアウトプロセスに影響しますか?

いいえ。チェックアウトは独自のテンプレートを持つ別のWooCommerceページなので、カートページのデザインを変更しても影響しません。

壊れる可能性のある唯一のことは、それらの間の連携です。カートページから「チェックアウトに進む」ボタンが失われると、買い物客は進むことができません。WooCommerceがカートのないページを指している場合も同様です。

公開後、プライベートウィンドウで完全なパスをテストしてください。

WooCommerceのカートページを無料でカスタマイズできますか?

部分的に可能です。ブロックテーマでは、WordPressサイトエディターでカートテンプレートを無料で編集できます。これには、レイアウト、色、カートの周りに追加するブロックが含まれます。

このガイドのSeedProdルートにはEliteプランが必要です。なぜなら、WooCommerceカートブロックがそのプランに含まれているからです。Free、Basic、Plus、Proには含まれていません。

カスタムWooCommerceカートページはモバイルで正常に機能しますか?

スタッキング順序を確認すれば機能します。なぜなら、2列のカートレイアウトは電話では1列に折りたたまれ、2番目にスタックされる列が長くスクロールする必要があるからです。

公開する前に電話の幅でページをプレビューしてください。カートとそのチェックアウトボタンを証言の上に配置してください。買い物客が必要とするボタンは、ソーシャルプルーフの下に配置されるべきではありません。

これで、ストアの他の部分と一致するカートページと、それが何かを変更したかどうかを確認する方法が得られました。

SeedProdを使用すると、コードを一行も書かずに視覚的に構築できます。このチュートリアルで使用されているWooCommerceブロック(カートを含む)はEliteプランに含まれており、ショップページ、商品アーカイブ、個別商品ページ、チェックアウトもカバーしています。

ほとんどのストアがテーマのデフォルトのままにしているもう1つのページは、WooCommerceショップページです。

お読みいただきありがとうございます!皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTubeX および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。

著者アバター
ステイシー・コリン コンテンツマーケティングスペシャリスト
Stacey Corrinは、WordPress、SEO、デジタルマーケティングに関する執筆経験15年以上の認定コンテンツマーケティングおよび検索スペシャリストです。彼女はSeedProdとRafflePressのコンテンツを管理しており、自身が積極的に使用しテストしているツールや戦略を取り上げています。

開示: 当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、手数料が発生する可能性があることを意味します。当社は、読者に価値をもたらすと信じる製品のみを推奨しています。

ChatGPTまたはClaudeとチャットして、このWordPressサイトを運営しましょう。無料プラグインです。 無料で試す