Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 19, 2021 at 3:51 am #1282110
    advteksol

    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?

    February 20, 2021 at 11:14 am #1282394
    Victoria

    Hey advteksol,

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

    Best regards,
    Victoria

    February 21, 2021 at 8:09 am #1282592
    advteksol

    Home

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

    Thanks.

    February 23, 2021 at 4:12 pm #1283123
    Ismael

    Hi,

    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();
			});
		})(jQuery);
	');
    }
 }
 add_action( 'wp_enqueue_scripts', 'ava_custom_script_mod', 9999);

    Let us know if it helps.

    Best regards,
    Ismael

    February 24, 2021 at 4:56 am #1283282
    advteksol

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

    Thanks.

    February 26, 2021 at 2:25 pm #1283850
    Ismael

    Hi,

    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,
    Ismael

    March 1, 2021 at 2:40 am #1284306
    advteksol

    Still has the verbiage under the box – see image https://imgur.com/a/hKXO65v.

    March 4, 2021 at 1:37 pm #1285387
    Ismael

    Hi,

    Thank you for the update.

    The text “If you have a coupon code, please apply it below.” is no longer visible on our end and only shows when we clicked the “Click here to enter your code” text or button. Please try to purge the cache and disable the Performance > File Compression settings temporarily, then check the page again.

    Best regards,
    Ismael

    March 5, 2021 at 10:08 pm #1285933
    advteksol

    OK, awesome. Thank you for your assistance!

    March 8, 2021 at 10:03 am #1286362
    Nikko

    Hi advteksol,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Moving Coupon Form on Checkout Page’ is closed to new replies.