Forums » Plugin: Sticky Block for Gutenberg Editor » Product Image block

  • Resolved 54days

    (@54days)


    Hi,

    Is there a way to make the thumbnail images located under the main Woocommerce product image sticky as well?

    If I made the product image block sticky, it is only the main image that stays sticky, with the thumbnails stuck off-screen

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Senff – a11n

    (@senff)

    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.

    Thread Starter 54days

    (@54days)

    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

    Plugin Author Senff – a11n

    (@senff)

    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.

    Thread Starter 54days

    (@54days)

    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!

    Plugin Author Senff – a11n

    (@senff)

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

    Thread Starter 54days

    (@54days)

    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

    Plugin Author Senff – a11n

    (@senff)

    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 1 year, 7 months ago by Senff - a11n.
    Thread Starter 54days

    (@54days)

    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

    Plugin Author Senff – a11n

    (@senff)

    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.

    Thread Starter 54days

    (@54days)

    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

    Plugin Author Senff – a11n

    (@senff)

    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 1 year, 7 months ago by Senff - a11n.
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Product Image block’ is closed to new replies.