WooCommerce – How to Customize the Cart & Checkout Page

Let’s face it. The default WooCommerce cart and checkout pages are starting to look a bit dated. The good news is, upgrading these pages is pretty easy! You can upgrade and customize the WooCommerce cart and checkout pages using the free plugin – WooCommerce Blocks.

This will give your cart and checkout pages a fresh new look. We think these new designs bring the style up to a more modern look, with a style comparable to other leading eCommerce solutions. We definitely think these designs will give you a boost in sales conversions, especially for higher ticket services and items where style and image are more valuable.

Follow along with the steps in our video tutorial for how to do this exactly. The summary of the method is:

• Install and activate the WooCommerce blocks plugin
• Edit your cart and checkout pages
• Remove the default WooCommerce cart and checkout shortcodes from these pages
• Add the WooCommerce block for the cart page
• Modify any settings you like in the cart block options
• Repeat for the checkout page, i.e. remove the default shortcode and replace with the new WooCommerce block.

After setting this up, we liked the result. However, a few styling tweaks using CSS made it look a bit better (in our opinion anyway).

Here is all the CSS I added to this store – to change the description text size and make it a little large. Plus we changed to button on the cart page to match the rest of our theme. You’ll need to change to buttom background color HTML to match your own preference.

.wc-block-components-product-metadata {
    font-size: 1em; }

.wc-block-components-checkout-step__description {
    font-size: 1em; }

.wc-block-components-button__text {
 font-weight: normal }

.wc-block-components-button {
 background-color: #075aae !important }

You can change the hover color of the button with this CSS too:

.wc-block-components-button:not(.is-link):hover {
 background-color: #00b9eb;
} 

Bear in mind that the WooCommerce blocks plugin is not offically part of WooCommerce. While it is built by the same devs, they use this plugin as a way to roll out potential new features and have them tested widely before potentially including them into the main WooCommerce plugin. So, you may run into bugs and incompatibilities, depending on your exact WordPress setup. This is just the nature of using open source software – and you can contribute by reporting any issues to the support forum here.

With this in mind, definetly test this method out on a development site or staging area before trying to use it on a live website. This is best practice for any kind of website devlopment – but it is worth repeating. Good luck with your project!