How to Edit WooCommerce Cart Page in Elementor?

Updated on January 22, 2024 by Ananda
Table Of Content

Do you want to edit the WooCommerce cart page in Elementor? Similar to the other pages of WooCommerce, you’ll get very limited options to edit the cart page. So to edit the cart page you need coding knowledge.

With the Woo Cart widget from The Plus Addons for Elementor you can easily customize the WooCommerce cart page as per your style and brand without any coding.

To check the complete feature overview documentation of The Plus Addons for Elementor Woo Builder, click here.

Required Setup

How to Activate the Woo Cart Widget?

Go to 

  • The Plus Settings Plus widgets 
  • Search the widget name and turn on the toggle then click Save. 
Woo cart activate

Add Woo Cart

To edit the cart page, open the cart page with Elementor and add the Woo Cart widget.

Note: Make sure all the default WooCommerec pages are created.

From the Layout dropdown, under the Layout tab, you have to select a layout. Here you’ll find two options – 

Default – To show all the default sections of the cart page.

Custom – With this option, you can customize which sections to show.

Default

When you select the Default option from the Layout dropdown, you’ll get some customization options under the Cart with Items tab.

Woo cart default

Display Cart – To show or hide the cart section with items.

Display Cross Sell – To show or hide the cross sell products.

Hide Coupon Option – To show or hide the coupon section.

Display Cart Total – To show or hide the cart total section.

Full Width Cart Total – To make the cart total section full width.

Custom

When you select Custom from the Layout dropdown, you’ll see three items, open one item.

Woo cart custom

From the Select dropdown, you have to select the section you want to show. Here, you’ll find three options –

Cart Data – To show the cart section with items. You can manage the section width for different devices.

Cart Total – To show the cart total section. You can manage the section width for different devices.

Checkout Button – To show the checkout button. You can manage the section width and the button text as well.

Similarly, you can edit the other items, and you can also drag and drop to rearrange the items or you can delete an item as well.

You can click on the + Add Item to add more items.

From the Empty Cart tab, you can set a custom image/icon and message for the empty cart.

Woo cart empty cart

You can also hide the empty cart by enabling the Hide Empty Cart toggle.

Then, from the Extra Options tab, you can add icons to each button of the cart page by adding the Font Awesome icon Unicode.

Woo cart extra options

From the Style tab, you can customize the page style further.

Now, you’ll see a beautiful cart page.

Woo cart demo
OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]

    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website
    X