Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Hello I am using the code below to move coupon box at checkout to abov WordPress


Hello I am using the code below to move coupon box at checkout to above my order form. I am having problem moving the entire coupon box. When I click enter coupon it scrolls to top of page. You can see picture attached for example

Anyway I can show entire coupon box in one place?

function skyverge_show_coupon_js() {
wc_enqueue_js( '
$( "a.showcoupon" ).parent().hide();

$( "body" ).bind( "updated_checkout", function() {
$( "#show-coupon-form" ).click( function() {
$( ".checkout_coupon" ).show();
$( "html, body" ).animate( { scrollTop: 0 }, "slow" );
return false;
} );
} );
add_action( 'woocommerce_checkout_before_order_review', 'skyverge_show_coupon_js' );
* Show a coupon link above the order details.
function skyverge_show_coupon() {
echo '<p style="padding: 0 15px;"> Have a coupon? <a href="#" id="show-coupon-form">Click here to enter your code</a>.</p>';
add_action( 'woocommerce_checkout_before_order_review', 'skyverge_show_coupon' );

Thank you!

Answers (2)


Cesar Contreras answers:

If your site is online Can you show your URL?

I found your website but I do not see the same structure when paying, so it only occurs to me that you review:
- CSS properties / styles for the element when it is visible
- The parent element to which you add it

George Sprouse comments:

Hi, you can see here user:george pass:#strategy1

Cesar Contreras comments:

Try to use this line of code to move the code box inside the form of the second step before showing it
$("form.checkout_coupon.woocommerce-form-coupon").prependTo( $("ul.sp-two-step-checkout #order_review") );

Cesar Contreras comments:

if the function shows you some error by using "$" in the code that I shared previously, replace it with "jQuery".
I attach an image that proves that this code works


Arnav Joy answers:

Can you please show me url of your site ?