Comment modifier la page de remerciement WooCommerce par programmation

Vous souhaitez personnaliser la page de remerciement de votre boutique ? Dans ce guide, nous vous montrerons différentes manières de modifier la page de remerciement WooCommerce par programmation .

Pourquoi devriez-vous personnaliser la page de remerciement WooCommerce ?

La page de remerciement est la page que les utilisateurs voient après avoir passé une commande . Par défaut, il remercie simplement les acheteurs pour leur achat et fournit des informations de base sur la commande telles que le numéro de commande, les articles achetés, le prix, le mode de paiement, etc. Il n'y a rien de mal à cela, mais vous pouvez faire un bien meilleur usage de cette page.

La page de remerciement est souvent négligée mais peut être extrêmement puissante. Gardez à l'esprit que tous vos acheteurs le verront après avoir passé une commande, c'est donc une excellente occasion de vendre ou de donner des informations utiles à vos clients. En personnalisant la page de remerciement, vous pouvez offrir une bien meilleure expérience après-vente à vos acheteurs.

Si quelqu'un voit votre page de remerciement, c'est parce qu'il a passé une commande dans votre boutique. Cela signifie qu'ils vous font confiance (au moins assez pour acheter chez vous). Comme vous le savez probablement, il est beaucoup plus facile de vendre à quelqu'un qui a déjà acheté chez vous qu'à de nouveaux clients. Même si votre objectif principal n'est peut-être pas de vendre quelque chose, vous pouvez travailler pour transformer cet acheteur en un client fidèle.

Par exemple, vous pouvez modifier la page de remerciement et ajouter des guides utiles, des liens de parrainage que les utilisateurs peuvent partager pour obtenir une récompense, des offres exclusives, des remises sur de futurs achats, etc.

Il existe plusieurs façons de personnaliser la page de remerciement pour améliorer l'expérience utilisateur et faire revenir les clients dans votre magasin. Dans la section suivante, nous vous montrerons différentes méthodes pour modifier la page de remerciement WooCommerce par programmation .

Comment éditer la page de remerciement WooCommerce par programmation : 2 méthodes

Il existe deux manières principales de modifier la page de remerciement par programmation dans WooCommerce :

1. Utiliser des crochets
2. Remplacer les fichiers modèles

De plus, vous pouvez également combiner les deux méthodes en fonction de chaque exigence spécifique.

Regardons de plus près les deux sens.

REMARQUE : Comme nous allons modifier certains fichiers principaux, avant de commencer, nous vous recommandons de créer une sauvegarde complète de votre site et d'installer un thème enfant. Si vous ne savez pas comment procéder, consultez ce guide pour en créer un ou utiliser l'un de ces plugins.

1) Personnalisez la page de remerciement à l'aide de crochets

Pour exécuter les hooks WooCommerce, nous allons travailler sur le fichier functions.php du thème enfant. Nous avons besoin de ce fichier pour écraser celui du thème parent.

Certains des crochets fournis par WooCommerce fonctionnent sur la page de remerciement, tels que woocommerce_before_thankyou et woocommerce_thankyou . De plus, vous pouvez modifier le titre et le contenu avec des crochets de filtre tels que woocommerce_endpoint_order-received_title et woocommerce_thankyou_order_received_text .

Pour utiliser l'un de ces crochets, vous déclencherez chacun d'eux en ajoutant l'extrait suivant au fichier functions.php du thème enfant :

 add_action('woocommerce_before_thankyou','QuadLayers_before_thankyou');
fonction QuadLayers_before_thankyou(){
    echo "TEST" ;
}

Les crochets de filtre fonctionnent de la même manière, mais ils doivent renvoyer une valeur. Le hook de filtre « woocommerce_before_thankyou » modifiera le titre de la page de remerciement comme suit :

 add_filter( 'woocommerce_endpoint_order-received_title', 'QuadLayers_thank_you_title' ); 
fonction QuadLayers_thank_you_title( $old_title ){ 
     return 'Tu es génial !'; 
}

2) Modifier la page de remerciement en écrasant les fichiers de modèle

Une autre façon de modifier la page de remerciement WooCommerce par programme consiste à écraser les fichiers de modèle. Il convient de noter que l'écrasement des fichiers de modèle vous donne beaucoup de flexibilité, mais lorsque vous écrasez un fichier de modèle, les crochets qui fonctionnent sur ce fichier ne fonctionneront plus.

Pour écraser les fichiers de modèle, vous devez copier le fichier thankyou.php situé dans le dossier des modèles de plug-in WC et coller le fichier du même nom dans le dossier WooCommerce de votre thème enfant, y compris le sous-dossier de paiement, comme suit :

Pour en savoir plus sur la personnalisation des fichiers modèles dans WooCommerce, consultez ce guide.

