Pré-remplir un formulaire de commande avec le courriel entré par un visiteur sur la landing page

Mis à jour le 29 novembre 2020 @ 20:13

Cela faisait presque 2 jours que je m’arrachais les cheveux là dessus en me disant qu’il devait bien y avoir un moyen, voici la situation : j’ai créé une landing page en y intégrant le widget Formulaire d’Elementor (Pro), je souhaitais qu’après avoir entré son adresse mél, le visiteur soit redigé vers la page de commande WooCommerce où là, l’adresse mél qu’il avait déjà renseigné précédemment soit reportée dans le formulaire de commande WooCommerce.

Pré-remplir un formulaire de commande 1280x720

Réglages du widget Formulaire d’Elementor (Pro)

Champs du formulaire et Bouton envoyer

LudovicClain.com Réglages du widget Formulaire d'Elementor (Pro) 1280x720
  • Glisser/déposer le widget
  • Sélectionner les champs nécessaires
  • Personnaliser l’aspect (j’aime bien les formulaires « inline », l’astuce est de préciser 50% pour la taille du champ du courriel et la taille du bouton)
  • Personnaliser le texte du bouton et le texte indicatif du champ
  • Dans la tabulation AVANCÉ du champ E-mail attribuer un ID unique (par précaution)

Actions après envoi

LudovicClain.com Actions après envoi 1280x720
  • Choisir Redirection dans les options
  • Coller l’url suivante :
https://MonSupersite.com/checkout/?email=[field id="MonEmailID"]
  • Remplacer « MonSupersite.com » par l’url de votre site et « MonEmailID » par l’ID de votre E-mail (attention à garder les guillemets, si vous prenez le code court comme il est, ça ne marchera pas)

Ajouter le snippet au fichier functions.php

Dernière ligne droite pour que tout fonctionne correctement, il y a un morceau de code à rajouter au fichier functions.php de votre thème enfant. C’est celui-là :

/**
 * @snippet       Pré-remplir un formulaire de commande
 * @sourcecode    https://ludovicclain.com/?p=182
 * @compatible    Testé et fonctionnel avec WooCommerce 5.3.2, Elementor Pro - 2.9.2, WooCommerce - 4.0.1    
 */
add_filter('woocommerce_checkout_fields', 'prefill_billing_fields');

function prefill_billing_fields($address_fields) {


    // Get the data from the URL

    if (isset($_GET['fname']) || isset($_GET['lname']) || isset($_GET['email'])) {

        // wp_die();

        $fname = isset($_GET['fname']) ? esc_attr($_GET['fname']) : '';
        $lname = isset($_GET['lname']) ? esc_attr($_GET['lname']) : '';
        $em = isset($_GET['email']) ? esc_attr($_GET['email']) : '';

        // First Name

        if (isset($_GET['fname']) && !empty($_GET['fname'])) {
            if (isset($address_fields['billing']['billing_first_name'])) {
                $address_fields['billing']['billing_first_name']['default'] = $fname;
            }
        }

        // Last Name

        if (isset($_GET['lname']) && !empty($_GET['lname'])) {
            if (isset($address_fields['billing']['billing_last_name'])) {
                $address_fields['billing']['billing_last_name']['default'] = $lname;
            }
        }

        // Email

        if (isset($_GET['email']) && !empty($_GET['email'])) {
            if (isset($address_fields['billing']['billing_email'])) {
                $address_fields['billing']['billing_email']['default'] = $em;
            }
        }
    }

    return $address_fields;
}

Bonus

Avec le code ci-dessus, lors de votre prochaine campagne d’email marketing, vous pourrez faire en sorte que lorsque votre prospect clique sur le lien de commande présent dans votre courriel, son formulaire de commande soit déjà pré-rempli avec ses coordonnées et ainsi éliminer une friction supplémentaire à l’achat.

Références

Bonne nouvelle !

Rejoignez mon groupe privé Les amis-entrepreneurs ★ un lieu sûr pour apprendre et grandir en tant qu'entrepreneur, se soutenir les uns les autres, obtenir des réponses à des questions brûlantes, découvrir les secrets d'experts, participer à des défis de croissance, le tout accompagné d'échanges électroniques débordants de valeur, adaptés au mieux à vos intérêts, jamais insistants et toujours gratuits.
Retour haut de page