How to Customize the WooCommerce Thank You Web page

How to Customize the WooCommerce Thank You Web page - getsocialguide
Table Of Contents show

How to Customize the WooCommerce Thank You Web page?

We all know that you just perceive how essential it’s to be grateful to your prospects. You possibly can have important services or products to promote, however when you please them with a good custom-made message that they may see after the acquisition was completed, extra seemingly that they may turn into repeat prospects. Completely satisfied purchasers are at all times up for recommending your services or products and thus can function the supply of promotion – actually working and essentially the most dependable one!

The significance of an interesting Thank You web page is difficult to overestimate. Really, WooCommerce does this on your behalf. It redirects you to an easy Thank You web page (or “Order received” web page how is it known as generally). Customize WooCommerce Thank You page - WooCommerce - Thank You Page That is good, however, you may wish to change this to make it extra engaging & interesting. You possibly can customize the Thank You web page to do many issues reminiscent of introducing after gross sales service, launch a brand new promotion, give a reduction on the subsequent buy, and so on. There are alternative ways to customize the WooCommerce Thank You web page:

  • Utilizing free or paid plugins
  • By making a redirect
  • Through the use of filters
  • By overwriting template files

We are going to have a look at every one of those strategies.

1. Customise the WooCommerce Thank You web page with plugins

Within the first case, you’ll attainable have an easy plugin with the total range of performance. A few of the free plugins out there on the repository are:

  1. WooCommerce Thank You Page – NextMove Lite – This plugin permits you to construct {custom} Thank You pages to tug extra earnings. It offers you entry to a collection of plug & play parts reminiscent of Dynamic coupons, Movies, HTML, Picture & textual content blocks, advisable merchandise, social share, and extra.
  2. Custom Thank You Page For WooCommerce – This plugin permits WooCommerce Store Homeowners to ship their prospects to a special thanks web page. However, the web page needs to be set for every product individually.
  3. WC Custom Thank You – This WooCommerce extension permits you to outline a {custom} Thank You web page on your prospects. This plugin permits you to set a web page from the WooCommerce Settings web page that’s relevant to all merchandise.

There are some paid plugins as well:

  1. Custom Thank You Pages Per Product for WooCommerce – This plugin by StoreApps permits you to set a single {custom} Thank You web page for all merchandise as well because it permits you to set a special Thank You web page per product.
  2. WooCommerce Redirect Thank You – This extension by Store Plugins works in the identical means as the sooner one. It permits you to set a {custom} Thank You web page for particular person merchandise as well as globally for all merchandise.
  3. NextMove – This plugin by XLPlugins is the premium model of NextMove Lite talked about above. It boasts of plugs & plays parts that help WooCommerce retailer house owners enhance gross sales & improve buyer retention.

I haven’t reviewed any of the above plugins but, I am perhaps doing that in a separate submit later in order to go within the execs & cons of every.

2. Customise the WooCommerce Thank You web page by making a Redirect

In one other attainable means, it is going to be fairly easy to make redirection by creating a brand new plugin or opening the file features.php that you’ll find in wp-content/themes/your-theme-name/ and enter the next code to the top of the file:

?php

