WooCommerce Checkout missing fields scroll up

[salilou]

Hi,
I use X Theme, WooCommerce and Germanized Plugin.
The auto scroll up when required fields are not filled out does not scroll up to the top, but remains a little bit deeper.
This depends on the fixed menu I guess, because when I set static menu it works properly.
Thank you for your support!

[Joao]

Hi There,

Altough we do not provide support for third party plugin issues, please provide your URL and explain how can we can replicate the issue so we can take a closer look.

Thanks

[salilou]

Thank you. I send the links in s private message.

[ruenel]

Hello There,

I have logged in and investigated your site. When I click the said button, it took a few seconds and then it scrolls up to the top of the page displaying the errors that some fields is required. As I also noticed, your navbar is set as Fixed Top. I could not replicate the issue. I am using Chrome browser by the way.

Do you have any caching plugin? Please clear your plugin cache and test your site again. Please also clear your browser cache or use private browsing mode and test again.

Please let us know how it goes.

[salilou]

Thank you very much.
I am working on a mac.
I tried it with chrome and it works indeed.
But with Safari and Firefox it does not work!
It scrolls up only to the section beneath the error messages.
Caches are empty.

[rad]

Hi there,

I checked and it’s true, it scroll the field since it has auto-focus configuration. Like from here https://theme.co/apex/forum/t/weird-issue-with-my-checkout-page-always-opening-halfway-down-the-page/15629/8. I did some test and it’s really auto-focusing on empty fields. In your case, it’s the billing fields so the code would be like

function disable_autofocus_firstname($fields) {
    $fields['billing']['billing_first_name']['autofocus'] = false;
    return $fields;
}
add_filter('woocommerce_checkout_fields', 'disable_autofocus_firstname');

It’s just a sample, you can add more fields or combination of both billing and shipping fields. And you can find the field name by viewing your site’s source codes through browser developer inspector tools https://developer.chrome.com/devtools

Example,

<p class="form-row form-row-wide" id="billing_company_field" data-priority="30">
<label for="billing_company" class="">Firmenname</label>
<input type="text" class="input-text " name="billing_company" id="billing_company" placeholder="" value="" autocomplete="organization">
</p>

name="billing_company" id="billing_company"

Then the field will be

$fields['billing']['billing_company']

Thanks!

[salilou]

Thank you!

[rad]

You’re most welcome!