How to Customize WooCommerce Cart Page Without Coding (Free)

Do you want to minimize the cart abandonment rate on your website? Then you must customize your WooCommerce cart page design.

While functionalities are the backbone of an eCommerce store, a good-looking website also plays a vital role. A professional-looking and well-optimized website with the right elements in the right place can attain customers’ attention better and increase your sales. 

Cart page is the place where people make the final decision as to whether they will checkout to buy your product or not. So, having a professional yet appealing cart page is very important to ensure people do not abandon their cart. 

In this blog, you will find a step-by-step guide on How to Customize WooCommerce Cart Page that too without any coding.

Let’s get started…

How does a default  WooCommerce Cart Page look?

WooCommerce provides a very basic layout of a Cart page. While different themes add different styles to the page, it still kinda looks the same. Let’s have a look at how the default WooCommerce cart page looks on different themes.

Here is how WooCommerce Cart page looks on the WordPress Twenty Twenty theme:

Here is how the cart page looks on the Twenty Twenty One theme of WordPress:

Even a popular Elementor theme like Hello Elementor will give you a very basic-looking cart page with the same old layout.

I think you will agree that all of the cart pages above have the same layout and offer nothing fancy or extraordinary

Why Customize WooCommerce Cart Page ?

As of 2021,  4,414,537 live websites use WoCommerce. I am telling the stat so you get an idea how many people are probably using the same boring cart page WooCommerce offers.

Don’t get me wrong! I am all for WooCommerce. It’s the most popular eCommerce plugin for WordPress and a well-deserved one.

WooCommerce provides a ready-to-use fully functional eCommerce website with WooCommerce templates including a cart page in no time. As great as it is, your website may just get lost in the crowd with the default templates because then your website site looks like the rest.

But from a business point of view, having a Cart page that looks like the rest isn’t really the way to go in this competitive world of eCommerce. Especially if you consider, around  70% of people abandon their shopping cart and never proceed to check out.

And it’s a known fact that people are attracted to things that are different and stand out in the crowd.

So, don’t let your cart page get lost in the crowd, rather customize it so it stands out and helps you get more orders. 

Now the question is how you can get a cart page that stands out? Well, there are two ways you can custom design your cart page.

1. 1. Editing the WooCommerce files (requires you to know to code)
2. 2. Use a drag and drop plugin

Why Editing Code to get custom WooCommerce Cart page is not a good idea?

While editing code to get your desired cart page is an option, it’s not recommended for noncoders. Since you chose ready-to-use software like WordPress and WooCommerce to build your website, I’m assuming, you are not looking to hand-code anything.

Here are some of the reasons why newbie programmers or noncoders should avoid editing WooCommerce code:

• It requires you to be an expert programmer and know Html, CSS, Javascript, and Php like a pro.
• If code is not edited and optimized efficiently it may slow down your website.
• You will need to change code every time you want to change your WooCommerce theme
• When WooCommerce comes up with a new update, you will be required to make new changes to make the code compatible with a new version of WooCommerce
• You can also lose all your code when WooCommerce updates if you don’t create a child theme.

I think now you understand why I don’t recommend changing the WooCommerce code.

Besides, if you are using platforms like WordPress and WooCommerce to avoid having to code in the first place, then why learn to code just to edit a cart page, right?

No worries. I have got another process that you can use to custom design your Cart page smoothly without having to code. Not even a single line. Promise!

How to Customize WooCommerce Cart Page Using a Drag and Drop Plugin

Now you can design a cart page with easy drag and drop technology. Thanks to the WooCommerce PageBuilder plugin ShopEngine.

ShopEngine is the ultimate WooCommerce builder with premade templates, widgets to custom build your WooCommerce pages, and modules with useful eCommerce functionalities. With this plugin, you get complete control over the design of your WooCommerce pages including the Cart page.

While ShopEngine gives you a premade Cart Template, you can create your Cart page from scratch. In this blog, I will walk you through the process on how to Customize WooCommerce Cart Page to create a brand new one from scratch.

Step #1: Install Elementor and ShopEngine

To get started you will need two plugins

1. Elementor
2. ShopEngine 

Since ShopEngine is a WooCommerce Page builder for Elementor and requires Elementor, make sure you install Elementor first. 

Step #2: Create Cart Page Template

Once you have installed both the plugins, create a Cart Template. To create a cart page template :

• Go to: Dashboard => ShopEngine => Builders Template
• Click on Add new to open the Template Settings Window
• Give a Template name of your preference
• Choose Type as Cart from the dropdown
• Turn on the Set Default option to override any existing Cart Page
• Choose the blank option under Sample Design 
• Click on Save changes to update

Note: To get a ready-to-use Cart Template, choose Sample Design 1 option while creating the template. You can edit every element of that premade template too. I chose blank as I am going to create one from scratch

Step #3: Choose a Layout/Structure

Now it’s time to choose a layout. To get started 

• Go to ShopEngine => Builders Module
• Hover on the Cart Template from the list
• Click on Edit With Elementor

• Once the Elementor Editor opens Click on the Add New Section (+) icon 
• Now choose the structure/layout you like

Step #4: Design Cart Page using ShopEngine Widgets

ShopEngine provides five widgets exclusively for Cart Template. Along with Cart Template widgets, you can also use the Coupon Form widget and five+ general widgets to build your cart page.

For this blog, I am going to use the following widgets:

• Cart Table: Cart widget displays all the products in the cart in a table format with price, quantity, and subtotal. Customers can update product quantity and also clear the cart with one click.
• Cart Total: This widget shows all the available shipping methods and total order total.
• Return to Shop: This widget provides a button with a link that takes you back to the shop page.
• Checkout Coupon form: Customers can use their discount coupon using this widget.
• Deal Product: This widget lets you showcase your sale products on the cart page that too with a countdown timer that displays the sale schedule period. This is a general widget of ShopEngine.
• Cross-Sell: Cross-sell displays all the cross-sell products in an attractive way on the cart page.

