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.

WooCommerce: Create a 'Add To Cart' Button That Only Shows After Scrolling Down

Make the section viewable on mobile only (if you want)

WooCommerce: Create a 'Add To Cart' Button That Only Shows After Scrolling Down

Now, create a button within that section and give it the class ' addcartbutton '

WooCommerce: Create a 'Add To Cart' Button That Only Shows After Scrolling Down

Empty the link field. 

Elementor: Create a Section That Shows Up Only on Button Click​

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>

To view the section and edit it, either scroll down the page, or remove the ' display:none ' CSS while you are editing.

Et voila! Thanks for reading!
Let me know if you need help!

7 Responses

  1. Hello,

    First of all thanks for your tips !
    I am trying to use your code to do a sticky add to cart button who appears on mobile when the main add to cart button is not at sight.

    Do you have any clue how I could modify your code to do that ?

    1. i have been testing your codes, they work as a charm. My website is decen.com.mx but in the footer in individual product i got a kinf of messy and not smooth results, i cant find why

  2. Hi,
    Once the code is in, it works but I can no longer see the element in Elementor. How can I see it so I can edit the code or edit the button styling?

Leave a Reply