We all know how WooCommerce is super powerful and how out the box you get a standard checkout page. Whilst this page is usually okay, and many lack the skills to optimise it further, there are some UX gaps and you can definitely make it a bit better for your users.

screenshot of woocommerce payment section on a mobile device

One of my eCommerce websites, although it converts quite nicely, I noticed the payment section was a bit “lost” on the page when on a mobile device. All areas are separated and each has its own heading, which helps users navigate through the checkout smoothly, but payment was just there with no heading, nothing, no instructions or any additional copy. So I’ve made one small change, I added a heading to the payment section called “Payment Options”.

Although this may look like a small change, it just breaks the flow a little bit better, specially on mobile devices.

If you want to add this to your checkout page, be sure to first backup your website and only then add the code below to your functions.php file.

Was this post helpful?