Pourquoi le bouton «Ajouter au panier» disparaît des produits WooCommerce

Vous étiez en train de configurer votre boutique, vous avez ajouté une dizaine de produits, mais lorsque vous ouvrez la page, il n’y a rien là où le bouton «Ajouter au panier» devrait se trouver. Les clients ne peuvent pas acheter. Panique. Pourtant, le problème est plus simple à résoudre qu’il n’y paraît au premier abord.

Il y a exactement cinq raisons à la disparition du bouton: d’une fiche produit incomplète jusqu’au module serveur mod_security. Deux d’entre elles se corrigent en deux clics. Deux autres avec quelques lignes de code. Et une seule nécessite d’appeler votre hébergeur. Voici une analyse étape par étape avec du code, des captures d’écran et des actions concrètes.

💡 Aperçu rapide:

• Vérifiez d’abord la fiche produit: le prix et l’état du stock sont obligatoires
• Désactivez tous les plugins en une fois et activez uniquement WooCommerce: si le bouton apparaît, un conflit est en cause
• Allez dans l’outil de personnalisation du thème: le bouton est peut-être simplement masqué par une option
• Corrigez le template du thème via l’éditeur de code: remplacez trois lignes dans single.php
• Ouvrez la console du navigateur: erreur JavaScript → appelez votre hébergeur, le problème vient de mod_security

1. Vérifiez la fiche produit: prix et état du stock

WooCommerce affiche le bouton «Ajouter au panier» uniquement lorsque le produit peut être acheté. S’il ne peut pas être acheté, pas de bouton. Logique simple.

Ouvrez Produits → Tous les produits → sélectionnez le produit concerné → Modifier. Dans le bloc «Données produit», vérifiez trois champs:

• Prix: le prix normal est obligatoire, même si le produit est en promotion. Le champ «Prix» ne doit pas être vide.
• État du stock: «En stock» ou «Disponible sur commande». La valeur «Rupture de stock» masque le bouton.
• Produits variables: chaque variation doit avoir son propre prix et son propre état de stock.

Erreur fréquente: vous avez créé un produit variable, ajouté des attributs (couleur, taille), mais vous n’avez pas saisi les prix pour les variations spécifiques. Dans ce cas, WooCommerce ne sait pas à quel prix vendre et n’affiche tout simplement pas le bouton.

Remplissez les champs → Mettre à jour → ouvrez la page produit sur le site. Dans la plupart des cas simples, le problème est déjà résolu à cette étape.

2. Identifiez le conflit de plugins

WordPress assemble le code du thème actif et de tous les plugins actifs. Si deux plugins utilisent des noms de fonction identiques, se branchent sur les mêmes hooks ou sont simplement incompatibles, WooCommerce peut perdre le bouton.

Procédure de diagnostic:

• Allez dans Extensions → Extensions installées. Sélectionnez tout (case à cocher en haut), dans le menu déroulant «Actions groupées», choisissez «Désactiver» → Appliquer.
• Activez uniquement WooCommerce. Ouvrez la page produit concernée.
• Le bouton apparaît: conflit confirmé. Activez les plugins un par un, en vérifiant la page produit après chaque activation. Le plugin après l’activation duquel le bouton disparaît à nouveau est le coupable.
• Remplacez le plugin problématique par une alternative ou contactez son développeur.

Un sous-type particulier de ce problème est un conflit avec le filtre woocommerce_show_variation_price. Certains thèmes et plugins renvoient false pour ce hook, et WooCommerce masque le prix de la variation et perd le bouton. Si le bouton est présent après avoir désactivé tous les plugins mais qu’il n’y a pas de «coupable» visible, vérifiez dans le fichier functions.php du thème actif la présence de lignes contenant woocommerce_show_variation_price.

Vous pouvez forcer l’affichage avec ce filtre:

1
add_filter('woocommerce_show_variation_price', function() {
2
    return true;
3
});

Insérez ce code dans le fichier functions.php de votre thème (enfant) actif ou via le plugin Code Snippets. Après avoir enregistré, vérifiez le produit.

3. Personnalisation du thème: l’option invisible

Certains thèmes ajoutent leur propre option de visibilité du bouton. La logique des développeurs: «donnons de la flexibilité aux utilisateurs». En pratique, l’option est par défaut sur «masquer» et le propriétaire de la boutique n’en sait rien.

Allez dans Apparence → Personnaliser. Cherchez une section:

• WooCommerce → Page produit (ou Contenu → WooCommerce, selon le thème);
• Paramètre «Bouton Ajouter au panier» → Visible (ou «Afficher»).

Enregistrez les réglages et vérifiez le produit. Cela fonctionne pour les thèmes qui utilisent des sections du personnalisateur pour WooCommerce en plus du template standard. C’est courant sur les thèmes ThemeForest: Avada, Flatsome, WoodMart.

4. Corrigez le template du thème dans l’éditeur

Si les étapes précédentes n’ont pas aidé, le problème est plus profond: le thème utilise un template de page produit non standard et n’appelle pas la fonction WooCommerce qui génère le bouton.

Ce qui se passe. WordPress charge la page produit via le fichier du thème single.php (ou index.php comme solution de repli). À l’intérieur se trouve un appel à get_template_part() qui inclut le bloc de contenu. Le thème devrait passer la main à WooCommerce en appelant wc_get_template_part('content', 'single-product'), mais certains thèmes ne le font pas. Résultat: la mise en page du thème est là, mais pas le bouton.

Comment corriger:

• Apparence → Éditeur de fichiers du thème. Confirmez l’avertissement de WordPress.
• Dans la colonne de droite, trouvez les fichiers single.php et index.php:

• Ouvrez single.php (s’il existe). Sinon, index.php.
• Trouvez la ligne avec get_template_part. Remplacez tout le bloc d’affichage du contenu par:

1
if (is_singular('product')) {
2
    wc_get_template_part('content', 'single-product');
3
} else {
4
    wc_get_template_part('content', get_post_format());
5
}

• Enregistrez le fichier.

Avant de modifier, sauvegardez le fichier du thème. Copiez le contenu dans un éditeur de texte ou utilisez un thème enfant: une modification directe du thème parent sera écrasée lors de la prochaine mise à jour.

Après avoir enregistré, ouvrez la page produit. Le bouton devrait apparaître.

5. Problème serveur: mod_security bloque les scripts

Si vous êtes arrivé jusqu’ici et que le bouton n’est toujours pas là, la cause est très probablement côté serveur. Le module mod_security (pare-feu Apache/LiteSpeed) bloque le chargement des fichiers JavaScript de WooCommerce. Sans JavaScript, le panier ne fonctionne pas.

Diagnostic:

• Ouvrez la page produit concernée.
• Appuyez sur F12 → onglet Console.
• Cherchez une erreur de chargement de script WooCommerce, généralement cart.min.js, add-to-cart.min.js ou jquery.blockUI.min.js avec le code 403 Forbidden.
• Si vous la voyez, le problème vient de mod_security.

Solution: contactez votre hébergeur et demandez-lui d’ajouter une exception pour le chemin URL /wp-content/plugins/woocommerce/ dans les règles mod_security. Le support règle cela en quelques minutes.

Vous pouvez également désactiver mod_security pour le domaine via .htaccess (si votre hébergeur le permet):

1
<IfModule mod_security.c>
2
    SecFilterEngine Off
3
    SecFilterScanPOST Off
4
</IfModule>

Mais il est préférable de vous coordonner avec votre hébergeur: sur un hébergement mutualisé, mod_security protège l’ensemble du serveur et le désactiver crée un risque de sécurité.

Tableau récapitulatif: ce qu’il faut vérifier

Guide vidéo détaillé couvrant les cinq étapes: de la fiche produit à l’édition du template et au diagnostic serveur.

⁉️🤔 Questions fréquentes

Le bouton a disparu uniquement pour les produits variables. Que se passe-t-il?

Il est presque certain que les prix des variations ne sont pas renseignés. Ouvrez le produit, onglet «Variations», dépliez chacune d’elles: le champ «Prix» doit être rempli. Un prix de variation vide signifie que WooCommerce considère le produit comme «non vendable» et supprime le bouton. Pour 50 variations ou plus, utilisez l’import CSV: Produits → Importer.

Le bouton a disparu après une mise à jour du thème. Que faire?

La mise à jour du thème a écrasé single.php. Rétablissez la modification de l’étape 4. Pour éviter de répéter cela à chaque mise à jour, déplacez le template dans un thème enfant: créez un dossier /woocommerce/ dans le thème enfant et copiez-y le fichier single-product.php corrigé.

Puis-je rétablir le bouton sans modifier le code?

Oui, dans la moitié des cas: vérifiez la fiche produit (étape 1) et la personnalisation du thème (étape 3). Le code n’est nécessaire que lorsque le thème génère le template produit de manière non standard ou lorsqu’un plugin ou un thème supprime le hook woocommerce_show_variation_price.

Le bouton est là mais ne fonctionne pas. Vous cliquez et rien ne se passe?

Il s’agit d’une erreur JavaScript. Ouvrez la console du navigateur (F12) et regardez quels scripts échouent. Le plus souvent, c’est un conflit de version de jQuery (le thème charge un ancien jQuery par-dessus celui de WordPress) ou des fichiers JS minifiés en cache qui ne se sont pas actualisés. Videz le cache de votre plugin de cache et régénérez les scripts minifiés.

Dois-je désactiver l’ajout au panier en AJAX?

Uniquement pour le diagnostic. Allez dans WooCommerce → Réglages → Produits et décochez «Activer les boutons d’ajout au panier en AJAX». Si le bouton apparaît après cela, le problème vient du gestionnaire AJAX de votre thème spécifique. Laissez l’AJAX désactivé ou changez de thème.

Que faire si le bouton n’est toujours pas apparu

Les cinq étapes ci-dessus couvrent la grande majorité des cas de disparition du bouton «Ajouter au panier». Si aucune n’a fonctionné, le problème est plus profond et nécessite un débogage manuel.

Check-list rapide de dernier recours:

• Passez au thème Storefront, le thème officiel de WooCommerce. Le bouton est-il apparu? Le problème vient de votre thème.
• Vérifiez dans WooCommerce → État → Actions planifiées la présence de tâches cron bloquées.
• Allez dans WooCommerce → État → Journaux et cherchez les fatal-errors des derniers jours.

Toujours pas de succès? Décrivez votre situation dans les commentaires: version de WooCommerce, nom du thème, liste des plugins actifs. Nous trouverons la cause.