Hello I am using the code below to move coupon box at checkout to abov WordPress
- SOLVED
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 https://brightledshoes.com/checkout 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 staging12.brightledshoes.com 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
