1. Blog
  2. Guides

How To Customize The WooCommerce Cart Page With Elementor

Elementor Pro has an integrated WooCommerce builder. As from Elementor version 3.5, it is now possible to customize the WooCommerce cart page or even create a new custom cart page. Well designed custom cart pages help in increasing conversion rates within your Ecommerce store.

Within this guide, we will look into how you can customize the WooCommerce cart page with the help of Elementor Pro. This guide assumes that you have the WooCommerce plugin setup.

Table Of Contents

Installing Elementor Pro

Customizing The Cart Page


Installing Elementor Pro

Alongside the free Elementor version, you will also need to install the Elementor Pro plugin in order to be in a position to effectively customize the cart page.

To begin with, navigate to the Elementor Pro page here and select to purchase your desired pro plan.

Once done with the purchase, please proceed to installing the plugin as outlined here.

Customizing The Cart Page

Prior to customizing the cart, it is recommendable to add items to your cart so that you can have a proper view of the page.

To begin customizing your cart page, navigate to the Pages section and select to edit the “cart” page

Remove any components in place, if you had not removed the cart Shortcode.

Next, drag the “Cart” widget on the left panel to your page

Once this is done, you will have a default view of the widget content within the editor as seen below:

The cart Widget provides a number of settings to alter the default settings in place.


General: Within this segment, you can specify the layout of the Cart widget. You can have it rendered as one or two columns. In the case of a two column layout, you can specify whether the right column will be sticky as well as an offset value.

Order Summary: Enables you to alter the Update Cart button text

Coupon: Enables you to edit the Apply coupon button text

Totals: Helps in altering the Title and buttons text of the Totals section

Additional Options: This segment contains a setting that determines whether updates to the cart occur automatically or not.


Within this section, you can configure the styling to the contents of the cart widget.


Within the advanced tab you can configure components such as the margins, paddings, animations, background and many more.

In the cart page, you can also add more widgets to the page to render content that you deem important to the page. Once you are done customizing the page, click on the “Update” button within it.

Once this is done, you may now have a view of the cart page on the front-end and you should now have a view of the customized cart page.


While using Elementor Pro, you can easily customize the cart page to your preference with the help of the WooCommerce builder. A custom cart page is likely to provide a better shopping experience that may actually lead to higher conversion rates.

No Comments
Comments to: How To Customize The WooCommerce Cart Page With Elementor

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

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Privacy Preference Center


    We use third-party analytics services to help understand your usage of our services. In particular, we provide a limited amount of your information (such as sign-up date and some personal information like your email address) to 3rd party service and utilize it to collect data for analytics purposes when you visit our website or use our product.

    __cfduid,intercom-id-*, intercom-lou-*, intercom-lou-*, intercom-session-*, intercom-session-*, intercom-visitor-session-*


    These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site.

    All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance.

    _ga, _gat_gtag_UA_106868094_1, _gid



    These cookies are necessary for the website to function and cannot be turned off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.

    You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.

    PHPSESSID, wordpress_logged_in_*, wordpress_sec_*, wp-settings-time-1, gdpr[privacy_bar], gdpr[allowed_cookies], gdpr[consent_types]