Facebook Pixel
close up woman hand add product to card at shopping online mobile app on wood table at home
16 janvier 2023 / npgilblas

Comment remplacer le bouton d’ajout au panier de WooCommerce par un lien vers un formulaire avec une extension

Nous mettons à votre disposition notre extension WooCommerce (WordPress) disponible sur notre GitLab. En effet, l’extension vous permettra de dissocier la fonctionnalité de votre thème. Pour ce fait, vous allez pouvoir changer votre design si vous le souhaitez sans avoir à refaire les mêmes manœuvres. Téléchargez et installez sur votre site web. Il est cependant important de noter que c’est fonctionnel avec les conditions suivantes:

  • Tout d’abord, l’extension fonctionne surtout sur les sites WordPress avec WooCommerce installé
  • Ensuite, vous devez suivre les étapes ci-dessous pour finaliser la configuration

Comme bonnes pratiques, nous vous recommanderons de faire des tests avant de le mettre en ligne. Vous pouvez, par exemple, installer sur un serveur local ou un site web test.

Comment remplacer le bouton à l’aide d’une extension

Il existe plusieurs extensions pour WooCommerce qui permettent de remplacer le bouton d’ajout au panier par un lien vers un formulaire. Je vais vous expliquer comment le faire avec l’extension « YITH WooCommerce Request a Quote ».

  1. Tout d’abord, installez et activez l’extension « YITH WooCommerce Request a Quote » depuis votre tableau de bord WordPress.
  2. Allez dans « WooCommerce » > « Request a Quote » > « Options générales » pour configurer les paramètres de l’extension selon vos besoins.
  3. Dans l’onglet « Paramètres des produits », vous pouvez choisir comment le formulaire de demande de devis doit apparaître sur les pages de produits. Par exemple, vous pouvez choisir d’afficher le formulaire sur toutes les pages de produits ou seulement sur certaines catégories de produits.
  4. Dans l’onglet « Messages », vous pouvez personnaliser les messages qui s’afficheront lorsqu’un client soumettra un formulaire de demande de devis.
  5. Pour remplacer le bouton d’ajout au panier par un lien vers le formulaire de demande de devis, allez dans « WooCommerce » > « Request a Quote » > « Options de remplacement de boutons ».
  6. Activez l’option « Remplacer le bouton Ajouter au panier » et sélectionnez le type de lien que vous souhaitez afficher. Vous pouvez choisir d’afficher un lien texte, un bouton ou une icône.
  7. Personnalisez le texte du lien ou du bouton si nécessaire.
  8. Cliquez sur « Enregistrer les modifications» pour sauvegarder vos paramètres.

Maintenant, le bouton d’ajout au panier sur vos pages de produits WooCommerce sera remplacé par un lien vers le formulaire de demande de devis. Les clients pourront utiliser ce formulaire pour présenter une demande de devis pour le produit plutôt que de l’ajouter directement au panier.

Pour le faire vous-même, voici les étapes


<?php
add_filter( 'woocommerce_loop_add_to_cart_link', 'replace_add_to_cart_button_with_form', 10, 2 );
function replace_add_to_cart_button_with_form( $button, $product ) {
    // Récupère l'ID du produit
    $product_id = $product->get_id();
    
    // Crée un lien vers le formulaire de commande personnalisé
    $link = get_permalink( $product_id ) . '#custom-order-form';
    
    // Remplace le bouton "Ajouter au panier" par un lien vers le formulaire personnalisé
    $button = '<a href="' . $link . '" class="button">' . __("Demande de devis", "woocommerce") . '</a>';

    return $button;
}

Dans ce code, la fonction replace_add_to_cart_button_with_form récupère l’ID du produit et crée un lien vers le formulaire de commande personnalisé en ajoutant un identifiant à l’URL du produit. Ensuite, elle remplace le bouton « Ajouter au panier» par un lien vers le formulaire personnalisé.

Vous devrez ensuite créer le formulaire personnalisé et le placer à l’emplacement de l’ID que vous avez ajouté à l’URL. Par exemple, si l’identifiant est #custom-order-form, vous pouvez placer le formulaire à l’endroit où vous voulez qu’il apparaisse sur la page grâce à cet identifiant dans votre code HTML.