Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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

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 will 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?

When shoppers have items in their carts, they are very close to making a purchase. However, research shows that nearly 7 out of 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.

WooCommerce does come with a built-in cart page, but it isn’t optimized for conversions.

The default WooCommerce cart page

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 said, let’s take a look at how you can customize your WooCommerce cart page without writing code. Simply use the links below to jump straight to the method you want to use.

Video Tutorial

Subscribe to WPBeginner

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

Method 1: How to Create a Custom WooCommerce Cart Page

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. These include 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.

The 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 will use the Pro version because it has the built-in WooCommerce blocks we need. It also integrates with all 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 your 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 have 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 pages. 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. In this guide, we’ll be using the ‘Blank Template’, but you can choose any design you 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 are happy with the information you have 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, you’ll need to 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, to keep the customer experience more consistent.

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

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 an 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

If you don’t already have a header image, then you can create one using web design software such as Canva.

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 are 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 WooCommerce cart and an area where you can show customer testimonials.

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 are 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 purchases.

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 marketplace or store.

For example, in the left-hand menu, you will 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 each testimonial. This allows visitors to see your ratings at a glance, which will help convert WooCommerce visitors into customers.

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

Add star rating block

This is all you need to create a custom WooCommerce cart page. However, let’s look at some additional SeedProd blocks that can help reduce your WooCommerce abandoned cart rates and get you more sales.

Add a Countdown Timer

Fear of missing out, also known as FOMO, encourages shoppers 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. You need to show a fresh timer to each visitor, so open the ‘Countdown Type’ dropdown and select ‘Visitor Timer (Evergreen).’

This is an easy way to show personalized content to different users.

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.

Shoppers also need to 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

Show Popular WooCommerce Products

You can encourage people to add more items to their shopping carts by creating a popular products section. Since these items are already popular with customers, showing them to more people is often an easy way to get more sales.

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.

Create a Helpful FAQ Section

Next, you may want to add an FAQ section, similar to the question and answer section on Amazon product pages. This might include information about delivery and shipping, or your returns policy.

By answering any questions that shoppers might have, you can improve the customer experience. It also means that customers will be less likely to contact your staff directly using live chat and other methods, which can save your employees a ton of time.

To create an FAQ area, just drag an Accordion block onto your page, which creates a section with two collapsible areas.

How to add an FAQ section to a WooCommerce cart page

In the left-hand menu, click on each Accordion field.

You can then go ahead and type the question and answer into the two text boxes.

Adding an accordion section to a custom cart page

Simply repeat these steps to create more questions and answers.

To add more items to the accordion block, simply click on the ‘Add New Item’ button.

Adding questions and answers to a custom WooCommerce page

You can also use the settings to style the FAQ section, similar to how you changed the appearance of your text and headlines.

How to Publish Your Custom WooCommerce Cart Page

When you are 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 will 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

Method 2: Create a Custom Sliding Side Cart in WooCommerce

Another option is to create a sliding side cart for your online store. This allows shoppers to open the cart at any time by clicking on the cart icon, so they can check their shopping basket without having to visit a separate WooCommerce cart page.

An example of a sliding side cart in WooCommerce

Sliding carts can remove friction from the shopping process, and help shoppers keep track of how much they will pay at checkout, which can reduce cart abandonment rates.

The quickest and easiest way to create a sliding side cart is by using Cart For WooCommerce By FunnelKit. This free plugin allows you to design a custom sliding side cart that perfectly matches your WooCommerce theme.

An example of a sliding side cart, created using FunnelKit

For step-by-step instructions, please see our guide on how to add a sliding side cart.

Bonus: How to Further Improve WooCommerce Cart Conversions

Once you have created a custom WooCommerce cart page, there are lots of ways to reduce cart abandonment and get more sales. This helps grow your business online by making money from your existing traffic.

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.

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

The easiest way to track WooCommerce conversions is by using Google Analytics. However, setting up analytics and creating Google Analytics goals manually requires writing 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.

MonsterInsights

MonsterInsights adds a website stats dashboard to your WordPress account, so you can easily see your top traffic sources, top-ranking pages, average session duration, and other important metrics. You can use these metrics to do more of what’s working, so you can get even better results.

MonsterInsights can also help you spot patterns in shopper behavior. You can then use this insight to improve the customer experience and create a high-converting sales funnel to get more conversions.

An example of Google Analytics data, inside the MonsterInsights dashboard

To track your WooCommerce cart conversions, see our step-by-step guide on how to set up 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 have already offered the shopper a coupon, then you can show them an educational popup instead. You might encourage them to reach out and ask any questions they may 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 on 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 picks for 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.

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. 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.