Comment masquer / supprimer le bouton Ajouter au panier dans WooCommerce (étape par étape)

Comment masquer et supprimer le bouton Ajouter au panier dans WooCommerce

Commençons par déterminer pourquoi vous pourriez vouloir masquer le bouton Ajouter au panier. L'un des moyens les plus efficaces de désactiver le processus d'achat pour un produit ou un magasin spécifique consiste à supprimer le bouton Ajouter au panier. Même si cela peut sembler étrange, la suppression du bouton Ajouter au panier peut être extrêmement utile dans certaines circonstances.

Il existe de nombreuses raisons pour lesquelles vous pourriez vouloir supprimer le bouton Ajouter au panier de certaines pages de votre boutique, en plus de vous offrir plus d'options de personnalisation :

  1. Lorsqu'un produit est en rupture de stock ou n'est plus disponible
  2. Pour désactiver le bouton en fonction de la logique (c'est-à-dire pour des rôles d'utilisateur ou des produits spécifiques, des utilisateurs non connectés, etc.)
  3. Le produit n'est pas encore disponible à l'achat.
  4. Lorsque vous souhaitez que les clients utilisent ce bouton au lieu du processus d'achat standard de WooCommerce pour envoyer un message ou organiser un entretien.

Ce ne sont là que quelques exemples de cas où vous voudrez peut-être masquer ou supprimer le bouton Ajouter au panier de votre boutique. Commençons par supprimer le bouton d'ajout au panier WooCommerce de votre boutique.

 

Comment supprimer le bouton Ajouter au panier dans WooCommerce

Dans cet article, vous apprendrez à masquer le bouton d'ajout au panier de différentes manières. Nous allons vous montrer comment faire ce qui suit pour vous donner plus d'options :

  1. Supprimez ou masquez le bouton Ajouter au panier sur l'ensemble du site.
  2. Masquez le bouton Ajouter au panier pour les utilisateurs qui ne sont pas connectés.
  3. Supprimez le bouton Ajouter au panier en fonction des rôles d'utilisateur.
  4. Masquer le bouton Ajouter au panier sur certains produits.
  5. Désactiver le bouton Ajouter au panier pour certaines catégories uniquement
  6. Supprimez temporairement le bouton et il réapparaîtra après une date.
  7. Jetons un coup d'œil à chacun d'eux dans différentes sections.

Remarque : étant donné que nous modifierons les fichiers principaux de WordPress, nous vous recommandons de faire une sauvegarde complète de votre site en cas de problème. Vous pouvez également utiliser un thème enfant. Si vous n'en avez pas déjà un, vous pouvez en créer un vous-même ou utiliser un plugin de thème enfant.

1. Supprimez ou masquez le bouton Ajouter au panier sur l'ensemble du site

Il existe plusieurs options pour supprimer entièrement le bouton Ajouter au panier de votre boutique. L'une des plus simples consiste à placer le script suivant dans votre thème enfant fichier 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);

Nous supprimons le bouton Ajouter au panier sur la page du produit avec le premier hook remove action(), et nous faisons de même sur la page du panier avec le second. La désactivation de l'option d'achat de produits, en revanche, est une solution plus soignée et plus fiable. Vous pourrez rendre les produits indisponibles à l'achat et empêcher les utilisateurs de les ajouter à leur panier de cette façon.

Avec le script suivant, vous pouvez le faire et rendre tous vos produits indisponibles à l'achat dans votre boutique :

add_filter( 'woocommerce_is_purchasable', '__return_false');

Cela désactivera le bouton WooCommerce Ajouter au panier, mais pas le bouton lui-même. Il sera simplement remplacé par un bouton Lire la suite, redirigeant les utilisateurs vers la page produit, qui sera libre de tout bouton.

Si vous souhaitez masquer le bouton En savoir plus en plus du bouton Ajouter au panier, vous devez utiliser une règle CSS. Les clients, d'autre part, ne pourront rien acheter car ils ne pourront pas ajouter de produits au panier, même s'ils apprennent à utiliser l'outil de développement de navigateur pour l'afficher. Utilisez le hook add filter() plutôt que le hook remove action() chaque fois que possible.

Lire la suite: Comment modifier le texte du bouton Ajouter au panier

2. Masquez le bouton Ajouter au panier pour les utilisateurs qui ne sont pas connectés

Supposons que vous organisez une promotion à durée limitée pour vos utilisateurs enregistrés. Vous pouvez créer une page de destination unique et envoyer un e-mail uniquement à vos utilisateurs enregistrés avec le lien, mais que se passe-t-il s'ils le partagent avec d'autres ? Vous pouvez supprimer le bouton Ajouter au panier de votre boutique WooCommerce uniquement pour les utilisateurs non connectés afin d'éviter que cela ne se produise et de vous assurer que vous n'accordez des remises qu'au consommateur ciblé. Pour cela, collez le script suivant dans le fichier functions.php de votre thème enfant :

si (!is_user_logged_in()) {
// dans la page produit
add_filter('woocommerce_is_purchasable', '__return_false');

}

Nous désactiverons le bouton Ajouter au panier uniquement pour les utilisateurs non connectés en appliquant la fonction WordPress native est l'utilisateur connecté().

