Comment masquer le bouton Ajouter au panier dans WooCommerce

Publié: 2020-09-21

Comment masquer le bouton Ajouter au panier dans WooCommerce Cherchez-vous un moyen de masquer le bouton Ajouter au panier dans WooCommerce ? Si oui alors vous êtes au bon endroit car ce court tutoriel, je vais vous apporter une solution à ce problème. Si vous connaissez WooCommerce, vous savez que la personnalisation de la page de la boutique WooCommerce se traduit par une expérience utilisateur mieux personnalisée. Nous savons tous que la version par défaut nécessite une mise à niveau pour améliorer l'apparence de votre boutique.

Cependant, avant de pouvoir apporter toutes ces modifications, la première chose à faire est d'installer le plugin WooCommerce. Il est disponible gratuitement et vous pouvez le télécharger directement à l'arrière de votre site.

Dans ce bref tutoriel, je vais vous montrer comment masquer le bouton d'ajout au panier pour un produit particulier et pendant une durée spécifique sur la page du produit et de la boutique.

Avant d'aborder les étapes détaillées pour ce faire, vous vous demandez peut-être pourquoi vous pouvez masquer le bouton Ajouter au panier pour un produit spécifique. Il existe de nombreuses raisons pour lesquelles vous pourriez vouloir le faire, par exemple, si vous avez affaire à des appareils électroniques tels que des appareils mobiles, de nombreux produits sont introduits quelques jours avant qu'ils ne soient autorisés à l'achat.

Les spécifications sont publiées tôt, de sorte que de nombreux propriétaires de boutiques en ligne donnent des spécifications détaillées des produits avant qu'ils ne soient disponibles à l'achat.

Cela signifie que le propriétaire du magasin ne peut pas avoir le bouton "Ajouter au panier" sur la page, car il ne veut pas que les gens achètent le produit pour l'instant jusqu'à ce qu'il soit disponible à l'achat.

Masquer le bouton Ajouter au panier WooCommerce

Cela dit, passons maintenant à la solution. Lorsqu'il s'agit de ce problème particulier, la première pensée qui peut venir à l'esprit a été de modifier le modèle des fichiers.

Cela pourrait être une excellente approche, mais ce n'est pas une solution judicieuse pour une personnalisation aussi petite que celle à portée de main. Ensuite, j'ai réalisé que WooCommerce permettait plusieurs crochets, et avec l'aide de ces crochets, nous pouvons supprimer les prix et les boutons. Voyons maintenant les étapes que vous devez suivre pour y parvenir.

a) Étapes pour masquer le bouton Ajouter au panier dans WooCommerce pour un produit particulier

Pour cette solution, nous allons utiliser un filtre appelé 'woocommerce_is_purchasable' dans lequel vous pouvez vérifier si un produit est achetable ou non.

De plus, nous utiliserons un identifiant de produit dont vous avez besoin pour apporter les modifications à la boutique et à la page du produit. Pour cet exemple, j'utiliserai un produit que j'ai sur ma boutique WooCommerce, avec un identifiant de produit de 185 qui ressemble à ceci : aspect par défaut de l'ID de produit 185

Voici les étapes simples que vous devez suivre :

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Dashboard, cliquez sur Appearance Menu > Theme Editor Menu . Lorsque la page de l' éditeur de thème est ouverte, recherchez le fichier de fonctions de thème où nous ajouterons la fonction qui masquera le bouton d'ajout au panier dans WooCommerce pour un produit particulier.
Ajoutez le code suivant au fichier php :

 /**

 * @snippet Masquer le bouton Ajouter au panier dans WooCommerce

*/

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

function woocommerce_hide_add_to_cart_button( $is_purchasable = true, $product) {

    return ( $product->get_id() == 185 ? false : $is_purchasable );

}

Pour voir le résultat, actualisez simplement la page et vous devriez voir ceci :

Comment fonctionne le code

Dans le code ci-dessus, nous vérifions si l'ID de produit actuel est 185. S'il s'agit de ce produit, il renvoie un faux sens que ce produit n'est pas achetable. Cependant, si l'ID de produit n'est pas 185, il renvoie true.

Cela implique que le produit est achetable. Le bouton "Ajouter au panier" ne s'affichera pas sur la page du produit s'il n'est pas achetable.

b) Étapes pour afficher le bouton Ajouter au panier, après une date précise

Maintenant que nous savons comment masquer le bouton Ajouter au panier de la boutique et de la page du produit, pour un produit particulier, voyons comment vous pouvez le masquer pendant un certain temps.

C'est très simple et tout ce que vous avez à faire est de suivre ces étapes. Vous devrez peut-être le faire si le produit particulier a une date de sortie et que vous ne souhaitez pas effectuer la personnalisation deux fois.

Cette méthode vous fera gagner beaucoup de temps car elle se fera automatiquement en arrière-plan sans que vous ayez à faire quoi que ce soit. Cela signifie que vous avez besoin d'une date de sortie ou de lancement, car dans mon cas, je montrerai le bouton après le 10 août 2020.

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Dashboard, cliquez sur Appearance Menu > Theme Editor Menu . Lorsque la page de l' éditeur de thème est ouverte, recherchez le fichier de fonctions de thème où nous ajouterons la fonction qui affichera le bouton Ajouter au panier après une date spécifique.
Ajoutez le code suivant au fichier php :

 /**

* @snippet Afficher le bouton Ajouter au panier, après une date précise

*/




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

function woocommerce_hide_add_to_cart_button( $is_purchasable = true, $product) {

$current_date = date('Ymd');

$release_date = date( 'Ymd', strtotime('2020-08-10') );

if( strtotime($current_date) < strtotime($release_date) && $product->get_id() == 185 ) {

$is_purchasable = false ;

}




retourne $is_purchasable ;

}

Pour voir le résultat , vous devez actualiser la page du produit, et vous devriez voir ceci : produit sans bouton ajouter au panier

Une fois le temps écoulé, vous devriez voir le bouton Ajouter au panier : aspect par défaut de l'ID de produit 185

Comment fonctionne le code

Dans le code ci-dessus, nous vérifions d'abord si la date actuelle est inférieure à la date de sortie. En d'autres termes, nous vérifions simplement si la date actuelle n'est pas la date de sortie. Si c'est le cas, alors le code renvoie un faux, ce qui signifie que le bouton 'Ajouter au panier' ne s'affichera pas.

Cependant, il est important de noter que toutes les solutions de cet article afficheront "En savoir plus" pour le produit sur la page de la boutique avec le lien vers la page du produit. Voici comment le produit s'affichera sur la page Boutique : en savoir plus sur la page boutique

Conclusion

Dans ce tutoriel, je vous ai donné un guide systématique détaillé sur la façon dont vous pouvez masquer le bouton Ajouter au panier dans WooCommerce sur la page du produit. Dans le premier exemple, je vous ai montré comment masquer ce bouton sur la page produit d'un produit particulier. Dans le second, j'ai montré comment vous pouvez masquer le bouton Ajouter au panier dans WooCommerce pendant un certain temps. Cela peut être utile, surtout si un produit a une date de lancement ou de sortie.

Comment masquer le bouton Ajouter au panier dans WooCommerce

Masquer le bouton Ajouter au panier WooCommerce

a) Étapes pour masquer le bouton Ajouter au panier dans WooCommerce pour un produit particulier

Comment fonctionne le code

b) Étapes pour afficher le bouton Ajouter au panier, après une date précise

Comment fonctionne le code

Conclusion

Articles similaires