Customize Thank You Page in WooCommerce

Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training

Send up to 1,000,000 emails/year. Mautic Support in Spanish 24 hours, 365 days

One of the points that a certain user goes through when processing a purchase is the thank you page, which shows us a small statement and the details of our order. Said page is usually omitted without considering the value it may have for conversions within our online store.

Next, we are going to see through different situations how we can customize the texts of our thank you page in WooCommerce or ultimately use a page with a structure created directly by us.

Customize texts on the thank you page in WooCommerce

When placing an order from WooCommerce, the conventional appearance of the thank you page is as follows:

Next, we are going to do the following:

  • Change WooCommerce Thank You Page Title
  • Add a custom statement with a link
  • Change the text corresponding to “Thank you, Your order has been received” of WooCommerce

These adjustments will be possible through some code snippets which we will add as follows.

By editing the functions.php file that is located in our hosting account within our cPanel/WePanel in the path File Manager -> public_html -> wp-content -> Themes -> Your_Theme (it is recommended that it be in a to avoid losing settings after an update in the main theme).

In

on WePanel

Through a plugin that allows us in isolation specific codes called Code Snippets:

Each code corresponds to a specific function, whose content we will adapt to our needs

Change Thank You Page Title in WooCommerce

To change the title of the thank you page in WooCommerce we are going to use the following code snippet:

See also  Loyalty Points

add_filter( ‘the_title’, ‘we_thank you_title’, 10, 2 ); function we_thank_title( $title, $id = null ) { if ( function_exists( ‘is_order_received_page’ ) && is_order_received_page() && get_the_ID() === $id ) { $title = “Your order has been received”; } return $title; }

Which we can modify the texts that are included in the quotes in the “title” section.

Add a custom statement with a link

To add a custom statement with a link we are going to use the following code snippet:

add_action(‘woocommerce_before_thankyou’, ‘we_thankyou_new_title’,10,1); function we_thank you_new_title(){ echo “

For more information about your order Contact Us

“; }

Which we can modify the HTML code that is inside the quotes of the “echo”.

Change the corresponding text to “Thank you, your order has been received”

To change the text that corresponds to “Thank you, your order has been received” in WooCommerce we are going to use the following code snippet:

add_filter( ‘woocommerce_thankyou_order_received_text’, ‘we_thankyou_text’, 10, 2 ); function we_thanks_text( $text, $order ){ return ‘Hello ‘. $order->get_billing_first_name() . ‘, the details of your order are as follows:’; }

Which we can modify the texts that are included in the single quotes in the “return” section, we are also invoking the name of the user in the text from the code “$order->get_billing_first_name()” this can be omitted.

Final results

After having added the respective code fragments we will have a result like the following:

Let’s remember that each of the fragments can be used independently for each case that they want to modify or add text.

Custom thank you page

Although we have already been able to see how to modify and add texts to the conventional thank you page that WooCommerce presents, we can also make a redirection through a code snippet so that instead of seeing the thank you page that we regularly see, the user is redirected. to a custom page.

See also  PROBLEM when updating header IMAGE WORDPRESS template...

We must bear in mind that this page must already be created and its content will be whatever you like

Let’s add the following code snippet to implement our custom thank you page.

add_action( ‘template_redirect’, ‘we_new_thank you’ ); function we_new_thanks() { global $wp; if ( is_checkout() && ! empty( $wp->query_vars ) ) { wp_redirect( ‘https://webcompany.com’ ); exit; } }

In this code we are going to change the value of the URL inside the “wp_redirect” element for the link that corresponds to our custom thank you page in WooCommerce that must be previously created.

Custom thank you page with plugin

If in your case you do not want to be involved with adding codes there is always an alternative through plugins and this case is no exception,

From the plugins section we are going to search and install “Thanks Redirect for WooCommerce”.

Once installed we will have the plugin option available from WooCommerce-> Thankls Redirect or also from Woocommerce-> Products-> Thanks Redirect.

From this section we have available the following options

  • Global Redirect Settings: If this option is enabled, all orders placed will be redirected to the URLs specified in the next fields
  • Thanks Redirect URL: Define link for thanks page
  • Order Failure Redirect URL: Define link for the page when an order fails

The most interesting thing about this plugin is that in addition to giving us the ability to make an extra redirection which deals with if an error occurs in the order and it is marked as failed, it is not necessary that we configure the global options if we want to configure different ones instead. Thank you pages for product, Yes, this is possible, let’s take a look at it.

See also  Prestashop hosting for 20,000 products

From the product edition view we will be able to appreciate that we have two extra fields where one corresponds to the redirection to the thank you page and another to the redirection to the error page if the order was failed.

conclusions

We have been able to see how we can either modify in a timely manner the content of the default thank you page in WooCommerce or instead use a personalized page, also with the use of practical plugins such as the one used in the example we can further expand customization of the flow that a user will have according to the product they are going to buy.

If you want to know more about how to create your store with WooCommerce and implement custom settings like the one we have seen in this article, I recommend you take a look at the following links that will surely be of interest to you.

Help us improve our content by sharing your opinion

WordPress and Woocommerce support team at .

Loading Facebook Comments ...
Loading Disqus Comments ...