Tagged: basket, checkout, notification box, scroll to top, shop
-
AuthorPosts
-
May 6, 2019 at 4:31 pm #1097727
Hi Guys,
In our shop, when you click on “go to basket” and arrive on “check out” page the page scrolls to top correctly. However, once you complete the order information on that checkout page and go to click the “agree to terms” boxes, any notification/error boxes cannot be viewed because the script does not scroll right to the top TO REVEAL the boxes to the customer. You can scroll manually to the top and see the notification boxes BUT the customer would not think to do that… they just sit there trying to figure out why they can’t complete their order and every time they re-do something and try to go on they are sent to the top of the page again (but can’t see the boxes to know why).
WE WOULD REALLY APPRECIATE YOU GENIUS’ ON THE CASE as it’s stopping customers buying!SNAPSHOT IMAGE LINK: https://imgur.com/esKcJ0z
WEBSITE: https://herbalcenter.dk/shop/
LOGIN – see private content.May 7, 2019 at 7:36 pm #1098183Hey Annemarie,
Thank you for contacting us.
I checked your site on a Windows machine with the latest version of the Chrome browser. Your site appears fine on my screen please see the screenshot attached.
You may not see the changes until the cached files are cleared in your browser.
Please perform the below steps to clear the browser cache:
1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.
If the issue still persist please mention the device and browser name on which you are facing this issue so we can help you better :)
Best regards,
VinayMay 8, 2019 at 1:23 pm #1098441Hej Vinay,
Your screenshot doesn’t show any red notification box which suggests you didn’t get the experience I refer to. You have to complete the order details and LEAVE ONE OF THE * FIELDS OUT and continue to the end of the page, tick the two accept boxes and press the green “Afgiv Ordre” (Accept order) button. SEE SCREENSHOT – https://imgur.com/2U6rVnw
Then the page will shoot back to the top to let you know something is missing with the red notification box… BUT because the scroll bar doesn’t go right to the top the customer doesn’t see it. They just see the green notification box in your screenshot which is the same as the box they saw when they first arrived so they can’t figure out what’s wrong with the order. They don’t realise they have to scroll up themselves to reveal the red notification box.
I’ve already:
– disabled the merging and compression settings
– cleared my cache,
– tried hard loads and get the same experience in FireFox and Chrome. I hope it has nothing to do with cache because customers would not have a clue about that so we can’t help them.May 9, 2019 at 3:21 pm #1098942Hi AnnemarieDoolin,
Yes, this is how the messages are done in the WooCommerce, they show up on top. If you need to change that you might want to check WooCommerce forums on how this can be done.
Best regards,
VictoriaMay 9, 2019 at 5:08 pm #1099016For anyone with the same issue, I solved it by disabling the “sticky header” which released viewing space for the notification boxes to be seen (even if the scroll bar still doesn’t go back to the top to the page). (Info: How to disable sticky header – go to “Enfold Child” in control panel, click on “Header”, then “Header Behaviour” tab, and untick box “sticky header”.
This might be a useful link for anyone needs to fix this in functions file and can’t live without the stick header:
https://wordpress.org/support/topic/checkout-error-message-fixed-header-navbar-scroll-problem/May 11, 2019 at 4:47 am #1099471 -
AuthorPosts
- You must be logged in to reply to this topic.