【WordPress】WooCommerce”カートに入れる”ボタンの追加方法

WordPressでWooCommerceを使ってオンラインストアを運営している場合、「カートに入れる」ボタンの設置は、コンバージョン促進に欠かせない重要な要素です。商品の閲覧から購入までの架け橋となり、ショッピング体験がよりスムーズになることで、収益アップにつながります。

しかし時に、「カートに入れる」ボタンが表示されなかったり、期待通りに動作しなかったりすることがあります。また、サイトデザインとの調和のため、ボタンをカスタマイズしたいという状況も一般的です。

そこで今回は、WooCommerceサイトに「カートに入れる」ボタンを設置する方法、ボタンをカスタマイズする方法、エラー発生時の解決方法など包括的にご紹介していきます。きめ細かな制御を求める開発者から、問題をサクッと解決したいサイト所有者まで、この記事がお役に立てるはずです。ブックマークをお忘れなく。

WooCommerceサイトの「カートに入れる」ボタン

WooCommerceの「カートに入れる」ボタンは、買い物客が商品を選択し、買い物カゴに追加するための重要な手段です。このボタンは通常、以下のページに設置されます。

• 個別の商品ページ：商品名、価格、商品説明などの商情報とともに表示される
• 商品一覧ページ：各商品画像の下に設置され、個別の商品ページにアクセスすることなく商品を買い物カゴに追加できる
• カテゴリーページ：ショップページ同様、特定のカテゴリーにおける複数商品の購入プロセスを効率化する

WooCommerceをはじめとするほとんどのECソリューションでは、デフォルトで「カートに入れる」ボタンが表示されますが、変更が必要になる場合もあります。例えば、お店のデザインや言語に合わせて編集したり、機能を拡張したり場合など。また、テーマの互換性の問題やプラグインの競合、WooCommerceの古い設定などが原因で、ボタンが表示されない、または壊れている場合には、トラブルシューティングを行う必要があります。

「カートに入れる」ボタンを設置する方法（3通り）

WooCommerceサイトに「カートに入れる」ボタンを設置する方法は3種類あります。スキルレベルに応じて、適した方法を選択してください。

• ショートコードを使用する：シンプルでコーディングも不要なため、初心者におすすめ。固定ページや投稿に素早くボタンを設置することができるが、カスタマイズ性はやや制限される。
• テーマファイルを編集する：より細かな制御が必要で、コーディングに抵抗がない場合は、テーマファイル（functions.phpなど）を編集することで、思い通りにボタンを設置・カスタマイズすることができる。ただし、ちょっとしたミスがサイト全体に影響する可能性があるため、十分な知識を持って細心の注意を払う必要がある。
• プラグインを使用する：ボタンの設置とカスタマイズのプロセスを簡素化する簡単な方法。作業が効率化されるが、プラグインの選択を誤ると競合を引き起こしたり、サイトのパフォーマンスを低下させたり、頻繁な更新が必要になったりする場合がある。

それぞれの方法を以下順にご紹介します。

ショートコードを使用する

ショートコードは、WooCommerceに「カートに入れる」ボタンを設置する最もシンプルな方法です。ショートコードとは、[shortcode]のようにブラケット（角括弧）で囲んだ文字列です。設置することで、特定の機能が表示されます。

「カートに入れる」ボタンのショートコードは、[add_to_cart id="PRODUCT_ID"]です。

「PRODUCT_ID」は、リンクしたい商品の一意IDを貼り付けます。商品IDは、WordPress管理画面の「商品」＞「すべての商品」で確認できます。該当の商品にカーソルを合わせると、以下のようにIDが表示されます。

次に、固定ページまたは投稿にショートコードを挿入します。ボタンを設置する固定ページまたは投稿を開き、「ショートコード」ブロックを追加するか（Gutenbergの場合）、ショートコードをコンテンツエリアに直接貼り付けます。

「PRODUCT_ID」を正しい商品IDに置き換えて、固定ページまたは投稿を保存、または更新します。ページをプレビューすると、商品価格とともにボタンが表示されます。

デフォルトでは、テーマのスタイルがボタンに適用されます。

テーマファイルを編集する（カスタマイズ可能）

完全な制御を求める場合は、テーマファイルを編集します。コーディングの知識が求められますが、カスタマイズの可能性が無限に広がります。

ボタンの設置、スタイル、機能を細かく変更できるだけでなく、サードパーティのプラグインへの依存を減らすことができるため、サイトパフォーマンスの改善にもつながります。

テーマのファイルを編集して「カートに入れる」ボタンを設置するには、まずは子テーマを作成します。これにより、テーマの更新時に変更を維持することができます。

ここからの手順は、子テーマ内で実行します。

ボタンを表示する場所によって編集するファイルが異なりますが、以下が一般的です。

