]I recently created a one page sales page for a clients online summit package. By using the WooCommerce checkout shortcode I was able to embed the whole process one page, as UX research shows an increased drop off in conversion with each new page you force people to.

Unfortunately, it seems the checkout shortcode [woocommerce_checkout] forces the page to load not at the top, but closer to where the checkout fields are. I couldn’t figure out how to prevent the checkout form from causing this behavior, but I created a work around. By including in the page body text some javascript, we can force the page to scroll back to the top as the DOM is being rendered.
jQuery(document).ready(function(){
jQuery(this).scrollTop(0);
});

I put this at the top of the page, but as long as you stick this code anywhere within the <body> element, it’ll work.

 

1 Comment

Leave a Reply

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

Post comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.