Black Friday Super Sale

How to customize WooCommerce cart page with Elementor for free

The WooCommerce Cart page is as much important as the checkout page. By default, there isn’t much option to customize the cart page. Also, you can not edit with the Elementor or Elementor Pro. With the free version of CoDesigner, however, you can customize all parts of the WooCommerce cart page in minutes. This Elementor addon comes with two cart widgets that are specially built for the WooCommerce cart page.

CoDesigner offers 4 free widgets to help you design a new cart for WooCommerce.

The cart widgets include –

  1. Cart Overview,
  2. Cart Items,
  3. Cart Item Classic (includes default WooCommerce style in mobile view, doesn’t have the option to add or delete columns.),
  4. Coupon Form.

The main difference between Cart Items and Cart Items Classic is that you can not add or delete the columns of the Cart Items Classic. Otherwise, both plugins have customization options – Bottom Section, Empty Cart Notice, and Style options.

Steps to customize WooCommerce cart page With CoDesigner

We have added a video made by WPTuts to make the process of creating the cart page easier.

Also, you should follow the steps below to customize the cart page using the free version of CoDesigner in the simplest way:

Step 1: You need to assign a new page as the default WooCommerce cart page

To design a cart page with the CoDesigner, first replace the default WooCommerce cart page by creating a new cart page.

Create a new cart page from your WordPress Dashboard and then navigate to:

WordPress Dashboard –> WooCommerce –> Settings –> Advanced tab

Assign your new cart page as the default WooCommerce cart page here. Click the cart page option and pick the newly created cart page from the drop-down.

Step 2: Activate CoDesigner cart widgets

Now, activate the Cart Items or Cart Items Classic, and Cart Overview widgets from the CoDesigner widgets tab on the WordPress dashboard.

Head over to the new cart page and edit it using Elementor. Search for the cart widgets from the ‘Search’ option under the ‘Elements’ tab.

At first, you need to search for the Cart Items widget. Then drag and drop the widget in a new section as shown in the screenshot below.

Search for cart items widget for new WooCommerce cart page
Search for cart items widget for new WooCommerce cart page

Now, search for the Cart Overview widget in the search bar. Then, drag and drop the widget in a section the same way as you did for the Cart Items.

Search for cart overview widget
Search for the cart overview widget

Step 3: Edit and customize the content of the new cart page

Start editing the content of your CoDesigner cart page that fits your site the most. On the Cart Items widget, you can turn on or off any specific columns.

Also, you can change the headings of the columns, and set the appearance of the thumbnail on click.

Edit columns of cart items widget
Edit columns of cart items widget

In the bottom sections, there is the option to activate/deactivate the buttons. You can also change the button text here.

Edit buttons of cart items widget
Edit buttons of cart items widget

In the content section of Cart Items Classic, you will have the option to show or hide the coupon area, change the button text, placeholder text, show or hide the coupon area, and change the button text.

Content of Cart Items Classic
Content of Cart Items Classic

For both Cart Items and Cart Items Classic, you can set the Empty Cart notice. It can be left blank, with static text, or any template.

Empty Cart Notice
Empty Cart Notice

Step 4: Style your new WooCommerce cart page

After editing the contents of the cart page, it’s time to start styling the cart page to give it a unique design. CoDesigner offers a lot of options to style the cart page. All you need to do is click the ‘Style’ tab of the cart widgets and start styling with the design you have been thinking about.

Style cart page
Style cart page

Step 5: Don’t forget to save the changes!

Now that you are done styling and customizing the new WooCommerce cart page, the final step is to save the changes.

Final Words

Creating and customizing the WooCommerce cart page is super easy if you can just spare a few minutes of your time and follow the steps I mentioned above.

So, don’t wait anymore and install the free version of CoDesigner today!

Also, you can try a bunch of cool widgets that are available on CoDesigner Pro starting at just $49.99!

Share with your friends

Related posts based on your interest

Leave a Reply

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

Subscribe to
Our Newsletter

No spam. Unsubscribe anytime.

Coupons

Don’t Miss the Biggest Sale of the Year!