How to Customize a WooCommerce Cart Page Without Breaking the Checkout 

The first time I opened the cart page on a WooCommerce store I managed, I assumed something had broken. Every other page carried the client’s branding. The cart was a bare table with a grey button.

Nothing had broken. The default WooCommerce cart really is a plain table with no cross-sells and no trust signals, and on a phone the checkout button sits below the fold.

I have spent 15 years customizing WordPress themes and page layouts, and the cart is the page owners skip. How you customize your WooCommerce cart page depends on your theme, so start there.

Check Which Cart Page Route Your Theme Uses

There are three ways to edit a WooCommerce cart page, and your theme decides which two are open to you, so check that before you touch anything.

Open Appearance in your WordPress dashboard. If you see Editor, you are on a block theme. If you see Customize instead, you are on a classic theme.

That one menu item is the first thing I check on any site I take over, because half the instructions on this topic assume the wrong answer.

Block Theme: Edit the Cart Template in the Site Editor

Go to Appearance » Editor, then Templates » WooCommerce. Open Page: Cart. That puts you in the cart page template itself, not a single page.

The WooCommerce Cart Item block is the piece doing the work in that template. It is a wrapper holding the cart’s products, the order totals, the coupon field, the shipping options and the checkout button.

Open the List View and you can select any one of those parts and edit it on its own. When the cart is empty, the block switches to its Empty Cart view with a message and product suggestions.

You can change the template’s layout, its colours and any blocks you add around the cart. What you cannot easily change is how the cart’s own fields and buttons look. Those follow your theme’s settings, not a panel of their own.

Classic Theme: Edit the Page With the Cart Shortcode

On a classic theme, go to Pages » All Pages and open the page assigned as your cart. Inside it you will find a single line of content, the [woocommerce_cart] shortcode.

That shortcode is the whole cart. WooCommerce swaps it for the cart table when the page loads, and your theme decides how that table looks.

You can add content above and below it freely. Inside it you can change almost nothing. Leave the shortcode where it is unless you are replacing it with a builder’s cart block, which is the third route.

Any Theme: Build the Cart Page in a Visual Builder

The third route works on both theme types, because the builder takes the page over completely. You design a cart page template, put the builder’s own cart block on it, and point WooCommerce at it.

Every builder I have worked in over the years, Beaver Builder, Elementor and Divi included, hands you real control over the layout and takes the say away from your theme.

This is the route the rest of this guide walks through, using SeedProd.

Three Cart Page Routes, Compared

All three routes are things a non-technical store owner can do without opening a template file. What separates them is how much of the cart itself you are allowed to restyle.

Route	Works on	What you can change	What it will not do	Cost
Site Editor	Block themes only	Template layout, colours, and any blocks you add around the cart	Restyle the cart’s own fields and buttons beyond your theme’s settings	Free with WooCommerce
Classic	Classic themes only	Anything above and below the [woocommerce_cart] shortcode	Change the cart table itself, which your theme controls	Free with WooCommerce
SeedProd	Any theme, block or classic	Cart colours, fonts, buttons, fields, borders, plus any other block on the page	Run on the free, Basic, Plus or Pro plans, because the Cart block is Elite only	SeedProd Elite, $599 a year

I recommend the builder route, because it is the only one that lets you restyle the cart’s buttons, fields and totals rather than inherit them. On a store where the cart is the least branded page you own, that is the whole job.

If your theme already renders the cart table well, the Site Editor does the rest for free. Adding a trust badge and a product grid around the cart does not need a paid plugin.

SeedProd can also build a full WooCommerce theme on the Elite plan, covering the shop page, product archives, single product pages, cart and checkout, so take that route if the cart is not the only page you want to change.

Paying for a plugin to change one page is a fair objection. It is why the free Site Editor route sits first in the table. If the cart is the only page you will ever touch, the maths does not favour Elite.

A custom template does not break checkout, because checkout is a separate WooCommerce page with its own template. The handoff between them is the one thing that can break, and Step 4 covers how to prove it did not.

When You Are Better Off Without a Cart Page

Your store may not need a cart page at all, and there are three common ways to reduce or remove it.

• A side cart: a panel that slides out over the product page when someone adds an item, so they never leave the page they were browsing.
• Skipping the cart: the Add to Cart button sends the shopper straight to checkout, cutting one step out of the path.
• Merging cart and checkout: one page holds the basket review and the payment form, so the shopper sees the total and the fields together.

None of these is core WooCommerce behaviour. A side cart usually comes from your theme or a dedicated plugin, and skipping the cart needs one too.

