WooCommerce’s Checkout page is one of the most theme-dependent pages on a store – a mismatched checkout can undermine trust right at the point of payment.
The Woo Checkout widget replaces the default shortcode block with a version you can restyle field-by-field in Elementor, without touching the checkout logic itself.
For the full settings tour of every Woo Builder widget, see Woo Builder Settings Overview.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Prerequisite: Elementor (free) installed and active.
- Prerequisite: WooCommerce installed and active, with at least one published product.
- Edition: all Woo Builder widgets are part of The Plus Addons for Elementor Pro – a Pro licence is required.
- Widget to enable: go to The Plus Addons > Widgets, search for Woo Checkout and turn its toggle on.
Steps
- Add the Woo Checkout widget to the page assigned as your WooCommerce Checkout page.
- From Style, choose Style 1 (the default) or Style 2 for the overall two-column layout.
- Set Left Section Width to control how much space the billing/shipping form takes versus the order-summary column.
Section Heading Text
Under Extra Options, override each section’s heading text independently: Billing Heading, Shipping Heading, Your Order Heading, Apply Coupon and Place Order.
Test the page with a real product in the cart – Checkout won’t render its full form content on an empty cart.
Settings Overview
| Setting | What it does | Default |
|---|---|---|
| Style | Style 1 or Style 2 two-column layout. | Style 1 |
| Left Section Width | Space given to the billing/shipping column. | Theme default |
| Section heading overrides | Custom text for each checkout section’s heading. | WooCommerce defaults |