Après cela, vous pourrez éditer librement le fichier thankyou.php de votre thème enfant et écraser celui par défaut.

Exemples de scripts pour modifier la page de remerciement WooCommerce par programme

Dans cette section, nous allons vous montrer différents scripts que vous pouvez utiliser pour modifier votre page de remerciement WooCommerce par programmation. Pour ce didacticiel, nous utiliserons le thème Storefront, il peut donc sembler un peu différent si vous utilisez un thème différent.

Voici à quoi ressemble la page de remerciement par défaut dans WooCommerce :

1) Ajoutez du contenu personnalisé à la page de remerciement

Comme vu précédemment, nous pouvons utiliser les crochets WooCommerce pour ajouter un titre personnalisé. Cette fois, nous ajouterons plus de contenu utile, afin que les clients puissent nous suivre sur les réseaux sociaux.

Collez le code suivant sur le fichier functions.php de votre thème enfant :

 add_filter( 'woocommerce_endpoint_order-received_title', 'QuadLayers_thank_you_title' ); 
fonction QuadLayers_thank_you_title( $old_title ){ 
     return 'Tu es génial !'; 
}
add_filter( 'woocommerce_thankyou_order_received_text', 'QuadLayers_thank_you_details', 20, 2 ); 
function QuadLayers_thank_you_details( $thank_you_title, $order ){ 
    $str= '<h3><b>Oh ' . $order->get_billing_first_name() . '</b>, merci beaucoup pour votre commande !</h3>';
    $str.='<p>Nous vous contacterons sous peu pour livrer votre achat.</p>';
    $str.='<p>Restez à l'écoute pour recevoir les dernières annonces et suivez-nous sur nos profils de réseaux sociaux</p>>' ;
    $str.= '<div><div><a href="#twitter.com"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Twitter_Logo.png" / ></a></div>' ; 
    $str.='<div><a href="#facebook.com"><img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg" /></a></div>' ; 
    $str.='<div><a href="#instagram.com"><img src="https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Instagram_colored_svg_1-512. png" /></a></div></div>' ;
   $str.='<p>Voici toutes les informations concernant votre commande. Santé !</p>' ;    
    retourne $str ;
}

N'oubliez pas de remplacer les URL des images par le chemin de l'URL de votre propre site Web. En plus de cela, vous devez insérer des backlinks vers vos profils de médias sociaux, de sorte que lorsque les utilisateurs cliquent sur le lien, ils deviendront des abonnés.

Ce sera le résultat :

2) Afficher les informations sur le produit sur la page de remerciement

Une autre alternative intéressante consiste à afficher d'autres produits, afin que les clients puissent acheter d'autres articles qui les intéressent. Pour afficher des produits spécifiques, vous pouvez utiliser des shortcodes WooCommerce comme celui-ci :

 add_action( 'woocommerce_thankyou', 'QuadLayers_thankyou_page', 10, 2 );
fonction QuadLayers_thankyou_page(){
   $sh = '<h4>Vous voudrez peut-être vérifier ces autres produits. </h4>' ;
  $sh .='<div class="tx_account">'.do_shortcode('
 ').'</div>';
    echo $sh;
}

Ici, nous utilisons le shortcode du produit pour afficher les produits en vedette et le résultat est le suivant :

3) Afficher les détails du compte sur la page de remerciement

De même, nous pouvons joindre les détails du compte de l'utilisateur et afficher des onglets utiles avec ses commandes, son adresse, ses informations de compte, etc.

 add_action( 'woocommerce_thankyou', 'QuadLayers_thankyou_page', 10, 2 );
fonction QuadLayers_thankyou_page(){
   $sh = "<h2>Votre compte</h2>" ;
   $sh .='<div class="tx_account">'.do_shortcode(' [ woocommerce_my_account ] ').'</div>' ; echo $sh; }

Après avoir collé ceci dans le fichier functions.php , votre page de remerciement devrait ressembler à ceci :

4) Donnez des coupons lorsque les achats dépassent un certain prix total

La personnalisation de la page de remerciement peut être un excellent moyen de transformer un acheteur occasionnel en client fidèle. Les coupons de réduction pour les achats futurs sont un excellent moyen d'y parvenir.

Le script suivant ajoutera un texte à la fin de la page de remerciement lorsque le prix total de la commande est supérieur à 100 $.

 add_action( 'woocommerce_thankyou', 'QuadLayers_thankyou_order', 10, 2 ); 
