Site logo

Archived topic

Woocommerce single product page layout - Sticky

5 replies · Started by pro123 on April 8, 2022

Viewing posts 1–6 of 6

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:

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

Hi David,

Thanks you very much. That what exactly what I was looking for.
Last question, how can I make the WooCommerce single product page full width with some margin left and right.

Thanks in advance

Simplest option to make it 100% and keep the padding use this CSS:

.single-product .container {
    width: 100%;
    max-width: 100%;
}

Thanks you very much!

Resolved

Glad to be of help!

This archived topic is closed to new replies.