Cupon formular

Hi,

On the checkout page, I moved the coupon form from the top of the page to the right side, under the order total. However, after moving it, the coupon form is always visible instead of being hidden/collapsed as it was when placed in the top area.

Could you please help me understand how to keep the coupon form hidden (collapsed) in this new position as well?

Thank you.

Attachments:

You must be logged in to view attached files.

Hello,

Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site and then check the issue. I am sure your issue will be solved. Then Activate the 3rd party plugins one by one and check which plugin is creating the issue for you.

Otherwise, if the issue still exists then keep the 3rd party plugins deactivated and share the WP admin login details of your site so I will check and give you a possible solution.

Best Regards.

Hi,

Check private.
Maybe this area can’t be moved as I do it.
Let me know if you have a solution.

Hi,

Unfortunately, the form layout you have created is technically impossible in WooCommerce Checkout. By default, without a builder, the WooCommerce checkout form is positioned at the bottom, while the coupon form is at the top; these two forms sit near each other but are never nested. However, you have configured your page in a way that places one HTML form inside another.

Nesting a HTML form inside another is strictly prohibited because it creates logical ambiguity, making it impossible for browsers to determine which data to submit or which action to trigger. Consequently, browser parsers fix the invalid HTML by ignoring nested tags or prematurely closing the parent form, which breaks the DOM structure, disrupts JavaScript, and hinders accessibility for screen readers.

To ensure the WooCommerce checkout functions correctly within our builder, we followed the same structural rules as the default setup. This is why the checkout creation is divided into two sections: Checkout form and Checkout top content. The coupon form must be placed exclusively within the Checkout top content area. Our theme does not provide a standard way to add it to the Checkout form, and even if it is manually copied inside, it will not function due to the conflict caused by nesting one form within another.

Kind Regards

Hi,

Maybe it’s a topic for future features, is more natural to be place in checkout form.

Thank you for the feedback. We will consider this as a feature request for our future updates.

Kind Regards

One more question, is there any option to make the cupon field always open?

Hello,

Try to add this CSS in Theme Settings > Custom CSS:

.checkout_coupon {
    display: block !important;
    width: 100% !important;
    border: 1px solid #e1e1e1 !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

/* Optional: Hide the "Click here to enter your code" text */
.woocommerce-form-coupon-toggle {
    display: none !important;
}

Best Regards

Hi,

The code change me the design of coupon field, see the screen shot. Please check the private content and help me with another code.

Thanks

Attachments:

You must be logged in to view attached files.

And the placeholder from where can be edit? I tried loco translate couldn’t find in the theme or woocommerce.

Hello,

01. Please remove the previous code and add this CSS in Theme Settings > Custom CSS:

/* Always show coupon form */
.woocommerce-form-coupon {
    display: flex !important;
}

/* Optional: hide toggle text */
.woocommerce-form-coupon-toggle {
    display: none !important;
}

02. You can change that text by using the Loco Translate plugin, here is our article on how to use it – https://xtemos.com/docs-topic/translate-woodmart-theme-with-loco-translate/

Best Regards

01. How to remove partial text -only link text with “click here to add your code”?
02. Which plugin is handling this field? I’ve checked Loco Translate for WooCommerce, but the string doesn’t appear there.

Hello,

01. To remove only the “click here to enter your code” link text (without affecting the coupon form), please use this CSS:

.woocommerce-form-coupon-toggle .showcoupon {
    display: none !important;
}

02. For the complete translation, please read and follow the instructions here after installing the Loco Translation plugin:
https://xtemos.com/docs-topic/theme-translation/

Best Regards

[Author]

Posts