WooCommerceの「カートに追加」ボタンが機能しない：どうすれば直せますか？

WooCommerceの「カートに追加」ボタンは、あらゆる商品ページにおいて最も重要な要素です。このボタンが機能しなくなると、ストアは注文を処理できなくなります。不具合のある商品ページにアクセスした訪問者は、すべて売上機会の損失となります。.

Baymard Instituteの報告によると、オンラインショッピング利用者の17%がウェブサイトのエラーが原因で購入を断念している。カートに追加ボタンが壊れていたり、表示されていなかったりすると、まさにこのケースに該当し、商品ページ訪問者の100%に影響を与えることになる。.

解決策は、発生した不具合の種類によって異なります。ボタンが全く表示されない場合、表示されるもののクリックしても何も起こらない場合、カートには追加されるもののページが更新されない場合など、原因は様々です。どの不具合が発生しているかを診断することで、最初に適用すべき修正方法が分かります。.

このガイドでは、あらゆる原因と解決策を網羅し、最初に排除すべき問題順に解説しています。.

まず、故障の種類を診断してください。

「カートに追加」ボタンに関する問題は、すべて同じではありません。解決方法は、発生している不具合の種類によって異なります。.

故障の種類	あなたが見るもの	最も可能性の高い原因
ボタンが表示されない	商品ページは読み込まれるが、ボタンが表示されない	商品データの欠落、在庫切れ設定、テーマの問題
ボタンがクリックできません	ボタンは表示されるが、クリックしても何も起こらない。	JavaScriptエラー、テーマの競合、プラグインによるスクリプトのブロック
ボタンは追加されるが、ページは更新されない	スピナーが現れて止まり、カートの数は変化しない。	キャッシュまたはセキュリティプラグインによってAJAXがブロックされています
ボタンのリダイレクトが正しく行われません	クリックすると顧客が間違ったページに移動してしまう	パーマリンクの設定ミス、カートページが割り当てられていません
このボタンは一部の製品では機能しますが、他の製品では機能しません。	この問題は製品固有のものです	製品データが不完全、製品構成の誤り

この表を使用して障害の種類を特定し、次に、ご自身の状況に最も適用しやすい解決策から始めてください。.

WooCommerceの「カートに追加」ボタンの不具合には3つの種類があります。

誤った修正を適用すると、時間の無駄になるだけでなく、新たな問題を引き起こす可能性があります。以下の修正手順に進む前に、発生している障害の種類を特定してください。.

ボタンが全く表示されない

商品ページに「カートに追加」ボタンが全く表示されていない場合、WooCommerceが意図的に非表示にしているか、テーマがボタンを表示していないかのどちらかです。.

WooCommerceは、以下のシナリオで「カートに追加」ボタンを自動的に非表示にします。

• この商品は価格が設定されていません

• 商品は在庫切れとして表示されており、在庫切れ商品を非表示にするストア設定が有効になっています。

• 可変商品には設定済みのバリエーションがないか、すべてのバリエーションが在庫切れです。

• 外部/アフィリエイト製品には外部URLが設定されていません

技術的な問題だと決めつける前に、これらの商品レベルの設定を確認してください。WooCommerceの商品編集ページに移動し、商品データパネルに価格が入力されていること、在庫状況が「在庫あり」になっていること、または在庫切れ設定が意図どおりに構成されていること、そしてバリエーション商品の場合は、少なくとも1つのバリエーションが存在し、在庫があることを確認してください。.

ボタンは表示されているがクリックできない

ボタンが表示されるもののクリックに反応しない場合は、JavaScriptエラーによってクリックハンドラーが実行されていない可能性があります。ボタンはHTML上で正しく表示されますが、スクリプトの競合またはエラーにより機能が損なわれています。.

ブラウザの開発者コンソールを開き（Chromeの場合はF12キー、次にコンソールタブ）、商品ページを再読み込みします。「カートに追加」ボタンをクリックし、コンソールに表示される赤いエラーメッセージを確認します。具体的な原因を示す一般的なJavaScriptエラーは以下のとおりです。

