Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1282110

    I’m trying to move the checkout form from the top of the page to Your Order and have done it with the following code in the functions file:

    remove_action( ‘woocommerce_before_checkout_form’, ‘woocommerce_checkout_coupon_form’, 10 );
    add_action( ‘woocommerce_checkout_order_review’, ‘woocommerce_checkout_coupon_form’, 5 );

    However, the form becomes expanded when moved so that is shows the place to apply it without clicking on the “Click here to enter code”.

    How can I make it not become expanded until the click?


    Hey advteksol,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,


    Go to the shop and add something. Then go to the checkout page, to the Your Order section to view my issue.




    Thank you for the update.

    We can initially hide the forms with this css code.

    #order_review .form-row-first, #order_review .form-row-last, .woocommerce-form-coupon-toggle + p {
    	display: none;

    And use this script in the functions.php file to toggle their visibility when the showcoupon link is clicked.

    // a custom script
    function ava_custom_script_mod() {
        if ( wp_script_is( 'avia-default', 'registered' ) ) {
            wp_add_inline_script( 'avia-default', '
    		(function($) {
    			$(".showcoupon").on("click", function() {
    				$("#order_review .form-row-first, #order_review .form-row-last, .woocommerce-form-coupon-toggle + p").toggle();
     add_action( 'wp_enqueue_scripts', 'ava_custom_script_mod', 9999);

    Let us know if it helps.

    Best regards,


    Almost there, but the “If you have a coupon code, please apply it below.” is still showing up.




    We edited the css code and the script above a bit to hide the text and toggle it when necessary. Please try it again.

    Best regards,

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.