Remplacer le Bouton « Ajouter au panier » par un Bouton « Contactez-nous » dans WooCommerce

WooCommerce est un excellent plugin pour créer une boutique en ligne avec WordPress, mais il y a peu, lors de la création d’un site, on m’a demandé d’ajouter une boutique vitrine et de plutôt diriger les clients vers une page de contact au lieu de les laisser ajouter directement un produit au panier. Voici un tutoriel simple pour remplacer le bouton « Ajouter au panier » par un bouton « Contactez-nous » sur les pages produits d’une boutique WooCommerce.

Comment ajouter un bouton « Contactez-nous » sur toutes les pages produits WooCommerce

Pour remplacer le bouton « Ajouter au panier » par un bouton « Contactez-nous », il suffit d’ajouter un court extrait de code au fichier functions.php de votre thème enfant.

Code à ajouter dans le fichier functions.php :

// Supprimer le bouton "Ajouter au panier" sur la page produit et ajouter un bouton de contact
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
add_action('woocommerce_single_product_summary', 'custom_contact_button_single', 30);

function custom_contact_button_single() {
    $contact_page_url = get_permalink( get_page_by_path( 'contact' ) ); // ici le slug de la page de contact est "contact" modifiez-le avec votre slug
    
    echo '<a href="' . esc_url($contact_page_url) . '" class="button contact-button">' . __('Contactez-nous', 'woocommerce') . '</a>';
}

Explication du code

1. Suppression du bouton par défaut « Ajouter au panier » :
   • La fonction remove_action() retire le bouton standard « Ajouter au panier » de WooCommerce, qui se situe dans le résumé du produit (woocommerce_single_product_summary).
2. Ajout d’un nouveau bouton « Contactez-nous » :
   • La fonction add_action() insère un bouton « Contactez-nous » à la même position dans le résumé du produit.
   • La variable $contact_page_url utilise la fonction get_permalink() pour obtenir le lien vers la page de contact. Assurez-vous que le slug (URL) de votre page de contact est bien « contact ». Sinon, remplacez-le par le slug correct de votre page de contact.
3. Affichage du bouton « Contactez-nous » :
   • Le code echo '<a href="' . esc_url($contact_page_url) . '" class="button contact-button">' . __('Contactez-nous', 'woocommerce') . '</a>'; crée un lien stylisé comme un bouton WooCommerce standard, menant les utilisateurs vers la page de contact.

Comment ajouter un bouton « Contactez-nous » sur des pages produits spécifiques de WooCommerce

Code à ajouter dans le fichier functions.php de votre thème enfant :

// Supprimer le bouton "Ajouter au panier" et ajouter un bouton "Contactez-nous" uniquement pour certains produits
add_action('wp', 'conditionally_replace_add_to_cart_button');

function conditionally_replace_add_to_cart_button() {
    $product_ids = array(123, 456); // Remplacez 123 et 456 par les IDs de vos produits spécifiques

    if (is_product() && in_array(get_the_ID(), $product_ids)) {
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
        add_action('woocommerce_single_product_summary', 'custom_contact_button_single', 30);
    }
}

function custom_contact_button_single() {
    $contact_page_url = get_permalink(get_page_by_path('contact')); // Assurez-vous que le slug de votre page de contact est "contact"
    
    echo '<a href="' . esc_url($contact_page_url) . '" class="button contact-button">' . __('Contactez-nous', 'woocommerce') . '</a>';
}

Explications du code

1. Tableau d’IDs des produits :
   • L’action add_action('wp', 'conditionally_replace_add_to_cart_button'); permet d’exécuter le code uniquement lorsque la page est chargée.
   • Dans la fonction conditionally_replace_add_to_cart_button, nous utilisons is_product() pour vérifier que nous sommes sur une page produit WooCommerce
   • La variable $product_ids contient un tableau d’IDs des produits pour lesquels vous souhaitez remplacer le bouton « Ajouter au panier » par « Contactez-nous ».
   • En utilisant in_array(get_the_ID(), $product_ids), on vérifie si l’ID du produit actuel correspond à l’un des IDs dans le tableau. Si c’est le cas, la personnalisation s’applique.
2. Suppression et ajout du bouton « Contactez-nous » :
   • Si la condition est remplie (si l’ID correspond à un produit dans le tableau), alors WooCommerce supprime le bouton « Ajouter au panier » et affiche le bouton « Contactez-nous » avec le lien vers la page de contact.

Remarques

• Modifiez le tableau $product_ids pour inclure tous les IDs des produits pour lesquels vous souhaitez ce comportement.
• Cette méthode est flexible : ajoutez ou retirez des IDs dans le tableau pour ajuster les produits ciblés.

Et si vous ne souhaitez pas modifier le fichier functions.php ?

Si vous n’êtes pas à l’aise avec l’ajout de code dans votre fichier functions.php, vous pouvez utiliser une extension comme Insert Headers and Footers. Cette extension permet d’ajouter du code à votre site WordPress sans toucher directement au fichier du thème. Voici comment l’utiliser :

1. Installez et activez l’extension Insert Headers and Footers.
2. Dans votre tableau de bord WordPress, allez dans Réglages > Insert Headers and Footers.
3. Collez le code ci-dessus dans la section « Scripts in Footer » (ou « Scripts dans le pied de page »).
4. Enregistrez vos modifications.

Conclusion

Avec quelques lignes de code, vous pouvez facilement transformer le bouton « Ajouter au panier » en un bouton « Contactez-nous » et diriger vos clients vers une page dédiée. Cela vous permet de mieux interagir avec eux pour des produits nécessitant une assistance ou un devis personnalisé. N’hésitez pas à essayer ce code pour voir comment il peut améliorer l’expérience utilisateur sur votre boutique WooCommerce !