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
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.
![](https://seventhqueen.com/wp-content/uploads/2022/04/Elementor-Pro-1024x444.png 1024w, https://seventhqueen.com/wp-content/uploads/2022/04/Elementor-Pro-300x130.png 300w, https://seventhqueen.com/wp-content/uploads/2022/04/Elementor-Pro-768x333.png 768w, https://seventhqueen.com/wp-content/uploads/2022/04/Elementor-Pro-1536x666.png 1536w, https://seventhqueen.com/wp-content/uploads/2022/04/Elementor-Pro-45x20.png 45w, https://seventhqueen.com/wp-content/uploads/2022/04/Elementor-Pro.png 1624w)
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
![](https://seventhqueen.com/wp-content/uploads/2022/04/editwithelementor.png 774w, https://seventhqueen.com/wp-content/uploads/2022/04/editwithelementor-300x125.png 300w, https://seventhqueen.com/wp-content/uploads/2022/04/editwithelementor-768x320.png 768w, https://seventhqueen.com/wp-content/uploads/2022/04/editwithelementor-45x19.png 45w)
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
![](https://seventhqueen.com/wp-content/uploads/2022/04/cart-1024x402.png 1024w, https://seventhqueen.com/wp-content/uploads/2022/04/cart-300x118.png 300w, https://seventhqueen.com/wp-content/uploads/2022/04/cart-768x302.png 768w, https://seventhqueen.com/wp-content/uploads/2022/04/cart-1536x604.png 1536w, https://seventhqueen.com/wp-content/uploads/2022/04/cart-45x18.png 45w, https://seventhqueen.com/wp-content/uploads/2022/04/cart.png 1626w)
Once this is done, you will have a default view of the widget content within the editor as seen below:
![](https://seventhqueen.com/wp-content/uploads/2022/04/cartpreview-1024x516.png 1024w, https://seventhqueen.com/wp-content/uploads/2022/04/cartpreview-300x151.png 300w, https://seventhqueen.com/wp-content/uploads/2022/04/cartpreview-768x387.png 768w, https://seventhqueen.com/wp-content/uploads/2022/04/cartpreview-45x23.png 45w, https://seventhqueen.com/wp-content/uploads/2022/04/cartpreview.png 1432w)
The cart Widget provides a number of settings to alter the default settings in place.
Content
![](https://seventhqueen.com/wp-content/uploads/2022/04/content-1024x465.png 1024w, https://seventhqueen.com/wp-content/uploads/2022/04/content-300x136.png 300w, https://seventhqueen.com/wp-content/uploads/2022/04/content-768x349.png 768w, https://seventhqueen.com/wp-content/uploads/2022/04/content-1536x698.png 1536w, https://seventhqueen.com/wp-content/uploads/2022/04/content-45x20.png 45w, https://seventhqueen.com/wp-content/uploads/2022/04/content.png 1783w)
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.
Style
![](https://seventhqueen.com/wp-content/uploads/2022/04/cart-style-1024x448.png 1024w, https://seventhqueen.com/wp-content/uploads/2022/04/cart-style-300x131.png 300w, https://seventhqueen.com/wp-content/uploads/2022/04/cart-style-768x336.png 768w, https://seventhqueen.com/wp-content/uploads/2022/04/cart-style-1536x672.png 1536w, https://seventhqueen.com/wp-content/uploads/2022/04/cart-style-45x20.png 45w, https://seventhqueen.com/wp-content/uploads/2022/04/cart-style.png 1841w)
Within this section, you can configure the styling to the contents of the cart widget.
Advanced
![](https://seventhqueen.com/wp-content/uploads/2022/04/cartavanced-1024x454.png 1024w, https://seventhqueen.com/wp-content/uploads/2022/04/cartavanced-300x133.png 300w, https://seventhqueen.com/wp-content/uploads/2022/04/cartavanced-768x341.png 768w, https://seventhqueen.com/wp-content/uploads/2022/04/cartavanced-1536x681.png 1536w, https://seventhqueen.com/wp-content/uploads/2022/04/cartavanced-45x20.png 45w, https://seventhqueen.com/wp-content/uploads/2022/04/cartavanced.png 1842w)
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.
![](https://seventhqueen.com/wp-content/uploads/2022/04/update-1024x446.png 1024w, https://seventhqueen.com/wp-content/uploads/2022/04/update-300x131.png 300w, https://seventhqueen.com/wp-content/uploads/2022/04/update-768x334.png 768w, https://seventhqueen.com/wp-content/uploads/2022/04/update-1536x668.png 1536w, https://seventhqueen.com/wp-content/uploads/2022/04/update-45x20.png 45w, https://seventhqueen.com/wp-content/uploads/2022/04/update.png 1813w)
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.
Conclusion
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