AeroCheckout- Custom WooCommerce Checkout Pages

  1. Home
  2. Docs
  3. AeroCheckout- Custom WooCommerce Checkout Pages
  4. Fields
  5. How to Add Coupon Field & Make It Collapsible?

How to Add Coupon Field & Make It Collapsible?

The coupon field is a very important field for your checkout page. You can add it to your checkout form by simply dragging it from the right-hand panel and placing it into any section you want.

You can make it less prominent so that users do not go hunting for the code by making the field collapsible.

Let’s learn how to do that.

Step 1: Go to the ‘Fields’ tab of your Aero Checkout page

Pick the “Coupon” field from the advanced fields category and drop in the section where you want to display the coupon field.


Step 2: Add Label and Success Message

The label is the name of your coupon code field. The success message shows up after the coupon code has been successfully applied.

Hover over the coupon field and click on the pencil icon:

Here you’ll see the option to add custom text:

You can use the below-mentioned merge tags to craft the message:

{{coupon_code}} – to display coupon code.
{{coupon_value}} – to display coupon value.

Step 3: Hit Update and Save Changes


Coupon Field Preview:

Make The Coupon Field Collapsible

You can also make the Coupon Field collapsible on the checkout page.

Simply check the checkbox labeled as “Collapsible” in the field settings.

Collapsible Coupon Field Preview: