Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
25 Million+
Websites using our plugins
Years of WordPress experience
WordPress tutorials
by experts

How to Create a Custom WooCommerce Cart Page (No Coding)

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to create a custom WooCommerce cart page?

The default WooCommerce cart page is not optimized for conversions. By customizing the cart page, you can get more sales and make more money from your online store.

In this article, we’ll show you how to customize your WooCommerce cart page without writing any code.

How to create a custom WooCommerce cart page (no coding)

Why Create a Custom WooCommerce Cart Page in WordPress?

WooCommerce comes with a built-in cart page.

Simply activate this must have WordPress plugin, and your online store will start using the default cart page automatically.

The default WooCommerce cart page

When your visitors have items in their cart, they are very close to making a purchase. However, research shows that nearly 7 out 10 customers will abandon their cart and never come back.

With that in mind, your cart page should do everything possible to secure the sale.

By replacing the default design with a custom cart page, you can often improve the conversion rates on your online store.

Even simply customizing the page with your own branding and custom logo can improve the customer experience and boost your conversion rates.

That being said, let’s take a look at how you can customize your WooCommerce cart page with no code.

Video Tutorial

Subscribe to WPBeginner

If you’d prefer written instructions, just keep reading.

How to Create a Custom WooCommerce Cart Page in WordPress

The easiest way to create custom pages for your WooCommerce store is by using SeedProd.

SeedProd is the best drag and drop page builder and comes with more than 180 professionally-designed templates. This includes eCommerce templates that you can use to create sales pages and lead squeeze pages.

Even better, SeedProd has full support for WooCommerce and even comes with special WooCommerce blocks that allow you to show your best selling products, most popular items, latest sales, and more.

First thing you need to do is install and activate the plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Note: There is a free version of SeedProd, but for this guide we’ll use the Pro version because it has the built-in WooCommerce blocks we need. It also integrates with all of the email marketing services you may already be using to get more sales and conversions.

Upon activation, you need to go to SeedProd » Settings and enter you license key.

Enter SeedProd license key

You can find this information under your account on the SeedProd website. After entering the license, click on the ‘Verify Key’ button.

Once you’ve done that, go to SeedProd » Landing Pages and click on the ‘Add New Landing Page’ button.

SeedProd's page design templates

After that, you need to choose a cart page template.

SeedProd’s templates are organized into different campaign types such as coming soon and 404 page. You can click on the tabs at the top of the screen to filter templates based on campaign type.

When you find a template that you want to use, hover over it and click the ‘Checkmark’ icon.

We’re going to use the ‘Blank Template’ since it lets us add only the sections we want.

Select SeedProd template

Next, go ahead and type in a name for the cart page. SeedProd will automatically create a URL based on the page’s title, but you can change this URL to anything you want.

When you’re happy with the information you’ve entered, click on the ‘Save and Start Editing the Page’ button.

Creating a custom cart page using SeedProd

This will load the SeedProd page builder. It is a simple drag-and-drop editor that shows a live preview of your custom cart page to the right and some settings on the left.

To start, we’ll add an image to the top of the page. It’s a good idea to use an image that looks like your store’s regular header, as this will keep your branding in place and consistent.

We want the header image to take up the full width of the cart page, so in the ‘Choose your layout’ box, click on the first layout.

Choosing a layout for a custom page

This creates a full-width layout.

Now, select the ‘Image’ block in the left-hand menu and drag it onto the layout.

Add image block header

To upload your image, click to select the Image block.

In the left-hand menu, click on ‘Use Your Own Image’ and either select an image from the media library or upload a new file from your computer.

Adding your logo to a custom cart page in WooCommerce

You can further customize the image using the settings on the left. For example, you can add image alt text and change the image’s size.

When you’re happy with how the header looks, click on the ‘Add Columns’ icon in the ‘Drag a new block here’ section.

Adding new blocks to a WooCommerce cart page

You can now choose the layout that you want to use for the main cart page area.

Go ahead and click on the content and sidebar layout.

Select SeedProd layout

This lets you create a section for your cart, and an area where you can show customer testimonials to get more conversions.

In the left-hand menu, scroll to the ‘WooCommerce’ section. Here, find the ‘Cart’ block and drag it onto your layout.

Add WooCommerce cart block

You can customize every part of the cart using the left-hand menu.

This includes changing the fonts, colors, buttons, and more.

Customize WooCommerce cart block

When you’re happy with how the cart area looks, it’s time to add a testimonials block. This is a form of social proof, which will encourage visitors to complete their purchase.

Simply find the ‘Testimonials’ block and drag it onto your layout.

Add testimonials block

You can now change how the testimonials look on your online store.

For example, in the left-hand menu you’ll see settings to change the color of the comment bubble, change the alignment, and add more customer testimonials.

