Checkout error message & fixed header / navbar scroll problem

Resolved

(@geza54)

Hi,

I have problem with the error messages on the 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

add an event to the basket http://testing.gallowaywildfoods.com/product/forest-hedgerow-foraging-walk-lake-district/
go to checkout
leave form empty or make some mistake so you don’t end up on paypal page
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/

### 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://ww.wp.xz.cn/plugins/woocommerce/

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

Plugin Contributor Mike Jolley
(@mikejolley)

10 years, 3 months ago

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
(@geza54)

10 years, 3 months ago

Sure I know that 🙂
So any idea how to fix it apart from not having a fixed header 🙂 ?

Plugin Contributor Mike Jolley
(@mikejolley)

10 years, 2 months ago

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

There is a trigger event if you needed to do an additional scrollTo to make it align.
Thread Starter geza54
(@geza54)

10 years, 2 months ago
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
(@pmaheepala)

9 years, 8 months ago

@geza54,

Thanks for the fix.

frozenexpanse
(@frozenexpanse)

9 years, 5 months ago

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
(@geza54)

9 years, 5 months ago
@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
(@frozenexpanse)

9 years, 5 months ago

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/

Thanks!

Thread Starter geza54
(@geza54)

9 years, 5 months ago

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.

Tags