Product Image block

Hey @54days!

The idea is that you would need to add a Sticky Block (with my plugin) to your page, and then add the product image and the thumbnails inside that.

I believe you’re using Ultimate Addons, and I’m not sure if that will let you do that though! I’m personally not familiar with how that works, so you may need to check this with their support team.

Thank you for the quick reply! Yes I am able to use it really effectively (scroll to a certain point) except for the thumbnail issue….. I have temporarily stopped using the sticky block until I can resolve this.

I am using a Toolset block (product image block), which is essentially Woocommerce product images as a block. The main image and the thumbnails are all part of the single block.

Do you have any suggestions? Your plugin is excellent btw

Hey @54days

It’s possible that the Toolset Block doesn’t properly work together with my Sticky Block plugin.

If you can set up a temporary (hidden?) page where you add a Sticky Block and then add the single Product Image Block inside that, I could take a look to see if there may be some compatibility issues between my plugin and the Toolset block.

Sure! I duplicated the site and activated the sticky block. Kindly take a look at: https://perfmatters.sunilmenon.net/, all the product pages have the product image block within the sticky block

thank you for your help!

Hey @54days

Thanks for setting that up. From what I can see, the thumbnails are sticky (as well as the main image). Here’s how that looks on my end:

Note that I’ve added a bit of space between the sticky block and the pushup block (.stick) to show the effect properly.

So from what I can see, things are working as expected? Perhaps I’m not entirely clear on what the issue is, so if that’s the case, please explain it a bit more and I can look into it. ??

Sorry there seems to be something wrong with that particular page, the variations are not showing.

Please can you check this page: https://perfmatters.sunilmenon.net/product/anime-custom-portrait/

Here is what it looks like when scrolling down:

View post on imgur.com

Hey @54days

I’m still not sure what’s not working for you exactly. Everything appears to work properly on my end, when it comes to the Sticky Block; both the product image and its thumbnails are sticky:

https://d.pr/i/m95UFY

Can you explain a bit more about what issue you’re seeing on your end? I’m still not entirely clear on that.

• This reply was modified 2 years, 2 months ago by Senff.

Hi @senff! How come your screen is so big ?? This is what my page looks like on load: https://imgur.com/undefined

The issue is that the thumbnails are not included in the scrolling. This is what it looks like on scroll: https://imgur.com/0WGno0C

In the image you can see that the 2 rows of thumbnails are not on screen

Here is a video walkthrough: https://youtu.be/pA9I3vgPlNw

Hey @54days

Thank you for explaining. The problem is not that the thumbnails are not sticky; they are (since both the main product image and the thumbnails are included in the Sticky Block). This means that my plugin is working.

The issue appears to be that your screen is too small to show it all. On my screen (which is bigger) you can see that it does show the main product image and the thumbnails. That is not a problem caused by my plugin, but is more of a design issue. If you’d want to include both the main image and the thumbnails, you would need to make that smaller so that it would fit on your screen.

Hi,

Is it possible to make it sticky once the bottom of the thumbnails have been reached?

Here is a similar example, it only sticks once the bottom of the image has been reached: https://youtu.be/_or7IrMTXY8

Hey @54days

There’s no direct way to make a Sticky Block stuck at the bottom of the screen, but in your case you may want to try and use the “Space between sticky block and top of screen:” value in the Sticky Block settings.

If you set that to -250 or so, you may get the effect you want and the thumbnails should be visible (but then the top of the main image won’t, naturally). Can’t say for sure if that works with your page builder plugin though — if it doesn’t, you’d need to use some additional custom coding to make this work.

• This reply was modified 2 years, 2 months ago by Senff.