Customize testimonials block

Another great idea is to show a star rating underneath your testimonial.

To do this, simply find the ’Star Rating’ block and drag it under the testimonial block.

Add star rating block

Scarcity can encourage your customers to make a purchase now, rather than wait and risk missing out. With that in mind, you may want to add a countdown timer that will count down the minutes until the visitor’s cart expires.

To create this sense of urgency, find the ‘Countdown’ block and drag it to the top of your cart.

We want to show a fresh timer to each visitor, so open the ‘Countdown Type’ dropdown and select ‘Visitor Timer (Evergreen).’

Countdown timer evergreen block

By default, the timer will start at 30 minutes but you can change this by typing a new number into the ‘Set Timer For’ section.

We want to let shoppers know that their cart will expire when the timer reaches 0, so add a ‘Headline’ block above the timer.

You can then type in the text that you want to show to shoppers.

Countdown timer header

You can encourage people to add more items to their shopping cart by creating a popular products section.

To promote your store’s biggest sellers, simply drag and drop a ‘Best Selling Products’ block onto your layout.

Add SeedProd products block

By default, this block will show your most popular products, but you can use the settings to show products that are on sale, your newest products, and more.

To do this, simply open the ‘Type’ dropdown and choose a new option.

Showing popular products on your cart page

For more details, please see our guide on how to display popular products in WooCommerce.

When you’re happy with how the cart page looks, it’s time to publish it by clicking the dropdown arrow next to ‘Save’ and then selecting the ‘Publish’ option.

Publish cart live

After that, you’ll need to change the cart URL in the WooCommerce settings.

Simply go to WooCommerce » Settings and then click on the ‘Advanced’ tab.

Changing the WooCommerce URLs

After that, open the ‘Cart page’ dropdown and start typing in the URL for your custom page.

When the right page shows up, select it.

Changing the WooCommerce cart URL

Bonus: How to Further Improve WooCommerce Cart Page Conversions

Once you’ve created a custom WooCommerce cart page, there are lots of ways to reduce cart abandonment and get more sales. This helps you make more money from your existing traffic.

Here are a few simple ways to do it.

1. Track Your Conversions

Cart abandonment is a big problem for all online stores. In fact, 60 to 80% of people who add items to their cart don’t buy. (Source: Cart abandonment statistics)

Conversion tracking helps you understand what’s working on your cart page, and what isn’t. You can then use SeedProd to fine-tune your custom cart page so more customers go ahead and complete their purchase.

The easiest way to track WooCommerce conversions is by using Google Analytics. However, setting up analytics and creating Google Analytics goals manually requires you to write lots of custom code.

With that in mind, we recommend using MonsterInsights. It is the best Google Analytics plugin for WooCommerce, and comes with an eCommerce addon that enables conversion tracking with just a few clicks.


To track your WooCommerce cart conversions, see our step by step guide on how to setup WooCommerce conversion tracking.

2. Reduce Cart Abandonment with Timed Popups in WooCommerce

You can also reduce cart abandonment with a timed popup.

OptinMonster is the best WordPress popup plugin and has a unique Exit-Intent® technology that can display popups exactly when a shopper is about to leave the cart page.

You can even use OptinMonster to offer shoppers a special discount code if they complete the purchase now.

OptinMonster popup WooCommerce

OptinMonster has a powerful set of targeting and personalization features.

For example, if you’ve already offered the shopper a coupon, then you can show them an educational popup instead. For example, you might encourage them to reach out and ask any questions they might have about your products.

WPForms exit intent popup

OptinMonster allows you to create different campaigns, including popups, fullscreen welcome mats, floating bars, scroll boxes, and slide-ins.

For example, if a customer adds an item to their cart and doesn’t complete the purchase, then you can offer them a coupon for that exact product using a slide-in.

OptinMonster cart reminder

For more details, see our guide on how to create a WooCommerce popup to increase sales.

3. Boost Sales with Social Activity Notifications in WooCommerce

Social activity notifications show all the products that shoppers are buying, in real time. This can reassure shoppers that you’re a popular, trustworthy website and also uses FOMO to push them to buy.

The simplest way to add social proof notifications to your cart page is with TrustPulse.

TrustPulse WooCommerce notification

It’s the best social proof plugin for WordPress and WooCommerce in the market and has been proven to increase conversions by 15%.

You can add TrustPulse to your site in just a few minutes, and start showing a notification bubble every time someone buys a product, starts a free trial, and more.

TrustPulse alert notification

For more details, see our guide on how to use FOMO on your WordPress site.

We hoped this article helped you create a custom WooCommerce cart page without writing any code. You may also want to see our step by step guide on how to increase your blog traffic, and our expert pick of the best WooCommerce plugins for your store.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

1 CommentLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.