# Checkout Builder

[**CCFBW**](#user-content-fn-1)[^1] is a powerful WordPress plugin designed to enhance and redesign the WooCommerce checkout process using its intuitive Checkout Builder. 

## **Accessing the Checkout Builder**

To reach the Checkout Builder, follow these steps:

1. Navigate to the WordPress Dashboard.
2. Go to **WooCommerce**.
3. Select **Checkout Builder**.

<figure><img src="https://content.gitbook.com/content/bK04jKOIhkmxYUGKxuyO/blobs/86woXSMsjIUnUaEDck0e/image.png" alt=""><figcaption><p>Checkout Builder</p></figcaption></figure>

## **Checkout Builder: How to Manage Elements**

The Checkout Builder interface is divided into two main sections:

* **Left Side:** Contains the available elements that you can use to build your checkout form. Use the drag-and-drop functionality to add elements from the left side to the form on the right side.

<figure><img src="https://content.gitbook.com/content/bK04jKOIhkmxYUGKxuyO/blobs/qTD9PMDOwkVRRG84uMhx/image.png" alt=""><figcaption></figcaption></figure>

* **Right Side:** Displays the form with predefined sections. You can rename these sections and change their order, but you cannot delete or hide them.

<figure><img src="https://content.gitbook.com/content/bK04jKOIhkmxYUGKxuyO/blobs/3e2YBdcqyHGpyK1Q0PEv/image.png" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
After designing your own form, you need to add the [**CCFBW**](#user-content-fn-1)[^1]**'s**[ **Checkout widget**](https://docs.stylemixthemes.com/checkout-custom-fields-builder-for-woocommerce/plugin-features/checkout-elementor-widget) **for Elementor** to the WooCommerce checkout page.
{% endhint %}

[^1]: Checkout Custom Fields Builder for WooCommerce