Comment personnaliser la page de remerciement WooCommerce avec du code
Publié: 2022-09-15L'aspect le plus important d'une page de remerciement réussie est de s'assurer que les gens la voient. Vous n'avez besoin de rien d'extraordinaire ou de compliqué. Il doit juste faire une bonne première impression en se démarquant du reste du site.
Le but de cet article est de vous fournir un tutoriel général sur la façon de personnaliser la page de remerciement WooCommerce ou la page de commande reçue à l'aide de code.
Pourquoi personnaliser la page de remerciement WooCommerce ?
La page de remerciement vous permet de rester en contact avec vos clients après leur achat.
Vous pouvez ignorer l'importance de la confirmation de commande ou de la page de remerciement dans votre boutique en ligne, mais c'est en fait une partie cruciale du processus de vente.
La page de remerciement par défaut de WooCommerce est ennuyeuse et une impasse pour les clients. Les clients sont confus quant à la suite.
Au lieu de cela, si vous le personnalisez, vous pouvez :
- Ajoutez les instructions d'intégration, les prochaines étapes…
- Promouvoir des produits connexes via la vente croisée et la vente incitative
- Utilisez des coupons pour encourager les achats répétés
- Fournir des ressources précieuses aux clients
- Engagez les clients avec des preuves sociales, des vidéos, etc.
À la lumière de cela, voyons comment créer et personnaliser facilement une page de remerciement personnalisée à l'aide de code. Chers développeurs, tous les yeux ici !
Personnalisez la page de remerciement WooCommerce avec du code
Il existe trois façons de personnaliser la page de remerciement ou la page de commande reçue à l'aide d'un code :
- Créer une redirection
- Utiliser des filtres
- Remplacer les fichiers modèles
Aussi, gardez ce message sur l'ajout en toute sécurité de code au fichier ouvert dans un autre onglet pour référence.
Voyons en détail chacune des trois manières.
Personnaliser la page de remerciement en créant une redirection
Il est simple de faire une redirection en créant un nouveau plugin ou en ouvrant le fichier functions.php et en entrant le code suivant à la fin du fichier.
add_action( 'template_redirect', 'sa_custom_redirect_after_purchase' );
function sa_custom_redirect_after_purchase() {
global $wp ;
if ( is_checkout() && !empty( $wp->query_vars['order-received'] ) ) {
wp_redirect( 'https://demo.storeapps.org/woocommerce/thank-you/' );
sortir;
}
}
Voici la page de remerciement personnalisée après avoir passé une commande.
La redirection semble bonne, mais il manque des éléments importants tels que le tableau récapitulatif des commandes, les détails de facturation et d'expédition et d'autres informations importantes que WooCommerce fournit actuellement.
Personnaliser la page de remerciement à l'aide de filtres
Au lieu de créer une page de remerciement, vous pouvez modifier le titre de la page ou modifier du texte avant les informations de commande. Dans de tels cas, vous pouvez utiliser des filtres.
Changer le titre de la page de remerciement
add_filter( 'the_title', 'sa_title_order_received', 10, 2 );
function sa_title_order_received( $title, $id ) {
if ( function_exists( 'is_order_received_page' ) && is_order_received_page() && get_the_ID() === $id ) {
$title = "Merci pour votre commande :)" ;
}
retourne $titre ;
}
WooCommerce fournit la fonction is_order_received_page() dans le fichier includes/wc-conditional-functions.php. Voici comment le titre modifié apparaîtrait :
Personnaliser le titre de la page de remerciement
Vous pouvez le faire pour inclure le nom du client dans le titre ou toute autre chose.
add_filter( 'the_title', 'sa_personalize_order_received_title', 10, 2 );
function sa_personalize_order_received_title( $title, $id ) {
if ( is_order_received_page() && get_the_ID() === $id ) {
global $wp ;
// Récupère la commande. Les lignes suivantes sont présentes dans order_received() dans le fichier includes/shortcodes/class-wc-shortcode-checkout.php
$order_id = apply_filters( 'woocommerce_thankyou_order_id', absint( $wp->query_vars['order-received'] ) );
$order_key = apply_filters( 'woocommerce_thankyou_order_key', empty( $_GET['key'] ) ? '' : wc_clean( $_GET['key'] ) );
si ( $order_id > 0 ) {
$order = wc_get_order( $order_id );
if ( ! $commande || ! hash_equals( $commande->get_order_key(), $order_key ) ) {
$commande = faux ;
}
}
if ( $order instanceof WC_Order ) {
$title = sprintf( "Vous êtes génial, %s!", esc_html( $order->get_billing_first_name() ) );
}
}
retourne $titre ;
}
Cela ressemblera à ceci :
Personnalisation du texte avant les informations de commande
Le texte par défaut affiché avant les informations de commande est "Merci. Votre commande a été reçue.".
Ce texte provient du fichier templates/checkout/thankyou.php. Vous pouvez modifier ce texte en utilisant un filtre disponible dans WooCommerce qui est woocommerce_thankyou_order_received_text .
add_filter( 'woocommerce_thankyou_order_received_text', 'sa_update_order_received_text', 10, 2 );
function sa_update_order_received_text( $text, $order ) {
$text .= 'Nous vous avons envoyé le reçu de commande par e-mail.';
retourne $texte ;
}
Ce code ajoutera le texte « Nous vous avons envoyé le reçu de commande par e-mail ». au texte existant.
Si vous souhaitez écraser complètement le texte, vous devez éviter de concaténer la variable $text .
$text = 'Nous vous avons envoyé le reçu d\'achat par e-mail.';
Si vous souhaitez ajouter ici des instructions nécessitant que le client télécharge un formulaire, vous pouvez également le faire.
add_filter( 'woocommerce_thankyou_order_received_text', 'sa_change_order_received_text', 10, 2 );
function sa_change_order_received_text( $text, $order ) {
$text = 'Nous vous avons envoyé le reçu d'achat par e-mail. Veuillez vous assurer de remplir <a href="https://demo.storeapps.org/form.pdf">ce formulaire avant d'assister à l'événement.';
retourne $texte ;
}
Cela ressemblera à ceci :
Personnalisation de la page de remerciement en écrasant les fichiers de modèle WooCommerce
WooCommerce affiche le contenu de la page de remerciement à partir du fichier de modèle thankyou.php qui se trouve dans le dossier woocommerce/templates/checkout/.
Vous aurez besoin de quelques connaissances en PHP si vous souhaitez choisir cette méthode pour personnaliser la page de remerciement WooCommerce.
Vous pouvez utiliser votre propre modèle en copiant le fichier thankyou.php dans le dossier de votre thème dans une structure de dossiers similaire.
Par exemple, si vous utilisez le thème Storefront, alors votre thankyou.php doit être copié dans :
wp-content/themes/storefront/woocommerce/checkout/ dossier. Vous devrez créer les deux dossiers, 'woocommerce' & 'checkout'.
Lorsque WooCommerce trouve que le même modèle est présent dans votre propre thème, la priorité est donnée au modèle présent dans votre thème.
Prenons un exemple. Sur la page de remerciement par défaut, le mode de paiement est indiqué au début et dans les détails de la commande.
Nous souhaitons fournir un code de coupon au client pour son prochain achat et supprimer le mode de paiement de la section supérieure.
Ci-dessous le modèle thankyou.php :
<?php
si ( ! défini ( 'ABSPATH' ) ) {
sortir;
}
?>
<div class="woocommerce-order">
<?php si ( $commande ) : ?>
<?php if ( $order->has_status( 'failed' ) ) : ?>
<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php _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 _e( 'Payer', 'woocommerce' ) ?>
<?php si ( is_user_logged_in() ) : ?>
<a href="<?php echo esc_url( wc_get_page_permalink( 'moncompte' ) ); ?>" class="bouton payer"><?php _e( 'Mon compte', 'woocommerce' ); ?>
<?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', __( 'Merci. Votre commande a été reçue. Nous vous avons envoyé le reçu de commande pour cette transaction.', 'woocommerce' ), $order ); ?></p>
<ul class="woocommerce-order-overview woocommerce-thankyou-order-details order_details">
<li class="woocommerce-order-overview__order order">
<?php _e( 'ID de transaction :', 'woocommerce' ); ?>
<strong><?php echo $order->get_order_number(); ?></strong>
</li>
<li class="woocommerce-order-overview__date date">
<?php _e( 'Date :', 'woocommerce' ); ?>
<strong><?php echo date_i18n( get_option( 'date_format' ), $order->get_date_created() ); ?></strong>
</li>
<li class="woocommerce-order-overview__total total">
<?php _e( 'Total :', 'woocommerce' ); ?>
<strong><?php echo $order->get_formatted_order_total(); ?></strong>
</li>
</ul>
<?php endif; ?>
<p>Félicitations pour votre première commande. Voici une remise de 15% sur votre prochaine commande. Utilisez le code promo <strong>WELCOME15</strong> pour bénéficier de la réduction.</p>
<?php do_action( 'woocommerce_thankyou_' . $order->get_payment_method(), $order->get_id() ); ?>
<?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?>
<?php sinon : ?>
<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Merci. Votre commande a été reçue.', 'woocommerce' ), nul ); ?></p>
<?php endif; ?>
</div>
Vous voudrez peut-être modifier les données affichées dans le tableau des détails de la commande et les détails du client (lorsqu'il est connecté).
Ceux-ci viennent d'un autre fichier. WooCommerce utilise une fonction woocommerce_order_details_table() qui est attachée au woocommerce_thankyou hook .
La fonction woocommerce_order_details_table() est définie dans le fichier includes/wc-template-functions.php.
La page de remerciement est une collection de quatre fichiers modèles différents :
- templates/checkout/merci.php
- templates/commande/details-de-commande.php
- templates/order/order-details-item.php
- templates/order/order-details-customer.php
Une fois que vous savez quelles données proviennent de quel modèle, il vous suffit de copier le bon modèle dans le dossier de votre thème et c'est tout.
Voyons maintenant comment personnaliser la page de remerciement WooCommerce pour une variante de produit.
Comment rediriger vers une page de remerciement personnalisée basée sur l'ID de variante à l'aide d'un hook ?
add_action( 'woocommerce_thankyou', 'sa_redirect_product_attribute_based', 10, 1 );
function sa_redirect_product_attribute_based( $order_id ) {
$order = wc_get_order( $order_id );
if ( $order instanceof WC_Order ) {
foreach( $commande->get_items() as $item ) {
// Ajoutez l'identifiant de variation que vous voulez ci-dessous ici
if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) {
// remplacez ci-dessous l'URL vers laquelle vous souhaitez envoyer votre client
wp_redirect( 'https://demo.storeapps.org/custom-thank-you/' );
}
}
}
}
Imprimer le texte sur la page de remerciement en fonction de l'attribut du produit
En prolongeant l'exemple ci-dessus, vous pouvez également afficher n'importe quel texte personnalisé sur la page de remerciement WooCommerce en fonction de l'identifiant de variation. Voici le code pour cela :
add_action( 'woocommerce_thankyou', 'sa_show_custom_text_by_variation_id', 10, 1 );
function sa_show_custom_text_by_variation_id( $order_id ) {
$order = wc_get_order( $order_id );
if ( $order instanceof WC_Order ) {
foreach( $commande->get_items() as $item ) {
// Ajoutez l'identifiant de variation que vous voulez ci-dessous ici. Mes attributs sont Couleur, Taille
if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) {
echo '<p>N'hésitez pas à nous contacter si vous souhaitez échanger le T-shirt contre une autre taille.</p>';
}
}
}
}
Lorsque vous ajoutez le code, la page de remerciement ressemble à ceci :
C'est beaucoup d'extraits de code ici. Si vous n'aimez pas le codage et que vous souhaitez une solution simple, lisez ci-dessous pour découvrir un plugin puissant.
Comment configurer une page de remerciement personnalisée par produit et sur tout le site à l'aide d'un plugin ?
La personnalisation de la page de remerciement implique de nombreux éléments. Ce n'est pas si facile qu'il n'y paraît. Une petite erreur que vous faites en ajoutant l'extrait de code et tout se détraque.
Par conséquent, si vous souhaitez vous concentrer davantage sur vos ventes et votre marketing et vous éviter les tracas de codage, nous vous suggérons d'utiliser le plugin Page de remerciement personnalisée pour WooCommerce.
Il vous aide à configurer une page de remerciement personnalisée par produit ainsi que sur l'ensemble du site. Nous ajouterons bientôt la prise en charge de la variation de produit.
Une page de remerciement optimisée avec ce plugin vous permet de vendre (en utilisant les offres intelligentes), de créer une liste de diffusion, de promouvoir vos offres, de recueillir des commentaires, d'afficher des messages vidéo, des coupons et de faire d'autres choses.
Votre page de remerciement WooCommerce par défaut sera convertie en un puissant outil marketing comme celui-ci :
Plus de fonctionnalités du plug -in :
- Quatre modèles de page de remerciement prêts à l'emploi à haute conversion pour vous aider à démarrer en beauté.
- Redirigez les utilisateurs après l'achat/le paiement vers des liens d'affiliation, des liens tiers ou des ressources.
- Vous donne la possibilité de créer la page de remerciement selon votre thème, vos plugins et vos éditeurs de page préférés et de concevoir la page comme vous le souhaitez.
Essayez la démo en direct
Derniers mots
Espérons que cet article vous aurait aidé à comprendre l'importance de personnaliser une page de remerciement personnalisée ainsi qu'une bonne compréhension de la façon de le faire via un code et un plugin.
L'utilisation de cette petite page peut être une excellente occasion d'augmenter les ventes, même si cela nous semble normal.