Pourquoi devriez-vous personnaliser la page de remerciement WooCommerce ?
La page de remerciement est la page que les utilisateurs voient après avoir terminé 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 allons vous montrer différentes méthodes pour modifier la page de remerciement WooCommerce par programme.
Comment éditer la page de remerciement WooCommerce par programmation : 2 méthodes
Il y a deux façons principales de modifier la page de remerciement par programmation dans WooCommerce:
- Utiliser des crochets
- 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 crochets WooCommerce, nous allons travailler sur le fonctions.php fichier 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 functions.php
fichier du thème enfant :
add_action('woocommerce_before_thankyou','QuadLayers_before_thankyou'); function QuadLayers_before_thankyou(){ echo "TEST"; }
Les crochets de filtre fonctionnent de la même manière, mais ils doivent renvoyer une valeur. le ‘woocommerce_before_thankyou’ filter hook modifiera le titre de la page de remerciement comme suit :
add_filter( 'woocommerce_endpoint_order-received_title', 'QuadLayers_thank_you_title' ); function QuadLayers_thank_you_title( $old_title ){ return 'You\'re awesome!'; }
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 merci.php situé dans le dossier WC plugin templates et collez le fichier du même nom dans le dossier WooCommerce de votre thème enfant incluant le sous-dossier checkout comme suit :
Pour en savoir plus sur la personnalisation des fichiers modèles dans WooCommerce, consultez ce guide.
Après cela, vous pourrez modifier librement le merci.php fichier de votre thème enfant et écrasez celui par défaut.
Exemples de scripts pour modifier la page de remerciement WooCommerce par programmation
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 functions.php
fichier de votre thème enfant :
add_filter( 'woocommerce_endpoint_order-received_title', 'QuadLayers_thank_you_title' ); function QuadLayers_thank_you_title( $old_title ){ return 'You\'re awesome!'; } 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>, thank you so much for your order!</h3>'; $str.='<p>We will get in touch with you shortly to deliver your purchase.</p>'; $str.='<p>Stay tuned to get latest announcements and follow us on our social media profiles</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>Here is all information about your order. Cheers!</p>'; return $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 ); function QuadLayers_thankyou_page(){ $sh="<h4>You might want to check these other products. </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 ); function QuadLayers_thankyou_page(){ $sh = "<h2>Your account</h2>"; $sh .='<div class="tx_account">'.do_shortcode('[
woocommerce_my_account]
').'</div>'; echo $sh; }
Après avoir collé ceci sur functions.php
fichier, 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 ); function 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+=$item_total; endforeach; if($total>100): echo "<p>Amount of your order surpasess the 100$ range, so you are benefited with a special coupon for your next order.</p><p> Don't worry, it will be active until you decide to come back!</p><p> Use the following coupon <code>[RTC_discount]</code>in your next order to get a special 33% discount</p>"; endif; }
Dans cet exemple, nous avons choisi 100 $ mais assurez-vous d’ajuster la valeur à la ligne 8 – si($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 WooCommerce thankyou.php
fichier modèle. 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 ce faire, créez un thankyou.php
fichier sur votre thème enfant comme expliqué dans la section précédente et collez-y le code suivant :
<?php defined( 'ABSPATH' ) || exit;?> <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( 'Unfortunately your order cannot be processed as the originating bank/merchant has declined your transaction. Please attempt your purchase again.', 'woocommerce' ); ?></p> <p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed-actions"><a href="https://quadlayers.com/edit-woocommerce-thank-you-page-programmatically/<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="button pay"><?php esc_html_e( 'Pay', '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( 'My account', 'woocommerce' ); ?></a><?php endif; ?></p> <?php else : ?> <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thank you. Your order has been received.', 'woocommerce' ), $order ); ></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( 'Order number ID:', '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__( 'Thank you. Your order has been received.', '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 fonctions.php fichier 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!