Comment masquer et supprimer le bouton Ajouter au panier dans WooCommerce

Publié: 2020-12-10

Voulez-vous masquer le bouton Ajouter au panier de votre boutique ? Dans ce guide, vous apprendrez à supprimer le bouton Ajouter au panier dans WooCommerce par programmation (pas de plugins).

Pourquoi supprimer le bouton Ajouter au panier dans WooCommerce ?

Tout d'abord, commençons à comprendre pourquoi vous souhaitez peut-être masquer le bouton Ajouter au panier. La suppression du bouton Ajouter au panier est l'un des meilleurs moyens de désactiver le processus d'achat pour un certain produit ou magasin. Même si cela peut sembler contre-intuitif, la vérité est que la suppression du bouton Ajouter au panier peut être très utile dans certaines situations.

En plus de vous donner plus d'options pour personnaliser votre boutique, il existe plusieurs raisons pour lesquelles vous pouvez supprimer le bouton Ajouter au panier de certaines pages de votre boutique :

Parce que vous utilisez WooCommerce comme catalogue
Lorsque vous êtes en rupture de stock ou qu'un produit n'est plus disponible
Pour supprimer le bouton en fonction de conditions logiques (c'est-à-dire pour des rôles d'utilisateur ou des produits spécifiques, des utilisateurs non connectés, etc.)
Parce que le produit n'est pas encore disponible à l'achat
Lorsque vous souhaitez que les utilisateurs utilisent ce bouton pour envoyer un message ou programmer un entretien au lieu de suivre le processus d'achat standard de WooCommerce

Ce ne sont là que quelques situations dans lesquelles vous devrez peut-être supprimer ou masquer le bouton Ajouter au panier de votre boutique, mais il en existe de nombreuses autres. Maintenant, allons-y et voyons comment supprimer le bouton d'ajout au panier WooCommerce de votre boutique.

Comment supprimer le bouton Ajouter au panier dans WooCommerce

Dans cette section, vous découvrirez différentes manières de masquer le bouton d'ajout au panier . Pour vous proposer différentes alternatives, nous vous montrerons comment :

Supprimer ou masquer le bouton Ajouter au panier sur tout le site
Masquer le bouton Ajouter au panier pour les utilisateurs non connectés
Supprimer le bouton Ajouter au panier en fonction des rôles d'utilisateur
Masquer le bouton Ajouter au panier sur des produits spécifiques
Supprimer temporairement le bouton et l'afficher automatiquement après une date

Jetons un coup d'œil à chacun d'eux.

Avant de commencer

Comme nous modifierons les fichiers principaux de WordPress, nous vous recommandons de créer une sauvegarde complète de votre site en cas de problème. De plus, vous pouvez utiliser un thème enfant. Si vous n'en avez pas, vous pouvez soit en créer un en suivant ce guide, soit utiliser un plugin de thème enfant.

1) Supprimer ou masquer le bouton Ajouter au panier sur tout le site

Il existe plusieurs façons de masquer complètement le bouton Ajouter au panier de votre boutique . L'un des plus simples consiste à utiliser le script suivant dans le fichier functions.php de votre thème enfant :

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 );

Avec le premier crochet remove_action() , nous désactivons le bouton Ajouter au panier sur la page produit et avec le second, nous faisons de même sur la page boutique. Cependant, une solution plus propre et plus fiable consiste à désactiver l'option d'achat de produits. De cette façon, vous rendrez les produits non achetables et empêcherez les utilisateurs de les ajouter au panier.

Vous pouvez le faire et rendre vos produits non achetables sur l'ensemble de votre boutique avec le script suivant :

add_filter( 'woocommerce_is_purchasable', '__return_false');

Notez que cela désactivera l'Ajouter au panier dans WooCommerce mais cela ne supprimera pas le bouton. Il le remplacera simplement par un bouton Lire la suite , redirigeant les utilisateurs vers la page du produit, où il n'y a pas de bouton du tout. Si en plus de supprimer le bouton Ajouter au panier, vous souhaitez également masquer le bouton Lire la suite , vous devez appliquer une règle CSS. Cependant, comme les clients ne pourront pas ajouter de produits au panier, ils ne pourront rien acheter, même s'ils savent comment utiliser l'outil de développement de navigateur pour l'afficher. Lorsque cela est possible, vous devriez toujours essayer d'utiliser le hook add_filter au lieu de remove_action() .