fonction QuadLayers_thankyou_order($order_id){
    $order = wc_get_order( $order_id );
    $total=0 ;
    foreach ($order->get_items() as $item_key => $item ):
        $item_data=$item->get_data();       
        $item_total=intval($item_data['total']);
        $total+=$article_total ;        
    finpourchaque;
    si($total>100):
        echo "<p>Le montant de votre commande dépasse la fourchette de 100 $, vous bénéficiez donc d'un coupon spécial pour votre prochaine commande.</p><p> Ne vous inquiétez pas, il sera actif jusqu'à ce que vous décidiez de revenir !</p><p>Utilisez le coupon suivant <code>[RTC_discount]</code>dans votre prochaine commande pour obtenir une remise spéciale de 33 %</p>" ;
    fin si;
}

Dans cet exemple, nous avons choisi 100 $ mais assurez-vous d'ajuster la valeur de la ligne 8 - if($total>100): - à quelque chose qui a du sens pour votre entreprise.

5) Supprimer et modifier les détails de la commande sur la page de remerciement

Examinons maintenant un exemple plus complexe et apportons quelques modifications au fichier de modèle WooCommerce thankyou.php . Si vous n'êtes pas familiarisé avec l'édition de fichiers modèles, vous pouvez consulter ce guide.

Dans l'exemple suivant, nous supprimerons l'e-mail, le montant total et le mode de paiement de la page de commande, car ils sont également affichés sur les détails de la commande. Cela signifie que nous ne laisserons que le numéro d'identification de la commande et la date de la commande.

Dans le même temps, nous avons déplacé la liste des détails de la commande vers le haut et modifié les étiquettes.

Pour cela, créez un fichier thankyou.php sur votre thème enfant comme expliqué dans la section précédente et collez-y le code suivant :

 <?php défini( 'ABSPATH' ) || sortie;?>
<div class="woocommerce-order">
<?php if ( $order ): do_action( 'woocommerce_before_thankyou', $order->get_id() ); ?> <?php if ( $order->has_status( 'failed' ) ) : ?>
 <p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php esc_html_e( 'Malheureusement, votre commande ne peut pas être traitée car la banque/le marchand d'origine a refusé votre transaction. Veuillez tenter votre achat encore.', 'woocommerce' ); ?></p>
<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed-actions"><a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class= "bouton payer"><?php esc_html_e( 'Payer', 'woocommerce' ); ?></a><?php if ( is_user_logged_in() ) : ?><a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php esc_html_e( 'Mon compte', 'woocommerce' ); ?></a><?php endif; ?></p>
<?php sinon : ?>
<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Merci. Votre commande a été reçue.', 'woocommerce' ), $commande ); ></p>
<?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?>
<ul class="woocommerce-order-overview woocommerce-thankyou-order-details order_details">
<li class="woocommerce-order-overview__order order"><?php esc_html_e( 'ID du numéro de commande :', 'woocommerce' ); ><strong><?php echo $order->get_order_number(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong></li>
<li class="woocommerce-order-overview__date date"><?php esc_html_e( 'Date :', 'woocommerce' ); ?><strong><?php echo wc_format_datetime( $order->get_date_created() ); ></strong></li>
</ul>
<?php endif; ?>
<?php else : ?><p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Merci. Votre commande a été reçu.', 'woocommerce' ), null );>
</p><?php endif; ?>
</div>

Si tout s'est bien passé, vous devriez voir quelque chose comme ceci :

Conclusion

Dans l'ensemble, la page de remerciement est souvent négligée, mais elle peut avoir un impact important sur votre entreprise. En ajoutant des liens de parrainage, des offres exclusives et des remises pour de futurs achats, vous pouvez augmenter vos ventes et augmenter le nombre de clients fidèles.

Dans ce guide, nous avons vu deux manières de modifier la page de remerciement WooCommerce par programmation :

• Avec crochets
• Remplacer les fichiers modèles

Les deux méthodes sont efficaces et peuvent fonctionner dans différentes situations, alors choisissez celle qui convient le mieux à vos besoins spécifiques.

À présent, vous devriez être en mesure de personnaliser votre page de remerciement et :

• Ajouter du contenu personnalisé tel que des liens de médias sociaux
• Afficher les produits
• Afficher les détails du compte
• Accorder des remises lorsque le client atteint un certain minimum de dépenses
• Supprimer et modifier les détails de la commande

Enfin, notez que les mêmes crochets définis sur les fichiers de modèle WooCommerce sont ceux que vous pouvez utiliser sur le fichier functions.php du thème enfant. Ainsi, si vous supprimez les crochets du fichier de modèle, ils cesseront de fonctionner sur votre site Web.

Pour plus de guides pour personnaliser votre boutique, consultez :

• Comment personnaliser la page de la boutique dans WooCommerce
• Modifier la page produit WooCommerce par programmation
• Comment personnaliser la page Mon compte WooCommerce

Avez-vous personnalisé votre page de remerciement ? Quelle méthode as-tu utilisé ? Faites-nous savoir dans la section commentaires ci-dessous!