• HOME
  • NEWS
  • PORTFOLIO
  • LAB
  • ABOUT
  • CONTACT

woocommerce, overwrite auto scroll (scroll to notice function)

tags : auto scrollsnippetwoocommerce categories : programmation

by Trân on January 19, 2020


Notice: A non well formed numeric value encountered in /home/tigerbal/www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/tigerbal/www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

It is WooCommerce default behaviour to scroll to the top of the checkout or the cart form after an errored checkout submit.
I had a case where the auto scroll didn’t scroll to the right position so the errors were always hidden. The auto scroll code is located in the file woocommerce.js, here what I used to overwrite it, adding an offset :

1
2
3
4
5
6
7
8
9
// overwrite woocommerce scroll to notices
$.scroll_to_notices=function( scrollElement ) {
     var offset = 300;
     if ( scrollElement.length ) {
     $( 'html, body' ).animate( {
          scrollTop: ( scrollElement.offset().top-offset )
          }, 1000 );
     }
};

 

ACF how to update field link » « wordpress filter set-screen-option not working

3 thoughts on “woocommerce, overwrite auto scroll (scroll to notice function)”

  1. Andi says:
    May 28, 2021 at 11:40 am

    Nice workaround ! Good job.
    I do have Rife theme and woocommerce installed and using a fixed header.
    The approach seems to work for me as well. But Where is woocommerce.js originally located on the server?
    wp-content/plugins/woocommerce/assets/js/ does not contain the woocommerce.js as i would have expected it there.

    Will the change stay there after an woocommerce or template update?

    Have you seen a good solution to “wp_enqueue_script”

    Reply
    1. Trân says:
      May 28, 2021 at 11:52 am

      Hi Andi,

      you should write this code in your own js file, the one from your template. That way, even if you update woocommerce the change is going to stay.

      Reply
  2. Johnny says:
    July 5, 2021 at 8:23 pm

    Awesome! Thanks for this – this has been bugging me for a while on my website. I don’t understand why WooCommerce can’t make this configurable out of the box for people that have fixed headers. There is no documentation.

    By the way, I added this exact code to the HTML footer during checkout so that the automatic scroll to top now shows the error messages:

    $data = ”
    jQuery( function( $ ) {
    $.scroll_to_notices = function( scrollElement ) {
    var offset = 300;
    if ( scrollElement.length ) {
    $( ‘html, body’ ).animate( {
    scrollTop: ( scrollElement.offset().top-offset )
    }, 1000 );}};});”;
    wp_register_script( ‘dummy-handle-footer’, ”, [], ”, true );
    wp_enqueue_script( ‘dummy-handle-footer’);
    wp_add_inline_script( ‘dummy-handle-footer’, $data );

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 
Tags / Mots clefs

auto scroll • snippet • woocommerce
 

© fruit du dragon - freelance creative coder

Categories

  • général
  • inspiration
  • lab
  • programmation
  • sites
  • work

Tags

android architecture archives canvas cellules-studio cornelius css culturel demonstrateur design eshop flash fremok html html/css/js hugo IFTTT incandescence Instagram institutionnel ios ipad jeux js krpano luxe media design mobile musée nomoon paper fold photographie requins-marteaux responsive sbam snippet tablette toute-attente tran nn transport typographie ui ultranoir woocommerce wordpress

Stats


Notice: Undefined variable: extra in /home/tigerbal/www/wp-content/plugins/pulsemaps/pm-widget.php on line 47

Archives

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org