# Checkout Elementor Widget
After designing your own checkout form using [**Checkout Builder,**](/checkout-custom-fields-builder-for-woocommerce/plugin-features/checkout-builder.md) you have to add the special widget of [CCFBW ](#user-content-fn-1)[^1]to your WooCommerce Checkout page. This guide provides step-by-step instructions on how to add the [**CCFBW**](#user-content-fn-1)[^1] **Elementor** **widget** to the WooCommerce Checkout page using Elementor.
## **Adding the Widget to the WooCommerce Checkout Page**
1. Click on the **Edit Page** button to open the WooCommerce Checkout page.
2. On the WooCommerce Checkout page, click on the **Edit with Elementor** button.
3. **Add the Checkout Form Widget:**
* In the Elementor editor, use the search bar to search for the **"Checkout Form"** widget.
* Drag and drop the **"Checkout Form"** widget onto the desired section of the page.
4. **Save Your Changes:**
* After adding the Checkout Form widget, make sure to save your changes by clicking the **Update** button in Elementor.
{% hint style="success" %}
You have successfully added the [**CCFBW**](#user-content-fn-1)[^1]'s **Checkout widget** to the WooCommerce Checkout page using Elementor.
{% endhint %}
## Widget Parameters
After adding the widget to your WooCheckout page, you can modify its look by its parameters in Elementor:
Widget Parameters
### Form Header
The Form Header section is responsible for changing the texts in the Header part of the Checkout form:
Here is the result:
### Fields and Sections
In the next settings, you can set the width of the fields in different sections—**Billing Details, Shipping Details, and Order Details**—relative to the width of the form:
Available widths are:
* `1/1` **(full width)**
* `1/2` **(half-width)**
* `1/3` **(one-third width)**
* `2/3` **(two-thirds width)**
### Coupon
In the **Coupon** section, you can modify the text for the special section used for entering discount coupons in WooCommerce:
Here is how it will look in the front:
### Payment Gateways
In the Payment Gateways section, you can modify the text for the special section used for selecting payment methods in WooCommerce:
Here is how it will look in the front:
Payment Gateways and Checkout Button
There is also an availability to change the text of the Checkout Button ('Place Order' in the previous screenshot).
{% hint style="info" %}
You can further customize the appearance, such as changing the **color, background, behavior, font style,** etc., in the **Style** and **Advanced** tabs of Elementor.
{% endhint %}
[^1]: Checkout Custom Fields Builder for WooCommerce
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.stylemixthemes.com/checkout-custom-fields-builder-for-woocommerce/plugin-features/checkout-elementor-widget.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.