Archived topic
Woocommerce single product page layout - Sticky
5 replies · Started by pro123 on April 8, 2022
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 there,
its trickier to do as the Tabs occupy the same parent container as the summary, which is a problem. And would require some development. Why not mirror what the Niche Site does ? See here:
https://gpsites.co/niche/product/ninja-silhouette-2/
If you follow ALL the steps here it will provide the same effect.
https://generatepress.com/forums/search/niche+woo-gallery-stack/#post-2182013
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!