Return to previous page

Checkout page fields need to be hidden, moved or deleted

This topic has 4 replies, 2 voices, and was last updated 1 days, 13 hours ago ago by Luca Rossi

Safe Desires

Participant

March 29, 2025 at 00:18

The visual layout is not very appealing. Can the “Have a coupon” text be deleted while keeping the Coupon code field and button?

The same goes for “Coupon Code applied successfully.” Since the coupon code and amount are shown at another part of the screen, there is no point in this.

Also, how can I control the formatting and margins of Returning Customer? The spacing between all four messages is too large and the first and only thing customers should see is to be able to initiate the purchase.

In the 2nd screenshot, I am showing the design and location of coupon code fields that are more common. Is there a way to place it above the total price?

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.

#439090 Copied Theme version: 9.4.9

3 Answers
Luca Rossi

Support staff

March 29, 2025 at 15:20
Hi @Safe Desires,

Please try adding this custom CSS codes under XStore > Theme Options > Theme Custom CSS > Global CSS:

.woocommerce-checkout .e-woocommerce-notices-wrapper { margin-bottom: 0; } .woocommerce-checkout .e-woocommerce-notices-wrapper .woocommerce-info { margin-top: 2rem; } .woocommerce-checkout .e-woocommerce-notices-wrapper .woocommerce-info:nth-child(3), .woocommerce-checkout .e-woocommerce-notices-wrapper .woocommerce-message { display: none !important; } .woocommerce-checkout .elementor-widget.elementor-widget-woocommerce-notices { margin-bottom: 5px; }

https://prnt.sc/NsXU9oS0F5Ap

Hope it helps!
#439160 Copied
Safe Desires

Participant

March 29, 2025 at 17:34

Thank you. this partially worked. The “Have a Coupon” message still appears. I tried adding:
.woocommerce-checkout .woocommerce-form-coupon-toggle {
display: none !important;
}
But that did not work.

Going back to my original question, is it possible to place [woocommerce_checkout_coupon_form] in the spot where I am pointing to? It makes more sense to have the coupon field next to where the result would be shown instead of completely different areas of the page.

Files is visible for topic creator and
support staff only.

#439170 Copied
Luca Rossi

Support staff

March 30, 2025 at 16:01
Hi @Safe Desires,

Can you please update the custom CSS codes to this?

.woocommerce-checkout .e-woocommerce-notices-wrapper { margin-bottom: 0; } .woocommerce-checkout .e-woocommerce-notices-wrapper .woocommerce-info { margin-top: 2rem; } .woocommerce-checkout .e-woocommerce-notices-wrapper .woocommerce-info:nth-child(2), .woocommerce-checkout .e-woocommerce-notices-wrapper .woocommerce-message { display: none !important; } .woocommerce-checkout .elementor-widget.elementor-widget-woocommerce-notices { margin-bottom: 5px; }

Going back to my original question, is it possible to place [woocommerce_checkout_coupon_form] in the spot where I am pointing to? It makes more sense to have the coupon field next to where the result would be shown instead of completely different areas of the page.

Unfortunately, it is not possible to move the coupon form inside the checkout form, as they are two separate forms within the system. However, we recommend trying the following solution, which may help you achieve a similar result:

https://www.businessbloomer.com/woocommerce-move-remove-coupon-form-cart-checkout/

We hope this proves helpful. Should you have any further questions or need additional assistance, please do not hesitate to contact us.

Best regards,
The 8Theme Team
#439191 Copied
Viewing 4 results - 1 through 4 (of 4 total)