WPMet Site Logo
  • Home
  • Plugins
    • ElementsKit
    • ShopEngine
    • GetGenie AI
    • MetForm
    • WP Social
    • WP Fundraising
    • Wp Ultimate Review
  • About
  • Blog
  • Support
  • Contact
  • My Account
WPMet Site Logo

How to Customize WooCommerce Cart Page Without Coding (Free)

Editorial StaffEditorial Staff Updated on: August 29, 2022 WooCommerce Elementor ShopEngine WordPress 9 Min Read
Customize WooCommerce Cart Page

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…

Contents hide
How does a default WooCommerce Cart Page look?
Why Customize WooCommerce Cart Page ?
Why Editing Code to get custom WooCommerce Cart page is not a good idea?
How to Customize WooCommerce Cart Page Using a Drag and Drop Plugin
Bonus: Tips to Boost your eCommerce store sale using ShopEngine Modules
Why Upgrade to ShopEngine Pro?
Final Words

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:

Cart page of twenty twenty theme of wordPress

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

Cart page of twenty twenty theme one of WordPress

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

Cart page of Hello Elementor

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

Also Check How to Add Currency Switcher to WooCommerce Website in 5 Steps

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

You can also checkout our blog How to add currency switcher to WooCommerce

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.

Need more reasons to convince yourself to use ShopEngine? Read our blog on 11 reasons to choose ShopEngine

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. 

Download ShopEngine For Free

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
Create Cart Template Using ShopEngine
Create Cart Template

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
Edit ShopEngine Cart Template
Edit Cart Template
  • Once the Elementor Editor opens Click on the Add New Section (+) icon 
  • Now choose the structure/layout you like
choose elementskit structure
Choose Structure

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
Enable widgets for cart template
Enable necessary widgets

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)
Drag and Drop widgets to build Cart template
Drag and Drop Widgets

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.

Drag and drop Cross Sell and Deal products widget of ShopEngine
Drag and Drop Deal Product and Cross sell

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.

Cross Sell Widget content settings
Settings of Cross Sell

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.

Content Settings of Deal Products
Settings of Deal Products
Check All ShopEngine Widgets

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.

Cart table widget style settings
Style Settings of 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

Style Settings of Return to Shop
Style Settings of Return to Shop

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.

Coupon form Style Settings
Style Settings of 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.

Style settings Cart total widget
Style Settings of 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.

Cross Sell widget style settings
Style settings of Cross Sale

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.

Style settings Deal Products widget
Style settings of Deal Product

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.

Click update and see preview Elementor
Update and see the preview

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

Preview custom woocommerce cart page using ShopEngine
Final Preview

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.

Bonus blogs:

✅ How to Customize WooCommerce Category Page Without Coding
✅ How to customize WooCommerce My Account page using ShopEngine 
✅ How to customize WooCommerce Shop Page using ShopEngine 
✅ How to Customize the WooCommerce Product Page using ShopEngine
✅
How To Customize WooCommerce Checkout Page using ShopEngine
✅ 9+ Useful and Best Shopping Cart Plugins For WordPress & WooCommerce

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!

Try ShopEngine Pro Now
Introducing ShopEngine Pro

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:

Twitter
Youtube
Instagram
Facebook

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

  • Share :

How to Add Search Bar to a WordPress Site

Previous post

ShopEngine vs WooLentor – Ultimate Showdown of WooCommerce Builder for Elementor

Next post

Leave a Reply Cancel reply

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

Get Subscribed Today!

WPMet Site Logo
© 2022, Wpmet. All Rights Reserved. Built with ElementsKit.

Company

About us
Contact us
Support
Blog
Collaborate
Documentation

Resources

Affiliates
Affiliate Area
Privacy Policy
Terms & Conditions
Refund Policy
Login/Register

Our Products

Elements Kit
ShopEngine
GetGenie Ai
Metform
WP Social
Wp Ultimate Review
Wp Fundraising

Follow Us

Payment systems accepted by Wpmet

Wpmet is not affiliated with or endorsed by Open Source Matters or the WordPress Project. The CMS logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Opt out!.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Vendor/Partner
SAVE & ACCEPT