WooCommerceのカートに追加ボタンをカスタマイズする方法（コードなし、コードあり） 

WooCommerceストアを設定しましたが、デフォルトの「カートに追加」ボタンは無地のグレーで、ページに馴染んでしまいます。より明確な言葉にしたり、ブランドカラーに合わせたり、目を引くアイコンを付けたりしたいと考えています。

SeedProdでWooCommerceのショップページを構築し、WPCodeでボタンのテキストを調整したことがあるので、実際に使用するWooCommerceカスタムカートに追加ボタンのオプションを紹介します。完全なビジュアル再デザインにはSeedProdを、無料のネイティブな変更にはWooCommerceブロックを、簡単なテキストや色の変更にはコードスニペットを使用します。

どの方法を使用すべきか？

必要なコントロールの量と、支払う意思のあるものに合った方法を選択してください。

• SeedProd（ビジュアル、コードなし）：ショップページや商品ページのデザインをしていて、テキスト、色、アイコン、ホバーのスタイルを完全にコントロールしたい場合に最適です。WooCommerceのデザインにはEliteプランが必要です。
• WooCommerceブロック（無料、ネイティブ）：ボタンの配置や数量セレクターのスタイルの設定には適していますが、単一商品ページではボタンのテキスト、色、またはタイポグラフィは変更されません。
• コードスニペット（簡単な調整）：WPCodeにスニペットを貼り付けることに慣れている場合に、単一ページとショップページ全体でテキストや色をすばやく変更するのに最適です。

最初に言っておくべきことは、「今すぐ購入」や「バッグに追加」のような、より明確で行動指向のラベルは、初めて訪れる訪問者のためらいを減らす傾向があるということです。なぜなら、次に何が起こるかを正確に伝えるからです。その小さな言葉遣いの変更は、しばしばここで最も簡単な勝利となります。

SeedProdでWooCommerceカスタムカートに追加ボタンをカスタマイズする

最初の方法では、SeedProdを使用します。これは、ボタンのテキスト、色、アイコンを視覚的に編集でき、変更がリアルタイムで反映されるためです。

SeedProdは、コードなしでストアのあらゆる部分をカスタマイズできるドラッグ＆ドロップ式のウェブサイトビルダーです。WooCommerceサポートが含まれているため、ポイント＆クリックでショップページや商品ページ（カートに追加ボタンを含む）をデザインできます。

始める前に正直な注意点があります。SeedProdのWooCommerceデザイン機能にはEliteプランが必要です。無料の方法をご希望の場合は、以下のWooCommerceブロック法に進んでください。

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

SeedProdの料金ページにアクセスし、WooCommerce機能をアンロックするためにEliteプランを選択してください。次に、プラグインをインストールして有効化します。

次に、SeedProd » 設定に移動し、ライセンスキーを貼り付けて、キーの検証をクリックします。

ステップ2. ウェブサイトキットの選択

次に、SeedProd » テーマビルダーに移動し、テーマボタンをクリックします。ここで、ワンクリックでインポートできるウェブサイトキットのライブラリが表示されます。

オンラインストア向けに設計されているため、「WooCommerce」とマークされたキットを探してください。

気に入ったデザインを選択すると、SeedProdがテーマビルダーにロードし、すぐにカスタマイズを開始できます。

ステップ3. カートに追加ボタンのカスタマイズ

それでは、最も重要なショップページと商品ページのカートに追加ボタンを編集しましょう。

ショップページのカートに追加ボタンをカスタマイズする

SeedProd » テーマビルダーで、ショップページを開き、デザインの編集をクリックします。

商品グリッドブロックを選択し、ボタン設定を開きます。

• スタイル：フラット、2D、ビンテージ、ゴースト、またはリンクを選択します。
• テキスト：ラベルを「今すぐ購入」のような、より明確なものに変更します。
• デザイン：[高度な設定]で色、サイズ、境界線の半径、ホバー効果を調整します。

ボタンのスタイルに満足したら、[保存]をクリックします。

商品ページのカートに追加ボタンをカスタマイズする

次に、商品ページテンプレートを開き、デザインを編集をクリックします。商品詳細エリアのカート追加ボタンを選択して、設定を編集します。

