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

68

Do you want to create a custom WooCommerce cart page?

The default WooCommerce cart page is not optimized for conversions. By optimizing your cart page layout, you can significantly improve your conversions and get more sales.

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

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

Why Create a Custom WooCommerce Cart Page in WordPress?

Creating a custom WooCommerce cart page gives you a chance to increase sales conversions in your online store.

Research shows that nearly 7 out 10 customers will abandon your shopping cart and never come back.

By optimizing the default WooCommerce cart page, you can make more sales without increasing your current traffic.

OptinMonster cart page example

When your visitors have items in their cart, they are very close to finishing the purchase. Your WooCommerce cart page should do everything possible to make the conversion happen.

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

How to Create a Custom WooCommerce Cart Page in WordPress

SeedProd is the best drag and drop page builder used by over 1 million websites. It lets you easily create a custom WooCommerce cart page to make more sales.

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 that you can use, but for this tutorial, we’ll use the Pro version because it has the built-in WooCommerce blocks we need.

After the plugin is activated, you need to go to SeedProd » Settings and enter you product license key.

Enter SeedProd license key

You can find your license key under your account information on the SeedProd website.

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

Add new SeedProd cart page

After that, you need to choose a cart page template. There are dozens of professionally designed templates you can use. Once you find a template you like, 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, you’ll be asked to name your cart page, and then click ‘Save and Start Editing the Page’.

This will bring you to the drag and drop builder where you can starting building a custom cart page.

First, we’ll add an image block and upload a logo. You can adjust this to look like your header without it being clickable to reduce abandonment.

This keeps your branding in place but gives your visitors fewer exits, so they’re more likely to make a purchase.

Next, simply select the ‘Image’ block and drag it over to your page. Then, upload your logo from your image library.

Add image block header

You can customize this entirely with the options panel on the left.

Next, click the content and sidebar block in the ‘Choose your layout:’ section.

Select SeedProd layout

This lets you create a section for your cart, plus a testimonial section.

After that, locate the ‘Cart’ block in the WooCommerce section and drag it over.

Add WooCommerce cart block

You can customize every part of the cart, including font choice, colors, buttons, and more.

Customize WooCommerce cart block

Next, you can add a testimonials block. These act as social proof for your visitors and show them that they’re making the right decision.

Locate the ‘Testimonials’ block and drag it over to the open section.

Add testimonials block

You have full control over the appearance of your testimonials.

There’s the option to add a customer photo, change the testimonial, add a position, and more.

Customize testimonials block

If you want to add multiple testimonials, then follow the same steps above.

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

Simply select the ’Star Rating’ block and drag it under your testimonial.

Add star rating block

If you want to create scarcity to encourage your customers to make a purchase now, then you can add a scarcity timer to your cart.

All you need to do is select the ‘Countdown Timer’ block and drag it to the top of your cart. Then, select the ‘Visitor Timer’ option so that the timer will refresh for all your visitors.

Countdown timer evergreen block

Next, add a headline notifying your shoppers they have a set period until their cart will expire.

Simply drag over the ‘Headline’ block and enter your text.

Countdown timer header

Another great feature to add is a popular products section. This lets you improve your sales by promoting other popular products your customers might be interested in.

To do this, just drag over the ‘Best Selling Products’ block from the ‘WooCommerce’ section.

You can also choose any of the other product blocks to add as well.

Add SeedProd products block

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

After you’ve made your changes to the cart page, you can publish it live by clicking the arrow next to the ‘Save’ button and select ‘Publish’.

Publish cart live

Next, you’ll need to adjust your cart URL in the WooCommerce settings.

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

WooCommerce cart settings

After that, select the new cart page URL that you created with SeedProd. Make sure to click ‘Save changes’ at the bottom of the screen.

Depending on the WooCommerce theme you’re using, your visitors can now navigate to the cart page easier.

View WooCommerce cart dropdown

This will help your visitors view their carts on mobile devices too.

You can continue to customize your cart page with SeedProd, adding new blocks, and changing the design until it’s perfect.

Continue to test try different elements, to see what improves conversions the most.

Cart page example

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

Bonus: How to Further Improve WooCommerce Cart Page Conversions

Once you have created a custom WooCommerce cart page, you can further improve the conversions and reduce cart abandonment.

This helps you make even more revenue from your existing traffic.

Here are a few simple ways to do it.

1. Reduce Cart Abandonment with Timed Popups in WooCommerce

Nearly 70 percent of all shopping carts are abandoned. One of the best ways to reduce cart abandonment is with a timed popup.

OptinMonster is the best WordPress popup plugin used by over 1.2 million sites.

OptinMonster WooCommerce popup

It uses a unique Exit-Intent® technology to display popups exactly when a user is about to leave your site.

You can entice them back with a unique coupon code just for them.

OptinMonster popup WooCommerce

If you’ve already offered your visitor a coupon, then use an educational popup that helps with any questions and reassures them about their purchase, like this one from WPForms.

WPForms exit intent popup

There are even more unique popups and slide-ins you can add to your site too.

For example, if a customer adds an item to their cart and leaves but later returns, then you can add a slide-in that offers a coupon to complete their purchase.

OptinMonster cart reminder

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

2. Boost Sales with Social Activity Notifications in WooCommerce

Social activity notifications alert your visitors to new purchases that have been made in real-time. This uses FOMO to improve your conversions and push them to buy.

The simplest way to add social proof notifications to your WooCommerce 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%.

It can be set up in a few minutes, and you can automatically display a notification bubble with recent purchases, free trial sign-ups, and more.

The notifications won’t get in the way of your cart or user experience. The only thing they do is improve your store conversions.

TrustPulse alert notification

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

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 improve WooCommerce SEO to grow your traffic, and our expert picks 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.