# WooCommerce Checkout Block

**Checkout Custom Fields Builder for the WooCommerce** plugin has been integrated with the **Checkout Block of WooCommerce for Gutenberg**.&#x20;

Here you can check the official documentation of the Checkout Block by **WooCommerce**:

{% embed url="<https://woocommerce.com/document/woocommerce-store-editing/customizing-cart-and-checkout/checkout-block/>" %}

Once you install the plugin, you will get the option to choose one of the page builders:

<figure><img src="https://1670878215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbK04jKOIhkmxYUGKxuyO%2Fuploads%2FIH7PkW2Bb8S8DOYQe8mD%2Fimage.png?alt=media&#x26;token=2a9ec1b3-c22c-4a02-9db2-06f643b02f34" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Checkout Builder** Interface **varies by the page builder** that you have selected.
{% endhint %}

<figure><img src="https://1670878215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbK04jKOIhkmxYUGKxuyO%2Fuploads%2FsG7u5ajbYXAGbTV93gkb%2Fimage.png?alt=media&#x26;token=96383c2d-6722-456e-a1b8-d5d2990b2a2e" alt=""><figcaption><p>Interface of Checkout Builder for Gutenberg Checkou</p></figcaption></figure>

Once you add or edit the elements, you get the setting Position. You have to select one of the available predefined sections of the **Checkout Block of WooCommerce** where the element should be displayed:

<figure><img src="https://1670878215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbK04jKOIhkmxYUGKxuyO%2Fuploads%2FfRiP06KUqZNoA8p93pFb%2Fimage.png?alt=media&#x26;token=1d420f8d-588d-428f-a02e-07a3214c0020" alt=""><figcaption></figcaption></figure>

Available Positions are:

* Contact Information
* Billing Adress
* Shipping Adress
* Shipping Methods

You can modify the **WooCommerce Checkout Block** preferences by clicking **the Edit Checkout Page** button:

<figure><img src="https://1670878215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbK04jKOIhkmxYUGKxuyO%2Fuploads%2FI2YawJGeRRWRvtfjz9hV%2Fimage.png?alt=media&#x26;token=bda5fb31-07c5-49dd-b047-707996a8f048" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1670878215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbK04jKOIhkmxYUGKxuyO%2Fuploads%2FTpF6MGH0uwnwXSE601gc%2Fimage.png?alt=media&#x26;token=3294cc89-4fb3-44a8-8e92-576dceb46473" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This checkout block is fully **controlled** and **maintained** by [WooCommerce](https://woocommerce.com/). For more information kindly check out the official documentation.
{% endhint %}

{% embed url="<https://woocommerce.com/document/woocommerce-store-editing/customizing-cart-and-checkout/checkout-block/>" %}
