Checkout Widgets
Build a high-converting checkout experience with dedicated widgets for every checkout element.
Overview
Checkout widgets integrate deeply with WooCommerce’s checkout process, including order validation, payment gateway rendering, and order placement. They respect all WooCommerce checkout hooks.
The Checkout category contains 10 widgets that cover every element of a WooCommerce checkout page. Use them inside a Checkout template built with the Template Builder to create fully custom checkout page layouts.
All widgets are registered under the mpd-cart-checkout Elementor category and dynamically integrate with WooCommerce’s checkout session data.
MPD Billing Form
Renders all standard WooCommerce billing address fields for the customer to fill in during checkout. Includes fields for first name, last name, company, country, street address, city, state/county, postcode/ZIP, phone, and email address.
Billing Form widget — customer billing address fields
Key Features
- All standard WooCommerce billing fields: name, company, country, address, city, state, zip, phone, email
- Show/hide individual fields to simplify the checkout form
- Custom labels and placeholder text for each field
- Layout options: 1-column or 2-column field arrangement
- Field border styling, background color, and border-radius controls
- Label color and typography customization
- Input field typography, text color, and focus state styling
- Spacing controls between fields
MPD Shipping Form
Displays shipping address fields when the customer wants to ship to a different address than the billing address. Includes the “Ship to a different address?” checkbox that toggles the shipping fields visibility.
Shipping Form widget — shipping address with toggle
Key Features
- “Ship to a different address?” checkbox toggle
- Same field set as billing: name, company, country, address, city, state, zip
- Show/hide individual fields to match your store’s requirements
- Custom labels and placeholder text for each field
- Layout options: 1-column or 2-column field arrangement
- Field border, background, and border-radius styling
- Label and input typography customization
- Checkbox styling for the toggle control
MPD Order Review
The order summary table that displays all cart items with their quantities and prices, along with subtotal, shipping cost, tax, and the overall order total. Gives customers a final review of their order before placing it.
Order Review widget — order summary with line items and totals
Key Features
- Order summary table showing product name, quantity, and line price
- Subtotal, shipping, tax, and grand total rows
- Table header background and text color customization
- Row border styling and alternating row colors
- Typography controls for product names, prices, and total labels
- Table border and cell padding controls
- Responsive layout that adapts to mobile screens
MPD Payment Methods
Renders all active WooCommerce payment gateways for the customer to select from. Each gateway displays its name, description, and any additional form fields (such as credit card inputs). Works with any WooCommerce-compatible payment plugin.
Payment Methods widget — gateway selection with descriptions
Key Features
- Renders all active WooCommerce payment gateways dynamically
- Radio button or accordion-style gateway selection
- Shows gateway descriptions and embedded payment forms (e.g., credit card fields)
- Gateway label typography and color customization
- Active/selected gateway highlight styling
- Border, background, and spacing controls for the gateway list
- Payment gateway icon display
MPD Checkout Coupon
A collapsible coupon code form on the checkout page. Displays a “Have a coupon?” toggle link that expands to reveal the coupon input field and apply button, allowing customers to enter discount codes during checkout.
Checkout Coupon widget — collapsible coupon code form
Key Features
- Collapsible “Have a coupon?” toggle link
- Coupon code text input with placeholder customization
- Apply button with custom text, colors, and hover states
- Input field styling: border, background, text color, padding, and border-radius
- Button color, typography, size, and border-radius controls
- Toggle link text and color customization
- Success and error message styling
MPD Place Order
The checkout submit button that places the order. Optionally includes the terms & conditions checkbox (when enabled in WooCommerce settings) and privacy policy text, providing the final step for customers to complete their purchase.
Place Order widget — submit button with terms & conditions
Key Features
- Checkout submit button with customizable button text
- Terms & conditions checkbox (if enabled in WooCommerce settings)
- Privacy policy text display
- Button text, background color, hover color, and text color controls
- Button icon selection and positioning
- Full-width button option
- Button typography, padding, and border-radius styling
- Terms text typography and link color customization
MPD Order Notes
An optional textarea field where customers can leave special instructions or notes about their order, such as delivery preferences or gift messages.
Order Notes widget — optional customer notes textarea
Key Features
- Optional order notes textarea for customer instructions
- Custom label text and typography
- Placeholder text customization
- Textarea height, border, background, and border-radius controls
- Input text typography and color styling
- Label spacing and alignment options
MPD Checkout Login
A collapsible login form for returning customers to sign in before checkout. Displays a “Returning customer?” toggle that expands to reveal username and password fields with a login button.
Checkout Login widget — returning customer login form
Key Features
- Collapsible “Returning customer?” toggle link
- Username and password input fields
- “Remember me” checkbox
- “Lost your password?” link
- Login button with custom text, colors, and hover states
- Input field styling: border, background, padding, and border-radius
- Toggle link text and color customization
- Form layout and spacing controls
MPD Multi-Step Checkout Pro
The most advanced checkout widget with 2755 lines of code. Converts the standard single-page checkout into a guided, step-by-step wizard. Each step is independently styled and validated before the customer can proceed to the next.
Multi-Step Checkout widget — step-by-step checkout wizard
Key Features
- Converts standard checkout into a step-by-step wizard
- Configurable steps: Login/Info → Billing → Shipping → Payment → Review → Place Order
- Step navigation bar with progress indicator
- Each step is independently styled with its own colors and typography
- Field validation between steps — prevents advancing with incomplete data
- Previous/Next navigation buttons with custom styling
- Active step, completed step, and inactive step visual states
- Responsive mobile layout that adapts the progress bar and step content
- Step titles and icons customization
- Smooth step transition animations
Premium Feature: Multi-Step Checkout is a Premium feature. Upgrade to Magical Shop Builder Pro to unlock the step-by-step checkout wizard that dramatically improves checkout conversion rates.
MPD Express Checkout
Provides quick checkout options for supported payment gateways, offering a streamlined checkout flow. Renders express payment buttons such as Apple Pay, Google Pay, and PayPal Express so customers can complete their purchase in fewer steps.
Express Checkout widget — quick payment gateway buttons
Key Features
- Quick checkout options for supported payment gateways
- Apple Pay, Google Pay, PayPal Express style buttons
- Streamlined checkout flow with fewer steps
- Button layout and alignment controls
- Button size, spacing, and border-radius styling
- Section heading and separator text customization
- Responsive layout for mobile devices
WooCommerce Block Checkout: If your site uses WooCommerce Block Checkout, the plugin automatically detects this. Custom checkout templates work best with the classic WooCommerce checkout shortcode.