La page boutique standard de WooCommerce affiche un seul bouton sous chaque produit: «Add to Cart». Pour la plupart des boutiques, cela suffit. Mais si vous vendez des produits qui nécessitent une recherche avant achat, un simple bouton «Add to Cart» est insuffisant. Les acheteurs souhaitent d’abord ouvrir la page produit, lire la description, vérifier les spécifications, puis ajouter au panier depuis cette page.

Le problème est que WooCommerce ne propose aucun réglage natif pour «ajouter un bouton Lire la suite à côté de Ajouter au panier». Les extensions dédiées à cette tâche sont soit surchargées de fonctionnalités inutiles, soit en conflit avec votre thème. Reste la solution éprouvée: du code personnalisé dans functions.php.

Voici un guide étape par étape. Vous obtiendrez deux boutons sur la page boutique: «Lire la suite» (lien vers la page produit) et «Ajouter au panier» (fonctionnement habituel). Nous traiterons également le cas particulier des produits en rupture de stock.

💡 Aperçu rapide:

• Supprimer le bouton «Add to Cart» par défaut via remove_action
• Ajouter un bouton «Lire la suite» personnalisé pointant vers la page produit
• Remettre le bouton «Add to Cart» à une nouvelle position, à côté de «Lire la suite»
• Corriger le doublon de boutons pour les produits en rupture de stock avec jQuery
• Le code se place dans le functions.php du thème enfant, sans risque et sans extension

Comment WooCommerce génère les boutons sur la page boutique

WooCommerce affiche le bouton «Add to Cart» via le hook woocommerce_after_shop_loop_item. Ce hook se déclenche dans chaque fiche produit à l’intérieur de la boucle WP_Query de la page boutique. La fonction responsable de l’ajout du bouton est woocommerce_template_loop_add_to_cart avec une priorité de 10.

Le hook est attaché à une action. Pour modifier l’ensemble des boutons, nous travaillons directement avec lui: nous supprimons le gestionnaire par défaut et ajoutons le nôtre. Aucune modification des templates WooCommerce n’est nécessaire et le thème reste compatible avec les mises à jour.

Étape 1: supprimer le bouton «Add to Cart» par défaut

La première étape consiste à décrocher la fonction woocommerce_template_loop_add_to_cart. Placez ce code dans le functions.php de votre thème enfant ou via l’extension Code Snippets:

1
/* Remove the standard Add to cart button */
2
function remove_loop_button() {
3
    remove_action(
4
        'woocommerce_after_shop_loop_item',
5
        'woocommerce_template_loop_add_to_cart',
6
        10
7
    );
8
}
9
add_action( 'init', 'remove_loop_button' );

Nous enveloppons remove_action dans une fonction et l’attachons au hook init. Vous ne pouvez pas appeler remove_action directement dans functions.php car WooCommerce peut ne pas avoir initialisé ses hooks au moment du chargement du thème. Le hook init garantit que toutes les actions sont déjà enregistrées.

Après avoir inséré ce code, la page boutique perdra le bouton «Add to Cart». Ne vous inquiétez pas: à l’étape suivante, nous le ferons réapparaître, cette fois associé à «Lire la suite».

Étape 2: ajouter un bouton «Lire la suite» personnalisé

Le bouton «Lire la suite» est un lien vers la page produit, stylisé comme un bouton WooCommerce standard. Nous utilisons $product->get_permalink() pour obtenir l’URL et do_shortcode pour l’enveloppe:

1
/* Add a More details button */
2
add_action(
3
    'woocommerce_after_shop_loop_item',
4
    'replace_add_to_cart'
5
);
6
function replace_add_to_cart() {
7
    global $product;
8
    $link = $product->get_permalink();
9
    echo do_shortcode(
10
        '<a href="' . esc_url( $link ) . '" class="button addtocartbutton">Read More</a>'
11
    );
12
}

La fonction s’accroche à la même action woocommerce_after_shop_loop_item avec la priorité par défaut de 10. Elle récupère l’objet $product via global, obtient l’URL de la page produit et génère un lien avec la classe button. WooCommerce reprend automatiquement les styles de bouton du thème actif.