• single-product.php（商品ページ用）
• functions.php（サイト全体の機能用）

子テーマ内で適切なファイルを見つけたら、以下のPHPスニペットを任意の場所に貼り付けます。

echo do_shortcode('[add_to_cart id="PRODUCT_ID"]');

例によって、「PRODUCT_ID」は実際の商品IDに置き換えましょう。

変更を保存して、更新したファイルをアップロードします。フロントエンドにアクセスして、ボタンが期待通りに表示、機能するかどうかを確認してください。

プラグインを使用する

コーディングなしでボタンを設置・カスタマイズするには、プラグインを使用することもできます。この方法が最も効率的です。

WooCommerceに「カートに入れる」ボタンの管理とカスタマイズに役立つおすすめのプラグインをいくつかご紹介します。

YITH WooCommerce Product Add-Ons

YITH WooCommerce Product Add-Onsは、商品ページの追加オプションやカスタマイズを提供してくれます。ギフト包装やパーソナライズフィールド、追加サービスなど、ユーザーのショッピング体験を簡単に向上させることができます。購入ステップでの追加オプションの提供は、顧客満足度の向上と平均注文金額の増加につながります。

主な機能

• チェックボックス、ドロップダウン、テキストフィールドなど、商品に追加オプションを好きなだけ追加
• 選択したオプションサービスに対して追加料金を請求し、収益を増加
• 顧客の選択に基づいてオプションを表示する条件付きロジック
• バリエーションのある商品とWooCommerceテーマとの完全な互換性あり

WooCommerce Custom Add-to-Cart Button

Woo Custom Add to Cart Buttonは、「カートに入れる」ボタンをカスタマイズするのに役立ちます。ボタンのテキスト、色、スタイル、配置を完全制御できるため、お店の外観に応じたボタンを設置できます。独自URLのような高度な機能もサポートしているため、ボタンをクリックした顧客を決済ページやカスタムランディングページなどにリダイレクトすることができます。

主な機能

• ボタンのテキスト、スタイル、配置をカスタマイズ
• 独自のリダイレクトURLを設定して決済プロセスを強化
• コーディングなしで簡単に変更を適用
• 軽量でほぼ全てのWooCommerceテーマと互換性がある

WPC AJAX Add to Cart

WPC AJAX Add to Cartプラグインは、買い物客がページを更新することなく商品をカートに追加できるようにします。このAJAX機能により、ユーザーのショッピング体験が改善されます。基本的な商品、グループ化された商品、バリエーションのある商品など、さまざまな商品タイプをサポートし、ほとんどのWooCommerceテーマやプラグインと統合可能です。

主な機能

• AJAX機能を利用した「カートに入れる」機能でユーザー体験を向上
• バリエーションのある商品やグループ化された商品などのさまざまな商品タイプをサポート
• 人気のWooCommerceテーマや拡張機能との互換性
• 軽量設計によりストアの高速性と応答性を維持

よくある問題とその解決方法

WooCommerceの標準機能を使用していても、「カートに入れる」ボタンが適切に表示されなかったり、動作がおかしかったりすることがあります。以下、一般的な問題とその解決方法をご紹介します。

ボタンが表示されない

「カートに入れる」ボタンが表示されない場合は、以下のような原因が考えられます。

• テーマの互換性の問題
• プラグインの競合
• WooCommerceのバージョンが古い
• 間違った商品設定

これを解決するには、まずはWooCommerceの設定を確認します。「WooCommerce」＞「設定」＞「商品」に移動し、「アーカイブで AJAX の「お買い物カゴに追加」ボタンを有効化」にチェックが入っているかどうかを確認してください。

続いて、商品タイプも確認します。外部/アフィリエイト商品など、商品タイプによってはボタンが表示されない場合があります。これを修正するには、「商品」＞「すべての商品」に移動します。

商品を選択し、「商品データ」セクションで「基本的な商品」または「バリエーションのある商品」が選択されていることを確認してください。

これでも問題が解決しない場合は、プラグインの競合が発生しているかもしれません。WooCommerce以外のすべてのプラグインを一時的に無効化し、ボタンが表示されるかを確認します。これでボタンが表示される場合はプラグインを1つずつ有効化し、その都度サイトを再読み込みし、原因となっているプラグインを特定しましょう。

トラブルシューティングの続行が必要になる場合は、StorefrontやTwenty Twenty-Fourなどのデフォルトテーマに切り替えてみてください。これで問題が解決される場合は、テーマに原因があります。この場合は、テーマ開発者に問い合わせる必要があるかもしれません。

または、WooCommerceとWordPressの更新が必要かもしれません。「ダッシュボード」＞「更新」に移動し、WooCommerceやWordPress、すべてのプラグインが最新の状態であることを確認してください。バージョンが古いと、エラーやパフォーマンスの問題の原因になる可能性があります。