First, You need to turn on the widgets you want to use on your cart page. To turn on  

• Go to Admin Dashboard => ShopEngine => Widgets. 
• Scroll and search the widget you want to use
• Enable the widgets you want to use
• Click on Save changes at the top of the page

Now it’s time to drag and drop the widgets into your layout. Go back to the Cart page editor mode:

• Search for the widget
• Drag and drop the widgets (one by one)

Note: You can choose to hide Continue Shopping Button and Hide all button.

As ShopEngine is totally compatible with Elementor, you can use multiple layouts on the same page. For the next part, let’s use a different layout.  To do so, I am going to add a new section with a different structure and drag and drop Cross-sell and Deal products widgets.

Note: You need to add cross-sell products and set products on sale with schedules from the admin dashboard under product settings for Cross-sell and Deal products to show up on the front end.

Both Cross-Sell and Deal products give you different settings you can customize. So, after you drag and drop the widget, customize settings according to your preference.

With cross-sell widget, you get options like turn on/off  Enable Slider, show/hide Flash Sale, Sale Price, Cart Button, and the number of products to show under content settings. For sliders, you get options like Slides Per View, Loop, Autoplay. Slide Speed etc. In addition, you also get the Order By and Order option under the advanced tab.

Deal products provide you with content settings like Order, Order By, Date, Show Product, Column, Column Gap, and Row Gap. You also get other settings which include Enable Sale, Badge, Sale badge, Sale, Title Word Limit, Percentage Badge, Countdown Clock, and Days.

Step #5: Customize Woocommerce Cart page’s Style Settings

Not just structure, with ShopEngine you get complete control over the styling of your cart page too.

To change the style settings of ShopEngine Widgets, hover on the widget you want to edit to find an Edit option on the top right corner. Click on that option to find all the content and style settings on the Elementor panel placed on the left side.

Let’s have a look at the style settings you can customize for each of the widgets used in this blog:

Cart Table: 

You can change style settings of Table header, table Body, Product Image, Quantity. Table Footer and Global Font. For more details, you can check out our documentation on the Cart table.

Return to Shop:

You change Button Alignment, Typography, Border Color, Border Radius, and Box Shadow. For more details, you can check out our documentation on Return To Shop Widget

Coupon Form:

For the coupon form, you will get a style setting for info, description, coupon form, apply button, and global font. You can check out the style options in detail on our documentation on Coupon form.

Cart Total:

For Cart total widget you get many style options to change the styling of Table, Input, checkout update button, and global font. For more detailed style settings you can check out our documentation on Cart total.

Cross-sell: 

For the Cross-sell widget, you get various style options which include styles for items, flash sale, image, Title racing, price, Add to cart, Slider style, and global font. For more details about Cross, Sale style check out the documentation.

Deal Products:

You get different style options for Product Wrapper, Product Image, Product Badge, Countdown Clock, Content Style, Stock and Progress bar, and Global font. To know more details about the style options check out our documentation on the Deal Product widget.

Step #6: Update and Preview custom WooCommerce cart page

After you change the styles click on Update to save changes and click on Preview to see the changes.

If you have followed the layout and settings mentioned in this blog you should get a cart page like the one below:

Bonus: Tips to Boost your eCommerce store sale using ShopEngine Modules

ShopEngine, in addition to template builder, provides you with useful modules with important eCommerce functionality that can boost your online shop’s sales. ShopEngine Modules include:

• Quick View
• Variation Swatches
• Wishlist
• Product Comparison

I’m sure Being a WooCommerce store owner, you know how important these functionalities are to make the online buying experience a good one. If we talk about the Cart Template, using the Quick view button and the Wishlist button on the cross-sell will give your customers a better shopping experience. And this increases the chance of your customers buying more products.

With Quick View, customers can easily check out any product’s complete information with just one click. Similarly, with just one click users can add the product to their wishlist using the wishlist module button to checkout later. Both these functions can play a significant role in increasing product sales.

So, don’t just customize your cart page, use ShopEngine modules to give your customers a great buying experience and boost your shop’s sales.

Why Upgrade to ShopEngine Pro?

Well, honestly ShopeEngine does provide you with enough features to make your online store a good one. But why should you settle for good when you can get the best, right?

ShopEngine Pro provides you with a vast amount of features that will make online shopping on your eCommerce store the best buying experience for your customers. It will do so with 12+ modules which include Flash sale countdown, badges, Sales Notification, Quick checkout, Parietal payment, Currency Switcher, and many more.

Not just customer satisfaction, ShopEngine features are designed to make online store management super duper easy too with modules like Preorder, Backorder, Additional Checkout Field, and many more.

Not to forget 15+ premade WooCommerce templates with full customization control and 60+ advanced widgets to create every WooCommerce template from scratch if you want to.

A plugin with so many features, premade templates, and modules that too at a very reasonable price is sure with trying, right?

Get your copy of ShopEngine today and never worry about how to customize WooCommerce again!

Final Words

Congratulations! You have successfully redesigned your cart page. Wasn’t that easy? 

Well, that’s what ShopEngine does, make your job of building WooCommerce pages super duper easy. 

So, Don’t just limit your online store to default styles, redesign your entire WooCommerce website and use the modules to make your online business more successful than ever. 

To learn more about WooCommerce customization stay connected to us through our Social Media:

So, Which WooCommerce page are you going to customize next? Don’t forget to share your experience of using ShopEngine.