So, you’re using Woocommerce and a customer has just purchased a product, now you want to give add an extra message on screen to tell them what happens next? Well, in this guide I give a simple solution that you can copy and customise accordingly to give any message you wish.
This is a real example I used on a client’s site. Their site was a competitions site, where customers purchase tickets to competitions. They wanted a custom message to be big and “in your face” so customers would see this message; they wanted customers to know “what happens next” after checkout, then link them to their ticket numbers in their account rather, all with the aim to reduce support queries.
Using the power of wordpress and woocommerce’s hooks and actions, all that is required is a few short lines of code.
You may copy and use the following code snippet for free, then customize to your requirements. Copy the below into the bottom of functions.php of your theme and save, then the next checkout will show the message
add_action( 'woocommerce_thankyou', 'LR_custom_content_thankyou', 10, 1 );
function LR_custom_content_thankyou( $order_id ) {
echo '<div id="Thankyou4YourOrder">
<div class="HeaderText">What Happens Next?</div>
<div class="bodyText">You shall receive an email with your ticket number(s)
<br><br>
All of your previous ticket numbers can be found in your account<br>
</div>
<button id="gotomyaccountbtn"><a href="/my-account/">My Account</a>
</button>
</div>';
}
I can also share the CSS we used if that helps give you an idea of what to do with your version:
div#Thankyou4YourOrder {
background: black;
color: white;
padding: 4rem;
margin-bottom: 50px;
}
.bodyText {
margin-top: 35px;
margin-bottom: 35px;
}
.HeaderText {
font-size: 1.8rem;
}