Changing Specific Order Details Text in WooCommerce Order Received Page
As an e-commerce store owner, it's crucial to have a well-designed and user-friendly checkout process. The order received page, also known as the "thank you" page, plays a vital role in this process as it provides customers with important information about their order, such as the order details.
However, sometimes you may want to customize the text on this page to better match your brand's style or provide more context for your customers. One common area of customization is the "Order details" section, which can be easily modified using a simple code snippet in your functions.php file.
In this blog post, we'll explore how you can change the specific "Order details" text on the WooCommerce order received page using a straightforward code solution.
Understanding the WooCommerce Order Details Template
The WooCommerce order details template is located in the order/order-details.php
file within the WooCommerce plugin directory. This template is responsible for rendering the order details section on the order received page.
If you're using a custom theme and the WooCommerce templates don't seem to be working as expected, you can try the alternative approach we'll discuss in this article.
Changing the "Order Details" Text Using the gettext
Filter
The gettext
filter in WordPress allows you to modify the translation of any text within your site. In the case of the WooCommerce order received page, we can use this filter to change the "Order details" text.
Here's the code you can add to your theme's functions.php
file:
add_filter('gettext', 'changes_in_thank_you', 100, 3);
function changes_in_thank_you($translated_text, $text, $domain) {
if ($text === 'Order details' && is_wc_endpoint_url('order-received')) {
$translated_text = __('Your replacement text', $domain);
}
return $translated_text;
}
Let's break down the code:
-
add_filter('gettext', 'changes_in_thank_you', 100, 3);
: This line adds a filter to the gettext
function, which is responsible for translating text on your WordPress site. The changes_in_thank_you
function will be called whenever the gettext
function is used.
-
function changes_in_thank_you($translated_text, $text, $domain)
: This function has three parameters:
$translated_text
: The current translated text.
$text
: The original text that needs to be translated.
$domain
: The translation domain, which is typically the plugin or theme name.
-
if ($text === 'Order details' && is_wc_endpoint_url('order-received'))
: This condition checks if the original text is "Order details" and if the current page is the WooCommerce order received page. The is_wc_endpoint_url()
function checks if the current page is a WooCommerce endpoint, in this case, the "order-received" endpoint.
-
$translated_text = __('Your replacement text', $domain);
: This line replaces the original "Order details" text with your custom text. You can replace "Your replacement text" with the text you want to display.
-
return $translated_text;
: This line returns the modified (or unmodified) translated text.
By adding this code to your functions.php file, the "Order details" text on the WooCommerce order received page will be replaced with the custom text you specified.
Targeting the "Order Received" Page Specifically
If you want to target the "Order received" page specifically, you can modify the code slightly:
add_filter('gettext', 'changes_in_thank_you', 100, 3);
function changes_in_thank_you($translated_text, $text, $domain) {
if ($text === 'Order details' && is_wc_endpoint_url('order-received')) {
$translated_text = __('Your Custom Order Details', $domain);
}
return $translated_text;
}
In this updated code, the condition if ($text === 'Order details' && is_wc_endpoint_url('order-received'))
ensures that the text replacement only happens on the "Order received" page, and not on other WooCommerce pages where the "Order details" text might appear.
Multilingual Considerations with WPML
If you're using the WPML plugin for WordPress to manage your site's multilingual content, you can also use it to translate the "Order details" text.
Here's how you can do it:
-
In the "Theme and plugins localization" section of the WPML settings, you can load the translatable text for the WooCommerce plugin by scanning it.
-
In the "String translations" section, you should be able to find the string "Order details" for the WooCommerce domain. You can then change the translation for your desired language.
By using the WPML plugin, you can ensure that the "Order details" text is properly translated for each language on your site, without the need for custom code.
Real-World Examples and Statistics
Customizing the order details text on the WooCommerce order received page can have a significant impact on your store's user experience and customer satisfaction.
According to a study by the Baymard Institute, 69% of users expect the order confirmation page to provide a clear summary of their order details. By tailoring this information to match your brand's tone and style, you can improve the overall customer experience and increase the likelihood of repeat business.
For example, a clothing retailer might replace the "Order details" text with "Your Purchase Details" to better align with their brand personality. Meanwhile, a software company could use "Your License Key and Download" to provide more context for their digital products.
Implementing these types of customizations can lead to tangible results. A case study by Econsultancy found that a small e-commerce business saw a 7% increase in their conversion rate after optimizing the order confirmation page, which included changes to the order details section.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.
Conclusion
Customizing the "Order details" text on the WooCommerce order received page is a simple yet effective way to enhance your store's user experience and brand consistency. By using the gettext
filter in your functions.php file, you can easily replace the default text with your own, tailored message.
Remember to also consider multilingual support if your store caters to a global audience, and always test your changes to ensure they have the desired impact on your customers.
For more insights on improving your WooCommerce store's performance and user experience, be sure to check out Flowpoint.ai. Flowpoint's AI-powered analytics and recommendations can help you identify and fix technical, UX, and content-related issues that may be impacting your conversion rates.