-
huppap
Hi I have some issue on the product page that I can’t seem to figure out.
In case of when image is not square, image is overflowing, please see link in private info.
Also could I please get design for product description tabs, add to cart and quantity plus minus sign like you see on this page.
https://themegrilldemos.com/gizmo/shop/advanced-smartphone/
Thank you.
-
huppap
I realized the issue with product image being overflowed is being caused due to this CSS.
/*CSS to correct CLS issue on product page start*/ /* https://wordpress.org/support/topic/cumulative-layout-shift-cls-issue-on-product-pages/ */ /*For Desktop*/ @media screen and (min-width: 922px) { .woocommerce-product-gallery { min-height: 600px; max-height: 600px; } } /*For Mobile*/ @media screen and (max-width: 921px) { .woocommerce-product-gallery > .flex-control-nav li { height: calc(25vw - 1.5em) !important; } } @media screen and (max-width: 500px) { .woocommerce-product-gallery { max-height: calc((25vw - 1.5em) + (100vw - 56px) + 1em); } } @media screen and (min-width: 545px) and (max-width: 921px) { .woocommerce-product-gallery { max-height: calc((25vw - 1.5em) + (100vw - 117px) + 1em); } } /* CSS to correct CLS issue on product page ends */
I got this css from this page and it did fix CLS issue on both astra and generatepress but on generatepress it seems to be causing issue when images are not square.
https://wordpress.org/support/topic/cumulative-layout-shift-cls-issue-on-product-pages/Maybe you can help me optimize this css?
-
Hi there,
The product gallery is a WooCommerce core feature so unfortunately, it’s not something we can support here:
https://generate.support/what-support-includes/It’s not possible for the theme (any themes) to introduce CLS issue to that feature.
I tested our default Seller template and CLS is minimal (not caused by the theme either):
https://gpsites.co/seller/product/happy-ninja/
https://www.screencast.com/t/IHuJPEkuThanks for your understanding 🙂
-
huppap
the page you shared has 0 CLS and if you test my page it has a CLS of 0.5
I have removed that css and the website is using default product gallery like in your link here.
https://gpsites.co/seller/product/happy-ninja/
could you tell me what is causing the CLS in my case? Because if you are getting a CLS of 0 I should be getting it too.
only thing I have done here is added this CSS to reposition thumbnails and added a scroll on them. But that CSS i received from generate press CSS in a different support thread.
/* arrange thumbnail images on product page - starts */ /* VERSION 1 - Vertical Scrolling Thumbnails for Desktop */ /* https://generatepress.com/forums/topic/woo-single-product-thumbnail-gallery-with-carousel/#post-599314 */ .woocommerce div.product div.images .flex-control-thumbs li { padding: 5px 5px 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (min-width: 768px) { .woocommerce-page div.product div.images { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: center; align-self: center; } .woocommerce div.product div.images .flex-control-thumbs { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1 0 80px; flex: 1 0 80px; /* Adjust PX to suit width of thumbnails */ max-height: 425px; /* Adjust Height to Image height on desktop */ overflow: auto; } .woocommerce div.product div.images .flex-control-thumbs li { width: 100%; padding: 0 10px 10px 0; } } /* VERSION 2 - Horizontal Scrolling Thumbnails for mobile */ @media (max-width: 768px) { .woocommerce div.product div.images .flex-control-thumbs li { padding: 5px 5px 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 1; -ms-flex: 1 0 25%; flex: 1 0 25%; } .woocommerce div.product div.images .flex-control-thumbs { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: auto; } } /* add border on thumbnail images product page */ .woocommerce div.product div.images .flex-control-thumbs li img.flex-active { border: 2px solid black; }
-
huppap
I was also helped by your support staff to edit this css in my case. Looks like you changed your support system and I am unable to find my older thread that I created in generatepress support system, or else I would have linked you that too.
-
could you tell me what is causing the CLS in my case?
You can run the Google Lighthouse test and click the CLS tab to see the issue.
The CLS issue could be causing by other plugins as well so you might want to go through some debugging steps.
You can still access your old topics in the Legacy forum:
https://generatepress.com/supportBut going forward, we will be limiting the support we provide for other plugins such as WooCommerce and comply with our support scope here: https://generate.support/what-support-includes/
If you are sure that the custom CSS is causing the issue then I would advise against using it.
Thanks for your understanding.
- You must be logged in to reply to this topic.