Tutoriel WooCommerce : Comment cacher, supprimer ou désactiver le bouton "Ajouter au panier" ?

Un lecteur a laissé un commentaire demandant comment masquer, supprimer ou désactiver "Ajouter au panier". C'est pourquoi j'ai élaboré un tutoriel simple pour vous !

Pour ce faire, vous avez besoin d'un niveau de personnalisation plus élevé pour mettre à jour les fonctionnalités de la boutique à la demande, et la vaste bibliothèque de plugins WordPress et d'extensions WooCommerce offre un large éventail d'options de personnalisation, ce qui se traduit par une expérience plus conviviale.

Dans cet article, nous allons vous montrer comment cacher, supprimer ou désactiver le bouton "Ajouter au panier" dans votre boutique WooCommerce pour les articles épuisés ou lorsque seul le catalogue des produits est affiché.

Pourquoi devrais-je masquer, supprimer ou désactiver le bouton "Ajouter au panier" ?

"Ajouter au panier"Les boutons sont un élément clé de toute boutique WooCommerce.
Il fait le lien entre la navigation et l'achat et constitue la première étape du parcours d'achat du client. Toutefois, s'il est nécessaire de masquer, de supprimer ou de désactiver ce bouton.

Par exemple, la boutique est un catalogue d'affichage uniquement, sans possibilité d'achat direct ; ou bien il est souhaitable que certains produits soient visibles mais non disponibles à l'achat. Quelle que soit la raison, le fait de savoir comment utiliser ce bouton vous permet de mieux contrôler les fonctionnalités de la boutique.

Comprendre la différence entre "cacher" et "supprimer".

Le fait de masquer le bouton "Ajouter au panier" le rend invisible sur la page, tandis que le fait de supprimer le bouton l'enlève complètement du code du site. Cela signifie que même si quelqu'un vérifie le code du site, il ne trouvera pas le bouton. Cela peut s'avérer très utile si vous souhaitez empêcher des utilisateurs expérimentés de contourner les processus de votre boutique.

💡 prenez noteAvant d'effectuer des modifications, assurez-vous deFaites une sauvegarde de votre site web.. En cas de problème, vous pouvez rapidement rétablir le site dans son état antérieur.

Comment cacher le bouton "Ajouter au panier" de la page produit de WooCommerce

Vous trouverez ci-dessous les étapes à suivre pour supprimer le bouton "Ajouter au panier" des pages de détail des produits et des pages de boutique de WooCommerce (pages de listage des produits). Pour ce faire, vous pouvez utiliser les crochets suivants :

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

Ces crochets peuvent être insérés là où vous le souhaitez. Généralement, ces crochets sont ajoutés au dossier du thème dans le répertoire functions.php La documentation est la pratique la plus courante.

Emplacement recommandé pour le fichier

Bien que l'ajout du code au functions.php est courant, mais peut provoquer des erreurs dans certains cas. C'est pourquoi il est plus recommandé de placer ces crochets dans le dossier des plugins dans le répertoire woocommerce.php Documentation.

Voici une visite du site woocommerce.phpÉtapes de la documentation :

Naviguez vers WordPress → wp-content.
Cliquez sur Plugins → WooCommerce → woocommerce.php.

Ajoutez ensuite le code suivant :

/**

 * Instance principale de WooCommerce.

 *

 * Retourne l'instance principale de WC pour éviter d'avoir à utiliser des globales.

 * *

 * @since 2.1

 * @return WooCommerce

 */

function WC() {

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

    return WooCommerce::instance() ;

}

Après avoir ajouté le code, enregistrez le fichier et actualisez la page. Si tout s'est déroulé correctement, vous devriez voir apparaître "Ajouter au panierLe bouton " " a été supprimé de la page.

Masquer conditionnellement le bouton Ajouter au panier de WooCommerce

Dans certains cas, vous ne souhaitez masquer le bouton "Ajouter au panier" que pour un produit spécifique. Dans ce cas, vous devez utiliser la méthode conditionnelle.

Masquer les boutons d'ajout au panier spécifiques aux produits Woocommerce

Suivez les étapes ci-dessous pour masquer le bouton "Ajouter au panier" pour un produit spécifique :

Accédez à WordPress Dashboard → Products → All Products.
Survolez le produit pour lequel vous souhaitez masquer le bouton Ajouter au panier et notez l'ID du produit (dans cet exemple, l'ID est 25).

Ensuite, ajoutez le code suivant à la sectionfunctions.phpDocumentation :

add_action('woocommerce_after_shop_loop_item', 'hide_add_to_cart_for_specific_product', 10 ) ;

