Cart Widgets
Redesign your WooCommerce cart page with powerful, fully customizable widgets.
Overview
How Cart Widgets Work: Cart widgets are designed for Cart templates. They automatically integrate with WooCommerce's cart functionality including quantity updates, coupon application, and AJAX cart updates.
The Cart category contains 6 widgets that cover every element of a WooCommerce cart page. Use them inside a Cart template built with the Template Builder to create fully custom cart page layouts.
All widgets are registered under the mpd-cart-checkout Elementor category and dynamically integrate with WooCommerce’s cart session data.
MPD Cart Table
The main cart items table that displays all products currently in the customer’s cart. Each row shows the product image, name, price, quantity input, line subtotal, and a remove button. Supports AJAX quantity updates so customers can adjust quantities without a page reload.
Cart Table widget — product rows with quantity controls
Key Features
- Displays product image, name, price, quantity input, subtotal, and remove button per row
- AJAX quantity update — changes reflect instantly without page reload
- Responsive table layout that adapts to mobile screens
- Table header and cell border styling controls
- Header background and text color customization
- Product image size control (thumbnail dimensions)
- Full typography controls for product name, price, and subtotal
- Update Cart button with custom colors, typography, and border-radius styling
MPD Cart Totals
The cart summary section displaying subtotal, shipping costs, tax, and the order total. Includes a prominent “Proceed to Checkout” button and optionally shows the shipping calculator for customers to estimate shipping costs.
Cart Totals widget — order summary with checkout button
Key Features
- Displays cart subtotal, shipping cost, tax, and grand total
- “Proceed to Checkout” button with full color, typography, and hover styling
- Shipping calculator display for cost estimation
- Background color and border styling for the totals container
- Row border and spacing customization
- Typography controls for labels and values
- Button width, padding, and border-radius options
MPD Cross Sells
Displays products configured as cross-sells in WooCommerce product settings. Cross-sell products are typically shown on the cart page to encourage customers to add complementary items before checkout.
Cross Sells widget — complementary product recommendations
Key Features
- Displays products linked as cross-sells in WooCommerce product data
- Grid layout with configurable number of columns (1–6)
- Control over the number of cross-sell products displayed
- Show/hide toggles for product image, title, price, rating, and add to cart button
- Product card styling with border, shadow, and spacing controls
- Responsive column breakpoints for tablet and mobile
- Section heading text customization
MPD Coupon Form
A coupon code input field with an apply button that lets customers enter discount codes directly on the cart page. Displays inline validation messages for successful application or error feedback.
Coupon Form widget — discount code input and apply button
Key Features
- Coupon code text input with placeholder text customization
- Apply button with customizable text, colors, and hover states
- Inline validation messages for success and error states
- Input field styling: border, background, text color, padding, and border-radius
- Button color, typography, size, and border-radius controls
- Layout options: inline (side by side) or stacked (input above button)
- AJAX coupon application without page reload
MPD Mini Cart
The most complex cart widget with 1189 lines of code. A flyout or dropdown mini cart designed primarily for use in site headers. Displays a cart icon with a dynamic item count badge that reveals a full cart summary on hover or click.
Mini Cart widget — header cart icon with flyout panel
Key Features
- Cart icon button with dynamic item count badge
- Dropdown display on hover or click interaction
- Product list with thumbnail, name, quantity, price, and remove button
- Cart subtotal display within the mini cart panel
- View Cart and Checkout action buttons
- Trigger icon selection and badge color/position styling
- Position options: dropdown panel or offcanvas sidebar
- Full AJAX support for real-time updates when items are added or removed
- Empty cart state with customizable message
- Great for use in site headers alongside the Header Cart global widget
Pro Tip: The Mini Cart widget pairs perfectly with the Header Cart global widget. Place the Mini Cart in your site header template for a persistent cart access point that updates in real time as customers add products from any page.
MPD Empty Cart
Displayed when the customer’s cart has no items. Provides a customizable empty cart message, an optional illustration or icon, and a “Return to Shop” button to guide customers back to browsing products.
Empty Cart widget — empty state with return to shop button
Key Features
- Customizable empty cart message text and typography
- Icon or image display for the empty state illustration
- Icon size, color, and spacing controls
- “Return to Shop” button with custom link URL
- Button color, typography, border-radius, and hover state styling
- Layout alignment options (left, center, right)
- Spacing controls between icon, message, and button
AJAX Powered: All cart widgets support AJAX operations. Quantity changes, coupon applications, and item removal happen without page reload for a smooth shopping experience.