Cart Page Widget
The Cart Page widget allows you to display the WooCommerce cart layout inside Elementor pages. This widget lets customers review cart items, update quantities, and proceed to checkout using a fully customizable Elementor layout.
The widget dynamically loads WooCommerce cart data including products, quantities, totals, and actions such as updating the cart or removing items. It helps you design a fully customized cart experience using Elementor.
This widget is typically used when creating a custom WooCommerce cart page layout with Elementor.
Part of WooCommerce Elementor Widgets #
The Cart Page widget is included in the WooCommerce widget collection available in Spexo Addons. These widgets allow you to design WooCommerce pages and product templates directly inside Elementor.
You can explore the full widget library on the WooCommerce Elementor Widget Collection.
When to Use the Cart Page Widget #
The Cart Page widget is used when you want to create a fully customized WooCommerce cart page layout using Elementor.
This widget displays the cart table, product quantities, subtotal values, and cart actions. It works well with widgets that Display Mini Cart Contents and Show Product Availability.
Requirements #
Before using the Cart Page widget make sure the required plugins and WooCommerce settings are configured.
- WooCommerce plugin installed and activated
- Products created in your WooCommerce store
- WooCommerce cart page configured
- Elementor page created for the cart layout
- Spexo Addons plugin installed and active
This widget works on Elementor pages designed as WooCommerce cart pages.
How To Set Up WooCommerce Cart Page Elementor #
First make sure that the WooCommerce plugin is installed and configured on your website.
To preview the cart page correctly inside the Elementor editor, you should add some products to your cart first.
To use the Cart Page element, create a new page and assign it as the WooCommerce Cart page.
Navigate to WooCommerce → Settings in your WordPress dashboard and open the Advanced tab. From there you can assign a page as your cart page.
Click on the Cart page option and select your preferred page from the dropdown. After selecting the page, click the Save Changes button.
How to Add the Cart Page Widget #
Follow these steps to add the Cart Page widget inside an Elementor page.
- Open the page where you want to create your cart layout.
- Edit the page using Elementor.
- Search for the Cart Page widget in the Elementor widget panel.
- Drag the widget into your page layout.
- The WooCommerce cart interface will appear automatically.
After adding the widget the WooCommerce cart layout will appear inside your Elementor page.
How To Configure The Content Settings #
Under the Content tab you will find several options such as General. These settings allow you to customize how the WooCommerce cart page content appears.
General #
From this section you can configure the main cart layout and adjust different cart components.
You can change the cart layout, update cart button text, and customize the cart totals section.
Inside the Totals subsection you can modify the totals title, alignment, and width.
Inside the Checkout subsection you can change the checkout button text and alignment.
You can also customize shipping update text, shipping alignment, and coupon label text.
Additionally, you can use slider controls to adjust input width, column gutter, and product summary spacing for different screen sizes.
How to Style Cart Page #
To customize the appearance of the Cart Page element, open the Style tab inside the Elementor editor.
Styles #
This section includes two main subsections: Wrappers and Table Cells.
In the Wrappers subsection you can customize borders and border radius.
In the Table Cells subsection you can adjust borders and padding for cart table cells.
You can also apply background color and box shadow styling.
Table Heading #
This section allows you to customize the table heading style.
You can adjust heading color, background color, typography, padding, and alignment.
Others #
From the Table Cell settings you can adjust cell color, background color, typography, spacing, and alignment.
You can also customize styling for Forms, Notices, and Cart Totals.
Additionally you can style buttons and the checkout button appearance.
Final Outcome #
By following these steps you can easily create a customized WooCommerce Cart page using Elementor and the Cart Page element.
Common Issues and Fixes #
If the cart does not display confirm that WooCommerce is properly configured and the page is assigned as the cart page in WooCommerce settings.
If the widget does not appear in Elementor review the Widget Configuration Guide and confirm the widget is enabled.
Frequently Asked Questions #
Why is the cart empty? #
The cart will only display items after a customer adds products to the WooCommerce cart.
Can I customize the cart design? #
Yes. The Cart Page widget allows you to customize layout styles, colors, typography, and spacing using Elementor controls.
Does this replace the default WooCommerce cart page? #
Yes. This widget allows you to design a fully customized WooCommerce cart page using Elementor.
Getting stuck? Feel free to Contact Our Support for further assistance.
Navigation:
