How to Customize WooCommerce Cart Page (with Video)

Customize WooCommerce Cart Page

WooCommerce automatically creates a Cart page when you install the plugin. The appearance of this Cart page is mostly dependent on your theme as WooCommerce does not offer much customization options for it. If you are well-versed in coding, you can try out some code snippets to change the appearance of the Cart page. In this article, we will look at some of the possibilities to customize WooCommerce Cart page.

How different themes display the Cart page?

According to the theme you choose, the default layout and the appearance of your Cart page will differ. The below screenshot displays how a default WooCommerce Cart page looks like with Storefront.

Customize WooCommerce Cart Page
Storefront offers a simple Cart layout that has some room for improvement.

If you’re using the Twenty Twenty theme, the default appearance of the Cart page changes slightly.

Customize WooCommerce Cart Page
This is the default Cart page of Twenty Twenty theme.

And with Twenty Twenty One, it looks quite different.

Customize WooCommerce Cart Page
Twenty Twenty One displays big images for Cart items by default.

Now let’s see a few ways to customize the Cart page using different free plugins.

Changing the layout of the Cart page

You can use the WooCommerce Blocks plugin to try out a new Cart layout. First, go to the Cart page, and remove the default Cart block. Then add the Cart block from the WooCommerce Blocks plugin. The new Cart block is much more user-friendly than the default Cart layout of WooCommerce. The design is minimalistic and conversion focused with only one prominent button for checkout.

Customize WooCommerce Cart Page
The Cart page layout of WooCommerce Blocks is more conversion focused.

You can customize the page title as well as move the Cart block up and down, or drag and drop to adjust its position when there are other blocks on the page. It is advisable to keep the Cart page clutter free for a smooth user experience.

Also, you can switch the preview between Full Cart as well as Empty Cart, and make more modifications.

Customize WooCommerce Cart Page
WooCommerce Blocks lets you customize both full and empty cart templates.

Let’s first see the options for full cart mode. Select the Cart block and access the block settings sidebar. Here you can enable or disable the shipping rate calculator, show the tax rate after the name of the tax, and also change the style to suit dark background colors.

Customize WooCommerce Cart Page
You can toggle the display of shipping calculator, tax percentage and dark mode inputs.

Empty Cart page

For the Empty Cart page, there are multiple blocks including an image block, a link to the store as well as a product grid with the newest products.

With the block editor, you can easily change this page. For example, if you prefer a minimalist approach, you can simply display a text similar to the default WooCommerce Cart page along with a button to redirect customers to the Shop page.

You can do it by simply removing the existing blocks and by adding a new text block as well as a button block. Simply customize the text and the button, and you are done.

Customize WooCommerce Cart Page
According to experts, a clean design suits the empty Cart page appearance, and it is more conducive to conversions.

Plugins to customize WooCommerce Cart page appearance

You can also try out some of the page builder add-on plugins, to customize the cart page templates according to different requirements.

For example, Elementor add-on JetWooBuilder helps you with custom templates and layout switchers to easily mix and match elements.

Customize WooCommerce Cart Page
JetWooBuilder has advanced tools and elements to let you customize different WooCommerce pages.

With the Divi Shop Builder plugin, you can easily extend the features of Divi to customize Shop, Cart and Checkout pages.

Customize WooCommerce Cart Page
With Divi Shop Builder plugin, you will have a lot of control over different design elements, while building your site using Divi page builder.

If you are using WPBakery, WC Builder will help you build different WooCommerce pages including the Cart page without using any code.

Customize WooCommerce Cart Page
WCBuilder helps you with a lot of additional customization options while using WPBakery.

Adding Custom Footer and Header

To provide a clean appearance to your Cart page, you may want to offer a custom header and footer to the cart page different from your other pages. For this, you can use the free Elementor page builder along with the Header, Footer & Blocks plugin. Let’s do a quick demonstration.

Customize WooCommerce Cart Page

First, we will create a Cart header template. Go to Appearance > Header, Footer & Blocks, and click the Add New button. Create a Cart Header template and assign it only to your Cart page, and publish it.

This template will help you add a custom header style to your Cart page that is different from other pages.

After publishing the Cart Header template, you can edit it using Elementor to give it a different appearance from your other page headers.

Similarly, you can create a Cart Footer template and assign custom style for it too.

Further styling options

You will find a lot more styling options for the page, if you are using a page builder plugin like Elementor. Also, with the WooCommerce customizer, you can add additional CSS to add further styling.

More plugins to customize Cart features

You will find several free plugins in the WordPress repository to help you customize Cart features. The WooCommerce Menu Cart plugin helps you display a Cart button on the navigation bar, which you can customize according to your store requirements.

Customize WooCommerce Cart Page
You can display a more user-friendly Cart button with this plugin on the navigation menu.

WooCommerce Side Cart plugin offers an option to display Cart differently. Your users may find it extremely helpful to have an accessible side cart while shopping.

Customize WooCommerce Cart Page
A side cart on your store could add to the user experience on your store.

The WooCommerce AJAX Cart plugin allows your customers to change Cart quantity without clicking the Update Cart button every time.

Customize WooCommerce Cart Page
Users can change and update cart quantity without clicking the Update button using this plugin.

With the XT WooCommerce Floating Cart plugin, you can offer an undisturbed floating Cart to help your customers with a smoother shopping experience.

Customize WooCommerce Cart Page
You can display a floating Cart to better convenience for your customers.

Check out the video version of this article below:

Further reading

LEAVE A REPLY

Please enter your comment!
Please enter your name here