# Checkout Elementor Widget
After designing your own checkout form using [**Checkout Builder,**](https://docs.stylemixthemes.com/checkout-custom-fields-builder-for-woocommerce/plugin-features/checkout-builder) 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