The call comes down to basket size, so if shoppers buy one item at a time, the cart page is a speed bump and cutting it is the right move.

Keep the cart page if baskets usually hold several products, or if you run a free-shipping threshold. Both need a screen where the shopper can see the running total and decide to add more.

A Custom Cart Page Recovers Sales the Default Layout Loses

A custom cart page recovers sales because the default one loses them on details you can check yourself. Open your cart page in one tab and your homepage in another, then compare the two.

The default cart carries no logo, no trust signal and nothing to suggest a second product. On a phone, the checkout button usually sits below the fold.

The cart is the page I have always found untouched when I take over a store, because owners style the homepage and the product pages and then run out of steam.

About 70% of online shopping carts get abandoned, according to the Baymard Institute, which averages 70.22% across 50 separate studies. Shopping cart abandonment has plenty of causes, and the cart page is the part you control.

Each of the fixes below closes one of those gaps, so here are a few ways to optimize your WooCommerce cart for conversions:

• Offer free shipping or show how close customers are to qualifying for it
• Apply automatic discounts or show coupon code fields clearly
• Make cart totals easy to read and understand
• Add trust signals like testimonials, reviews, or security badges
• Update the total instantly when someone changes a quantity, with no page reload and no separate update button

How to Customize the WooCommerce Cart Page

The route that works on any theme is to build the cart page in a visual builder, then point WooCommerce at it. Plenty of people reach for a shopping cart plugin instead, which is a reasonable call if all you want is to restyle the existing table.

SeedProd is a drag-and-drop WordPress website builder with WooCommerce blocks built in, including the Cart block this build uses, so you edit visually and watch the cart page change as you work.

Over 15 years I have worked in most of the visual website builders on the market. This is the one I use on our own sites. Here is that route, step by step.

Step 1. Install and Activate SeedProd

The first step is to download a copy of the SeedProd WordPress landing page plugin.

Then install and activate the plugin on your WordPress website. For help with this step, see this detailed guide on installing a WordPress plugin.

I am using the Elite plan here, because that is where the WooCommerce blocks live. Nothing in the steps below changes on a different plan. You just will not find the Cart block.

After activating SeedProd on your WordPress site, go to SeedProd » Settings and enter your product license key.

Step 2. Create a New WooCommerce Cart Page Template

After activating your license key, go to SeedProd » Pages and click the ‘Add New Landing Page’ button to create your cart page.

From there, you can choose a cart page template to use as the framework for your design.

SeedProd ships 300+ mobile-friendly templates on the Pro and Elite plans, covering most industries. When you find one you like, hover your cursor over it and click the ‘Checkmark’ icon to launch it.

For a cart page I start from the Blank Template every time, because a cart page needs two columns and very little else. A marketing template just gives you sections to delete.

After choosing your template, a pop-up opens. Add a name and URL for your page. Then click the ‘Save and Start Editing the Page’ button to open the template in SeedProd’s visual editor.

Step 3. Customize the Cart Page Layout and Design

Design the phone view first, then the desktop one, because a cart layout that works on a phone almost always works on a wide screen too. Use the editor’s device toggle to switch between the two.

Check your own analytics for the desktop and mobile split rather than assuming it, then design for whichever one is winning.

The layout that does the most work on a cart page is a content sidebar. The cart goes in the wide column, testimonials and star ratings in the narrow one. Social proof then stays on screen while the shopper reads the total.

SeedProd’s drag-and-drop website builder has a distinct 2 column layout that makes it easy to use:

1. On the left are blocks and sections for customizing your design
2. On the right is a live preview of your page

Adding content to your cart page is as simple as dragging a block from the left to your preview on the right.

Adding a Logo

The logo is the cheapest trust signal on a cart page and the fastest to add, because a shopper who lands on an unbranded cart pauses to check they are still on your site.

First you need a section to hold your page elements. Choose a section layout, such as the standard section.

Next, choose the ‘Image’ block and drag it onto your new section on the right.

Clicking the image block opens the content settings panel. Upload a logo from your computer or WordPress media library. From there, you can add a link back to your homepage, resize your logo, and change the alignment.

Adding a WooCommerce Cart

Now add your WooCommerce shopping cart to the design. Add a new section and choose the content sidebar layout.

The wide column holds the cart. The narrow one is where the social proof goes.

To add your WooCommerce cart to the page, scroll down to the WooCommerce blocks section and drag the ‘Cart’ block onto your new section.

Click the cart settings icon and the Styles tab splits into five groups, each controlling a different part of the cart:

