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.
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.
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
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.
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.
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.
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.
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.
This creates a full-width layout.
Now, select the ‘Image’ block in the left-hand menu and drag it onto the layout.
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.
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.
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 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.
You can customize every part of the cart using the left-hand menu.
This includes changing the fonts, colors, buttons, and more.
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.
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.
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.
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).’
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.
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.
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.
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.
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.
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.
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.
- 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 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 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.
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 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.
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.
Have a question or suggestion? Please leave a comment to start the discussion.