Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Sticky Woocommerce Images

  • AmDev1
    July 8, 2024 at 12:46 am

    Hi,
    My product pages are made up of code snippets and elements. I have limited control over the product image though.
    I am aiming to make the iamge sticky but only as far as the container on the right (see here: https://mowgli-adventures.com/product/270ah-12v-lifepo4-deep-cycle-gc3-battery/)
    I added this code: woocommerce div.product div.images.woocommerce-product-gallery {
    position: sticky;
    top: 0;
    } and it did make the image sticky but all the way to the bottom of the page. How can get it to stop being sticky at the right place?
    Kind regards

  • David
    July 8, 2024 at 4:50 am

    Hi there,

    try this CSS:

    
@media(min-width: 1024px) {
   .woocommerce.single div.product {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .woocommerce.single div.product > div {
        width: 100% !important;
        grid-column: 1 / -1;
    }
    .woocommerce.single div.product > .woocommerce-product-gallery {
        grid-column: 1;
    }
    .woocommerce.single div.product > .entry-summary {
        grid-column: 2;
    } 
    .woocommerce-product-gallery__wrapper {
        position: sticky;
        top: 0;
    }
}

    It sets the page up using CSS grid, so you the product-gallery and the summary are equal heigh columns, allowing you to then sticky the gallery_wrapper inside.

    Note I set the @nedia to 1024px so it kicks in only on larger screens.

  • AmDev1
    July 8, 2024 at 5:41 am

    Perfect – thank you!

  • David
    July 8, 2024 at 5:52 am

    You’re welcome

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.