Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
The thanks web page, additionally known as the acquisition affirmation web page, is an often-neglected a part of many eCommerce web sites. Since its main perform is to let prospects know that their buy was profitable, retailer house owners generally pay little consideration so long as it shows successful message of some type.
However the thanks web page can present far more worth for you and your prospects in case you spend a while optimizing it.
Why customise your WooCommerce thanks web page?
Though your thanks web page could appear to be a small a part of your web site, each level within the buyer journey is an opportunity to supply the consumer with extra worth and improve income in your retailer. Research have proven that it’s a lot inexpensive to retain current prospects than it’s to seek out new ones. If somebody arrives at your thanks web page, it means they’ve already made a purchase order. And since they’re already extra prone to make one other one, it is a nice alternative to information them in that course. All it prices is a bit effort up entrance and this new enchancment to your retailer will go to be just right for you each day.
Additionally, the thanks web page is a secure place so that you can show affords to your prospects as an alternative of sending them in transactional emails, the place you might need to restrict the quantity of promotional content material.
Listed here are some methods to make use of customized thanks pages to enhance your retailer:
- Embody essential data associated to the order. Add a supply time estimate so prospects have an thought of when they are going to obtain their order. Or embody hyperlinks to product guides, onboarding movies, FAQs, or different assist paperwork. This can assist handle expectations, present wanted data, and scale back assist tickets.
- Share particular affords. Embody coupons that prospects can use on their subsequent order and recommend associated merchandise or affiliate merchandise.
- Remind prospects of loyalty factors, rewards, or subscription standing. With WooCommerce Factors and Rewards, prospects can earn factors for purchases, account signups, and critiques. The thanks web page is a good place to remind them of the factors they’ve earned, how shut they’re to redemption, and methods to earn extra. If you happen to promote subscriptions or memberships, the thanks web page presents a fantastic alternative to recommend plan upgrades or remind prospects if their recurring fee methodology is about to run out.
There are a number of other ways you may customise your thanks web page. Handbook strategies embody coding a customized web page template, utilizing WooCommerce hooks by way of your theme’s capabilities.php file, and including customized types to your baby theme’s stylesheet. If you happen to’re not snug with coding, you should utilize a plugin that permits you to customise your thanks web page.
The default WooCommerce thanks web page
The type of your thanks web page could differ primarily based on the theme you could have put in. It could even use customized thanks pages already. Nevertheless, what you see under is the default content material included with types utilized from the Sinatra theme:
As you may see, the content material is comparatively primary. The order quantity, date, buyer electronic mail, whole, fee methodology, merchandise bought, and billing data are included by default. Let’s discover some methods we are able to add some primary customizations to enhance the thanks web page.
Utilizing an extension to customise your WooCommerce thanks web page
If the method of manually customizing your thanks web page appears tedious, otherwise you’re merely not snug digging into code, there are extensions that may do the heavy lifting of making customized thanks pages for you.
The Customized Thank You Pages extension enables you to create a number of thanks pages that show conditionally primarily based on the merchandise that had been bought. These customized thanks pages can show distinctive titles and descriptions, billing and transport data, cross-sells, up-sells, and the rest that you just would possibly need to add. Since these are precise pages and never dynamically generated, you may add any WooCommerce or theme shortcodes, embed video, and add customized textual content.
Simply create and format your thanks pages and select which one you need to show within the Product information part for every product.
You’ll be able to even present a number of thanks pages for a single product or go for a single thanks web page that shows primarily based on precedence. If a buyer buys a number of merchandise in an order that every have their very own thanks web page assigned to them, the web page with the bottom precedence quantity would be the one which shows.
An alternative choice for creating customized thanks pages is the Customized Thank You and Success Pages extension. It has related options to the Customized Thank You Pages extension but in addition has the potential of displaying thanks pages primarily based on person position or classes and exhibiting built-in social sharing buttons.
Create a customized WooCommerce thanks web page manually
On this part, we’ll focus on three other ways to manually customise your WooCommerce thanks web page.
Earlier than you get began, be sure you’re utilizing a baby theme as an alternative of a mum or dad theme. Don’t instantly overwrite information in WooCommerce or your mum or dad theme as these information shall be overwritten in future updates.
Word: If you happen to’re unfamiliar with code and resolving potential conflicts, choose a WooExpert or Developer for help. We’re unable to supply assist for customizations beneath our Help Coverage.
The way to code a WooCommerce thanks web page template
Step 1: Obtain the thankyou.php web page template file
Use an SFTP consumer or your host’s cPanel to entry your web site’s information and navigate to wp-content/plugins/woocommerce/templates/checkout. Obtain the file thankyou.php to your native machine.
Step 2: Edit the thankyou.php file together with your customized code
Open thankyou.php in your textual content modifying software program of selection. You should use Notepad (Home windows) or TextEdit (Mac), however be sure you’re modifying in plain textual content mode. Higher nonetheless, use a free textual content modifying software program designed particularly for coding like Atom.io. Atom.io is a cross-platform textual content editor that works on Home windows, Mac OS, and Linux working programs.
For this instance, we’ll change the textual content “Thanks. Your order has been acquired.” to “Thanks for putting an order with us!” We’ll additionally add some details about transport and make some type adjustments to visually name consideration to this essential data.
Authentic code:
That is the default code that we’ll be modifying within the baby theme template.
<p class="woocommerce-notice woocommerce-notice–success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thanks. Your order has been acquired.', 'woocommerce' ), $order ); // phpcs:ignore WordPress.Safety.EscapeOutput.OutputNotEscaped ?></p>Substitute code:
That is the code we’ll be utilizing in our new customized thanks web page.
<p class="woocommerce-notice woocommerce-notice–success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thanks for putting an order with us!', 'woocommerce' ), $order ); // phpcs:ignore WordPress.Safety.EscapeOutput.OutputNotEscaped ?></p>
<p class="thankyou-note”> Please observe that supply instances are at the moment estimated at 7-10 enterprise days for U.S. supply. Orders exterior the US could take two weeks to 30 days to be delivered and should expertise delays resulting from customs or different present insurance policies which might be out of our management. When you have any questions on your order, please contact us at [email protected].</p>After making these adjustments, save your file with the identical identify, thankyou.php. In your SFTP software or cPanel, navigate to wp-content/themes/your-child-theme. In your baby theme folder, you’ll create two new folders. First, create a folder named woocommerce. Within the woocommerce folder create a folder known as checkout.
Now add your modified thankyou.php file to the kid theme’s woocommerce/checkout folder.
CSS customizations
Word that we’ve added a brand new p class known as .thankyou-note. In our baby theme’s type.css file, we’re going so as to add some customizations to the already current p.woocommerce-notice class and add types to the brand new p.thankyou-note class as follows:
.woocommerce-checkout p.woocommerce-notice {
font-size: 20px;
font-weight: 800;
colour: #3857F1;
}
.woocommerce-checkout p.thankyou-note {
margin-bottom: 40px;
padding: 0 0 5px 20px;
border-left: stable 5px #c4401c;
}Save your type sheet and re-upload it with these customizations to your baby theme folder.
It’s best to now have a thanks web page that appears like this:
Customizing the WooCommerce thanks web page template with hooks
You may also use WooCommerce hooks in your baby theme’s capabilities.php file so as to add or take away content material out of your thanks web page. If you happen to’re unfamiliar with WooCommerce hooks, overview the WooCommerce documentation. For an entire record, try the WooCommerce Motion and Filter Hook Reference web page.
For this instance, we’ll use a hook so as to add a particular coupon for orders over $100 that can seem under the billing handle part.
In our baby theme’s capabilities.php file, we’ll add the next code:
add_action( 'woocommerce_thankyou', 'coupon_thankyou', 10, 2 );
perform coupon_thankyou( $order_id ) {
$order = wc_get_order( $order_id );
$whole=0;
foreach ( $order->get_items() as $item_key => $merchandise ) {
$item_data = $item->get_data();
$item_total = intval( $item_data[‘total’] );
$whole += $item_total;
}
if ( $whole>100 ) {
echo "<part class="woocommerce-thankyou-coupon"><h2 class="woocommerce-column__title">Congrats! Get 50% off your subsequent buy!</h2><div class="tybox"><p>As a particular thanks for spending over $100 with us in the present day, we’d like to present you 50% off your subsequent order of any full priced objects in our retailer.</p><p>Use code <code class="tycoupon">[ 50special ]</code> in your subsequent order.</p></div></part>";
}
}Save your adjustments and add the revised file to your baby theme folder.
CSS customizations
Word that we’ve added some new CSS courses within the above motion — part class .woocommerce-thankyou-coupon, a div class known as .tybox, and a code class known as .tycoupon. Since it is a particular coupon, we need to name consideration to it and add distinctive types that assist it stand out from the remainder of the thanks web page. We’ll add these types to the brand new customized courses within the baby theme type.css file as follows:
.woocommerce .woocommerce-thankyou-coupon div.tybox {
border: dashed 13px;
border-radius: 3px;
border-color: rgba(110,110,110,.2);
padding: 12px 20px;
background: rgb(176,34,195);
background: linear-gradient(0deg, rgba(176,34,195,0.30) 0%, rgba(253,214,45,0.30) 100%);
}
.woocommerce .woocommerce-thankyou-coupon {
margin-bottom: 2em;
}
code.tycoupon {
font-size: 18px;
font-weight: 800;
}Re-upload the kid theme type sheet with these customizations to your baby theme folder. The outcome ought to now seem like this:
Irrespective of which methodology you determine to make use of to customise your WooCommerce thanks web page, it’s best to take the time to develop a technique that gives the very best return in your efforts. Relying on the kind of enterprise you’re working, you might deal with rewards or loyalty factors, coupons, or detailed onboarding data.
Whereas customized thanks pages are only one a part of the larger puzzle that’s rising what you are promoting, they’re a singular alternative to supply useful data and focused advertising messages that each save and make you cash.
Uncover extra methods to customise your WooCommerce retailer.
