[Resolved] Woocommerce single product page layout – Sticky

Hi Team,

I have added below CSS code to the site and php code to the hook element (before_woocommerce_single_product_summary)
This will make the Woocommerce short description and add to cart module sticky.

Just wondering if it would be possible to stop being sticky when I reach the long description. Currently the sticky module goes over the long description when scrolling.

I can adjust this width: 50%; /* match width of gallery stack */ but that would make related.products and upsells.products too small.

In the private section the webshop details

PHP:

<?php if ( has_post_thumbnail( $product->id ) ) {
$attachment_ids[0] = get_post_thumbnail_id( $product->id );
$attachment = wp_get_attachment_image_src($attachment_ids[0], ‘full’ ); ?>
“/>
<?php }

global $product;
$product_image_ids = $product->get_gallery_image_ids();

foreach( $product_image_ids as $product_image_id ) {
$image_url = wp_get_attachment_url( $product_image_id );
echo ‘‘;
}?>

CSS:

@media (min-width: 768px) {
.woocommerce-product-gallery {
display: none;
}
.woo-gallery-stack {
width: 60%; /* adjust % to match container layout */
float: left;
padding: 10px;
}
.woocommerce div.product div.summary {
position: -webkit-sticky;
position: sticky;
top: 120px;
/* Adjust vertical position of sticky summary */
}
.single-product div.product .woocommerce-tabs,
.single-product div.product .related.products,
.single-product div.product .upsells.products {
width: 100%; /* match width of gallery stack */
display: inlineblock;
}
}

Thanks in advance

Regards,
Luuk