WooCommerceの[カートに追加]ボタンを非表示にして削除する方法

公開: 2020-12-10

ストアから[カートに追加]ボタンを非表示にしますか？このガイドでは、WooCommerceの[カートに追加]ボタンをプログラムで削除する方法を学習します（プラグインなし）。

WooCommerceの[カートに追加]ボタンを削除するのはなぜですか？

まず、[カートに追加]ボタンを非表示にする理由を理解しましょう。 [カートに追加]ボタンを削除することは、特定の商品またはストアの購入プロセスを無効にするための最良の方法の1つです。直感に反するように聞こえるかもしれませんが、実際には、[カートに追加]ボタンを削除すると状況によっては非常に役立つ場合があります。

ストアのカスタマイズに関してより多くのオプションを提供する以外に、ストアの一部のページから[カートに追加]ボタンを削除する理由はいくつかあります。

WooCommerceをカタログとして使用しているため
在庫切れや商品の在庫がなくなった場合
論理条件に基づいてボタンを削除する（つまり、特定のユーザーの役割または製品、ログインしていないユーザーなど）。
製品がまだ購入できないため
標準のWooCommerce購入プロセスに従う代わりに、ユーザーがそのボタンを使用してメッセージを送信したり、インタビューをスケジュールしたりする場合

これらは、ストアの[カートに追加]ボタンを削除または非表示にする必要がある状況のほんの一部ですが、他にも多くの状況があります。それでは、先に進んで、WooCommerceのカートに追加ボタンをストアから削除する方法を見てみましょう。

WooCommerceの[カートに追加]ボタンを削除する方法

このセクションでは、カートに追加ボタンを非表示にするさまざまな方法を学習します。さまざまな選択肢を提供するために、次の方法を紹介します。

サイト全体で[カートに追加]ボタンを削除または非表示にします
ログインしていないユーザーの[カートに追加]ボタンを非表示にします
ユーザーの役割に基づいて[カートに追加]ボタンを削除します
特定の商品の[カートに追加]ボタンを非表示にする
ボタンを一時的に削除し、日付の後に自動的に表示します

それぞれを見てみましょう。

始める前に

WordPressコアファイルを編集するので、何か問題が発生した場合に備えて、サイトの完全バックアップを作成することをお勧めします。さらに、子テーマを使用できます。お持ちでない場合は、このガイドに従って作成するか、子テーマプラグインを使用してください。

1）サイト全体で[カートに追加]ボタンを削除または非表示にします

[カートに追加]ボタンをストアから完全に非表示にする方法はいくつかあります。最も簡単な方法の1つは、子テーマのfunctions.phpファイルで次のスクリプトを使用することです。

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

最初のremove_action()フックでは、商品ページの[カートに追加]ボタンを無効にし、2番目のフックでは、ショップページで同じことを行います。ただし、よりクリーンで信頼性の高いソリューションは、製品を購入するオプションを無効にすることです。そうすることで、製品を購入できなくなり、ユーザーがカートに追加できないようにすることができます。

次のスクリプトを使用して、それを実行し、ストア全体で商品を購入できないようにすることができます。

add_filter( 'woocommerce_is_purchasable', '__return_false');

これにより、WooCommerceの[カートに追加]が無効になりますが、ボタンは削除されないことに注意してください。単に[続きを読む]ボタンに置き換えて、ボタンがまったくない製品ページにユーザーをリダイレクトします。カートに追加ボタンwoocommerceを削除します [カートに追加]ボタンを削除する以外に、[続きを読む]ボタンも非表示にする場合は、CSSルールを適用する必要があります。ただし、顧客はカートに商品を追加できないため、ブラウザ開発者ツールを使用して商品を再表示する方法を知っていても、何も購入できません。可能であれば、 remove_action()の代わりに常にadd_filterフックを使用するようにしてください。

WooCommerceフックの使用方法の詳細については、この完全なガイドを確認してください。

2.ログインしていないユーザーの[カートに追加]ボタンを非表示にします