• jQueryが定義されていません：jQueryが読み込まれていないか、読み込み順序が間違っています。これは、最適化プラグインがjQueryの読み込みを遅延させていることが原因であることが多いです。

• 未定義のプロパティを読み取れません：WooCommerceのJavaScript関数が、依存関係の準備が整う前に実行されています。これは通常、プラグインの競合が原因です。

• AJAX URLが定義されていません / wc_add_to_cart_paramsが定義されていません：WooCommerceのカートパラメータがページに出力されていません。これは通常、キャッシュプラグインがWooCommerceのJavaScriptを含まないキャッシュされたバージョンのページを提供していることが原因です。

先に進む前に、具体的なエラー内容をメモしておきましょう。どの修正を適用すればよいかが正確に分かります。.

ボタンはクリックされるが、カートが更新されない

ボタンが機能しているように見える場合（クリックが認識され、スピナーが表示される場合など）でも、カートの数量が更新されず、商品が追加されない場合は、AJAXリクエストが失敗しています。WooCommerceは、ページを再読み込みせずに商品をカートに追加するためにAJAXを使用します。AJAXがブロックされたり失敗したりすると、クリックしても何も効果がないように見えます。.

これは、キャッシュされた応答をAJAXリクエストに提供するキャッシュプラグイン、疑わしいと分類したAJAX呼び出しをブロックするセキュリティプラグイン、またはWooCommerceの設定におけるAJAX URLの設定ミスによって最も一般的に発生します。.

 

修正方法1：WooCommerce、WordPress、およびすべてのプラグインをアップデートする

ソフトウェアのバージョンが古いことが原因かどうかは、最も簡単に判断できるにもかかわらず、最も見落とされがちな問題です。特に最近のアップデート後にボタンが故障した場合は、他の解決策を試す前にまずここから始めてください。.

古いソフトウェアが原因で「カートに追加」ボタンが機能しなくなる理由

WooCommerce、 WordPress、テーマ、プラグインは頻繁にアップデートされます。あるコンポーネントがアップデートされても、他のコンポーネントがそれに追いつかない場合、互換性の問題が発生します。「カートに追加」ボタンは、WordPressコア、WooCommerce、アクティブなテーマ、および商品やカートの動作を変更するプラグインなど、一連のコンポーネントが連携して動作することで機能します。この連携のどこかでバージョンが一致しないと、連携が途切れてしまいます。

これは、アップデート直後に「カートに追加」ボタンが機能しなくなる最も一般的な原因です。ボタンが正常に動作していたのに、最近のアップデート後に機能しなくなった場合は、ほぼ間違いなく互換性の問題が原因です。.

すべてを安全にアップデートする方法

アップデートを行う前に、 バックアップ。WordPress管理画面の「ダッシュボード」＞「アップデート」に移動します。まずWordPress本体をアップデートします。次にすべてのプラグインをアップデートします。最後にテーマをアップデートします。

特にWooCommerceの場合、メジャーバージョンアップ（4.xから5.x、5.xから6.xなど）では、互換性を損なう変更が含まれる場合があります。WooCommerceのメジャーアップデートは、本番環境に適用する前に必ず ステージング環境 。

アップデート後、キャッシュプラグインを使用している場合は、サイトのキャッシュをクリアしてください。その後、問題が解決したと判断する前に、商品ページの「カートに追加」ボタンが正常に動作するかテストしてください。

アップデート後にボタンが壊れてしまった場合の対処法

特定のアップデート直後にボタンが機能しなくなった場合は、そのアップデートが原因である可能性が最も高いです。WP Rollbackプラグイン か、アップデート前のバックアップを復元してください。その後、再度アップデートする前に、プラグインの変更履歴とサポートフォーラムで同じ問題が報告されていないか確認してください。

修正2：プラグインとテーマの競合を解決する

プラグインやテーマの競合は、「カートに追加」ボタンが機能しない最も一般的な原因です。以下の手順を順番に実行し、各手順の後にテストを行ってから次の修正に進んでください。.

プラグインの競合を特定する方法

プラグインの競合は 、「カートに追加」ボタンが正常に動作しない最も一般的な原因です。プラグインの競合を特定する最も簡単な方法は、WooCommerce以外のすべてのプラグインを無効にして、ボタンの動作を確認することです。