• Headers: the text colour, background and font of the cart’s header row
• Buttons: the button style (Flat, 2D, Vintage, Ghost or Link), colour and corner radius
• Fields: the background, text and border colours of the coupon code and quantity inputs
• Alerts: the highlight colours for info, error and success messages
• Cart: the container’s border, background, text colour and fonts

I changed the button colours to match the store’s branding and logo.

The checkout button is the only button on this page you want anyone to press. Make it the most obvious thing on screen.

Adding Reviews and Testimonials

That second column is where I put customer testimonials and star ratings, because social proof can push a shopper who is on the verge of checking out into finishing.

To add testimonials to your WooCommerce cart page, find the Testimonials block under the ‘Advanced’ blocks heading. Drag it over to your narrow column on the right.

Like every SeedProd block, clicking it shows settings for customizing the content. You can add a custom headshot and customer name, and change the alignment. Several reviews can run in a testimonial carousel.

To make your reviews even more convincing, drag over the Star Rating block and place it under your testimonial carousel.

Keep the ratings level with the cart totals rather than below them, because the shopper then reads the price and the reassurance in one glance.

Adding Scarcity and Urgency

Urgency works on a cart page because the shopper has already decided they want the thing.

The easiest way to add scarcity to your WooCommerce cart page is with a scarcity timer or countdown clock. SeedProd has that option built in, and it is also one of the fastest routes to a WooCommerce checkout click.

Select the ‘Countdown Timer‘ block from the ‘Advanced’ blocks section. Drag it to the top of your cart. Then select the ‘Visitor Timer’ option so that the timer refreshes for each visitor.

Then in the Advanced settings tab, you can customize the colors to match the rest of your cart.

Now add a heading telling people how long the offer runs. Drag over the ‘Headline’ block and enter your text.

Cross-Selling WooCommerce Products

The cart is the best place on your store to suggest a second product, because the shopper has already committed to buying something and the ask is a small one.

SeedProd has several product grids that display products on any page.

Head to the ‘WooCommerce’ blocks section and choose from:

• Recent products
• Sale products
• Best selling products
• Featured products
• Top-rated products

For example, drag over the ‘Sale Products’ block. Add it right below your WooCommerce cart.

Those grids are static, so everyone sees the same products. WooCommerce also has its own cross-sells, which you set per product and which only appear when that product is in the cart.

Use a static grid when your catalogue is small and most items suit most buyers. Use WooCommerce cross-sells, or SeedProd’s Upsells block, when the right suggestion depends on what is already in the basket.

Adding a Coupon Field and Shipping Calculator

Cart totals and a shipping calculator are the two things shoppers hunt for before they commit, and both are part of the Cart block rather than separate blocks you drag in.

The coupon code and quantity inputs are the ‘Fields’ group in the Styles tab, so that is where you restyle them. You are changing how they look, not whether they appear.

Whether they appear is WooCommerce’s call, so turn the shipping calculator on under WooCommerce » Settings » Shipping, and create your coupon codes under Marketing » Coupons.

A shopper who cannot see the shipping cost assumes the worst of it, so showing it in the cart takes that guess away before the checkout page does.

Designing the Empty Cart Page

An empty cart page is a dead end on most stores, because it says the cart is empty and stops there, which wastes a visit from someone who was shopping a minute ago.

WooCommerce’s own Cart block handles this on a block theme. When the cart has nothing in it, the block switches to its Empty Cart view with a message and product suggestions.

On a builder page you design that state yourself, because the blocks you place around the cart are ordinary page content and keep rendering whether the cart has items in it or not.

Fill the narrow column with a Recent Products grid and a link back to your shop, and an empty cart still offers a route somewhere.

Empty your own cart and load the page before you publish. It is the state you will never see by accident. A shopper hits it after they clear the basket or their session expires.

Keeping the Cart Page Fast and Accessible

A cart page carries more work than a landing page. It runs WooCommerce queries and recalculates totals. On many stores it also loads a payment script before anyone has asked for one.

You control two of those things, so keep the builder’s own weight down and stop non-critical scripts from loading on this page at all.

When I measured the same landing page built in three builders with GTmetrix, SeedProd came in at 556ms and 16 requests. Elementor took 1,882ms and 32 requests.

Query Monitor showed the same pattern server side, where SeedProd used 4.3 MB of memory and 34 database queries against 13.0 MB and 86 for Divi.

Those were landing pages, not cart pages. A cart page adds its own WooCommerce work on top, so read the numbers as the builder’s share of the weight and nothing more.

A cart is a form, so check it works without a mouse. Tab through the quantity fields, the coupon input and the checkout button in order. Then check the button and the totals have enough contrast to read on a phone outdoors.

Step 4. Publish and Set Your WooCommerce Cart Page