• テキストと配置：CTAテキストと位置を更新します。
• アイコン：Font Awesomeを使用して、テキストの前後にカートまたはチェックアイコンを追加します。
• 詳細設定：色、タイポグラフィ、スペーシング、ホバー効果を調整します。

カートに追加ボタンブロックをブログ記事のような他のテンプレートにドロップし、商品IDを入力すると、ボタンがその商品に直接リンクします。私は記事内で特定の商品を宣伝したいときにこれを行います。

ステップ4.変更を保存して公開する

WooCommerceページの見た目に満足したら、ストアを公開する準備が整いました。そのためには、テーマビルダーに戻り、右上隅にあるSeedProdテーマを有効にするトグルを「オン」の位置に切り替えます。

私がカスタマイズしたページの一部を見てみましょう。まずショップページからです。

こちらが新しいボタンのある商品ページです。

そしてこちらが商品アーカイブページです。

同じカートに追加ボタンブロックをブログページでも使用できます。

WooCommerceブロック（無料）でカートに追加ボタンをカスタマイズする

テーマがブロックテーマの場合、外観 » エディターの下のサイトエディターでカートに追加ボタンを開き、単一商品テンプレートを編集できます。

次にカートに追加ブロックを選択します。

ネイティブの単一商品ブロックでは、ボタンのテキスト、色、タイポグラフィを変更できないという正直な限界があります。主なオプションは数量セレクタのスタイルで、プレーンな入力フィールドとプラス/マイナスステッパーを切り替えることができます。

ショップおよびアーカイブグリッドでは、商品ボタンブロックは色とタイポグラフィの設定を表示しますが、ラベルは引き続きWooCommerceから取得されるため、そこでも再入力できません。無料でボタンテキストを変更するには、以下のコードスニペットメソッドを使用してください。

テキスト、色、アイコン、ホバースタイルをすべて1か所で完全に制御するには、上記のビジュアルビルダーが最も多くの機能を提供し、同じエディターでWooCommerceショップページをカスタマイズできます。

コードでWooCommerceカスタムカートに追加ボタンを追加する

コードがお好みですか？スニペットを使用してボタンのテキストと色を変更できます。安全のため、テーマファイルを直接編集する代わりに、WPCodeのようなプラグインを使用してこれらを追加してください。

WooCommerceでカートに追加ボタンのテキストを変更するにはどうすればよいですか？

ボタンのテキストは、小さなPHPフィルターで変更します。WooCommerceは、単一商品ページに1つのフィルター、ショップおよびアーカイブページに別のフィルターを使用するため、新しいラベルをすべての場所に表示したい場合は両方をカバーしてください。

最初のスニペットは、単一商品ページのラベルを変更します。WPCodeで新しいPHPスニペットを作成し、貼り付けます。

add_filter('woocommerce_product_single_add_to_cart_text', 'SP_customize_add_to_cart_button_woocommerce');
function SP_customize_add_to_cart_button_woocommerce() {
  return __('Buy this item', 'woocommerce');
}

2番目のスニペットは、商品がグリッドで表示されるショップおよび商品アーカイブページのラベルを変更します。最初のスニペットと一緒に、独自の Сниппет として追加してください。

add_filter('woocommerce_product_add_to_cart_text', 'SP_customize_archive_add_to_cart_button_woocommerce');
function SP_customize_archive_add_to_cart_button_woocommerce() {
  return __('Buy this item', 'woocommerce');
}

スニペットを保存し、単一の商品を表示して、新しいボタンテキストを確認してください。

新しいテキストが表示されない場合は、ページキャッシュとオブジェクトキャッシュをクリアしてください。フィルターは新しいレンダリングにのみ影響するため、キャッシュされたページやCDNのコピーは、フラッシュするまで古い「カートに追加」ラベルを提供し続ける可能性があります。

WooCommerceでカートに追加ボタンの色を変更する方法

ボタンの色はCSSで変更します。この最初のルールは、単一商品ページのボタンを対象としています。

外観 » カスタマイズ » 追加CSSに移動し、このCSSを追加します。