「プラグイン」＞「インストール済みプラグイン」に移動します。WooCommerce以外のすべてのプラグインを選択します。一括操作のドロップダウンメニューから「無効化」を選択します。「適用」をクリックします。.

「カートに追加」ボタンをテストしてください。ボタンが正常に動作するようであれば、無効化されていたプラグインが原因です。プラグインを1つずつ有効化し、有効化するたびにボタンの動作を確認してください。ボタンが再び動作しなくなった場合は、最後に有効化したプラグインが競合の原因です。.

本番環境のストアで全てのプラグインを無効化できない場合は、ステージング環境を使用してこのテストを再現してください。.

「カートに追加」ボタンと競合する一般的なプラグイン

「カートに追加」ボタンの競合の大部分は、特定のプラグインカテゴリが原因です。

キャッシュプラグイン： WP Rocket、 W3 Total Cache、 WP Super Cache。これらのプラグインは、AJAX 機能が壊れる方法で WooCommerce JavaScript をキャッシュする可能性があります。解決策：WooCommerce ページをキャッシュから除外します。WP Rocket では、WooCommerce ページ（カート、チェックアウト、マイアカウント）は自動的に除外されますが、WP Rocket > 設定 > キャッシュ > これらの URL をキャッシュしない で確認してください。

最適化プラグイン： Autoptimize、 Perfmatters、 Asset CleanUp。これらのプラグインはJavaScriptファイルを圧縮して結合します。WooCommerceスクリプトを他のスクリプトと誤って結合すると、jQueryの依存関係エラーが発生します。修正方法：Autoptimizeで、[設定] > [JavaScriptオプション]に移動し、[JavaScriptをヘッダーに強制する]を有効にします。[Autoptimizeからスクリプトを除外する]にチェックを入れ、woocommerce.jsとadd-to-cart.jsを除外リストに追加します。

セキュリティプラグイン： Wordfence、 Sucuri、 iThemes Security。一部のセキュリティ設定では、WooCommerceのAJAXリクエストがブロックされ、悪意のあるものとして分類されます。解決策：Wordfenceで、[ファイアウォール] > [ファイアウォールオプション]に移動し、WooCommerce AJAXエンドポイント（wp-admin/admin-ajax.php）をホワイトリストに追加します。

ページビルダー：Elementor、Divi、WPBakery。一部の ページビルダーは 、WooCommerceのテンプレートを上書きしたり、商品ページに競合するスクリプトを挿入したりします。解決策：一時的にWooCommerceのデフォルト商品テンプレートに切り替えてテストしてください。

テーマの対立を特定する方法

プラグインの競合がないことを確認したら、Storefrontテーマ（WooCommerceの公式デフォルトテーマ）に切り替えてボタンをテストしてください。Storefront は WooCommerce専用に設計されており、互換性の問題は一切ありません。

「外観」＞「テーマ」＞「新規追加」に進み、「Storefront」を検索します。インストールして有効化してください。その他の設定は変更しないでください。「カートに追加」ボタンの動作を確認してください。.

ボタンがストアフロントで正常に動作する場合は、現在使用しているテーマに問題があります。テーマ開発者に問題を報告してください。ストアフロントで動作しない場合は、テーマとは関係のない原因です。.

修正3：JavaScriptとAJAXのエラーを修正する

JavaScriptやAJAXの不具合により、他の設定がすべて正しくてもボタンが正しく表示されない場合があります。変更を加える前に、まずブラウザのコンソールを確認して、どのスクリプトがエラーを起こしているかを確認してください。.

ブラウザでJavaScriptエラーを確認する方法

ChromeまたはFirefoxでサイトを開きます。F12キーを押して開発者ツールを開きます。コンソールタブをクリックします。カートに追加ボタンが機能しない商品ページに移動します。.

赤いエラーメッセージを探してください。これらは、ボタンの誤動作を引き起こしている特定のJavaScriptエラーです。エラーメッセージ全体をコピーし、 WooCommerceのサポート フォーラムとプラグイン独自のサポートフォーラムで検索してください。よくあるエラーのほとんどには、解決策が記載されています。

