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.

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.

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.

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.

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.

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.

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.

This creates a full-width layout.

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

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.