When your cart page is ready, click the dropdown arrow next to the green Save button and select Publish.

Publishing does not switch anything over yet. WooCommerce keeps serving the old cart page until you tell it otherwise.

The switch happens in the WooCommerce plugin settings, so navigate to WooCommerce » Settings and click on the Advanced tab.

Then next to the ‘Cart Page’ heading, select the new cart page you created with SeedProd. Remember to click the Save Changes button at the bottom of the screen.

This screen moves between WooCommerce releases, so if the layout on your store differs, WooCommerce documents it in its own settings guide.

Now when shoppers click the “View Cart” link on your website, they’ll see your new custom WooCommerce cart page.

It is worth confirming the swap actually took before you move on.

Check the New Cart Page Is Actually Being Served

Publishing the page does not prove shoppers are getting it. Test it the way a shopper would, in five steps.

I always do this in a private window, because logged in as an administrator you can be looking at a different or cached version of the page than a shopper gets.

1. Open your store in a private browsing window so you are not logged in as an administrator.
2. Add a product to the cart, then click ‘View Cart’.
3. Check the URL in the address bar matches the page you built, not the old cart page.
4. Change a quantity and confirm the total updates.
5. Click through to checkout and stop before paying.

That tells you the page works. Whether it earned anything is a separate question, and the cart is one of the few pages where you can see the answer.

Set up WooCommerce conversion tracking so you can compare the share of carts that reach checkout before and after the change, then give it a month of data before you judge it.

If the View Cart link itself is misbehaving, that is a different fault, and this guide on how to fix WooCommerce view cart not working covers it.

Troubleshooting a Custom WooCommerce Cart Page

Three things go wrong on this job, and they all look like the cart page is broken.

What you see	What is causing it	How to fix it
The cart page shows as empty, even with items in the basket	The page has neither the WooCommerce Cart block nor the [woocommerce_cart] shortcode on it	Open the page and add one of the two. On a SeedProd template that means the Cart block from the WooCommerce blocks group.
Your custom template is not applying	WooCommerce is still pointing at the old cart page, or the active theme’s own cart template is winning	Check the Cart Page setting under WooCommerce » Settings » Advanced, then confirm which theme is active and whether a builder controls that page.
The cart page setting reverted on its own	The page it pointed at was trashed, duplicated or replaced, so WooCommerce lost the reference	Set it again and leave the original page published. WooCommerce stores this setting as a page ID, not a URL.

A WooCommerce cart page has to contain either the Cart block or the [woocommerce_cart] shortcode, and it has to be the page selected under WooCommerce » Settings » Advanced. All three faults come back to one of those two.

Check those two before you change anything else, because on the stores I have managed one of them was the cause almost every time.

FAQs On Customizing WooCommerce Cart Page

How do I add custom fields to the WooCommerce cart page?

Not with the Cart block on its own. It styles the cart’s existing inputs, the coupon code and quantity fields, rather than adding new ones.

If you need to collect something extra, add it as a checkout field instead. WooCommerce carries checkout fields through to the order. A form you place beside the cart is page content, and it does not travel with the order.

Will customizing the cart page affect my checkout process?

No. Checkout is a separate WooCommerce page with its own template, so redesigning the cart page does not touch it.

The one thing that can break is the handoff between them. If your cart page loses its Proceed to Checkout button, shoppers cannot get through. The same happens if you point WooCommerce at a page with no cart on it.

Test the full path in a private window after you publish.

Can I customize the WooCommerce cart page for free?

Partly. On a block theme you can edit the Cart template in the WordPress Site Editor at no cost, which covers the layout, the colours and any blocks you add around the cart.

The SeedProd route in this guide needs the Elite plan, because that is the plan the WooCommerce Cart block sits on. Free, Basic, Plus and Pro do not include it.

Does a custom WooCommerce cart page work properly on mobile?

It does if you check the stacking order, because a two-column cart layout collapses into one column on a phone and the column that stacks second ends up a long scroll down.

Preview the page at phone width before you publish. Put the cart and its checkout button above the testimonials. The button a shopper needs should not sit underneath the social proof.

You now have a cart page that matches the rest of your store, and a way to tell whether it changed anything.

With SeedProd you build it visually, without writing a line of code. The WooCommerce blocks this tutorial uses, Cart included, are on the Elite plan, which also covers the shop page, product archives, single product pages and checkout.

The other page most stores leave sitting on the theme default is the WooCommerce shop page.

Thanks for reading! We’d love to hear your thoughts, so please feel free to join the conversation on YouTube, X and Facebook for more helpful advice and content to grow your business.