> For the complete documentation index, see [llms.txt](https://docs.super-forms.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.super-forms.com/features/integrations/woocommerce-checkout/replacing-the-add-to-cart-on-a-product-page-with-a-form.md).

# 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.