Title: Checkout error message & fixed header / navbar scroll problem
Last modified: August 31, 2016

---

# Checkout error message & fixed header / navbar scroll problem

 *  Resolved [geza54](https://wordpress.org/support/users/geza54/)
 * (@geza54)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/checkout-error-message-fixed-header-navbar-scroll-problem/)
 * Hi,
 * I have problem with the error messages on the [http://testing.gallowaywildfoods.com/checkout/](http://testing.gallowaywildfoods.com/checkout/)
   
   page.
 * Basically the javascript which is responsible for scrolling the page to the error
   messages is miscalculating where to scroll to. As a result of that the error 
   messages are often hidden.
 * To reproduce it
    1. add an event to the basket [http://testing.gallowaywildfoods.com/product/forest-hedgerow-foraging-walk-lake-district/](http://testing.gallowaywildfoods.com/product/forest-hedgerow-foraging-walk-lake-district/)
    2. go to checkout
    3. leave form empty or make some mistake so you don’t end up on paypal page
    4. see how the error messages are hidden behind the fixed header
 * I have searched for solution but none of them worked for me so far.
 * Any ideas anybody ? : )
 * Thank you,
    p.s. please don’t purchase anything on site … it is a test site only
 * site:
    [http://testing.gallowaywildfoods.com/](http://testing.gallowaywildfoods.com/)
 *     ```
       ### WordPress Environment ###
   
       Home URL: http://testing.gallowaywildfoods.com
       Site URL: http://testing.gallowaywildfoods.com
       WC Version: 2.5.2
       Log Directory Writable: ✔ /home/gallowa1/public_html/testing/wp-content/uploads/wc-logs/
       WP Version: 4.2.7
       WP Multisite: –
       WP Memory Limit: 256 MB
       WP Debug Mode: –
       Language: en_US
   
       ### Server Environment ###
   
       Server Info: Apache
       PHP Version: 5.4.25
       PHP Post Max Size: 256 MB
       PHP Time Limit: 90
       PHP Max Input Vars: 200000
       SUHOSIN Installed: –
       MySQL Version: 5.5.48
       Max Upload Size: 256 MB
       Default Timezone is UTC: ✔
       fsockopen/cURL: ✔
       SoapClient: ✔
       DOMDocument: ✔
       GZip: ✔
       Multibyte String: ✔
       Remote Post: ✔
       Remote Get: ✔
   
       ### Database ###
   
       WC Database Version: 2.5.2
       :
       woocommerce_sessions: ✔
       woocommerce_api_keys: ✔
       woocommerce_attribute_taxonomies: ✔
       woocommerce_termmeta: ✔
       woocommerce_downloadable_product_permissions: ✔
       woocommerce_order_items: ✔
       woocommerce_order_itemmeta: ✔
       woocommerce_tax_rates: ✔
       woocommerce_tax_rate_locations: ✔
   
       ### Active Plugins (17) ###
   
       Akismet: by Automattic – 3.1.5
       WooCommerce Gift Certificates Pro: by IgniteWoo.com – 3.5.22
       IgniteWoo Updater: by IgniteWoo – 1.2
       Social Sharing Buttons: by Victor Freitas – 2.1.0
       MailChimp for WordPress: by ibericode – 3.1.3
       Post Type Switcher: by johnjamesjacoby – 1.5
       RSS Includes Pages: by Marios Alexandrou – 1.2
       Simple Follow Me Social Buttons Widget: by Lucy Tomás – 3.3.3
       Site Offline or Coming Soon: by wpecommerce – 1.6.4
       Utf8ize: by PressLabs – 1.0
       WooCommerce Google Analytics Integration: by WooThemes – 1.4.0
       WooCommerce Show Orders Which Contain Product: by Geza Turi – 1.0.0
       WooCommerce: by WooThemes – 2.5.2
       WooSidebars: by WooThemes – 1.4.3
       WP-Mail-SMTP: by Callum Macdonald – 0.9.5
       WP Super Cache: by Automattic – 1.4.4
       UTF8 Sanitize: by Kaloyan K. Tsvetkov – 0.5
   
       ### Settings ###
   
       Force SSL: –
       Currency: GBP (£)
       Currency Position: left
       Thousand Separator: ,
       Decimal Separator: .
       Number of Decimals: 2
   
       ### API ###
   
       API Enabled: –
       API Version: 3.1.0
   
       ### WC Pages ###
   
       Shop Base: Page not set
       Cart: #2041 - /cart/
       Checkout: #2042 - /checkout/
       My Account: #2043 - /my-account/
   
       ### Taxonomies ###
   
       Product Types: external (external)
       grouped (grouped)
       simple (simple)
       variable (variable)
   
       ### Theme ###
   
       Name: GallowayWildeFoods
       Version: 0.0.1
       Author URL: http://turigeza.com/
       Child Theme: ✕ – If you're modifying WooCommerce on a parent theme you didn't build personally
       then we recommend using a child theme. See: How to create a child theme
   
       WooCommerce Support: ✔
   
       ### Templates ###
   
       Overrides: gallowaywildefoods-1/woocommerce/archive-product.php
       gallowaywildefoods-1/woocommerce/auth/footer.php
       gallowaywildefoods-1/woocommerce/auth/form-grant-access.php
       gallowaywildefoods-1/woocommerce/auth/form-login.php
       gallowaywildefoods-1/woocommerce/auth/header.php
       gallowaywildefoods-1/woocommerce/cart/cart-empty.php
       gallowaywildefoods-1/woocommerce/cart/cart-item-data.php
       gallowaywildefoods-1/woocommerce/cart/cart-shipping.php
       gallowaywildefoods-1/woocommerce/cart/cart-totals.php
       gallowaywildefoods-1/woocommerce/cart/cart.php
       gallowaywildefoods-1/woocommerce/cart/cross-sells.php
       gallowaywildefoods-1/woocommerce/cart/mini-cart.php
       gallowaywildefoods-1/woocommerce/cart/proceed-to-checkout-button.php
       gallowaywildefoods-1/woocommerce/cart/shipping-calculator.php
       gallowaywildefoods-1/woocommerce/checkout/cart-errors.php
       gallowaywildefoods-1/woocommerce/checkout/form-billing.php
       gallowaywildefoods-1/woocommerce/checkout/form-checkout.php
       gallowaywildefoods-1/woocommerce/checkout/form-coupon.php
       gallowaywildefoods-1/woocommerce/checkout/form-login.php
       gallowaywildefoods-1/woocommerce/checkout/form-pay.php
       gallowaywildefoods-1/woocommerce/checkout/form-shipping.php
       gallowaywildefoods-1/woocommerce/checkout/payment-method.php
       gallowaywildefoods-1/woocommerce/checkout/payment.php
       gallowaywildefoods-1/woocommerce/checkout/review-order.php
       gallowaywildefoods-1/woocommerce/checkout/terms.php
       gallowaywildefoods-1/woocommerce/checkout/thankyou.php
       gallowaywildefoods-1/woocommerce/content-product.php
       gallowaywildefoods-1/woocommerce/content-product_cat.php
       gallowaywildefoods-1/woocommerce/content-single-product.php
       gallowaywildefoods-1/woocommerce/content-widget-product.php
       gallowaywildefoods-1/woocommerce/emails/admin-cancelled-order.php
       gallowaywildefoods-1/woocommerce/emails/admin-failed-order.php
       gallowaywildefoods-1/woocommerce/emails/admin-new-order.php
       gallowaywildefoods-1/woocommerce/emails/customer-completed-order.php
       gallowaywildefoods-1/woocommerce/emails/customer-invoice.php
       gallowaywildefoods-1/woocommerce/emails/customer-new-account.php
       gallowaywildefoods-1/woocommerce/emails/customer-note.php
       gallowaywildefoods-1/woocommerce/emails/customer-processing-order.php
       gallowaywildefoods-1/woocommerce/emails/customer-refunded-order.php
       gallowaywildefoods-1/woocommerce/emails/customer-reset-password.php
       gallowaywildefoods-1/woocommerce/emails/email-addresses.php
       gallowaywildefoods-1/woocommerce/emails/email-customer-details.php
       gallowaywildefoods-1/woocommerce/emails/email-footer.php
       gallowaywildefoods-1/woocommerce/emails/email-header.php
       gallowaywildefoods-1/woocommerce/emails/email-order-details.php
       gallowaywildefoods-1/woocommerce/emails/email-order-items.php
       gallowaywildefoods-1/woocommerce/emails/email-styles.php
       gallowaywildefoods-1/woocommerce/emails/plain/admin-cancelled-order.php
       gallowaywildefoods-1/woocommerce/emails/plain/admin-failed-order.php
       gallowaywildefoods-1/woocommerce/emails/plain/admin-new-order.php
       gallowaywildefoods-1/woocommerce/emails/plain/customer-completed-order.php
       gallowaywildefoods-1/woocommerce/emails/plain/customer-invoice.php
       gallowaywildefoods-1/woocommerce/emails/plain/customer-new-account.php
       gallowaywildefoods-1/woocommerce/emails/plain/customer-note.php
       gallowaywildefoods-1/woocommerce/emails/plain/customer-processing-order.php
       gallowaywildefoods-1/woocommerce/emails/plain/customer-refunded-order.php
       gallowaywildefoods-1/woocommerce/emails/plain/customer-reset-password.php
       gallowaywildefoods-1/woocommerce/emails/plain/email-addresses.php
       gallowaywildefoods-1/woocommerce/emails/plain/email-customer-details.php
       gallowaywildefoods-1/woocommerce/emails/plain/email-order-details.php
       gallowaywildefoods-1/woocommerce/emails/plain/email-order-items.php
       gallowaywildefoods-1/woocommerce/global/breadcrumb.php
       gallowaywildefoods-1/woocommerce/global/form-login.php
       gallowaywildefoods-1/woocommerce/global/quantity-input.php
       gallowaywildefoods-1/woocommerce/global/sidebar.php
       gallowaywildefoods-1/woocommerce/global/wrapper-end.php
       gallowaywildefoods-1/woocommerce/global/wrapper-start.php
       gallowaywildefoods-1/woocommerce/loop/add-to-cart.php
       gallowaywildefoods-1/woocommerce/loop/loop-end.php
       gallowaywildefoods-1/woocommerce/loop/loop-start.php
       gallowaywildefoods-1/woocommerce/loop/no-products-found.php
       gallowaywildefoods-1/woocommerce/loop/orderby.php
       gallowaywildefoods-1/woocommerce/loop/pagination.php
       gallowaywildefoods-1/woocommerce/loop/price.php
       gallowaywildefoods-1/woocommerce/loop/rating.php
       gallowaywildefoods-1/woocommerce/loop/result-count.php
       gallowaywildefoods-1/woocommerce/loop/sale-flash.php
       gallowaywildefoods-1/woocommerce/myaccount/form-add-payment-method.php
       gallowaywildefoods-1/woocommerce/myaccount/form-edit-account.php
       gallowaywildefoods-1/woocommerce/myaccount/form-edit-address.php
       gallowaywildefoods-1/woocommerce/myaccount/form-login.php
       gallowaywildefoods-1/woocommerce/myaccount/form-lost-password.php
       gallowaywildefoods-1/woocommerce/myaccount/my-account.php
       gallowaywildefoods-1/woocommerce/myaccount/my-address.php
       gallowaywildefoods-1/woocommerce/myaccount/my-downloads.php
       gallowaywildefoods-1/woocommerce/myaccount/my-orders.php
       gallowaywildefoods-1/woocommerce/myaccount/view-order.php
       gallowaywildefoods-1/woocommerce/notices/error.php
       gallowaywildefoods-1/woocommerce/notices/notice.php
       gallowaywildefoods-1/woocommerce/notices/success.php
       gallowaywildefoods-1/woocommerce/order/form-tracking.php
       gallowaywildefoods-1/woocommerce/order/order-again.php
       gallowaywildefoods-1/woocommerce/order/order-details-customer.php
       gallowaywildefoods-1/woocommerce/order/order-details-item.php
       gallowaywildefoods-1/woocommerce/order/order-details.php
       gallowaywildefoods-1/woocommerce/order/tracking.php
       gallowaywildefoods-1/woocommerce/product-searchform.php
       gallowaywildefoods-1/woocommerce/single-product/add-to-cart/external.php
       gallowaywildefoods-1/woocommerce/single-product/add-to-cart/grouped.php
       gallowaywildefoods-1/woocommerce/single-product/add-to-cart/simple.php
       gallowaywildefoods-1/woocommerce/single-product/add-to-cart/variable.php
       gallowaywildefoods-1/woocommerce/single-product/add-to-cart/variation-add-to-cart-button.php
       gallowaywildefoods-1/woocommerce/single-product/add-to-cart/variation.php
       gallowaywildefoods-1/woocommerce/single-product/meta.php
       gallowaywildefoods-1/woocommerce/single-product/price.php
       gallowaywildefoods-1/woocommerce/single-product/product-attributes.php
       gallowaywildefoods-1/woocommerce/single-product/product-image.php
       gallowaywildefoods-1/woocommerce/single-product/product-thumbnails.php
       gallowaywildefoods-1/woocommerce/single-product/rating.php
       gallowaywildefoods-1/woocommerce/single-product/related.php
       gallowaywildefoods-1/woocommerce/single-product/review.php
       gallowaywildefoods-1/woocommerce/single-product/sale-flash.php
       gallowaywildefoods-1/woocommerce/single-product/share.php
       gallowaywildefoods-1/woocommerce/single-product/short-description.php
       gallowaywildefoods-1/woocommerce/single-product/tabs/additional-information.php
       gallowaywildefoods-1/woocommerce/single-product/tabs/description.php
       gallowaywildefoods-1/woocommerce/single-product/tabs/tabs.php
       gallowaywildefoods-1/woocommerce/single-product/title.php
       gallowaywildefoods-1/woocommerce/single-product/up-sells.php
       gallowaywildefoods-1/woocommerce/single-product-reviews.php
       gallowaywildefoods-1/woocommerce/single-product.php
       gallowaywildefoods-1/woocommerce/taxonomy-product_cat.php
       gallowaywildefoods-1/woocommerce/taxonomy-product_tag.php
       ```
   
 * [https://wordpress.org/plugins/woocommerce/](https://wordpress.org/plugins/woocommerce/)

Viewing 9 replies - 1 through 9 (of 9 total)

 *  Plugin Contributor [Mike Jolley](https://wordpress.org/support/users/mikejolley/)
 * (@mikejolley)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/checkout-error-message-fixed-header-navbar-scroll-problem/#post-7173367)
 * Because the theme has a fixed header – it doesn’t know about this styling and
   thus doesn’t account for it when calculating scroll to offset.
 *  Thread Starter [geza54](https://wordpress.org/support/users/geza54/)
 * (@geza54)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/checkout-error-message-fixed-header-navbar-scroll-problem/#post-7173370)
 * Sure I know that 🙂
    So any idea how to fix it apart from not having a fixed 
   header 🙂 ?
 *  Plugin Contributor [Mike Jolley](https://wordpress.org/support/users/mikejolley/)
 * (@mikejolley)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/checkout-error-message-fixed-header-navbar-scroll-problem/#post-7173494)
 * You could try experimenting with the padding, but no, not 100 % sure how you’d
   fix it.
 * This is the code: [https://github.com/woothemes/woocommerce/blob/master/assets/js/frontend/checkout.js#L443](https://github.com/woothemes/woocommerce/blob/master/assets/js/frontend/checkout.js#L443)
 * There is a trigger event if you needed to do an additional scrollTo to make it
   align.
 *  Thread Starter [geza54](https://wordpress.org/support/users/geza54/)
 * (@geza54)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/checkout-error-message-fixed-header-navbar-scroll-problem/#post-7173582)
 * Mike,
 * Thank you for your help with the line number : )
 * I bodged it the with the following code:
 *     ```
       $(document.body).on('checkout_error', function () {
               $(document.body).stop( );
               $('html, body').animate({
                   scrollTop: ($('form.checkout').offset().top - 400)
               }, 1000);
           });
       ```
   
 *  [Pradeep](https://wordpress.org/support/users/pmaheepala/)
 * (@pmaheepala)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/checkout-error-message-fixed-header-navbar-scroll-problem/#post-8242036)
 * [@geza54](https://wordpress.org/support/users/geza54/),
 * Thanks for the fix.
 *  [frozenexpanse](https://wordpress.org/support/users/frozenexpanse/)
 * (@frozenexpanse)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/checkout-error-message-fixed-header-navbar-scroll-problem/#post-8568924)
 * Hi, I’m having the same issue with my site (fixed header covers up the error 
   message). Could you please provide more specificity as to where & how to incorporate
   the above code, so the fix will work? Thanks!
 *  Thread Starter [geza54](https://wordpress.org/support/users/geza54/)
 * (@geza54)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/checkout-error-message-fixed-header-navbar-scroll-problem/#post-8569094)
 * [@frozenexpanse](https://wordpress.org/support/users/frozenexpanse/)
 * It is generic enough that you can put it into in any javascript file providing
   it is present on the checkout page where the errors appear. Make sure that it
   is within the document ready jquery wrapper. “jQuery(function ($) {})” That is
   it.
 *     ```
       jQuery(function ($) {
           $(document.body).on('checkout_error', function () {
               $(document.body).stop( );
               $('html, body').animate({
                   scrollTop: ($('form.checkout').offset().top - 400)
               }, 1000);
           });
       })
       ```
   
 *  [frozenexpanse](https://wordpress.org/support/users/frozenexpanse/)
 * (@frozenexpanse)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/checkout-error-message-fixed-header-navbar-scroll-problem/#post-8569328)
 * Ah, thank you! I see that this solution works for generic Woocommerce checkout
   errors.
 * However, I also use the Authorize.net CIM plugin for credit card processing at
   checkout, and it seems to have its own JS for scrolling up to see error messages
   when you input invalid card details, and the same problem is repeated. I guess
   I’ll try to hunt through its files and see if I can apply this same / similar
   fix.
 * If you happen to have any experience with that plugin, though, I’d appreciate
   any help you can provide. The page in question, btw, is [https://www.drinkreorient.com/checkout/](https://www.drinkreorient.com/checkout/)
 * Thanks!
 *  Thread Starter [geza54](https://wordpress.org/support/users/geza54/)
 * (@geza54)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/checkout-error-message-fixed-header-navbar-scroll-problem/#post-8569768)
 * Follow the same idea it might be the same event ‘checkout_error’ which gets triggered.
   In which case it should work. But currently your checkout page doesn’t work with
   basic messages so try and fix those first.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Checkout error message & fixed header / navbar scroll problem’ is closed
to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

## Tags

 * [checkout](https://wordpress.org/support/topic-tag/checkout/)
 * [fixed](https://wordpress.org/support/topic-tag/fixed/)
 * [header](https://wordpress.org/support/topic-tag/header/)
 * [hidden](https://wordpress.org/support/topic-tag/hidden/)
 * [message](https://wordpress.org/support/topic-tag/message/)
 * [nav bar](https://wordpress.org/support/topic-tag/nav-bar/)
 * [scroll](https://wordpress.org/support/topic-tag/scroll/)

 * 9 replies
 * 4 participants
 * Last reply from: [geza54](https://wordpress.org/support/users/geza54/)
 * Last activity: [9 years, 5 months ago](https://wordpress.org/support/topic/checkout-error-message-fixed-header-navbar-scroll-problem/#post-8569768)
 * Status: resolved