コンソールを開いた状態で、ネットワークタブも確認してください。「カートに追加」ボタンをクリックして、リクエストを監視します。失敗したAJAXリクエストは、ステータスコードとともに赤色で表示されます。ステータス403は、セキュリティプラグインがリクエストをブロックしていることを示します。ステータス500は、AJAXハンドラーでサーバーエラーが発生したことを示します。.

WooCommerceのAJAXカート追加設定を修正する

WooCommerce > 設定 > 商品 に移動します。「カートに追加動作」セクションを探します。「アーカイブでAJAXカート追加ボタンを有効にする」がチェックされていることを確認してください。この設定は、ショップページとカテゴリページでAJAXカート機能が有効になるかどうかを制御します。.

また、カートページとチェックアウトページが正しく割り当てられていることを確認してください。WooCommerce > 設定 > 詳細設定 > ページ設定 に移動し、カートページとチェックアウトページがサイト上の正しいページに設定されていることを確認してください。どちらかが空白であるか、間違ったページに設定されている場合、カートボタンをクリックしてもエラーメッセージが表示されません。.

最適化プラグインがWooCommerceスクリプトを破損させる問題を修正する

最適化プラグインがJavaScriptを圧縮または結合してWooCommerceの動作不良を引き起こしている場合は、以下のスクリプトをプラグインの除外リストに追加してください。

ミニファイ化から除外するスクリプト：

• woocommerce/assets/js/frontend/woocommerce.min.js

• woocommerce/assets/js/frontend/add-to-cart.min.js

• woocommerce/assets/js/frontend/add-to-cart-variation.min.js

• jquery.js または jquery.min.js

また、JavaScript の最適化から WooCommerce のページを除外してください。具体的には、カート (/cart/)、チェックアウト (/checkout/)、マイアカウント (/my-account/)、およびすべての商品ページ (/product/) です。.

WP Rocketの場合：[ファイル最適化] > [JavaScriptファイル] に移動します。[除外するJavaScriptファイル] フィールドに、上記の除外項目を追加します。.

Autoptimizeで、[JavaScriptオプション] > [Autoptimizeからスクリプトを除外] に移動し、WooCommerceスクリプトのパスを追加します。.

修正4：製品情報を確認して入力してください

WooCommerceは、必要な商品データが欠落している場合、「カートに追加」ボタンを自動的に無効化します。特定の商品でボタンが表示されないのに、他の商品では機能する場合は、まずここから確認してください。.

必須項目で、欠落ボタンが表示されるもの

WooCommerceでは、「カートに追加」ボタンを表示するために特定の商品データが必要です。必須項目が欠落している場合、WooCommerceはエラーメッセージを表示せずにボタンを無効にします。.

ボタンが欠落しているすべての製品を確認してください。

• 価格： すべての商品に通常価格を設定する必要があります。価格が設定されていない商品には「カートに追加」ボタンが表示されません。商品 > 商品データ > 一般 に移動し、「通常価格」フィールドに値が入力されていることを確認してください。

• 商品名： 商品名にはタイトルが必要です。タイトルが欠けていることは稀ですが、新規作成の下書きでは確認しておくことをお勧めします。

• 表示設定： 商品のカタログ表示設定が「ショップと検索結果」または「ショップ」になっていることを確認してください。「非表示」に設定されている商品は、アーカイブページにボタンが表示されません。

• 製品ステータス： 製品が「公開済み」であり、「下書き」または「レビュー待ち」ではないことを確認してください。

カートに追加するための可変商品設定

バリエーション商品は、シンプルな商品とは動作が異なります。ショップページやアーカイブページでは、バリエーション商品は「カートに追加」ボタンの代わりに「オプションを選択」ボタンが表示されます。個々の商品ページでは、お客様がすべての必須属性を選択した後にのみ、「カートに追加」ボタンが表示されます。.

可変商品ページに「カートに追加」ボタンが全く表示されていない場合（ショップページに「オプションを選択」が表示されるだけでなく）、以下を確認してください。

• 少なくとも1つの製品バリエーションが存在します（製品データ > バリエーション > バリエーションを追加）。

