---
title: "How to Edit WooCommerce Checkout Page in Elementor?"
url: https://theplusaddons.com/docs/edit-woocommerce-checkout-page-in-elementor/
date: 2023-12-07
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/12/How-to-Edit-WooCommerce-Checkout-Page-in-Elementor_-1024x536.jpg
word_count: 290
---

# How to Edit WooCommerce Checkout Page in Elementor?

## 

- Woo Checkout replaces the default shortcode block and lets Elementor users restyle the checkout field by field without changing the checkout logic.
- The Plus Addons for Elementor Pro requires Elementor free and WooCommerce installed and active, plus at least one published product, before Woo Checkout renders fully.
- Style 1 and Style 2 control the two-column checkout layout, while Left Section Width adjusts space between the billing/shipping form and the order-summary column.

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](https://theplusaddons.com/docs/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.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/woocommerce-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Prerequisite:** [WooCommerce](https://wordpress.org/plugins/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.

![Woo Checkout widget placed on the Checkout page, Style control](https://theplusaddons.com/wp-content/uploads/2026/09/woo-builder-checkout-widget.webp)

## 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**.

![Section heading text overrides](https://theplusaddons.com/wp-content/uploads/2026/09/woo-builder-checkout-styles.webp)

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 |

## Related Docs

- [Woo Builder Settings Overview](https://theplusaddons.com/docs/woo-builder-settings-overview/)- [How to Create WooCommerce Multi Step Checkout in Elementor?](https://theplusaddons.com/docs/create-woocommerce-multi-step-checkout-in-elementor/)- [How to Edit WooCommerce Cart Page in Elementor?](https://theplusaddons.com/docs/edit-woocommerce-cart-page-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before editing the WooCommerce checkout page in Elementor?**
A: Elementor free and WooCommerce both need to be installed and active, and WooCommerce needs at least one published product. The checkout widget is also part of The Plus Addons for Elementor Pro, so a Pro licence is required. In practice, that matters because Checkout will not render its full form content on an empty cart, so testing with a real product is part of the setup, not an optional extra.

**Q: Why is the checkout page not showing the full form content?**
A: An empty cart is the usual blocker here. The page notes that Checkout will not render its full form content unless there is a real product in the cart, so a blank cart can make the widget look broken when it is really just waiting for valid checkout data. That makes cart testing the fastest way to confirm the page is working correctly.

**Q: How do I change the layout of the WooCommerce checkout page?**
A: The Woo Checkout widget gives you two overall layout choices: Style 1 or Style 2. Style 1 is the default, and Style 2 gives you a two-column layout. The key control here is that you are changing presentation only, not checkout logic, so it is useful when the default theme styling makes the payment step feel inconsistent with the rest of the store.

**Q: Can I control how much space the billing form gets on checkout?**
A: The Left Section Width setting controls how much space the billing and shipping form takes versus the order-summary column. That matters because checkout pages are sensitive to balance: too little room on the form side can make fields feel cramped, while too much can push order details out of view. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH exposes this as a layout tuning option inside Elementor.

**Q: Can I rename checkout section headings without changing WooCommerce logic?**
A: The Extra Options area lets you override section headings independently, including Billing Heading, Shipping Heading, Your Order Heading, Apply Coupon and Place Order. That is useful when you want clearer microcopy or a more branded checkout experience without touching how checkout works behind the scenes. It changes what shoppers read, not the underlying purchase flow.

**Q: Where can I find more settings for Woo Builder widgets?**
A: [Woo Builder Settings Overview](https://theplusaddons.com/docs/woo-builder-settings-overview/) covers the full settings tour for every Woo Builder widget. That is the right reference point when you want to understand how this checkout widget fits into the wider Woo Builder system from The Plus Addons for Elementor. If you are comparing related flows, [How to Create WooCommerce Multi Step Checkout in Elementor?](https://theplusaddons.com/docs/create-woocommerce-multi-step-checkout-in-elementor/) and [How to Edit WooCommerce Cart Page in Elementor?](https://theplusaddons.com/docs/edit-woocommerce-cart-page-in-elementor/) are also linked from the page.