add_action( ‘template_redirect’, ‘woo_custom_redirect_after_purchase’ );
perform woo_custom_redirect_after_purchase() {
if ( is_checkout() && !empty( $wp->query_vars[‘order-received’] ) ) {
wp_redirect( ‘http://localhost:8888/woocommerce/custom-thank-you/’ );
exit;
}
}

view raw woocommerce-custom-thank-you-page-redirect.php hosted with ❤ by GitHub

When you can’t view the above code snippet, please click here. below is the custom web page proved after inserting an order:

How to Customize the WooCommerce Thank You Web page WooCommerce Customized Thank You Web page Redirecting is usually a good choice, however, on a similar time, the above web page is lacking essential issues reminiscent of the abstract desk of the order and another essential information that WooCommerce at present offers. We are going to see find out how to add that in level Four under.

Improve WooCommerce Retailer Gross sales

“It’s fascinating to see how a lot WooCommerce Deserted Cart Professional has elevated gross sales for high worth merchandise. I’d have anticipated the plugin to extend gross sales for low worth merchandise that prospects don’t thoughts whether or not or not they buy (e.g. meals), however, I’ve been extra stunned to see the distinction it may well make for merchandise that requires such a giant shopping for determination.” – Katie Keith, Operations Director at Barn2 Media

Learn more

3. Customizing WooCommerce Thank You web page with Filters

3.a. Altering the Thank You web page title As a substitute for making a Customized Thank You web page as proven above, you may simply wish to change the title of the web page. You possibly can add the under snippet in a plugin or within the theme’s features.php file.

?php
add_filter( 'the_title', 'woo_title_order_received', 10, 2 );
perform woo_title_order_received( $title, $id ) {
if ( function_exists( 'is_order_received_page' )
is_order_received_page() && get_the_ID() === $id )
return $title;
}
view raw change-title-woocommerce-order-received-page.php hosted with ❤ by GitHub

When you can’t view the above code snippet, please click here. WooCommerce offers the perform is_order_received_page() in consists of/wc-conditional-functions.php file. That is how the modified title would seem:How to Customize the WooCommerce Thank You Web page   3.b. Personalize the title You possibly can go one step ahead & additionally personalize the Thank You web page title to incorporate particulars just like the buyer’s identify, or the rest. You possibly can add the under code in a plugin or in your theme’s features.php:

?php
add_filter( 'the_title', 'woo_personalize_order_received_title', 10, 2 );
perform woo_personalize_order_received_title( $title, $id ) {
if ( is_order_received_page() && get_the_ID() === $id ) {
world $wp;
// Get the order. Line 9 to 17 are current in order_received() in consists of/shortcodes/class-wc-shortcode-checkout.php file
$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'] ) );
if ( $order_id > 0 ) {
$order = wc_get_order( $order_id );
if ( $order->get_order_key() != $order_key ) {
$order = false;
}
}
if ( isset ( $order ) )
}
return $title;
}
view raw personalize-woocommerce-thank-you-page.php hosted with ❤ by GitHub

When you can’t view the above code snippet, please click here. That is how the personalized title would seem: How to Customize the WooCommerce Thank You Web page 3.c. Altering the textual content earlier than order information There are filters out there in WooCommerce that will let you additionally change the textual content proven on the Thank You web page. By default, the textual content proven earlier than the order information is “Thanks. Your order has been received.”. This textual content comes from the file templates/checkout/thankyou.php. The filter out there to vary this textual content is: woocommerce_thankyou_order_received_text

?php
add_filter(‘woocommerce_thankyou_order_received_text’, ‘woo_change_order_received_text’, 10, 2 );
perform woo_change_order_received_text( $str, $order )
view raw woocommerce-change-order-received-text.php hosted with ❤ by GitHub

When you can’t view the above code snippet, please click here. Above code will append the textual content “We have now emailed the acquisition receipt to you.” to the prevailing textual content. Customize WooCommerce Thank You page - WooCommerce Change Thank You Page Text If you wish to overwrite the textual content fully, you merely have to keep away from concatenating the $str variable to your message variable $new_str. $new = ‘ We have now emailed the acquisition receipt to you.’; If you wish to add directions right here that want the shopper to obtain a kind, you are able to do that too.
?php
add_filter(‘woocommerce_thankyou_order_received_text’, ‘woo_change_order_received_text’, 10, 2 );
perform woo_change_order_received_text( $str, $order )
$new_str = ‘We have now emailed the acquisition receipt to you. Please be sure to fill <a href=”http://localhost:8888/some-form.pdf”>this manner</a> earlier than attending the occasion’;
return $new_str;

Read Related Post  Advanced Tools And Tips To Speed Up Your Website

view raw woocommerce-change-order-received-text2.php hosted with ❤ by GitHub

When you can’t view the above code snippet, please click here. That is how it could seem: Customize WooCommerce Thank You page - WooCommerce Change Thank You Page Text & Add External Link

4. Customizing WooCommerce Thank You web page by overwriting WooCommerce templates

WooCommerce exhibits the contents of the Thank You web page from the thankyou.php template file that may be present in woocommerce/templates/checkout/ folder. You have to some PHP information if you wish to select this technique of customizing your WooCommerce Thank You web page. You possibly can use your individual template by copying the thankyou.php file to your theme’s folder in an identical folder construction. So if you’re utilizing Twenty Seventeen theme, then your thankyou.php ought to be copied to wp-content/themes/twentyseventeen/woocommerce/checkout/ folder. You have to create the two folders, “woocommerce” & “checkout”. When WooCommerce finds the identical template is current in your individual theme, then precedence is given to the template current in your theme. Let’s take an instance. On the default thanks web page, the Cost Technique is proven within the Order Particulars as well as to start with: Customize WooCommerce Thank You page - WooCommerce Default Thank You Template I wish to present a coupon code to the shopper for his or her subsequent buy & take away the Cost Technique from the top part. How to Customize the WooCommerce Thank You Web page Below is the thankyou.php template from my theme:
?php
if ( ! outlined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="woocommerce-order">
<?php if ( $order ) : ?>
<?php if ( $order->has_status( 'failed' ) ) : ?>
<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php _e( 'Sadly your order can't be processed because the originating financial institution/service provider has declined your transaction. Please try your buy once more.', '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="button pay"><?php _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 _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', __( 'Thanks for doing enterprise with us. We have now emailed you the acquisition receipt for this transaction.', 'woocommerce' ), $order ); ?></p>
<ul class="woocommerce-order-overview woocommerce-thankyou-order-details order_details">
<li class="woocommerce-order-overview__order order">
<?php _e( 'Transaction ID:', 'woocommerce' ); ?>
<sturdy><?php echo $order->get_order_number(); ?></sturdy>
</li>
<li class="woocommerce-order-overview__date date">
<?php _e( 'Date:', 'woocommerce' ); ?>
sturdy><?php echo date_i18n( get_option( 'date_format' ), $order->get_date_created() ); ?></sturdy>
</li>
li class="woocommerce-order-overview__total complete";
?php _e( 'Whole:', 'woocommerce' ); ?;
sturdy><?php echo $order->get_formatted_order_total(); ?;/sturdy
/li

?php endif; ?

Since that is your first order, we’re glad to increase a 10% low cost in your subsequent buy. Use the coupon code

?php do_action( 'woocommerce_thankyou_' . $order->get_payment_method(), $order->get_id() );
?php do_action( 'woocommerce_thankyou', $order->get_id() );
?php else : ?>
p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Thanks. Your order has been received.', 'woocommerce' ), null ); ?></p>
<?php endif; ?>
</div>

view raw thankyou.php hosted with ❤ by GitHub

When you can’t view the above code snippet, please click here. You may wish to change the info proven within the Order particulars desk & the shopper particulars (when logged-in). These are coming from one other file. WooCommerce makes use of a perform woocommerce_order_details_table() that’s hooked up to the woocommerce_thankyou hook. The perform woocommerce_order_details_table() is outlined in consists of/wc-template-functions.php file. The Thank You web page is definitely a set of Four totally different template files:

  • templates/checkout/thankyou.php
  • templates/order/order-details.php
  • templates/order/order-details-item.php
  • templates/order/order-details-customer.php

Beneath picture exhibits which information comes from which template file: How to Customize the WooCommerce Thank You Web page WooCommerce Thank You Web page Template Construction As soon as you understand what information is coming from which template, you simply want to repeat the suitable template to your theme’s folder & that’s all.

5. Present totally different Thank You web page for a particular product or product attribute

5.a Redirect to a {custom} Thank You web page primarily based on product ID utilizing hook We noticed in level 2 which you could redirect to a {custom} web page with the template_redirect hook. One other approach to redirect to a {custom} thanks web page is by utilizing the ‘woocommerce_thankyou‘ hook. This hook has one argument – order_id. If you wish to redirect to a {custom} web page for under a particular product, you are able to do this by getting the order from the order_id parameter & then loop by every merchandise of the order. If one of many objects has the product id you need, redirect to a custom thanks web page utilizing wp_redirect.
?php
add_action( 'woocommerce_thankyou', 'redirect_product_based', 1 );
perform redirect_product_based ( $order_id ){
$order = wc_get_order( $order_id );
foreach( $order->get_items() as $merchandise ) {
// Add no matter product id you need under right here
if ( $merchandise['product_id'] == 643 )

}
}
>?;

view raw thankyou-product-based.php hosted with ❤ by GitHub

 

6. Print textual content on the Thank You web page primarily based on product attribute

Extending the above 5.c instance, additionally, it is attainable to show any {custom} textual content on the WooCommerce Thank You web page primarily based on the variation id. Beneath is the code for it:

<?php

add_action( 'woocommerce_thankyou', 'show_custom_text_by_variation_id', 1 );
perform show_custom_text_by_variation_id( $order_id ) {
$order = wc_get_order( $order_id );
foreach( $order->get_items() as $merchandise ) {
// Add no matter variation id you need under right here. My attributes are Cheddar, Mozarella & Swiss
if ( isset( $merchandise[ 'variation_id' ] ) && $merchandise[ 'variation_id' ] == 446 )
echo 'Thanks for selecting Cheddar cheese. Get pleasure from your Sandwich!<br/>';

}
}

 

When you can’t view the above code snippet, please click here. When the above code is added, that is how the Thank You web page would seem: Show Custom Text on WooCommerce Thank You Page by variation id

7. Constructing Your Personal Thank You Web page from scratch

I used to be initially considering to jot down on this. However, I spotted that this post by Nicola Mustone covers that subject very well. I hope that this submits lets you construct the suitable structure on your WooCommerce Thank You web page & get essentially the most out of it.

The way to customize the WooCommerce thanks web page

Right this moment we’ll look into totally different strategies to customize the WooCommerce thanks web page. We’ll examine the alternative ways this web page can be utilized for higher consumer interplay. The thanks web page may be custom-made in many various methods. On this article we’ll present you the next strategies:

  • Utilizing plugins to customize the thanks web page
  • Utilizing (custom) code to redirect the thanks web page to a special web page
  • Utilizing (custom) code to switch the thanks web page choices (e.g. title)
  • Overriding the thanks web page template

Absolutely, we would like our prospects to have the best buying expertise attainable. However very often we don’t dedicate sufficient resources to what occurs after the order is positioned. In spite of everything, our post-sales relationship begins on the WooCommerce thanks web page. Thus, the order received web page can be utilized as a place to begin for this new buyer relationship. There we will present steering and instruments to maintain prospects glad. How to Customize the WooCommerce Thank You Web page

Causes to customize the WooCommerce “thanks” web page

The default WooCommerce “thanks” web page is what customers see after the order has been positioned. Relying on the payment method at this level there isn’t any additional consumer interplay. Thus, it is a good time to let the shopper know what comes subsequent. Along with easy transactional messages, it is a chance to attach along with your purchasers.

For instance, past the order particulars, you could possibly present there assist channels or frequent questions on that product. Moreover, it is a good alternative to offer them coupons for future orders. Generally, this web page accommodates all of the consumer and order particulars under the WooCommerce order object. Subsequently, it’s attainable to create a user if it is a visitor checkout. It’s attainable to customize messages relying on the order contents, value, or location. One other concept is to add a custom user field, relying on the consumer profile detected for that order. Now it’s time to see find out how to implement this tradition WooCommerce thanks web page.

Customized WooCommerce “thanks” web page utilizing free and paid plugins

NextMove Lite

How to Customize the WooCommerce Thank You Web page The NextMove Lite permits you to construct {custom} WooCommerce thanks pages. With it, you possibly can add a totally (custom) thanks web page, with your individual components, movies, photographs, or HTML code. As well as, it’s attainable so as to add dynamic coupons or use your most popular web page builder to create your pages.

YITH Custom Thank You Page for WooCommerce

How to Customize the WooCommerce Thank You Web page The YITH’s Customized Thank You Web page for WooCommerce permits you to set (custom) WordPress pages as your order’s received web page. As well as, you possibly can add Customized CSS to your web page and add a fundamental WooCommerce order particulars template. Moreover, YITH has premium features to convey much more customization to your thanks pages. With it, it’s attainable so as to add {custom} pages for various merchandise and classes. There are different fascinating components, reminiscent of upsells, PDF generation, and social field on your thanks pages.

Read Related Post  Best Alternative Websites Like CYRO.SE

Customized “thanks” web page with template redirects

In relation to a {custom} WooCommerce thanks web page, there are various coding choices. Everyone has its use case, relying on your desired outcomes. The simplest customization choice is much like what our plugins do. You possibly can redirect from the default WooCommerce thanks web page to a special web page. This web page is normally one which you could freely edit, with static or dynamic content material. You are able to do it with this snippet:

//Wp hook for templates for every web page

add_action('template_redirect','ui_redirect_wc');

performui_redirect_wc(){

//test if the present web page is the order received and if we now have an order key

if(isset($_GET['key'])&&is_wc_endpoint_url('order-received'))

wp_redirect('redirection url goes right here');

exit;

}

For this instance, we use the template_redirect hook. It’s run by WordPress when it decides which web page to load on your present URL. Then we test if the URL is our thanks web page and if it’s a sound order. Whether it is, we redirect to our thanks web page. In case you wish to change the web page primarily based on order particulars, we have to enter the WooCommerce order object.

The principle concern right here is to keep away from exposing order information to customers who shouldn’t see it. For that reason, we can’t simply believe the order ID, we have to use the WooCommerce order key. Absolutely, it’s attainable so as to add additional safety measures, reminiscent of to require user login. However, the hot button is safe sufficient because it acts as a password. Right here is find out how to redirect to a {custom} thanks web page relying on the merchandise purchased:

//once more, we want the template redirect hook

add_action('template_redirect','ui_redirect_by_product_id');

performui_redirect_by_product_id(){

//if the present web page is the order received and if there's an order key

if(isset($_GET['key'])&&is_wc_endpoint_url('order-received')){

$order_id=wc_get_order_id_by_order_key($_GET['key']);

if(!empty($order_id)){

$order=wc_get_order($order_id);

foreach($order->get_items()as$merchandise){

//test if one of many product's ID match your required ID

if($merchandise['product_id']==1)

}

}

}

}

This might be used to just about any of your order objects reminiscent of:

  • Order value
  • Merchandise Amount
  • Transport technique
  • Cost technique
  • Transport deal with (nation, metropolis, state, zip code…)
  • Consumer email

 

Extra custom “thanks” WooCommerce web page choices

There are easier methods to customize your present thanks web page as well. For example, when you simply wish to change a few of its content material you should use the WooCommerce filters for that. You possibly can change components, such because the web page’s title and textual content utilizing some {custom} code:

//the WP filter for "the_title" perform, which masses the web page title

add_filter('the_title','ui_custom_order_received_title',10,2);

performui_custom_order_received_title($title,$id){

//test if the order received web page perform exists (WC activated)

//then test if it's the present web page

if(function_exists('is_order_received_page')&&is_order_received_page())

return$title;

}

As ordinary, this permits for {custom} titles relying on the buying cart’s content material. For example, customers who purchased a soccer-related product might be greeted with a pleasant message associated with their sport.

Customizing the “thanks” web page template

Lastly, there’s the template substitute choice. You possibly can add a very {custom} template file in your theme and this file will likely be loaded as your thanks web page. For this, you simply want so as to add it in your woocommerce/checkout/thankyou.php. You would use the wp-plugins/woocommerce/templates/checkout/thankyou.php file as a reference since that is the unique thanks web page template. This technique permits a complete {custom} design. Moreover, it may be utilized in mixture with different strategies talked about right here, for {custom} designs relying on the order contents.

Conclusion

Right this moment we appeared into totally different strategies to customize your WooCommerce thanks web page. These strategies flip your easy order received web page right into an advertising and marketing software. It may be used for {custom} coupons, nearer consumer interplay, and even communication. By the top of the day, it is best to be capable to apply a {custom} thanks web page that fits your wants. We hope you loved, and see you once more subsequent time!

What are you able to show on an improved thanks web page?

Let’s have a look at six content material components you should use to rework your common WooCommerce thanks web page, a vital stage of the shopping for course of, and make it work more durable for you. Keep in mind, you shouldn’t additionally overload the shopper with content material at this stage, I’d suggest together with not more than two of those features.

1. Ask a purchaser to share their new buy on social media

How to Customize the WooCommerce Thank You Web page Amazon’s Thank You web page consists of a choice to share on social media and email Individuals are usually excited after simply shopping for a product, there’s a mini adrenaline rush. It’s time to check the waters and see in the event that they’ll share the information with associates on social media. That is primarily free visitors, in contrast to paying for Fb or Twitter adverts – folks will likely be doing the promotion for you straight to your website. I’d be interested in how many individuals do share their purchases at this level however two of the largest eCommerce gamers implement such a function; Amazon and TicketMaster. You possibly can make certain that they’ve completed the analysis on this and that they deem it a conversion booster.

2. Suggest signing as much as an e-newsletter for future particular presents

How to Customize the WooCommerce Thank You Web page Recommend signing up on your e-newsletter proper after ordering Email continues to be an incredible approach to attain consumers, and stays far simpler than by social media. Natural attain on Fb is around 6% in comparison with an open price of email within the 20%-30% range. Plus, an email provides stays inside the subscriber’s inbox so a purchaser can give it some thought and are available again and click on at a later time. A dynamic Fb feed will present a submit as soon as and sure not once more. The WooCommerce thanks web page is a good location to incorporate an e-newsletter enroll kind to entice your new prospects to return and purchase once more.

3. Show a reduction code for a future buy

How to Customize the WooCommerce Thank You Web page Provide a reduction code post-purchase A easy one this, and you could possibly incorporate it into the e-newsletter choice above, by providing them a code in the event that they enroll. An easy show of code might even entice a purchaser to return and purchase one other merchandise straight away they wanted somewhat extra persuading over.

4. Ask consumers to fill out a brief survey (and even only one query)

How to Customize the WooCommerce Thank You Web page Harry asks a fast query to consumers on its thanks web page A survey asking prospects what they consider your website and what enhancements they’d wish to see might be of a nice profit. The issue normally is that you just don’t need this to disturb the same old buy move. The very last thing you’d want could be an obtrusive discover distracting a consumer whereas within the course of shopping for. Including such a choice on the remaining WooCommerce thanks, web page step solves this and can assist you to obtain beneficial information from precise consumers.

5. Show product guides and directions

How to Customize the WooCommerce Thank You Web page Our personal thanks web page features a video with setting up directions If in case you have a specialist website why not present guides reminiscent of movies or directions to consumers straight away. We do this proper right here on CommerceGurus, together with hyperlinks to Shoptimizer’s set up information and a video on setting the theme up from the very starting.

This could work for a number of shops nevertheless when you promote espresso why not embody a video on the best brewing course of and the advisable tools to make use of. Additional marks when you function your self within the video thanking prospects for getting out of your retailer first. Including product guides, be they PDFs or movies is a good way to speak with the buyer’s that you just perceive their wants and are there to help instantly after ordering.

6. Embrace buyer testimonials to reassure consumers

How to Customize the WooCommerce Thank You Web page Testimonials displayed on Slack’s web site Surprisingly, proper after shopping for is usually a time when some prospects are at their most susceptible. What if I made a mistake with this buy and won’t prefer it? Including buyer testimonials from delighted current consumers may be a good way to assuage these doubts and supply reassurance to anybody feeling nervous.

 

How to Customize the WooCommerce Thank You Web page 1