Remove down and up field behavior

Hi @davidovic123

I understand that you added a notice using the woocommerce_after_checkout_billing_form hook, and while that is working as it should, it now reloads the page with the “create an account” field at the top, before settling in the correct place.

My first thought would be the priority etc you used for the hook but it also isn’t clear what the exact code is that you used. Would you mind linking me to that code, or pasting it to a Gist and linking me, so I can take a closer look and test it on my local site?

Cheers!

Hi @rynald0s,

Thanks for your reply,
I used this snippet of code to add a notice:

add_action('woocommerce_after_checkout_billing_form', 'my_custom_message');
function my_custom_message() {
    if ( ! is_user_logged_in() ) {
        wc_print_notice( __('Do not have an account yet? Then simply select the checkbox below.'), 'notice' );
	}
}

Thank you for taking a look,

Hi @davidovic123

The code snippet works perfectly fine for me without the reload issue.

With that said, have you tested it cross browser? As in, does it only happen with a specific browser?

What theme are you currently using? Could you please provide me with your status report found under “WooCommerce > Status” page so I can take a closer look?

Cheers!

Hi @rynald0s,

Thanks for your reply,
My current theme is Astra. Please, find below the link to the “WooCommerce status”:
https://www.screencast.com/t/TKE93HNo

Thank you,

Hello @davidovic123 ,

I am not 100% certain why the “Create an account?” link jumps on load. However, it seems to be linked to the custom CSS you’ve added:

.form-row.form-row-wide.create-account.woocommerce-validated {
	margin-top: -25px;
	
}

When the page loads, initially this negative top margin is not available so the link stays in its original location. Once this custom CSS is loaded, the link changes its location.

In your case, you should either find a different solution other than a negative margin or look for a way to load the custom CSS first so that the jump is not shown. There are different posts and articles available when you search using the terms load custom CSS first WordPress. Please have a look at them and see if any of those works for you.

I’ll keep this thread open for a little longer to see if anyone else can chime in to share any other hints.

We have our developer resources portal that can help you get going, so I would recommend you to check it further from here: https://developer.woocommerce.com/

You can also visit the WooCommerce Community Forum, the WooCommerce FB group, or the #developers channel of our Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, too.

Thank you.