Notez l’appel à esc_url(): l’échappement de l’URL est obligatoire pour la sécurité. Vous pouvez remplacer la classe addtocartbutton par la vôtre si vous souhaitez des styles personnalisés.

Étape 3: remettre le bouton «Add to Cart» à côté

Le bouton «Add to Cart» reste nécessaire sur la page boutique; sans lui, les acheteurs ne peuvent pas ajouter directement des produits au panier. Mais il doit désormais apparaître APRÈS le bouton «Lire la suite». Pour cela, nous enregistrons le gestionnaire natif avec une priorité de 20 (après notre bouton en priorité 10):

1
/* Restore the Add to cart button */
2
add_action( 'after_setup_theme', 'lets_add_cart_button' );
3
function lets_add_cart_button() {
4
    add_action(
5
        'woocommerce_after_shop_loop_item',
6
        'woocommerce_template_loop_add_to_cart',
7
        20
8
    );
9
}

Nous enveloppons add_action dans le hook after_setup_theme pour la même raison que la suppression: WooCommerce peut ne pas être chargé au moment où functions.php s’exécute. La priorité 20 place «Add to Cart» strictement après «Lire la suite» (priorité 10).

Résultat: sous chaque produit de la page boutique, vous avez maintenant deux boutons. D’abord «Lire la suite», puis «Add to Cart».

La vidéo montre une approche alternative qui ajoute des boutons personnalisés à des produits individuels et à l’ensemble de la page boutique. Le principe de travail avec les hooks est le même que celui que nous avons abordé.

Ce qui ne va pas avec les produits en rupture de stock

Le code ci-dessus fonctionne parfaitement pour les produits qui sont en stock. Mais pour les articles en rupture de stock, un conflit apparaît: WooCommerce remplace automatiquement le bouton «Add to Cart» par «Lire la suite» pour ces produits. Le résultat est DEUX boutons «Lire la suite» à la suite: le nôtre et celui de remplacement de WooCommerce.

Le problème ne vient pas de la logique de notre code; c’est ainsi que le cœur de WooCommerce est conçu. La fonction standard woocommerce_template_loop_add_to_cart génère un lien «Lire la suite» au lieu du bouton «Add to Cart» pour les articles en rupture de stock. Notre bouton «Lire la suite» personnalisé reste présent, d’où le doublon.

Étape 4: supprimer le bouton supplémentaire avec jQuery

La manière la plus directe de supprimer le bouton en double est jQuery. Le script trouve le lien contenant le texte «Lire la suite» qui se trouve à l’intérieur du conteneur span standard de WooCommerce et le supprime:

1
/* Remove the duplicate More details button for out-of-stock items */
2
jQuery( document ).ready( function( $ ) {
3
    $( 'a.button.product_type_simple.ajax_add_to_cart:contains("Read More")' ).remove();
4
 
5
    $( 'button.button.woof_reset_search_form' ).on( 'click', function() {
6
        $( 'a.button.product_type_simple.ajax_add_to_cart:contains("Read More")' ).remove();
7
    });
8
});

Le script fait deux choses. D’abord, au chargement de la page, il supprime tous les liens avec la classe product_type_simple qui contiennent le texte «Lire la suite». Ensuite, il attache un gestionnaire au bouton de réinitialisation du filtre WooCommerce (woof_reset_search_form) car après un filtrage AJAX, le DOM se met à jour et les doublons réapparaissent.

Placez le code jQuery dans un fichier .js séparé et mettez-le en file d’attente via wp_enqueue_script dans functions.php, ou collez-le dans le champ «JavaScript personnalisé» de votre thème ou d’une extension comme Simple Custom CSS and JS.

Approche alternative: un filtre au lieu d’une suppression

Si vous préférez éviter jQuery, il existe une méthode plus élégante: le filtre woocommerce_product_is_in_stock. Il vérifie la disponibilité du produit avant d’afficher le bouton personnalisé:

1
/* Do not show the More details button for unavailable items */
2
add_action(
3
    'woocommerce_after_shop_loop_item',
4
    'replace_add_to_cart_conditional',
5
    10
6
);
7
function replace_add_to_cart_conditional() {
8
    global $product;
9
 
10
    if ( ! $product->is_in_stock() ) {
11
        return;
12
    }
13
 
14
    $link = $product->get_permalink();
15
    echo do_shortcode(
16
        '<a href="' . esc_url( $link ) . '" class="button addtocartbutton">Read More</a>'
17
    );
18
}

La méthode $product->is_in_stock() retourne false pour les produits en rupture de stock, donc notre bouton ne s’affiche tout simplement pas. WooCommerce affiche son propre «Lire la suite» pour ces produits. Pour les articles en stock, les deux boutons fonctionnent comme prévu. Cette approche est plus propre: pas de JS, moins de conflits de filtres.

Le choix de la variante dépend de votre boutique. jQuery est plus universel (fonctionne avec toutes les extensions de filtrage), tandis que le filtre PHP est plus léger et plus rapide.

⁉️🤔 Questions fréquentes

Le code ne fonctionne pas et les boutons n’apparaissent pas. Qu’est-ce qui ne va pas?

D’abord, assurez-vous que le code se trouve dans le functions.php du thème ENFANT, pas du thème parent (le parent est écrasé lors des mises à jour). Ensuite, vérifiez que WooCommerce est actif et mis à jour vers la dernière version. Troisièmement, vérifiez si votre thème remplace le hook woocommerce_after_shop_loop_item. Certains thèmes remplacent complètement le template de la fiche produit et les hooks WooCommerce ne s’y déclenchent pas.

Puis-je changer le texte du bouton «Lire la suite» pour autre chose?

Oui. Dans la fonction replace_add_to_cart(), remplacez la chaîne 'Read More' dans les attributs de la balise <a> par le texte de votre choix, par exemple «Voir», «Sélectionner» ou «Description». Le texte est statique et n’affecte pas le fonctionnement.

Pourquoi le sélecteur jQuery utilise-t-il product_type_simple?

Parce que WooCommerce attribue différentes classes aux boutons selon le type de produit: product_type_simple pour les produits simples, product_type_variable pour les produits variables. Si votre boutique a des produits variables en rupture de stock, ajoutez un second sélecteur pour product_type_variable ou utilisez un sélecteur plus général a.button.ajax_add_to_cart.

Est-il sûr d’insérer du code PHP dans functions.php?

C’est sûr sous deux conditions. Premièrement, sauvegardez votre functions.php avant de le modifier (ou utilisez un thème enfant pour que l’original reste intact). Deuxièmement, insérez le code via FTP/SFTP ou l’éditeur de thème de l’administration («Apparence → Éditeur de thème») plutôt que via des extensions de snippets avec chargement automatique. Si une erreur de syntaxe survient, WordPress affichera un écran blanc et la restauration du fichier est plus facile via FTP.

Les boutons ne ressemblent pas aux boutons natifs de mon thème. Comment les styliser?

La classe button dans la balise <a> fournit les styles de base de WooCommerce. Si le bouton a toujours un aspect différent, votre thème remplace probablement les sélecteurs de bouton de manière plus spécifique (par exemple, .products .button au lieu de simplement .button). Copiez les classes CSS du bouton «Add to Cart» natif à l’aide de l’inspecteur de votre navigateur et ajoutez-les à l’attribut class de votre lien personnalisé.

Que choisir en 2026: du code ou une extension?

Le choix entre code personnalisé et extension dépend de trois facteurs. Si vous ajustez un seul bouton sur la page boutique et souhaitez éviter la surcharge d’une extension, le code de cet article est suffisant. Il n’ajoute aucun poids dans l’administration, ne crée pas de requêtes supplémentaires en base de données et ne casse pas lors des mises à jour de WooCommerce (les hooks woocommerce_after_shop_loop_item et woocommerce_template_loop_add_to_cart sont stables depuis la version 3.0).

Cependant, si vous devez modifier le comportement des boutons sur différentes pages ou pour différentes catégories de produits, les extensions méritent d’être envisagées: YITH WooCommerce Customize My Account Page propose un éditeur visuel de boutons, et WooCommerce Product Add-Ons vous permet d’ajouter des champs personnalisés avant l’achat.

Commencez par le code. C’est gratuit, transparent et entièrement sous votre contrôle. Si vous avez besoin de plus par la suite, passez aux extensions, avec désormais une compréhension claire des fonctionnalités dont vous avez précisément besoin.