# Replacing the "Add to cart" on a product page with a form

By default WooCommerce has a so called "Add to cart" button with a "Quantity" field on the product pages. In case you want to replace this section/area with a form, you can do the following:

1. Make sure you are running Super Forms **v4.9.800** or higher

2. Go to **Super Forms > Settings > WooCommerce Checkout**:<br>

   <figure><img src="https://webrehab.zendesk.com/hc/article_attachments/360018126718/mceclip0.png" alt="WooCommerce Checkout settings"><figcaption><p>WooCommerce Checkout settings</p></figcaption></figure>

3. Map the form with the product under the **Replace the default "Add to cart" area** setting:<br>

   <figure><img src="/files/ouMrWS09XFHUFzWUK9Wp" alt="Replacing the default &#x22;Add to cart&#x22; area/button with a custom form."><figcaption><p>Replacing the default "Add to cart" area/button with a custom form.</p></figcaption></figure>

4. Optionally hide the **Title**, **Rating**, **Price** and or **Short description** from the product page:<br>

   <figure><img src="/files/Bnrn6QWcsqdX0BMDLRcx" alt="Removing the title, rating, price and short description for WooCommerce products on the front-end."><figcaption><p>Removing the title, rating, price and short description for WooCommerce products on the front-end.</p></figcaption></figure>

5. Click **Save Settings**<br>

   <figure><img src="/files/0MHNL9eDoyPDqj0k3cnF" alt="Save WooCommerce settings"><figcaption><p>Save WooCommerce settings</p></figcaption></figure>

6. Visit the product on the Front-end and confirm that the default "Add to cart" button is replaced with the form.


---

# 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.super-forms.com/features/integrations/woocommerce-checkout/replacing-the-add-to-cart-on-a-product-page-with-a-form.md?ask=<question>
```

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.