How to add sticky add to cart buuton on product page

Highlighted
Explorer
49 3 4

//ADD on theme.lquid code

{% if template contains "product"%}
<p class="button_click_cart"></p>
{% endif %}

//csss put

p.button_click_cart {
width: 100%;
height: 45px;
display: block;
background: #974009;
z-index: 9999999999999;
position: fixed;
bottom: -50px;
left: 0;
margin: 0;
color: #ffff;
text-transform: uppercase;
text-align: center;
line-height: 45px;
font-size: 18px;
font-weight: bold;
transition: all .5s ease;
cursor:pointer;
}
p.button_click_cart.visibleme{
bottom:0;
}
button.sticky-cart-button {
display: none !important;
}

//js code put

//sticky add to cart on product page
$(document).ready(function(){
var txt = $(".template-product .product-form__cart-submit span").text();
$(".button_click_cart").text(txt);
$(".button_click_cart").click(function(){
$(".template-product .product-form__cart-submit").trigger("click");
});
var y = $(document).scrollTop();
if (y > 450) {
$('.button_click_cart').addClass("visibleme");
} else {
$('.button_click_cart').removeClass("visibleme");
}
});
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 450) {
$('.button_click_cart').addClass("visibleme");
} else {
$('.button_click_cart').removeClass("visibleme");
}
});

0 Likes