Last updated - May 5, 2023
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.
If you’re using the Twenty Twenty theme, the default appearance of the Cart page changes slightly.
And with Twenty Twenty One, it looks quite different.
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.
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.
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.
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.
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.
With the Divi Shop Builder plugin, you can easily extend the features of Divi to customize Shop, Cart and Checkout pages.
If you are using WPBakery, WC Builder will help you build different WooCommerce pages including the Cart page without using any code.
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.
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.
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.
The WooCommerce AJAX Cart plugin allows your customers to change Cart quantity without clicking the Update Cart button every time.
With the XT WooCommerce Floating Cart plugin, you can offer an undisturbed floating Cart to help your customers with a smoother shopping experience.
Check out the video version of this article below:
