WooCommerceの[カートに追加]ボタンをカスタマイズする方法

 add_action（ 'woocommerce_single_product_summary'、 'QL_add_text_above_add_to_cart'、20）;
関数 'QL_add_text_above_add_to_cart'（）{
  echo'14日間の返金保証 ';
}

一方、 [カートに追加]ボタンの下にテキストを追加することもできます。 これは、たとえば一括購入の割引がある可能性があることを買い物客に通知するのに役立ちます。 [カートに追加]ボタンの下にテキストを追加するには、次のコードスニペットを使用できます。

 add_action（ 'woocommerce_after_add_to_cart_button'、 'QL_add_text_under_add_to_cart'）;
関数QL_add_text_under_add_to_cart（）{
  echo '一括購入についてはお問い合わせください';
} 

ご覧のとおり、これらは非常に簡単な変更であり、すぐにコンバージョン率を上げることができます。

3）[カートに追加]ボタンの色を変更します

それでは、色を変更して[カートに追加]ボタンを編集する方法を見てみましょう。 ほとんどのWordPressおよびWooCommerceテーマにはボタンのデフォルトの色が付いていますが、それらがストアのスタイルと一致していることを確認する必要があります。

WooCommerceの[カートに追加]ボタンの色をカスタマイズするには、CSSコードスニペットをstyle.cssファイルに追加する必要があります。 FTPクライアントを使用するか、WordPressダッシュボードから[外観]> [カスタマイズ]> [追加のCSS]に移動してアクセスできます。 ここに2つのオプションがあります：

1. 単一製品の[カートに追加]ボタンの色を変更します
2. アーカイブページの[カートに追加]ボタンの色を変更します

3.1）単一製品の色を変更する

このコードをstyle.cssファイルに貼り付けて、色を希望の色に変更します。 この場合、背景は赤、テキストは銀色になります。

 .single-product .product .single_add_to_cart_button.button {
背景色：＃FF0000;
色：＃C0C0C0;
}

3.2）アーカイブページの[カートに追加]ボタンの色を変更します

[カートに追加]ボタンをカスタマイズしてWooCommerceアーカイブページでその色を変更するには、このコードを使用して、16進コードをストアに適したものに変更します。

 .woocommerce .product .add_to_cart_button.button {
背景色：＃FF0000;
色：＃C0C0C0;
} 

4）[カートに追加]ボタンを削除し、ショップページに[直接購入]ボタンを追加します

それでは、より高度なオプションを見てみましょう。 いくつかのステップで購入プロセスを行うと、買い物客が各段階で立ち寄る可能性が高くなります。 そのため、目標到達プロセスを短縮することは、チェックアウトを最適化し、コンバージョン率を向上させるための優れた方法です。

このセクションでは、 [カートに追加]ボタンを削除し、WooCommerceのダイレクトチェックアウトを使用して直接購入ボタンに置​​き換える方法を説明します。 このプラグインには無料バージョンとプレミアムバージョンの両方があり、チェックアウトを簡素化するのに役立つ多くの機能が付属しています。 さらに、カートページをスキップして、ユーザーをチェックアウトページに直接リダイレクトできるため、購入プロセスが短縮されます。 それでは、[カートに追加]ボタンを完全に削除して、直接購入ボタンに置​​き換える方法を見てみましょう。

[カートに追加]ボタンの機能を変更します

まず、ダイレクトチェックアウトをインストールしてアクティブ化する必要があります。 このリンクから無料版をダウンロードするか、19米ドル（一括払い）から始まるプレミアムプランの1つをご覧ください。

プラグインをアクティブ化した後、 WordPressダッシュボードで、 WooCommerce> Direct checkout> Generalに移動し、次のようにオプションを入力します。

WooCommerceショップページをカスタマイズする方法の詳細については、この完全ガイドをご覧ください。

[カートに追加]ボタンのテキストを変更します

[全般]タブでオプションを設定した後、[カートに追加]ボタンをクリックすると、ユーザーはチェックアウトページにリダイレクトされます。 ただし、機能を変更したため、ボタンのテキストも編集する必要があります。 ボタンはカートに商品を追加しなくなったので、たとえば今すぐ購入のようなものに変更することをお勧めします。 これを行うには、[アーカイブ]タブに移動し、次のようにオプションを入力します。 ここでは、特定の製品タイプのボタンテキストを変更できます。 対応するフィールドですべての製品を選択することにより、すべてのタイプの製品に変更を適用します。 その後、フロントエンドを確認します。

ご覧のとおり、WooCommerceストアの[カートに追加]ボタンをカスタマイズし、[カートに追加]ボタンを、ショップページからチェックアウトページに直接移動する[今すぐ購入]ボタンに置​​き換えました。 さらに、ストアからカート機能を完全に削除しました。

