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 –
- Cart Overview,
- Cart Items,
- Cart Item Classic (includes default WooCommerce style in mobile view, doesn’t have the option to add or delete columns.),
- 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.
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.
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.
In the bottom sections, there is the option to activate/deactivate the buttons. You can also change the button text here.
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.
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.
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.
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!
