Woocommerce – How can I change where something shows on the checkout page?

2 Views

I want to move where you enter the coupon at the top of the page to lower on the page (below the order summary) on the checkout page for woocommerce. Where & how can I do this?

Thanks in advance!

Read More

Here is the code from form-coupon.php in the checkout folder in case it’s helpful: 

if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}

if ( ! wc_coupons_enabled() ) {
return;
}

if ( ! WC()->cart->applied_coupons ) {
    $info_message = apply_filters( 'woocommerce_checkout_coupon_message', __( 'Have a coupon?', 'woocommerce' ) . ' <a href="#" class="showcoupon">' . __( 'Click here to enter your code', 'woocommerce' ) . '</a>' );
wc_print_notice( $info_message, 'notice' );
}
?>

<form class="checkout_coupon" method="post" style="display:none">

    <p class="form-row form-row-first">
        <input type="text" name="coupon_code" class="input-text" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" id="coupon_code" value="" /> 
</p>

    <p class="form-row form-row-last">
        <input type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply Coupon', 'woocommerce' ); ?>" />
    </p>

    <div class="clear"></div>
</form>

I added the code as suggested below, which worked, but it shifted the last line on the page down, so it doesn’t quite look right. Here is a picture of it (Terms and conditions and the Place Order Button.

Terms and conditions are shifted down

Post Views: 2

Related posts

1 comment

  1. UPDATED

    NOT POSSIBLE TO MOVE COUPON FORM INSIDE CHECKOUT FORM

    Finally, it is not possible to insert the coupon field with his “apply” button just after your Order Summary title, because it is an individual form with his own submit button that you are inserting inside another form with another submit button (Place Order).

    WHAT YOU CAN DO AS PART OF YOUR QUESTION:

    Keep visible only coupon field and button “apply” / Remove Coupon message with link:

    For that purpose (if not done yet) you will have to copy the woocommerce plugin templates folder inside your active child theme or theme folder and rename it woocommerce (Overriding Templates via a Theme). Don’t be afraid, it’s easy… Now you can customize any template.

    With that woocommerce folder (located in your active theme) go inside subfolder checkout and open/edit form-coupon.php file.

    1) Remove or comment ( /* … */ ):

    if ( ! WC()->cart->applied_coupons ) {
    $info_message = apply_filters( 'woocommerce_checkout_coupon_message', __( 'Have a coupon?', 'woocommerce' ) . ' <a href="#" class="showcoupon">' . __( 'Click here to enter your code', 'woocommerce' ) . '</a>' );
    wc_print_notice( $info_message, 'notice' );
}

    2) Remove style="display:none" from <form class="checkout_coupon" method="post" style="display:none">.

    So you will stay only with: <form class="checkout_coupon" method="post">

    FINE TUNING VERTICAL SPACE:

    Adding some vertical space around “If you’d like to change your subscription, go back to Plans.”:

    In style.css file of your active child theme or theme, add:

    .woocommerce-checkout .return-to-cart {
    padding: 12px 0 24px !important;
}

    (END OF UPDATE)

    It’s on template checkout/form-checkout.php (at the beginning), you have a hook woocommerce_before_checkout_form which display the coupon field and button:

    code to move (on line 20) cut this code on form-checkout.php template:

    do_action( 'woocommerce_before_checkout_form', $checkout );

    Pasting location (on line 56) just after; inside de php tags:

    <?php do_action( 'woocommerce_checkout_before_order_review' ); ?>

    Like this (before closing ?> php tags):

    <?php do_action( 'woocommerce_checkout_before_order_review' );
echo '<div class="coupon-block">';
do_action( 'woocommerce_before_checkout_form', $checkout );
echo '</div>';
?>

    Info: There is no order summary in this template

Comments are closed.