Pour plus d'informations sur l'utilisation des hooks WooCommerce, consultez ce guide complet.

2. Masquez le bouton Ajouter au panier pour les utilisateurs non connectés

Supposons que vous proposez une offre spéciale à vos utilisateurs enregistrés. Vous pouvez créer une page de destination spéciale et envoyer un e-mail avec le lien uniquement à vos clients enregistrés, mais que se passe-t-il s'ils le partagent avec d'autres utilisateurs ? Pour éviter ce type de situation et vous assurer que vous n'offrez les remises qu'aux bons clients, vous pouvez supprimer le bouton Ajouter au panier de votre boutique WooCommerce uniquement pour les utilisateurs non connectés . Pour cela, collez le script suivant dans le fichier functions.php de votre thème enfant :

 /* 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'); }

En utilisant la fonction WordPress native is_user_logged_in() , nous désactiverons le bouton Ajouter au panier uniquement pour les utilisateurs non connectés.

3. Supprimer le bouton Ajouter au panier en fonction des rôles d'utilisateur

Une autre option intéressante consiste à supprimer le bouton Ajouter au panier en fonction des rôles des utilisateurs . Par exemple, voyons comment masquer le bouton pour n'importe quel utilisateur admin :

 /* 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'); }
 }
 }

Le script récupère l'objet utilisateur WordPress et lui applique deux conditions. Le premier est de savoir si un utilisateur a un rôle et le second de rendre les produits non achetables uniquement si le rôle de l'utilisateur correspond à celui que nous spécifions (administrateur dans ce cas). Vous pouvez adapter ce code et modifier le rôle que vous ne souhaitez pas voir sur le bouton Ajouter au panier en modifiant le rôle dans if($current_user->roles[0]=='your_role'){.

4. Masquer le bouton Ajouter au panier sur des produits spécifiques

Maintenant, supposons que vous soyez en rupture de stock pour certains produits, vous souhaitez donc masquer temporairement le bouton Ajouter au panier pour ces produits .

Pour supprimer le bouton pour des produits spécifiques, copiez et collez ce script dans le fichier functions.php du thème enfant :

 /* 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 ); }

Dans cet exemple de script, nous désactivons le bouton Ajouter au panier pour les produits avec les identifiants 624 et 625. Pour l'adapter à votre boutique WooCommerce, remplacez simplement ces identifiants par vos identifiants de produit. Comme vous pouvez le constater, vous pouvez ajouter plusieurs produits en séparant simplement les identifiants par une virgule.

Pour connaître l'ID d'un produit, rendez-vous dans votre tableau de bord WordPress > WooCommerce > Produits et passez la souris sur un produit de la liste. Alternativement, si vous cliquez sur le produit, vous verrez son ID dans l'URL de votre navigateur.

5. Désactiver le bouton Ajouter au panier pour certaines catégories

De même, vous pouvez supprimer le bouton Ajouter au panier pour certaines catégories . Par exemple, supposons que vous souhaitiez masquer le bouton de la catégorie "Ordinateurs portables", vous utiliseriez ce code :

 add_action('wp', 'QL_remove_add_to_cart_from_category' );
 fonction QL_remove_add_to_cart_from_category(){
 if( is_product_category( 'ordinateurs portables' ) ) {
 remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
 }
 }

Prenez simplement ce code et n'oubliez pas de remplacer "ordinateurs portables" à la ligne 3 par le nom de la catégorie dans laquelle vous souhaitez masquer le bouton Ajouter au panier.

6. Supprimer temporairement le bouton Ajouter au panier et l'afficher automatiquement après une date

Allons maintenant plus loin et combinons certaines des choses que nous avons apprises. Imaginez que vous êtes sur le point de lancer un produit, vous créez donc la page du produit avec toutes ses fonctionnalités. Si vous souhaitez utiliser cette page pour créer du battage médiatique et promouvoir le produit avant le lancement, vous pouvez masquer le bouton Ajouter au panier jusqu'à la date de lancement, puis l'afficher automatiquement le jour du lancement .

Par exemple, supposons que vous prévoyiez de lancer votre produit le 15 décembre 2020, vous souhaitez donc supprimer le bouton Ajouter au panier jusque-là, puis afficher le bouton à cette date précise. Pour cela, copiez et collez simplement le script suivant :

 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; }

Cela remplacera le bouton Ajouter au panier par un bouton En savoir plus qui redirigera les utilisateurs vers la page du produit jusqu'à la date de lancement. Maintenant, comprenons mieux comment fonctionne le script. Le code compare la date actuelle avec la date de lancement et si la date actuelle est antérieure, cela rend le produit inachetable.

Lorsque la date actuelle est égale ou postérieure à la date de lancement, le produit sera disponible à l'achat et le bouton Ajouter au panier s'affichera automatiquement. N'oubliez pas de préciser non seulement la date mais aussi l'ID du produit (624 dans notre exemple).

Bonus : Personnalisez le bouton Ajouter au panier

Pour certaines des situations que nous avons décrites ci-dessus, il est très utile de personnaliser le bouton Ajouter au panier et d'impressionner vos acheteurs. En plus de masquer le bouton, vous pouvez modifier son texte et sa couleur, ajouter du texte au-dessus ou en dessous, modifier le comportement du bouton, etc. Commençons par quelque chose de simple et voyons comment modifier le texte du bouton Ajouter au panier.

Supposons qu'au lieu de « Ajouter au panier », vous souhaitiez afficher le texte « Acheter cet article » dans le bouton. Copiez et collez simplement le script suivant dans le fichier functions.php :

 ('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');
fonction QL_customize_add_to_cart_button_woocommerce(){
return __('Acheter cet article', 'woocommerce');
}

De plus, pour changer la couleur du bouton sur des produits individuels, utilisez ce script et choisissez les couleurs souhaitées.

 .single-product .product .single_add_to_cart_button.button {
couleur de fond : #FF0000 ;
couleur : #C0C0C0 ;
}

Ce ne sont que deux exemples de base, mais vous pouvez faire beaucoup plus et personnaliser le bouton de bien d'autres façons. Pour plus d'exemples et d'informations, consultez notre guide étape par étape sur la façon de modifier le bouton Ajouter au panier.

Conclusion

En conclusion, masquer le bouton Ajouter au panier peut être utile dans de nombreuses situations différentes :

Lorsque vous utilisez WooCommerce comme catalogue
Lorsque vous êtes en rupture de stock ou qu'un produit n'est plus disponible
Pour exécuter des campagnes pour certains types d'utilisateurs ou rôles d'utilisateur
Lorsque vous êtes sur le point de lancer un nouveau produit
Lorsque vous utilisez le bouton pour effectuer une certaine action qui ne suit pas le processus d'achat standard de WooCommerce

Dans ce guide, vous avez appris différentes manières de supprimer le bouton Ajouter au panier. Nous avons vu comment le masquer de toute la boutique, pour certains produits, utilisateurs et rôles d'utilisateur, et même comment le masquer puis l'afficher à nouveau automatiquement après une date précise. Cela vous donnera un peu de flexibilité pour personnaliser votre magasin dans différentes situations. Utilisez simplement ces scripts comme base et modifiez-les pour en tirer le meilleur parti sur votre boutique.

Si vous ne souhaitez pas supprimer le bouton Ajouter au panier mais que vous rencontrez des problèmes, nous vous recommandons de consulter ce guide qui vous aide à résoudre les problèmes les plus courants liés au bouton Ajouter au panier.

Pour plus d'informations sur la façon de tirer le meilleur parti du bouton Ajouter au panier, consultez les tutoriels suivants :

Comment personnaliser le bouton Ajouter au panier dans WooCommerce
Fonction Ajouter au panier de WooCommerce par programme

Avez-vous eu des problèmes avec les scripts ? Connaissez-vous d'autres moyens de supprimer le bouton Ajouter au panier ? Faites-nous savoir dans la section commentaires ci-dessous!