Atomic Smash homepage splash

Customising the WooCommerce Checkout process

Words by George HieronMay 4, 2018

Customised WooCommerce cart graphic

In this post I’m going to share some tips for customising the appearance of the WooCommerce checkout process (cart, checkout and order confirmation pages), highlighting some of the key things to watch out for.

WooCommerce is a very powerful e-commerce plugin for WordPress that contains a plethora of features, covering just about any situation you could envision for your online store. However, if you want to add custom styling to WooCommerce to bring it into line with the rest of your site’s style, this same flexibility presents you with a lot of things to account for when writing your CSS or SCSS.

Here is a screenshot that shows, more or less, how the WooCommerce cart looks out of the box. It’s by no means abysmal, but it could be much better.

Image showing how the default WooCommerce cart appears.

WooCommerce classes and avoiding becoming too specific

One of the first things to look out for here is the classes that WooCommerce injects onto its elements – for example, the main product overview table contains four classes; .shop_table, .shop_table_responsive, .cart, and .woocommerce-cart-form__contents.

The former two classes are more general, whereas the latter two are more specific to the cart page. In order to avoid writing styles with too much specificity and avoid potential repetition down the line, it’s best to start by styling the tables as generally as possible. I like to start by styling the table tag in general, within .woocommerce, as this class is on the body of all WooCommerce pages. From there, I would target .shop_table. On the cart page, both the cart contents table and the cart totals table will be affected by any styles applied within these rules, as both have the .shop_table and .shop_table_responsive classes applied. If any specific styles are then desired for the cart contents table, I would apply them using the .woocommerce-cart-form__contents class, as this is very specific to this element.

Avoid Nesting your SCSS

This is, of course, best practice for styling elements in general, especially when using SCSS, as the temptation can be to nest everything heavily. Heavily nested SCSS can become problematic if you later want to apply those styles elsewhere. Furthermore, Woocommerce has a tendency to reuse classes, so being careful about this from the start can really save you headaches.

Also remember that you are overriding the default styles of WooCommerce. If you need to add specificity, I recommend combining the element tag with its class, e.g. form.woocommerce-cart-form. This avoids falling into the trap of nesting.

Test for every eventuality

In the example above you can see I have added three products to the cart, including one with a very long name, and another with a very descriptive price – it’s a good idea to test products like this, ones with varying price structures and variable options, as options like this will affect the cart. You can see that the table is prioritising the length of the product name, leaving the price columns too narrow to comfortably read the price of the ‘Magazine subscription’ product. This is simply solved with a min-width on the class that the th and td of those columns share; however it’s another one of those small things that can make a big difference to improving the  appearance of your cart.

Image showing a fully-styled WooCommerce cart page.

With some careful styling, I have managed to bring this site's cart page into keeping with the rest of the site's look & feel.

Play with the WooCommerce settings

It’s also worth accounting for things that are optional within the WooCommerce settings, such as the Coupon code entry. It may not be necessary, but if you or your client decides that they want to introduce it further down the line, it’s good to have already covered as many bases as possible. Avoid that technical debt!

Change your mind

Additionally, you should account for the various message and information notifications that WooCommerce has. These can be triggered by various actions, such as updating the quantity of, or removing, products from the cart. These messages can have various classes attached to them, such as .woocommerce-info.woocommerce-message, and .woocommerce-error, among others. It’s important to try and ensure that they’re all styled appropriately so that the less frequently occurring ones are still in keeping with your custom style.

Image showing a styled WooCommerce notification.
Image showing a styled WooCommerce error message.

Remember to style the various kinds of notifications that WooCommerce provides!

Checkout and Order Confirmation

Whilst the cart is the meatiest part of the whole checkout page to style, it’s also worth paying attention to the Checkout and Order Confirmation pages. When styling the Checkout page in particular, you should make sure that the coupon and returning customer login sections are styled to your liking, as well as the forms. Also be sure to cast your eye over the table stylings of the order overview and payment method sections. The payment method section contains speech bubble-style information areas that use a :before pseudo element to form the point of the bubble, which is also something else to look out for when styling this area.

Image highlighting the :before element of the payment method notification.

When styling the payment options section, watch out for the :before element on the notification - it is coloured with the border-color property.

Bear in mind that you may have to test the checkout page several times depending on what items your store will be selling. For example, subscription-based products can be set to force user account creation, or restrict the available payment methods. Things like this can subtly affect the way the checkout looks, and testing for these possibilities may well unearth extra things that you will need to account for in your styling.

The last step – Order Confirmation

Finally, the Order confirmation page – once you have accounted for table styling, this should look fine, unless you wish to add more custom styling to make it less plain. One thing I did find useful here, however, is to remove the float property from the items of the Order Details list at mobile sizes, and set them to display: block, whilst removing any borders and adding a little margin, just to ensure a cleaner look with one item per line.

Image showing the default appearance of the order details at mobile.

The default floated layout for the order detail items looks fine at desktop, but becomes messy on mobile devices.

Image showing the improved appearance of the order details at mobile.

With a few minor styling tweaks, it can be much nicer!

WooCommerce is very expansive and there is plenty to do if you want to thoroughly apply custom styling to it – hopefully, you will find some of these tips useful when styling your next WooCommerce cart & checkout! For more on WooCommerce customisation, you can read Adam’s article on Customising the WooCommerce ‘My Account’ section.

Go back to top

Keep up to date with Atomic news