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

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

Articles connexes

Vous aimez cet article ?

Partager sur facebook
Partager sur Facebook
Partager sur twitter
Partager sur Twitter
Partager sur linkedin
Partager sur Linkedin
Partager sur pinterest
Partager sur Pinterest
Ludovic

Ludovic

The coolest guy in the war room who fixes your tech stuff (and who might turn out to be your best friend)

Discutons de cet article ?

Retour haut de page