La question peut paraître farfelue, mais elle m’a été posée et les raisons pour lesquelles elle a été évoquée étaient loin d’être stupides.
- Pourquoi supprimer le bouton ajouter au panier sur votre page d’accueil ?
- Diminution du taux de rebond et augmentation du taux de rétention
- Suppression du bouton ajouter au panier et le prix uniquement sur la page d’accueil avec CSS
- Suppression du bouton ajouter au panier et le prix uniquement sur la page d’accueil avec JavaScript
- Comment ajouter un fichier Javascript à mon thème WordPress ?
- Suppression du bouton ajouter au panier uniquement sur la page d’accueil avec Php
Pourquoi supprimer le bouton ajouter au panier sur votre page d’accueil ?
Le boutique d’un client qui tourne sous WooCommerce a vu son taux de rebond augmenter et le taux rétention diminuer. Outre le fait que cette multitude de boutons ajouter au panier était très moche, l’action d’avoir supprimée le bouton ajouter au panier ET le prix de l’article sur la home à complétement changer la donne.
Diminution du taux de rebond et augmentation du taux de rétention
En supprimant le bouton ajouter au panier et le prix sur la page d’accueil, le client doit impérativement cliquer sur l’article pour en connaître le prix et l’ajouter dans son panier.
Vous allez me dire : « Rien de révolutionnaire là-dedans« , et vous avez raison. Amazon applique déjà cette stratégie. Cependant, il n’y a pas d’option par défaut qui permettent ce hack sur un site WooCommerce et cela est fort dommage.
Suppression du bouton ajouter au panier et le prix uniquement sur la page d’accueil avec CSS
Si on peut reconnaître un point positif à WordPress c’est son système de classes CSS qui est bien pensé. Vous n’avez peut-être jamais fait attention mais dans votre balise <body>, lorsque vous êtes sur votre page d’accueil il y une classe home. Cette classe est uniquement visible sur la page d’accueil. Ainsi, si vous utilisez un sélection commençant par .home les règles ne s’appliqueront que sur la page d’accueil.
Dans notre cas, nous voulons rendre invisible les boutons ajouter au panier et le prix. Il faudra donc utiliser ceci:
/* Suppression du bouton ajouter */
.home .add_to_cart_button{
display:none!important;
}
/* Suppression du prix */
.home .price{
display:none!important;
}
Et si on veut retirer le bouton ajouter au panier sur d’autres pages ?
Même principe. On regarde la classe du body et on créer les sélecteurs CSS qui vont bien.
/* Suppression du bouton ajouter dans les pages archives*/
.archive.add_to_cart_button{
display:none!important;
}
/* Suppression du prix */
.archive .price{
display:none!important;
}
Visuellement parlant le CSS fait le job et le prix comme le bouton ont disparu. Cependant, ils sont toujours bien visibles dans le code. Si vous souhaitez totalement supprimer les nœuds html, il faudra passer par JavaScript.
Suppression du bouton ajouter au panier et le prix uniquement sur la page d’accueil avec JavaScript
Je vais vous proposer deux méthodes. La première est suffisante si vous comptez uniquement supprimer une liste de nœuds, dans notre exemple le bouton ajouter au panier. Si vous souhaitez supprimer le bouton et le prix, il faudra utiliser la seconde méthode.
1ère méthode
On connaît déjà le sélecteur CSS à cibler pour notre bouton ainsi que la classe que doit contenir notre body.
// On sélectionne tous les boutons ajouter au panier
const addToCart = document.querySelectorAll('.add_to_cart_button');
// On teste si la classe home est bien présente dans le body puis on applique la méthode remove() sur tous les boutons.
if (document.body.classList.contains("home")){
addToCart.forEach(buttons => buttons.remove())
}
2ème méthode
Dans celle-ci on veut supprimer le bouton ajouter au panier ainsi que le prix. Le mieux est donc de se créer une petite fonction.
// On déclare nos nodeList avec des constantes
const addToCart = document.querySelectorAll('.add_to_cart_button');
const price = document.querySelectorAll('.price');
// On créer la fonction hideElements et on met en argument nodeLists avec le spread operator ... qui permettra d'accueillir autant de nodeList que nécessaire. Dans notre cas seulement 2
function hideElements(...nodeLists) {
// On teste si la classe home est bien présente dans le body
if (document.body.classList.contains("home")){
// La méthode flat() permet de combiner les nodeLists en une seule
const combineList= nodeLists.flat();
combineList.forEach(item => item => buttons.remove())
}
}
// On exécute notre fonction en lui passant en argument nos deux nodeList
hideElements(addToCart, price)
Comment ajouter un fichier Javascript à mon thème WordPress ?
On est content, on a notre code JavaScript, mais on le place où ?
Cela dépend des thèmes, certains proposent cette fonctionnalité en natif, d’autres non. Vous pouvez bien évidemment passer par un plugin à l’instar Header, Footer and Post Injections qui est gratuit et qui fait bien le job.
Personnellement, j’essaie toujours autant que possible de me passer de plugin. Pour ajouter un fichier Javascript à votre thème vous devez ajouter dans votre fichier functions.php
// Dans l'exemple ci-dessous j'ajoute le fichier myscript.js dans le répertoire "js" du thème. Le script s'ajoutera avant la balise </body>. Si vous souhaitez l'activer dans le head, remplacer false par true
function my_script_js() {
wp_enqueue_script( 'my-script-js', get_template_directory_uri() . '/js/myscript.js', array(), '1.0', false);
}
add_action( 'wp_enqueue_scripts', 'my_script_js' );
Et le php alors ??
Je sais ce qu’on vont me dire les puristes : »Proposer du JavaScript alors qu’on peut faire la même chose à travers une fonction Php … ». Ce n’est pas faux. Mais personnellement je préfère le JavaScript.
Pour le Php il faut taper se taper la lecture de la documentation WooCommerce pour savoir sur quel hook est « accroché » le bouton. Comme je suis un gars sympa 😁 je vous mets le code en Php à ajouter à votre fichier functions.php
Suppression du bouton ajouter au panier uniquement sur la page d’accueil avec Php
// On vérifie avec la fonction is_home() si on est bien sur la home, si c'est le cas on supprime le bouton ajouter au panier
function remove_add_to_cart_buttons() {
if (is_home()) {
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
}
}
add_action('template_redirect', 'remove_add_to_cart_buttons');
Vous voilà armé pour supprimer le bouton ajouter au panier. A vous de choisir votre arme préférée 🤓
