Coupon code in Check out page before payment methods

Hi, How can I move the coupon code field from the top to before payment methods or before the TOTAL? and remove the text of “do you have a coupon code?”

Attachments:

You must be logged in to view attached files.

Hello,

Sorry but there is no option in Theme Settings available for that.

It requires customizations and this is beyond our limitations and support policy.

Regards.
Xtemos Studios

In a previous topic, you were able to provide a custom css for another user, why can’t you provide the same here?

https://xtemos.com/forums/topic/i-want-the-coupon-area-on-the-payment-page-to-be-like-on-the-cart-page/

Hello,

That custom CSS code is only to display the coupon code without the click not changing the position of the coupon code. You can not change the position but only open and show always without click on the checkout page. If you want only this then you can use the same custom CSS code.

Best Regards.

I used this code but not able to move correctly below the last field.

body .checkout_coupon {
display: block !important;
position: absolute;
bottom: 0;
left: 0;
}

Attachments:

You must be logged in to view attached files.

Hello,

Sorry sir, but as I already told you that it is not possible to change the position of the coupon code in the checkout page with custom CSS code. It requires customization in the plugin’s file. This is not possible without the code customization.

Best Regards.

just as give me correct css code, but poor support on this one.

Hi,

The WooCommerce checkout page, by default, consists of three separate and independent forms depending on the enabled options: the login form, the coupon form, and the main checkout form. Their layout and boundaries are illustrated in this screenshot (https://monosnap.com/file/bV6r8HQLy4sBOhibXFbRZswZtxVG6d). A technical limitation of WooCommerce is that one form on the checkout page cannot be placed inside another form (e.g., the coupon form cannot be embedded into the checkout form). Doing so would cause both forms to malfunction.

For this reason, even if modifying the layout with custom CSS alone were insufficient and required editing the HTML structure of the checkout, such changes would result in critical errors and render the checkout non-functional.

In the topic you referred to (link https://xtemos.com/forums/topic/i-want-the-coupon-area-on-the-payment-page-to-be-like-on-the-cart-page/), the client requested only a visual change to the coupon form to make it resemble the coupon form on the checkout page. This can be achieved with custom CSS alone, and we can provide you with similar custom code if you wish. However, the client did not request to move the coupon form inside the checkout form, which is technically impossible due to the limitations described above.

Moving the coupon form using only CSS will not produce the desired result. Using the position: absolute property removes the element from the normal document flow. As a result, other elements are positioned as if it does not exist, which prevents proper alignment, positioning relative to neighboring elements, and reserving space for it. For the same reasons, it is impossible to position an absolutely positioned element directly below the right column of the checkout form. This is because the two columns have different heights, and for the element to appear directly beneath the right column, it must physically reside within that column in the HTML structure. This approach becomes even more problematic on screens with varying widths, such as tablets and mobile devices.

Given the above, such a solution would be incomplete and non-functional. Therefore, we cannot provide this approach, as it does not meet the requirements for a reliable and effective fix.

Kind Regards

[Author]

Posts