登録ユーザー向けの特別オファーを実行しているとします。特別なランディングページを作成して、登録済みの顧客にのみリンクを記載したメールを送信できますが、他のユーザーと共有した場合はどうなりますか？この種の状況を回避し、適切な顧客にのみ割引を提供するようにするには、ログインしていないユーザーに対してのみ、WooCommerceストアから[カートに追加]ボタンを削除できます。これを行うには、子テーマのfunctions.phpファイルに次のスクリプトを貼り付けます。

 /* REMOVE ADD TO CART BUTTON FOR NON-LOGGED-IN USERS */
 if (!is_user_logged_in()) {
 // in product page
 add_filter('woocommerce_is_purchasable', '__return_false'); }

is_user_logged_in()ネイティブWordPress関数を使用することにより、ログインしていないユーザーに対してのみ[カートに追加]ボタンを無効にします。

3.ユーザーの役割に基づいて[カートに追加]ボタンを削除します

もう1つの興味深いオプションは、ユーザーの役割に基づいて[カートに追加]ボタンを削除することです。たとえば、管理者ユーザーのボタンを非表示にする方法を見てみましょう。

 /* REMOVE ADD TO CART BUTTON FOR ADMIN USERS */ add_action('wp_loaded','get_user_role'); function get_user_role(){ $current_user = wp_get_current_user(); if(count($current_user->roles)!==0){ if($current_user->roles[0]=='administrator'){ add_filter('woocommerce_is_purchasable', '__return_false'); }
 }
 }

スクリプトはWordPressユーザーオブジェクトを取得し、それに2つの条件を適用します。 1つ目は、ユーザーに役割があるかどうかを確認することであり、2つ目は、ユーザーの役割が指定した役割（この場合は管理者）と一致する場合にのみ製品を購入できないようにすることです。 if（$ current_user-> roles [0] == 'your_role'）{でロールを編集することにより、このコードを適合させ、[カートに追加]ボタンを表示したくないロールを変更できます。

4.特定の製品の[カートに追加]ボタンを非表示にします

ここで、特定の商品の在庫がなくなったため、それらの商品の[カートに追加]ボタンを一時的に非表示にしたいとします。

特定の製品のボタンを削除するには、このスクリプトをコピーして、子テーマのfunctions.phpファイルに貼り付けます。

 /* REMOVE ADD TO CART BUTTON ON SPECIFIC PRODUCT IDs*/ add_filter('woocommerce_is_purchasable', 'filter_is_purchasable', 10, 2); function filter_is_purchasable($is_purchasable, $product ) { global $product; if( in_array( $product->get_id(), not_purchasable_ids() )) { return false; } return $is_purchasable; } function not_purchasable_ids() { return array( 624,625 ); }

このサンプルスクリプトでは、ID 624および625の商品の[カートに追加]ボタンを無効にします。WooCommerceストアに適合させるには、これらのIDを商品IDに置き換えるだけです。ご覧のとおり、IDをコンマで区切るだけで複数の商品を追加できます。

製品のIDを確認するには、 WordPressダッシュボード> WooCommerce>製品に移動し、リスト内の製品にマウスを合わせます。または、製品をクリックすると、ブラウザのURLにそのIDが表示されます。

5.特定のカテゴリの[カートに追加]ボタンを無効にします

同様に、特定のカテゴリの[カートに追加]ボタンを削除できます。たとえば、「ラップトップ」カテゴリからボタンを非表示にしたい場合は、次のコードを使用します。

 add_action（ 'wp'、 'QL_remove_add_to_cart_from_category'）;
 関数QL_remove_add_to_cart_from_category（）{
 if（is_product_category（ 'laptops'））{
 remove_action（ 'woocommerce_after_shop_loop_item'、 'woocommerce_template_loop_add_to_cart'）;
 }
 }

このコードを使用して、3行目の「ラップトップ」を[カートに追加]ボタンを非表示にするカテゴリの名前に置き換えることを忘れないでください。

6. [カートに追加]ボタンを一時的に削除し、日付の後に自動的に表示します

それでは、物事をさらに一歩進めて、私たちが学んだことのいくつかを組み合わせましょう。製品を発売しようとしているので、そのすべての機能を備えた製品ページを作成するとします。そのページを使用して、発売前に誇大広告を作成し、製品を宣伝したい場合は、発売日まで[カートに追加]ボタンを非表示にしてから、発売日を自動的に表示できます。

たとえば、2020年12月15日に商品を発売する予定で、それまで[カートに追加]ボタンを削除してから、その特定の日にボタンを表示するとします。これを行うには、次のスクリプトをコピーして貼り付けます。

 add_filter( 'woocommerce_is_purchasable', 'hide_add_to_cart_button_until_date', 10, 2 ); function hide_add_to_cart_button_until_date( $is_purchasable = true, $product ) { $current_date = date('Ym-d'); $release_date = date( 'Ym-d', strtotime('2020-12-15') ); if( strtotime($current_date) < strtotime($release_date) && $product->get_id() == 624 ) { $is_purchasable = false; } return $is_purchasable; }

これにより、[カートに追加]ボタンが、リリース日までユーザーを製品ページにリダイレクトする[続きを読む]ボタンに置き換えられます。それでは、スクリプトがどのように機能するかをよりよく理解しましょう。このコードは、現在の日付と発売日を比較し、現在の日付が早い場合、製品を購入できなくなります。

現在の日付が発売日以降になると、製品を購入できるようになり、[カートに追加]ボタンが自動的に表示されます。日付だけでなく、製品ID（この例では624）も指定することを忘れないでください。

ボーナス：[カートに追加]ボタンをカスタマイズする

上記で説明したいくつかの状況では、[カートに追加]ボタンをカスタマイズして、買い物客に印象を与えることが非常に便利です。ボタンを非表示にする以外に、テキストと色を変更したり、ボタンの上または下にテキストを追加したり、ボタンの動作を編集したりすることができます。簡単なことから始めて、[カートに追加]ボタンのテキストを変更する方法を見てみましょう。

「カートに追加」の代わりに、ボタンに「このアイテムを購入」というテキストを表示するとします。次のスクリプトをコピーしてfunctions.phpファイルに貼り付けるだけです。

 （ 'woocommerce_product_single_add_to_cart_text'、 'QL_customize_add_to_cart_button_woocommerce'）;
関数QL_customize_add_to_cart_button_woocommerce（）{
return __（ 'このアイテムを購入'、 'woocommerce'）;
}

さらに、単一の製品のボタンの色を変更するには、このスクリプトを使用して、必要な色を選択します。

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

これらは2つの基本的な例にすぎませんが、さらに多くのことを実行して、他の多くの方法でボタンをカスタマイズできます。その他の例と情報については、[カートに追加]ボタンを編集する方法に関するステップバイステップガイドをご覧ください。

結論

結論として、[カートに追加]ボタンを非表示にすると、さまざまな状況で役立ちます。

WooCommerceをカタログとして使用する場合
在庫切れや商品の在庫がなくなった場合
特定のタイプのユーザーまたはユーザーロールのキャンペーンを実行するには
新製品を発売しようとしているとき
ボタンを使用して、標準のWooCommerce購入プロセスに従わない特定のアクションを実行する場合

このガイドでは、[カートに追加]ボタンを削除するさまざまな方法を学習しました。特定の商品、ユーザー、ユーザーの役割について、ストア全体から非表示にする方法、さらには非表示にして特定の日付の後に自動的に再度表示する方法についても説明しました。これにより、さまざまな状況でストアをカスタマイズするための柔軟性が少し得られます。これらのスクリプトをベースとして使用し、編集してストアで最大限に活用してください。

[カートに追加]ボタンを削除したくないが問題が発生している場合は、カートに追加で最も一般的な問題を修正するのに役立つこのガイドを確認することをお勧めします。

[カートに追加]ボタンを最大限に活用する方法の詳細については、次のチュートリアルを確認してください。

WooCommerceの[カートに追加]ボタンをカスタマイズする方法
WooCommerceプログラムでカートに追加機能

スクリプトに問題がありますか？ [カートに追加]ボタンを削除する他の方法を知っていますか？以下のコメントセクションでお知らせください。