# 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="https://852124118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6Kz0R6S7z3Fb6KLZYVE%2Fuploads%2F8xHnkVpjQuMZqdI0oUeo%2Freplace-default-add-to-cart-with-form-woocommerce.png?alt=media&#x26;token=8b4335b1-8a18-4fbe-a35c-3ab0ae951ef7" 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="https://852124118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6Kz0R6S7z3Fb6KLZYVE%2Fuploads%2FF0ZypxMVwitvYJb0YbML%2Fremove-title-rating-price-short-description-woocommerce.png?alt=media&#x26;token=3be2979d-b095-4ed2-93b4-3f556a9d3b22" 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="https://852124118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6Kz0R6S7z3Fb6KLZYVE%2Fuploads%2F5c5S6EXtEoa5yMbGnVKK%2Fsuper-forms-save-global-settings.png?alt=media&#x26;token=0346a010-ee15-42a5-987f-70ac63ffaf9a" 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.