Create a 'Add to Cart' button that displays only after scrolling down to the item description
No extra plug-ins required!
This is useful mostly for mobile users UX. However you could also use this for desktop users.
The demo on this page is not working fully because this is not a product page.
To begin with, create a new section in your Single Product template. Give it the class name ' addcartsection '.
Don't worry about making it sticky. The code will make it fixed at the bottom of the page. If you would prefer the bottom to show up at the top, simple change ' bottom:0 ; to ' top: 0 'in the CSS.
Make the section viewable on mobile only (if you want)
Now, create a button within that section and give it the class ' addcartbutton '
Empty the link field.
Finally, add this code in an html element in the same Single Product template
Edit the 810 px value at ' if (y > 810) { ' to your desired show up location.
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 1810 && $(window).scrollTop() + $(window).height() < $(document).height() - 100) {
$('#addcartsection').addClass('viewaddcart')
} else {
$('#addcartsection').removeClass('viewaddcart')
}
});
$('#addcartbutton').click(function(){
$('.single_add_to_cart_button').click();
$('html, body').animate({
scrollTop: $('.product_title').offset().top
}, 'slow');
});
});
});
</script>
<style>
#addcartsection{
position: fixed;
bottom: 0;
width: 100vw;
z-index: 98;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
transform: translateY(110px); /*adjust this value to the height of your addcartsection*/
}
.viewaddcart{
transform: translateY(0px)!important;
}
</style>