• 少なくとも1つのバリエーションは在庫ありと表示されています

• バリエーションで使用されるすべての属性は、バリエーションを作成する前に「商品データ」＞「属性」で定義されます。

• バリエーションタブには設定エラーは表示されません

バリエーションが作成されていない、またはすべてのバリエーションが在庫切れの可変商品には、「カートに追加」ボタンは表示されません。.

在庫状況と在庫切れ設定

WooCommerce > 設定 > 商品 > 在庫 に移動します。「カタログから在庫切れ商品を非表示にする」が有効になっているかどうかを確認してください。有効になっている場合、在庫切れとマークされた商品はショップページに表示されず、「カートに追加」ボタンも表示されません。.

また、個々の商品の在庫状況を確認してください。[商品] > [商品データ] > [在庫] > [在庫状況] の順に選択し、「在庫あり」に設定されていることを確認してください。カタログレベルの設定に関わらず、手動で「在庫切れ」に設定された商品は「カートに追加」ボタンが表示されません。.

修正5：WooCommerceのページとパーマリンク設定を確認する

カートページの設定ミスや古いパーマリンク構造は、プラグインのデバッグをいくら行っても解決できない、目に見えない不具合を引き起こします。これからご紹介する3つのチェックは5分もかからず、ほとんどのストアオーナーが予想する以上に多くの問題を解決できます。.

カートとチェックアウトページの割り当てを確認する

WooCommerceでは、カート機能が正しく動作するためには、特定のページが存在し、正しく割り当てられている必要があります。カートページまたはチェックアウトページが削除、非公開、または誤ったページに再割り当てされた場合、「カートに追加」ボタンをクリックしても、エラーメッセージが表示されずに失敗するか、誤ったページにリダイレクトされます。.

WooCommerce > 設定 > 詳細設定 > ページ設定 に移動します。以下を確認してください。

• カート：[woocommerce_cart]ショートコードまたはWooCommerceカートブロックを含む公開ページに割り当てられます。

• チェックアウト：[woocommerce_checkout]ショートコードまたはWooCommerce Checkoutブロックを含む公開ページに割り当てられます。

• マイアカウント: マイアカウントブロックまたはショートコードを含む公開ページに割り当てられます

不足しているものや誤って割り当てられているものがあれば、再割り当てしてください。ページ自体が不足している場合は、正しいショートコードを使用して新しいページを作成し、ここに割り当ててください。.

パーマリンク構造をクリアする

WordPressはパーマリンクルールを使用してリクエストを正しくルーティングします。これらのルールが破損すると、他の設定がすべて正しくても、WooCommerceのAJAXリクエストが失敗する可能性があります。パーマリンク構造をクリアすることで、これらのルールが再生成されます。.

WordPressダッシュボードの「設定」＞「パーマリンク」に移動します。設定は何も変更しないでください。「変更を保存」をクリックします。これにより、新しいパーマリンクルールで.htaccessファイルが再生成され、カートボタンが表示されない原因となるルーティングの問題が解決されます。.

これは10秒もかからず、コンテンツにも影響はありません。費用は一切かからず、多くのカートエラーを解決できるため、トラブルシューティングの初期段階で実行することをお勧めします。.

エラーがないかWooCommerceのステータスページを確認してください。

WooCommerce > ステータスに移動してください。このページには、WooCommerceのインストール状況の概要が表示されます。赤くハイライトされた行は、設定エラーを示しています。.

ステータスページに表示される、カートに追加ボタンに影響を与える一般的なエラー：

• データベースが古くなっています：WooCommerceのデータベーステーブルを更新する必要があります。「データベースを更新」ボタンをクリックしてください。

• WooCommerce.js：ファイルが見つからないか、アクセスできません。そのため、「カートに追加」ボタンが機能しません。

• テンプレートの上書き：お使いのテーマがWooCommerceのテンプレートファイルを上書きしています。上書きが古いWooCommerceのバージョンによるものである場合、新しい機能が利用できない可能性があります。テーマを更新するか、古い上書きを削除してください。

解決策6：キャッシュをクリアする

