Wordpress - Make Product Image gallery Sticky(fixed) on WooCommerce Single Product Page

MohibSalahuddinAyubi
December 9, 2023
225 views
0 votes
2 Answers

I want to make wooCommerce product image gallery section, to be sticky till footer as it happened on shopify.
Similar like this, https://ninjatransfers.com/products/premium-dtf-gang-sheets

for that i tried position: absolute and position sticky both aswell, like it guided in many tutorials but it wont work.

Then i create my own sample html as in this fiddle

div.sticky {
  position:relative;
  width: 100%;
}
p.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 50px;
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
}

<h2>Sticky Element: Scroll Down to See the Effect</h2>
<p>Scroll down this page to see how  sticky positioning works.</p>

<div class="sticky">
    <div style="float:left;width:45%">
    <p class="sticky">I will stick to the screen when you reach my scroll position
      </p>
  </div>
    <div style="float:right;width:45%;">
    <p>Some example text..</p>
    <h2>Scroll back up again to "remove" the sticky position.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim </p>
  </div>
</div>

<div style="float:left;width:100%">
  <p>BALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFAS.</p>
</div>

with the same structure to see how it works with position sticky.

I noticed until there is No 2 Columns in row, it works. But when make 2 columns and put them in some div for row, it stop working.

Please see the Fiddle and guide me what i am missing??

Answers

Chosen as BEST ANSWER

Before getting the above answer i wrote the script to manage woocommerce gallery image.

Mentioning below, so if it can be useful for any one. It can be seen on the following link as working: https://uploadtransfers.com/product/free-sample-pack-of-transfers-notice/

        if( window.innerWidth > 768 ){
          jQuery(document).ready(function() {
            var stickyTop = jQuery('.product-single-layout-01').offset().top;
            var stickyHeading = jQuery('.summary.entry-summary').offset().top;
            var StopSticky = jQuery('.main-footer-wrapper').offset().top;
            var stickyParaW = jQuery(".woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4").width();
            var stickyParaH = jQuery(".woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4").height();
            var headerH = jQuery(".header-sticky").height();    
            var summaryH = jQuery(".summary.entry-summary").height(); ;    
            var lastWindowTop = 0;
            var LowerPosition = jQuery("#wrapper-content").height() -jQuery(".main-footer-wrapper").height();
            
            if( summaryH > stickyParaH ){
                jQuery(window).scroll(function() {
                    var windowTop = jQuery(window).scrollTop();
                    windowTop = windowTop + stickyTop + stickyParaH;
                    var windowInitiate = jQuery(window).scrollTop() + headerH;

                    if ( (windowTop < StopSticky) && ( windowInitiate > stickyHeading ) ) { 
                        jQuery('.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4').css({'position':'fixed','width':stickyParaW, 'top':'90px'});
                        lastWindowTop = windowTop;
                    }
                    else {
                        if( windowInitiate > stickyHeading ){
                          jQuery('.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4').css({'position':'absolute', 'top':LowerPosition});
                        }
                        else{
                          jQuery('.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4').css({'position':'absolute', 'top':0});
                        }  
                    }

                }); 
            }   
        });
    }

(Edit)

Don’t use float for creating layouts. I just removed float and added display: flex to the row-container, and now it works fine. display: flex has flex-direction: row by default, thus creating 2 columns.

div.sticky {
  position: relative;
  width: 100%;
  display: flex;
}

p.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 50px;
  display: block;
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
}

<h2>Sticky Element: Scroll Down to See the Effect</h2>
<p>Scroll down this page to see how sticky positioning works.</p>

<div class="sticky">
  <div style="width:45%">
    <p class="sticky">I will stick to the screen when you reach my scroll position
    </p>
  </div>
  <div style="width:45%;">
    <p>Some example text..</p>
    <h2>Scroll back up again to "remove" the sticky position.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce
      luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed
      nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
      aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.ullamcorper ipsum dignissim ac. In at libero
      sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit
      amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue
      ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ullamcorper ipsum dignissim ac. In at libero
      sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit
      amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue
      ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim </p>
  </div>
</div>

<div style="float:left;width:100%">
  <p>BALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY
    ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY
    ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY
    ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY
    ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY
    ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFAS.</p>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

WordPress – Make Product Image gallery Sticky(fixed) on WooCommerce Single Product Page

Answers