それでも解決されない場合は、「WooCommerce」＞「ステータス」＞「ログ」に移動して、エラーメッセージを探してみてください。Query Monitorプラグインは、PHPエラーや競合を特定するのに便利です。

ボタンが機能しない

ボタンが表示されていても、商品を買い物カゴに追加できないことがあります。これはJavaScriptのエラーやキャッシュの問題などが原因になり得ます。

まずは、JavaScriptのエラーをチェックしましょう。ブラウザでオンラインストアを開き、F12を押して開発者ツールを開くか、Macの場合は Cmd + Option + Iを押します。「コンソール」タブに移動して、赤く表示されているエラーメッセージがないかを確認してください。

エラーがある場合は、テーマやプラグインのスクリプトが競合している可能性があります。

キャッシュプラグインを使用している場合は、キャッシュをクリアして再度テストしてください。ブラウザのキャッシュをクリアするか、シークレットモードでサイトをテストします。

ボタンが複数表示される

商品ページに複数のボタンが表示されるエラーも発生することがあります。

これは多くの場合、テーマのテンプレートやカスタマイズが原因です。テーマのsingle-product.phpファイルでdo_action(‘woocommerce_after_add_to_cart_button’)フックが重複していないか確認し、重複するフックを削除して、変更を保存してください。

「カートに入れる」ボタンをカスタマイズする方法

「カートに入れる」ボタンをカスタマイズすることで、ストアの見栄えを改善することができます。テキスト、スタイル、機能など、いずれを変更するにしても、テーマファイルやCSSに手を加えることで実現可能です。なお、カスタマイズには子テーマを使用してください。バックアップも必ず作成しましょう。

ボタンテキストを変更する

WooCommerceデフォルトのボタンテキストは「お買い物カゴに追加」になります。これを例えば、「今すぐ購入」や「カートに入れる」などに変更したい場合は、簡単なコードスニペットで変更可能です。

以下のコードを子テーマのfunctions.phpファイルに追加してください。

function customize_add_to_cart_text( $text ) {  
    return __( '今すぐ購入', 'woocommerce' );  
}  
add_filter( 'woocommerce_product_add_to_cart_text', 'customize_add_to_cart_text' );

「今すぐ購入」部分を任意のテキストに置き換えてください。ファイルを保存してストアを更新すると、変更したボタンテキストが表示されます。

ボタンのスタイルを変更する

外観やブランドに溶け込むボタンを作成するには、カスタムCSSを使用して、色、フォント、サイズなどを調整できます。

以下はカスタムCSSの例です。

.button.single_add_to_cart_button {  
    background-color: #ff6600;  
    color: #ffffff;  
    font-size: 18px;  
    padding: 12px 24px;  
    border-radius: 8px;  
    text-transform: uppercase;  
}  

.button.single_add_to_cart_button:hover {  
    background-color: #e65c00;  
    color: #ffffff;  
}

このCSSを適用するには、WordPress管理画面の「外観」＞「カスタマイズ」＞「追加CSS」に移動します。上記のコードを貼り付け、「公開」をクリックして変更を保存すれば完了です。

ボタンをクリックした後にリダイレクトする

「カートに入れる」ボタンをクリックすると、通常は同じページにとどまります。これを特定のページ（買い物カゴや決済ページなど）にリダイレクトさせたい場合は、GitHubにある以下のスニペットをfunctions.phpファイルに貼り付けましょう。

function redirect_after_add_to_cart() {  
    global $woocommerce;  
    $checkout_url = wc_get_checkout_url();  
    return $checkout_url;  
}  
add_filter( 'woocommerce_add_to_cart_redirect', 'redirect_after_add_to_cart' );

上の例では、決済ページにリダイレクトされます。他のページにリダイレクトするには、$checkout_urlを置き換えてください。

まとめ

WooCommerceサイトに適切に「カートに入れる」ボタンを設置することで、スムーズなショッピング体験を作り出し、コンバージョンを促進することができます。今回はボタンを効果的に追加、カスタマイズ、トラブルシューティングする方法をご紹介しました。

ショートコードの挿入、テーマファイルの編集、プラグインの使用など、方法はさまざまです。また、よくある問題を解決し、カスタマイズを行うことで、ユーザー体験を改善することもできます。

ECストアを成長させ、売上を拡大するなら、KinstaのWordPress専用マネージドクラウドサーバーをお試しください。ステージング環境、自動バックアップ、トップレベルのセキュリティなどにより、サイトが常にスムーズに実行されるため、事業の拡大と優れた商品の提供に集中することができます。30日の返金保証と無料のサイト移行で、リスクなしでご利用いただけます。