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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #298616

    asifsuhaib
    Participant

    Hey 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…

    #298625

    Hello,

    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 Studios

    #299438

    asifsuhaib
    Participant

    Hey 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!

    #299575

    Sounds 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.

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Set The Sticky Add to Cart Button to always Sticky’ is closed to new replies.