3. Supprimez le bouton Ajouter au panier sur la base des rôles d'utilisateur

Une autre option brillante consiste à désactiver le bouton Ajouter au panier en fonction du rôle de l'utilisateur. Voyons comment rendre le bouton invisible pour tout utilisateur administrateur :

add_action('wp_loaded','get_user_role');

fonction get_user_role(){

$current_user = wp_get_current_user();

  if(count($current_user->roles)!==0){

  if($current_user->roles[0]=='administrateur'){

add_filter('woocommerce_is_purchasable', '__return_false');

}

}

}

L'objet utilisateur WordPress est récupéré et deux conditions lui sont appliquées par le script. La première consiste à déterminer si un utilisateur a un rôle, et la seconde à rendre les produits indisponibles à l'achat uniquement si le rôle de l'utilisateur correspond à celui que nous spécifions (administrateur dans ce cas). Vous pouvez sûrement utiliser ce code et modifier le rôle que vous ne voulez pas voir 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 certains produits

Supposons que vous soyez en rupture de stock pour certains articles et que vous souhaitiez masquer temporairement le bouton Ajouter au panier pour ces articles.

Copiez et collez le script suivant dans le fichier functions.php du thème enfant pour supprimer le bouton pour des produits spécifiques :

add_filter('woocommerce_is_purchasable', 'filter_is_purchasable', 10, 2);

fonction filter_is_purchasable($is_purchasable, $product ) {

global $ produit;

if( in_array( $product->get_id(), not_purchasable_ids() )) {

return false;

}

retourne $is_purchasable ;

}

fonction non_purchasable_ids() {

tableau de retour( 624,625 );

}

Le bouton Ajouter au panier est désactivé pour les produits avec les ID 624 et 625 dans cet exemple de script. Envisagez de remplacer ces identifiants par vos identifiants de produit WooCommerce pour l'adapter à votre boutique. Comme vous pouvez le voir, vous pouvez autoriser un nombre illimité de produits en utilisant simplement une virgule pour séparer les identifiants.

Accédez à votre tableau de bord WordPress > WooCommerce > Produits et passez votre souris sur un produit de la liste pour voir son ID.

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

Vous pouvez également désactiver le bouton Ajouter au panier pour des catégories particulières. Par exemple, si vous souhaitez masquer le bouton de la catégorie "Ordinateurs portables", vous pouvez utiliser le code suivant :

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

  } 

}

Copiez simplement ce code et remplacez "ordinateurs portables" à la ligne 3 par le titre de la catégorie où le bouton Ajouter au panier doit être masqué.

6. Supprimez temporairement le bouton et il réapparaîtra après une date

Prenons les choses à un autre niveau et rassemblons une partie de ce que nous avons lu. Supposons que vous êtes sur le point de lancer un produit et que vous avez déjà créé une page de produit avec toutes ses fonctionnalités. Si vous souhaitez utiliser cette page pour informer vos clients du lancement et promouvoir le produit avant sa mise en ligne, vous pouvez masquer le bouton Ajouter au panier jusqu'au lancement officiel, puis le faire apparaître automatiquement le jour du lancement.

Supposons que vous prévoyiez de présenter votre produit le 15 décembre 2020 et que vous souhaitiez masquer le bouton Ajouter au panier jusque-là, puis le révéler à nouveau le 15 décembre. Pour ce faire, copiez et collez simplement le script ci-dessous :

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 ;

}

retourne $is_purchasable ;

}

Le bouton Ajouter au panier sera remplacé par un bouton En savoir plus qui amènera les utilisateurs à la page du produit jusqu'à la date de lancement. Examinons de plus près le fonctionnement du script maintenant. Le code compare la date actuelle à la date de lancement, et si la date actuelle est antérieure, le produit n'est pas disponible à l'achat.

Le produit sera disponible à l'achat lorsque la date actuelle égale ou dépasse la date de lancement, et le bouton Ajouter au panier apparaîtra automatiquement. N'oubliez pas d'inclure la date ainsi que l'identifiant du produit (624 dans notre exemple).

Vous avez appris plusieurs méthodes pour supprimer le bouton Ajouter au panier dans ce guide. Nous avons vu comment le masquer dans l'ensemble du magasin, pour des produits, des utilisateurs et des rôles d'utilisateur spécifiques, et même comment le masquer pendant un certain jour, puis le réafficher automatiquement. Cela vous donne un peu plus de latitude lorsqu'il s'agit de personnaliser votre magasin pour différents scénarios.

Utilisez simplement ces scripts comme point de départ et modifiez-les pour répondre aux besoins de votre magasin.

 

À propos de l’auteur
Daniel Luke
Daniel est concepteur et développeur Web. Il est développeur depuis 10 ans et travaille avec divers thèmes WordPress, ce qui lui permet de comparer et de contraster différents thèmes, de comprendre les forces et les faiblesses pour développer des critiques factuelles et réelles. Il est également développeur d’applications mobiles et réviseur technologique. Depuis plusieurs années, il a développé ses propres applications mobiles, tant sur Android que sur iPhone. Cette spécialisation pratique dans le développement mobile et Web lui permet de faire autorité en matière de reporting technologique.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Veuillez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!

Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...