.single-product .product .single_add_to_cart_button.button {
  background-color: #FF0000;
  color: #C0C0C0;
}

この2番目のルールは、商品アーカイブやショップグリッドのボタンをスタイル設定するため、商品カテゴリ（アーカイブ）ページでも色が一致します。

.woocommerce .product .add_to_cart_button.button {
  background-color: #FF0000;
  color: #C0C0C0;
}

カートに追加URLでどこからでも購入ボタンをリンクする

ランディングページ、価格表、またはブログ投稿から商品をカートに追加するボタンが必要な場合は、カートに追加URLを使用します。?add-to-cart=ID&quantity=Nにリンクし、IDを商品IDに、Nを数量に置き換えます。

たとえば、https://yourstore.com/?add-to-cart=99&quantity=1は、クリックすると商品99の1つをカートに追加します。これは、追加の手順なしで直接チェックアウトに誘導するクリーンな方法です。

WooCommerceをカスタマイズするその他の方法

カート追加ボタンのカスタマイズは、ストアを調整するための多くの方法の1つにすぎません。その他のWooCommerceのカスタマイズについては、次のガイドを参照してください：

• WooCommerce追加情報タブをカスタマイズする方法
• WooCommerceにカート表示ボタンを追加する方法
• WooCommerceでショップページタイトルを変更する方法
• WooCommerceで在庫切れの商品を非表示にする方法

WooCommerceカスタムカートに追加ボタンのFAQ

単一商品だけでなく、ショップやアーカイブページでカートに追加ボタンのテキストを変更するにはどうすればよいですか？

単一商品ページとショップ/アーカイブページでは異なるフィルターが使用されます。単一商品ページにはwoocommerce_product_single_add_to_cart_textを、ショップおよびアーカイブグリッドにはwoocommerce_product_add_to_cart_textを使用します。

新しいラベルをすべてに適用するには、両方のスニペットをWPCodeに追加します。コードの編集を避けたい場合は、SeedProdで視覚的にテキストを変更してください。

WooCommerceのカートに追加ボタンをカスタマイズするためにプラグインが必要ですか、それとも無料でできますか？

コードスニペットを使えば無料でできます。WPCodeの無料版では、何も購入せずにボタンのテキストと色を変更できます。

SeedProdのビジュアルWooCommerceデザインにはEliteプランが必要ですが、テキスト、色、アイコン、ホバースタイルを1か所で最大限に制御できます。

WooCommerceブロックまたはサイトエディターを使用してカートに追加ボタンをカスタマイズするにはどうすればよいですか？

ブロックテーマで外観 » エディターを開き、単一商品テンプレートを編集して、カートに追加ブロックを選択します。ネイティブブロックは限定的です。単一商品ページでは、その主なオプションは数量セレクタのスタイル、つまりプレーンな入力フィールドまたはプラス/マイナスステッパーです。

ここではボタンのテキスト、色、またはタイポグラフィは変更されません。これらの変更には、代わりにコードスニペットまたはSeedProdのビジュアルビルダーを使用してください。

カスタムカートに追加ボタンのテキストが表示されないのはなぜですか？

最も一般的な原因はキャッシュです。キャッシュプラグイン、オブジェクトキャッシュ、またはCDNはページの古いバージョンを提供する可能性があるため、フィルターは新しいレンダリングにのみラベルを変更します。

ページキャッシュとオブジェクトキャッシュをクリアしてから、再読み込みしてください。また、単一ページとアーカイブページでは別々のフィルターが使用されるため、ページの種類に適したフィルターを追加したかどうかも確認してください。

今すぐWooCommerceのカートに追加ボタンをカスタマイズしましょう

そのプレーンなグレーのボタンは、今やブランドに沿った明確な行動喚起となり、購入者に次に何をすべきかを正確に伝えます。無料のWooCommerce Blocksオプション、簡単なコードスニペット、または完全なビジュアル再設計のためのSeedProdのいずれであっても、ストアに合った方法を選択してください。

こちらの投稿もおすすめです：WordPressでカスタムナビゲーション用のメニューを編集する方法。

今すぐSeedProdを使い始める

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