Checkout Form Element

The Checkout Form Element is one of three Special Item Elements that have very specific jobs. You will find this Element on the Special tab, when adding a new container on a WooCommerce enabled site.

This Element is only needed in special situations. It is not a visual element, but merely a technical one, to solve limitations with WooCommerce checkouts.

The checkout in WooCommerce works as any other form on a website, utilizing HTML form tags and a submit button. Since you can move around Avada’s checkout elements on your custom checkout page as you like, we add wrapping form tags automatically, around the whole post content. In general, this approach works fine for simple checkouts.

In some cases though, you may add elements to your checkout page, that use HTML form tags themselves. This could break the functionality. The reason is, that then you would have a form tag within a form tag. The special checkout form element makes it possible to limit your checkout form tag to the area where it should be. If you make use of it, the HTML form tags will be placed exactly at the position where you put the element.

As an example, suppose you have the Woo Cart Coupon Element on the checkout page. It creates its own form tags to be able to apply the coupon correctly. Now, if you don’t use the special form checkout element, you would exactly run into issues with the tags. To avoid that, you could add the Woo Cart Coupon Element to a first container, then add the special Checkout Form element, then a container with all your other checkout elements, and then another special Checkout Form element. The two special elements would then serve as opening and closing HTML form tags for the WooCommerce checkout.