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 operate 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 kind.
However the thanks web page can present way more worth for you and your prospects in the event you spend a while optimizing it.
Why customise your WooCommerce thanks web page?
Regardless that your thanks web page could seem 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 on your retailer. Research have proven that it’s a lot inexpensive to retain present prospects than it’s to search 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, this can be a nice alternative to information them in that path. All it prices is just a little effort up entrance and this new enchancment to your retailer will go to be just right for you every day.
Additionally, the thanks web page is a protected place so that you can show affords to your prospects as a substitute of sending them in transactional emails, the place chances are you’ll need to restrict the quantity of promotional content material.
Listed below are some methods to make use of customized thanks pages to enhance your retailer:
- Embrace necessary data associated to the order. Add a supply time estimate so prospects have an thought of when they may obtain their order. Or embody hyperlinks to product guides, onboarding movies, FAQs, or different assist paperwork. This may assist handle expectations, present wanted data, and cut back assist tickets.
- Share particular affords. Embrace 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 evaluations. 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. For those who promote subscriptions or memberships, the thanks web page presents an awesome alternative to recommend plan upgrades or remind prospects if their recurring fee technique is about to run out.
There are a couple of alternative ways you may customise your thanks web page. Guide strategies embody coding a customized web page template, utilizing WooCommerce hooks by way of your theme’s features.php file, and including customized types to your baby theme’s stylesheet. For those who’re not snug with coding, you should use a plugin that allows you to customise your thanks web page.
The default WooCommerce thanks web page
The fashion of your thanks web page could differ primarily based on the theme you’ve got put in. It might 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 fundamental. The order quantity, date, buyer e-mail, complete, fee technique, merchandise bought, and billing data are included by default. Let’s discover some methods we will add some fundamental 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 helps you to create a number of thanks pages that show conditionally primarily based on the merchandise that have been bought. These customized thanks pages can show distinctive titles and descriptions, billing and delivery data, cross-sells, up-sells, and the rest that you simply 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 knowledge part for every product.
You may 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.
Another 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 displaying built-in social sharing buttons.
Create a customized WooCommerce thanks web page manually
On this part, we’ll focus on three alternative ways to manually customise your WooCommerce thanks web page.
Earlier than you get began, be sure to’re utilizing a baby theme as a substitute of a mother or father theme. Don’t immediately overwrite information in WooCommerce or your mother or father theme as these information shall be overwritten in future updates.
Notice: For those who’re unfamiliar with code and resolving potential conflicts, choose a WooExpert or Developer for help. We’re unable to supply assist for customizations underneath our Assist Coverage.
Methods 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 along with your customized code
Open thankyou.php in your textual content modifying software program of alternative. You should use Notepad (Home windows) or TextEdit (Mac), however be sure to’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 delivery and make some fashion adjustments to visually name consideration to this necessary 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>Alternative 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 notice that supply occasions are at the moment estimated at 7-10 enterprise days for U.S. supply. Orders outdoors america could take two weeks to 30 days to be delivered and should expertise delays resulting from customs or different present insurance policies which can be out of our management. When you have any questions on your order, please contact us at customerservice@yourstore.com.</p>After making these adjustments, save your file with the identical identify, thankyou.php. In your SFTP utility 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
Notice that we’ve added a brand new p class known as .thankyou-note. In our baby theme’s fashion.css file, we’re going so as to add some customizations to the already present 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: strong 5px #c4401c;
}Save your fashion 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 can too use WooCommerce hooks in your baby theme’s features.php file so as to add or take away content material out of your thanks web page. For those who’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 may seem under the billing deal with part.
In our baby theme’s features.php file, we’ll add the next code:
add_action( 'woocommerce_thankyou', 'coupon_thankyou', 10, 2 );
operate coupon_thankyou( $order_id ) {
$order = wc_get_order( $order_id );
$complete=0;
foreach ( $order->get_items() as $item_key => $merchandise ) {
$item_data = $item->get_data();
$item_total = intval( $item_data[‘total’] );
$complete += $item_total;
}
if ( $complete>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 right this moment, we’d like to provide 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
Notice 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 this can be 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 fashion.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 fashion sheet with these customizations to your baby theme folder. The consequence ought to now seem like this:
Regardless of which technique you resolve to make use of to customise your WooCommerce thanks web page, it’s best to take the time to develop a technique that gives one of the best return in your efforts. Relying on the kind of enterprise you’re working, chances are you’ll give attention to 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 novel alternative to supply useful data and focused advertising messages that each save and make you cash.
Uncover extra methods to customise your WooCommerce retailer.
