Home › Forums › WoodMart support forum › Set The Sticky Add to Cart Button to always Sticky
Set The Sticky Add to Cart Button to always Sticky
- This topic has 3 replies, 2 voices, and was last updated 4 years, 3 months ago by
Aizaz Imtiaz Awan.
-
AuthorPosts
-
June 9, 2021 at 10:00 am #298616
asifsuhaibParticipantHey There,
Currently Sticky Add to Cart button only pops up After Scrolling down Significantly, So I’d Like to Display Sticky Add to Cart Button Always instead of Only appearing after scrolling below add to cart Button.
I Need the Add To Cart Button to Be Displayed @ All Times on a single product page. Only On Mobile Devices.
Thanks…
June 9, 2021 at 10:31 am #298625
Aizaz Imtiaz AwanKeymasterHello,
Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.
.wd-sticky-btn { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
And see if this works for you otherwise it requires customizations.
Regards.
Xtemos StudiosJune 13, 2021 at 9:46 am #299438
asifsuhaibParticipantHey There, You Code Didn’t Work. But By Minor JQ Mods, got it working.
Below is the Code of modified “stickyAddToCart.js” File.
/* global woodmart_settings */ (function($) { woodmartThemeModule.stickyAddToCart = function() { var $trigger = $('form.cart'); var $stickyBtn = $('.wd-sticky-btn'); if ($stickyBtn.length <= 0 || $trigger.length <= 0 || (woodmartThemeModule.$window.width() <= 768 && $stickyBtn.hasClass('mobile-off'))) { return; } var summaryOffset = $trigger.offset().top + $trigger.outerHeight(); var $scrollToTop = $('.scrollToTop'); $stickyBtn.addClass('wd-sticky-btn-shown'); $scrollToTop.addClass('wd-sticky-btn-shown'); var stickyAddToCartToggle = function() { var windowScroll = woodmartThemeModule.$window.scrollTop(); var windowHeight = woodmartThemeModule.$window.height(); var documentHeight = woodmartThemeModule.$document.height(); if (summaryOffset < windowScroll && windowScroll + windowHeight !== documentHeight) { $stickyBtn.addClass('wd-sticky-btn-shown'); $scrollToTop.addClass('wd-sticky-btn-shown'); } else if (windowScroll + windowHeight === documentHeight || summaryOffset > windowScroll) { $stickyBtn.removeClass('wd-sticky-btn-shown'); $scrollToTop.removeClass('wd-sticky-btn-shown'); } }; //stickyAddToCartToggle(); //woodmartThemeModule.$window.on('scroll', stickyAddToCartToggle); $('.wd-sticky-add-to-cart').on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $('.elementor-widget-woocommerce-product-title,.summary-inner .product_title').offset().top }, 800); }); // Wishlist. $('.wd-sticky-btn .wd-wishlist-btn a').on('click', function(e) { if (!$(this).hasClass('added')) { e.preventDefault(); } $('.summary-inner > .wd-wishlist-btn a').trigger('click'); }); woodmartThemeModule.$document.on('added_to_wishlist', function() { $('.wd-sticky-btn .wd-wishlist-btn a').addClass('added'); }); // Compare. $('.wd-sticky-btn .wd-compare-btn a').on('click', function(e) { if (!$(this).hasClass('added')) { e.preventDefault(); } $('.summary-inner > .wd-compare-btn a').trigger('click'); }); woodmartThemeModule.$document.on('added_to_compare', function() { $('.wd-sticky-btn .wd-compare-btn a').addClass('added'); }); // Quantity. $('.wd-sticky-btn-cart .qty').on('change', function() { $('.summary-inner .qty').val($(this).val()); }); $('.summary-inner .qty').on('change', function() { $('.wd-sticky-btn-cart .qty').val($(this).val()); }); }; $(document).ready(function() { woodmartThemeModule.stickyAddToCart(); }); })(jQuery);
Solved!
June 14, 2021 at 7:00 am #299575
Aizaz Imtiaz AwanKeymasterSounds Great! That you have solved the issue by yourself. And thanks for sharing the code with us, it will be helpful for other users as well.
Have a wonderful day.
Topic Closed.
Best Regards. -
AuthorPosts
The topic ‘Set The Sticky Add to Cart Button to always Sticky’ is closed to new replies.
- You must be logged in to create new topics. Login / Register