function hide_add_to_cart_for_specific_product() {

    global $product.

    if ( 25 == $product->get_id() ) {

        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 ce code, le bouton "Ajouter au panier" pour le produit ID 25 sera caché. Dans cet exemple, il s'agit d'une tasse personnalisable.

Cacher les prix Woocommerce sur les pages des boutiques et des catégories

Pour supprimer les prix de WooCommerce sur les pages des boutiques et des catégories, vous devez ouvrir l'ongletfunctions.phpet ajoutez le code suivant ;

remove_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 ) ;

En ajoutant ce code, vous pouvez supprimer les prix des produits sur les pages des boutiques et des catégories. Le résultat est le suivant :

Supprimez le bouton "Ajouter au panier" pour certains produits.

Il existe trois façons de supprimer le bouton "Ajouter au panier" d'une page produit spécifique :

Supprimez la valeur du champ prix. Le produit n'aura alors plus de prix, ce qui supprimera le bouton Ajouter au panier.
Activez la gestion des stocks et mettez l'inventaire des produits à zéro.
Utilisation de woocommerce_is_purchasableCrochets pour filtres.

Utilisation du crochet woocommerce_is_purchasable

Ici, un filtre est utilisé pour supprimer le bouton "Ajouter au panier" pour un identifiant de produit spécifique.

Chaque fois que ce filtre reconnaît l'identifiant du produit cible, il renvoie une valeur fausse. Ainsi, bien que le prix soit toujours visible, le bouton "Ajouter au panier" sera remplacé par une notification qui dira"Impossible d'acheter le produit".

Pour ce faire, ajoutez le code suivant au site webfunctions.phpest suffisant.

add_filter('woocommerce_is_purchasable', 'woocommerce_cloudways_purchasable');

function woocommerce_cloudways_purchasable($cloudways_purchasable, $product) {

return ($product->id == your_specific_product_id (like 22) ? false : $cloudways_purchasable);

}

Désactivez le bouton "Ajouter au panier" au lieu de le masquer ou de le supprimer.

Désactiver le bouton "Ajouter au panier" n'est pas la même chose que le cacher ou le supprimer.

Lorsque le bouton est désactivé, il reste visible mais n'est pas cliquable. Cette fonction est utile si vous souhaitez indiquer qu'un produit est normalement disponible mais qu'il est actuellement en rupture de stock ou indisponible pour une autre raison.

Voici comment désactiver le bouton "Ajouter au panier" à l'aide d'un code personnalisé :

Naviguez vers Apparence → Editeur de thème et trouvezfunctions.phpDocumentation.
Ajoutez le code suivant pour désactiver le bouton "Ajouter au panier" :

add_filter('woocommerce_is_purchasable', 'disable_add_to_cart_button' ) ;

function disable_add_to_cart_button( $is_purchasable ) {

    // Vous pouvez ajouter des conditions ici pour désactiver le bouton pour des produits spécifiques.

    return false ; // return false désactive le bouton "Ajouter au panier".

}

Cliquez sur "Documents mis à jour"pour enregistrer vos modifications.

Le bouton "Ajouter au panier" doit maintenant être désactivé dans la boutique WooCommerce.

résumés

Dans ce blog, nous explorons la puissance de WooCommerce, en nous concentrant sur la façon de cacher, de supprimer ou de désactiver le bouton "Ajouter au panier", et sur les avantages uniques de ces méthodes.

Questions fréquemment posées

1) Comment désactiver le bouton "Ajouter au panier" dans WooCommerce ?

Il se trouve dans la section functions.php Le fichier utilise un extrait de code pour désactiver le bouton "Ajouter au panier", soit pour un produit spécifique, soit pour l'ensemble du site :

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

2) Comment supprimer l'icône du panier d'achat de WooCommerce ?

Pour supprimer l'icône du panier d'achat, soit dans le personnalisateur du thème, soit dans le fichier style.css avec le code CSS personnalisé suivant :

.woocommerce-cart .cart-contents {
    display : none ;
}

3) Comment modifier le bouton "Ajouter au panier" dans WooCommerce ?

Si vous devez modifier le texte d'un bouton, vous pouvez le faire dans la section functions.php Ajoutez le code suivant au fichier :

add_filter('woocommerce_product_add_to_cart_text', function() { return 'Votre texte personnalisé' ; }) ;

Si vous souhaitez modifier le style ou la fonctionnalité, vous pouvez personnaliser le code HTML et CSS du bouton.

4) Comment vider mon panier WooCommerce ?

Le panier WooCommerce peut être vidé de manière programmatique avec le code suivant :

WC()->cart->empty_cart() ;

Ajoutez le code à un emplacement approprié (par exemple, plugin ou functions.php ), après quoi le contenu du panier sera vidé.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.