キャッシュプラグインが古いバージョンの商品ページを表示している場合、他のすべての修正を適用した後でも、「カートに追加」ボタンが反応しないことがあります。トラブルシューティングの初期段階と、変更を加えた後の最終段階の両方で、必ずキャッシュをクリアしてください。.

WP Rocket でキャッシュをクリアするには、 管理バーの WP Rocket アイコンをクリックし、[キャッシュをクリア] を選択します。

W3 Total Cache でキャッシュをクリアします: パフォーマンス > すべてのキャッシュを消去。

WP Super Cacheのキャッシュをクリアするには、 [設定] > [WP Super Cache] > [キャッシュを削除] の順に操作してください。

LiteSpeed Cache のキャッシュをクリアするには、 [LiteSpeed Cache] > [すべて消去] を選択します。

Cloudflareのキャッシュをクリアするには、 Cloudflareダッシュボード > キャッシュ > 設定 > すべて消去 の手順を実行します。

ブラウザのキャッシュをクリアしてください。Chrome またはFirefoxでは、Ctrl+Shift+Deleteを押してください。キャッシュされた画像とファイルをクリアします。修正が正しく行われたことを確認するには、プライベートウィンドウまたはシークレットウィンドウで製品ページを再読み込みしてください。これにより、ブラウザのキャッシュが原因でないことが保証されます。

キャッシュをすべてクリアした後、問題のある商品ページで「カートに追加」ボタンをテストしてください。ブラウザのキャッシュが原因ではないことを確認するため、シークレットウィンドウでテストしてください。.

トラブルシューティングチェックリスト：正しい手順

順番に進めてください。ボタンが正常に動作するようになったら作業を終了してください。.

• サイトとデータベースの完全なバックアップを取ってください。

• 発生した障害の種類を特定してください（表示されない／クリックできない／クリックしても更新されない）

• ブラウザのコンソールでJavaScriptエラーを確認し、具体的なエラーがあればメモしておきましょう。

• 設定 > パーマリンクに移動し、「変更を保存」をクリックします（設定変更は不要です）。

• WooCommerce > ステータスで赤いエラーを確認し、解決してください。

• 商品データを確認してください：価格設定、在庫状況（在庫あり）、バリエーション設定

• WordPress、WooCommerce、すべてのプラグイン、およびテーマをアップデートしてください。

• キャッシュをすべてクリアする：キャッシュプラグイン + Cloudflare + ブラウザ

• WooCommerce以外のすべてのプラグインを無効化してテストする

• ボタンがプラグインを無効化した状態でも機能する場合は、プラグインを1つずつ有効化して競合の原因を特定してください。

• ストアフロントテーマに切り替えてテストする

• ボタンがストアフロントで機能する場合、原因はアクティブなテーマです。

• カートページとチェックアウトページの割り当てについては、WooCommerce > 設定 > 詳細設定 > ページ設定を確認してください。

• 最適化プラグインの除外リストにWooCommerceスクリプトを追加する

WooCommerceの「カートに追加」ボタンの修正に関する最終的な考察

WooCommerceの「カートに追加」ボタンの不具合のほとんどは、プラグインの競合、キャッシュの問題、または商品データの不備が原因です。これら3つの原因はいずれも明確な診断手順と具体的な解決策があり、カスタム開発は不要です。

まず診断表で障害の種類を特定してください。ステータスページを確認し、パーマリンクをクリアしてください。これらは費用がかからず、多くの問題を解決できます。他の変更を加える前に、すべてを更新してください。その後、プラグインとテーマの競合解決プロセスに進んでください。.

このリストにあるすべての修正を適用してもボタンがまだ機能しない場合は、カスタムコードの競合またはサーバーレベルの設定の問題である可能性が高いです。その場合は、WooCommerceの経験を持つWordPress開発者が、ブラウザのコンソールエラー、サーバーのエラーログ、およびWooCommerceのデバッグログをまとめて確認する必要があります。.

SeahawkのWooCommerce開発チームは、緊急サポートおよび継続的なメンテナンスサービスの一環として、「カートに追加」ボタンの問題を解決します。.

WooCommerceの「カートに追加」ボタンが機能しないというよくある質問