Change Position of WooCommerce Notification on Checkout Page
As an ecommerce store owner, the checkout page is one of the most critical areas of your website. It's where customers complete their purchases, and ensuring a smooth and seamless experience is essential for driving conversions and customer satisfaction.
One common issue that can arise on the WooCommerce checkout page is the placement of notification messages, such as error messages or success messages. By default, these notifications are displayed at the top of the page, which can be disruptive to the user's flow and potentially lead to confusion or frustration.
In this blog post, we'll explore a workaround that allows you to move the position of these WooCommerce notifications to a more desirable location on the checkout page.
Understanding the Problem
The WooCommerce checkout page uses an AJAX-based process to update the order review section. This process is triggered by the updated_checkout
event, which is responsible for displaying any relevant notification messages.
The default behavior is to print these notifications using the wc_print_notices()
function, which places them at the top of the page. This can be problematic if you want to position the notifications elsewhere, such as below the order review section.
The Workaround
Fortunately, we can leverage the updated_checkout
event to capture the notification messages and move them to a different location on the page. Here's how you can do it:
- Create a new JavaScript file called
es-checkout.js
in a subdirectory named js
within your theme or plugin directory.
- Add the following code to the
es-checkout.js
file:
(function($){
'use strict';
$(function(){
var $orderReview = $("#order_review_heading");
$( document.body ).on( 'updated_checkout', function( event, data ) {
console.log( 'checkout was updated' );
console.log(data);
$( '.woocommerce-error, .woocommerce-message' ).remove();
$orderReview.append(data.messages);
$('html, body').animate({
scrollTop: $orderReview.offset().top
}, 500);
});
})
})( jQuery );
This code does the following:
-
Listens for the updated_checkout
event, which is triggered by the WooCommerce AJAX request.
-
Removes any existing notification messages (.woocommerce-error
and .woocommerce-message
) from the page.
-
Appends the new notification messages to the #order_review_heading
element, effectively moving them below the order review section.
-
Scrolls the page to the top of the order review section, providing a smooth transition for the user.
-
Next, you need to enqueue the es-checkout.js
script on the checkout page. Add the following code to your theme's functions.php
file or your plugin's main file:
function es_checkout_scripts() {
if( is_checkout() )
wp_enqueue_script( 'es-checkout', get_stylesheet_directory_uri() . '/js/es-checkout.js', array('jquery', 'wc-checkout'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'es_checkout_scripts' );
This code checks if the current page is the checkout page and then enqueues the es-checkout.js
script, ensuring it's only loaded on the checkout page. The script has dependencies on the jquery
and wc-checkout
scripts, which are provided by WooCommerce.
Verifying the Workaround
To test the workaround, follow these steps:
- Save the
es-checkout.js
file in the js
subdirectory of your theme or plugin.
- Update the
functions.php
file (or your plugin's main file) with the es_checkout_scripts()
function.
- Clear your website's cache and revisit the checkout page.
- Intentionally trigger a notification message (e.g., by entering an invalid payment method) and observe the behavior.
You should see the notification messages now displayed below the order review section, and the page should smoothly scroll to the top of the order review section.
Conclusion
By leveraging the updated_checkout
event and some jQuery, you can easily move the position of WooCommerce notification messages on the checkout page. This can help improve the overall user experience and make the checkout process more intuitive for your customers.
If you're interested in further optimizing your WooCommerce checkout experience, consider exploring Flowpoint.ai, a web analytics solution that uses AI to identify and address technical, UX/UI, and content-related issues that may be impacting your conversion rates
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.