By default, WooCommerce displays a ‘Have a coupon? Click here’ link on the Checkout and Cart pages, requiring users to click before they can enter a coupon code.
If you prefer to show the coupon field immediately, you can use the following Custom CSS code.
Add this CSS to Customize >> Additional CSS option
#ast-checkout-coupon .coupon {
display: flex;
}
#ast-checkout-coupon #ast-coupon-trigger {
display: none;
}This will ensure that the coupon field is always visible and remove the clickable link, improving user experience and reducing friction in the checkout process.
For more information on adding Custom CSS code , please check this doc: https://wpastra.com/docs/adding-custom-css-code/
Note: This CSS applies to both the Checkout and Cart pages. If the changes do not reflect immediately, try clearing your site and browser cache.
If you have further questions about this, please feel free to leave a comment below.