[カートに追加]ボタンを削除する方法の詳細については、このステップバイステップガイドを確認してください。

5）[カートに追加]ボタンをカスタマイズし、製品ページに[直接購入]ボタンを追加します

最後に、同様のことを行い、[カートに追加]ボタンをカスタマイズして、ユーザーを商品ページからチェックアウトにリダイレクトできます。

このようにして、WooCommerceの[ショップ]ページと[製品]ページの両方で、カスタムの[カートに追加]ボタンを簡単に作成できます。 そして最良の部分は、各ページに異なるボタンを配置できることです。

カートに追加されたメッセージをカスタマイズする方法

ボタンのカスタマイズとは別に、カートに追加されたメッセージを編集することもできます。 これを行う最も簡単な方法は、次のスクリプトをfunctions.phpファイルに貼り付けてメッセージを変更することです。

 add_filter（ 'wc_add_to_cart_message_html'、 'quadlayers_custom_add_to_cart_message'）;
関数quadlayers_custom_add_to_cart_message（）{
   $ message = '商品がカートに追加されました。 ありがとうございます！' ;
   $ messageを返します。
}

この場合、メッセージを「商品がカートに追加されました」に変更します。 ありがとうございます！

よりパーソナライズするために、顧客がカートに追加したばかりの製品の名前を次のように表示できます。

 add_filter（ 'wc_add_to_cart_message'、 'quadlayers_custom_wc_add_to_cart_message'、10、2）; 
 
function quadlayers_custom_wc_add_to_cart_message（$ message、$ product_id）{ 
    $ message = sprintf（esc_html __（ '％sがカートに追加されました。お買い物ありがとうございます！'、 'tm-organik'）、get_the_title（$ product_id））; 
    $ messageを返します。 
} 

これらはほんの一例ですが、メッセージにリンクやボタンを追加したり、実行できることは他にもたくさんあります。 詳細については、WooCommerceAdd-to-Cartメッセージを変更する方法に関するガイドをご覧ください。

ボーナス：さまざまなカテゴリの[カートに追加]ボタンのテキストを変更します

ここで、さまざまな製品カテゴリがあり、カテゴリごとにカスタムの[カートに追加]ボタンが必要だとします。 たとえば、製品カテゴリ1には「今すぐ購入」というボタンがあり、カテゴリ2には「ダウンロード」というテキストを表示したい場合があります。

これを行うには、ポイント1で使用したのと同じ関数を使用する必要がありますadd_filter('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');

各製品のカテゴリを取得してから、条件を使用して、次のように分類法に応じてテキストを変更する必要があります。

if($category=='category 1'){
return __('Buy Now', 'woocommerce');
}elseif($category=='category 2'){
return __('Download', 'woocommerce');
}else{
return __('Default text', 'woocommerce');
}

[カートに追加]ボタンが機能しません。 私に何ができる？

[カートに追加]ボタンが機能しない理由はいくつか考えられます。 最も一般的なものは次のとおりです。

• プラグイン/テーマの非互換性
• 情報が不完全な製品
• キャッシュに関する問題
• チェックアウトエンドポイント
• パーマリンク
• ModSecurityの問題
• もっと

これらの各問題を解決する方法については、[カートに追加]ボタンを修正する方法に関するガイドをご覧ください。

ノート

• プラグインオプションパネルの[アーカイブ]セクションに保存した設定は、ベースの[ショップ]および[製品]カテゴリページに適用されますが、[製品]セクションの設定は製品ページにのみ適用されます。
• このデモでは、Storefrontテーマを使用しましたが、WooCommerceと互換性のある任意のテーマを使用できます。
• ほとんどのテーマは問題なく統合されますが、一部のテーマはデフォルトのWooCommerce機能を変更し、ダイレクトチェックアウトを使用するときに問題を引き起こす可能性があります。
• ダイレクトチェックアウトのいくつかの基本的な機能について説明しました。 より高度な機能については、ストアを次のレベルに引き上げるのに役立つプレミアムプランをご覧ください。

結論

全体として、[カートに追加]ボタンをカスタマイズすると、ビジネスに大きな影響を与える可能性があります。 そのため、店舗のニーズに合わせて調整することをお勧めします。 このガイドでは、プログラムとプラグインの両方で[カートに追加]ボタンをカスタマイズするさまざまな方法を学びました。

• [カートに追加]ボタンのテキストを変更します
• [カートに追加]ボタンの上または下にテキストを追加します
• [カートに追加]ボタンの色を変更します
• [カートに追加]ボタンを削除し、ショップページに[直接購入]ボタンを追加します
• [カートに追加]ボタンをカスタマイズし、製品ページに[直接購入]ボタンを追加します