show coupon input box in place of message on checkout page

Try this custom css:

.woocommerce-form-coupon-toggle {
	display: none !important;
}
.checkout_coupon.woocommerce-form-coupon {
	display: block !important;
	margin-top: 20px !important;
}
.checkout_coupon.woocommerce-form-coupon p:first-child {
	font-weight: 700;
}
.checkout_coupon.woocommerce-form-coupon p {
	display: block !important;
}
.checkout_coupon.woocommerce-form-coupon input[name="coupon_code"] {
	min-width: 171px !important;
}
.checkout_coupon.woocommerce-form-coupon button {
	width: 160px;
	margin-top: 4px !important;
	font-size: 12px !important;
	line-height: 12px !important;
	font-weight: 500 !important;
}

that looks great, thanks

could you help me with the css to put the apply coupon/gift card inline with the input field?

.woocommerce form.checkout_coupon p.form-row {
	display: inline-block !important;
	width: 45%;
}
.woocommerce form.checkout_coupon button {
	width: 100%;
	padding-top: 16px;
	padding-bottom: 10px !important;
}
#pwgc-redeem-form input[type="submit"] {
	display: inline-block !important;
	padding-top: 16px;
	padding-bottom: 14px;
}
#pwgc-redeem-form input {
	width: 45%;
}

Thanks.

How do I move them to be above directly below the total before the credit card section, not above the place order button?

You would have to search for the add_action() calls which output those sections, and remove them with equivalent remove_action() calls.

Next, have add_actions() below the total to put them back in. This guide shows us where the hooks are and what they are called:
https://www.businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/

To add to the complexity, your theme and plugins may be using their own hooks.

That’s more code than one could expect in a forum answer, so really its a developer job.

ok thanks

also how do I hide the <p> If you have a coupon code, please apply it below.</p>.

I tried form.checkout_coupon.woocommerce-form-coupon p{display:none} but it doesn’t work

.woocommerce .checkout_coupon.woocommerce-form-coupon p {
  display:none !important
}

thanks so much for all your help.

I have this code in my functions.php file to move the coupon

// move coupon message
remove_action( ‘woocommerce_before_checkout_form’, ‘woocommerce_checkout_coupon_form’);
add_action( ‘woocommerce_review_order_before_submit’, ‘woocommerce_checkout_coupon_form’ );

however, when I do edit page with elementor it is still showing at top (even though it isn’t there on the front end) https://snipboard.io/4pyUGJ.jpg

also the page seems to load slower b/c of the css I added to show the checkout as an input box in place of a link, it loads with a loading icon, shows as a red button and takes an extra second or two to show the css changes. https://snipboard.io/gcaFeb.jpg

This is my code

.woocommerce-form-coupon-toggle {

        display: none !important;

}

.checkout_coupon.woocommerce-form-coupon {

        display: block !important;

        margin-top: 20px !important;

}

.checkout_coupon.woocommerce-form-coupon p:first-child {

        font-weight: 700;

}

.checkout_coupon.woocommerce-form-coupon button {

        width: 160px;

        font-size: 0.8rem;

        line-height: 1rem;

        font-weight: 500;

        background-color: #61CE70;

}

.woocommerce form.checkout_coupon {

    min-width: 100%;

}

.woocommerce form.checkout_coupon p.form-row {

               display: inline-block !important;

               width: 45%;

}

.woocommerce form.checkout_coupon button {

               width: 100%;

               padding-top: 16px;

               padding-bottom: 10px !important;

}

#pwgc-redeem-form input[type="submit"] {

               display: inline-block !important;

               padding-top: 16px;

               padding-bottom: 14px;

}

#pwgc-redeem-form input {

               width: 45%;

}

#pwgc-redeem-button {

     background-color: #61CE70;

}

.woocommerce .checkout_coupon.woocommerce-form-coupon p, #pwgc-redeem-form label {

  display:none !important

}

.woocommerce form.checkout_coupon{     padding-bottom: 0.5em

I can’t answer for Elementor. Its not one I use.

Yes, your site has multiple css styles for the same button, so the page is showing one button before another set of styles changes it. Fine tuning the several css stylesheets to remove unwanted styles for a better loading experience is more than can be achieved via a forum answer. To get the best you’ll need some skills or a developer.

It is loading the regular woocommerce button and then the changed color for the coupon, I’m not sure how to fix that.

But in addition, even without the css color change it is loading for an extra second inorder to hide the text. Can anything be done for that?

The various css style sheets will need some fine tuning. That’s more than can be done via a forum answer.

I’m marking this as resolved since it’s been awhile since you responded. We’ll be here if/when you need us.