How to Create a Custom WooCommerce Cart Page (Easy)

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 increase your conversions and get more sales.

In this tutorial, we will show you how to customize your WooCommerce cart page without any technical knowledge.

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

Why Need to Create a Custom WooCommerce Cart Page in WordPress?

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

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

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

OptinMonster cart page example

When your visitors have items in their cart, they are very close to completing 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 in the market used by over 1 million websites. It allows you to easily create a custom WooCommerce cart page to make more sales.

Note: there is a free version of SeedProd available, 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 navigate 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 finished that, visit SeedProd » Pages and click the ‘Add New Landing Page’ button to create your cart page.

Add new SeedProd cart page

Next, you need to choose a cart page template. There are tons 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

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

Firstly, we’ll add an image block and upload a logo. You can modify 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 choose 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.

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

Select SeedProd layout

This allows you to 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 so much more.

Customize WooCommerce cart block

Now, 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, etc.

Customize testimonials block

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

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

Simply choose 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 choose 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 allows you to 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

Once 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

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

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

WooCommerce cart settings

Now, 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 increases conversions the most.

Cart page example

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 generate even more revenue from your existing traffic.

Here are some simple ways to do it.

1. Reduce Cart Abandonment with Timed Popups in WooCommerce

Around 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 in the market used by over 1.2 million sites.

OptinMonster WooCommerce popup

It has 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 provided 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 instance, 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

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 easiest 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 available 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, etc.

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

We hoped this article has helped you create a custom WooCommerce cart page without having to write any code.

Tags: No tags

Leave A Comment

Your email address will not be published. Required fields are marked *