Currently I have on the "WC product thumbnail size" as 320px wide. This is the best option for performance on the overall website.
On the HOME I have the products slider in 4 col's and I would like to have it as 3 col's, but for that, I have to have bigger "WC product thumbnail size", let say as 560px wide.
I've been searching this topic and I couldn't find a proper way to do it. But I think it could be something like:
if (is_home() && !is_mobile() { setImageSize( ... ); }
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
body .woocommerce.columns-3 ul[data-product-style="minimal"].products li.product img {
max-width: 360px;
margin: auto !important;
}
Thank you for the code, but in the end I will be able to change the "image loaded file" from the "srcset" attribute by changing this: sizes="(max-width: 900px) 100vw, 900px" (for example)
I've realized all the image sizes are there on the "srcset" attribute, so, from now I can just change that attribute with JS on the HOME and I've my problem solved!
Hello,
Currently I have on the "WC product thumbnail size" as 320px wide. This is the best option for performance on the overall website.
On the HOME I have the products slider in 4 col's and I would like to have it as 3 col's, but for that, I have to have bigger "WC product thumbnail size", let say as 560px wide.
I've been searching this topic and I couldn't find a proper way to do it. But I think it could be something like:
if (is_home() && !is_mobile() {
setImageSize( ... );
}
Could you guys please help me?
Thank you,
Nuno
Hey,
Please provide the page URL so I may write up the custom CSS for this request.
Thanks
ThemeNectar Support Team
Hello Tahir,
You can take a look here, on "Fresh New E-Bikes":
https://beelectric.pt/home-test/
If you see the attached image at 100% zoom, you see images are blurried.
Thank you for the help!
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
body .woocommerce.columns-3 ul[data-product-style="minimal"].products li.product img { max-width: 360px; margin: auto !important; }Thanks
ThemeNectar Support Team
Add this additional CSS as well.
/* Center the hover image */ .woocommerce ul.products li.product .product-wrap img.hover-gallery-image { position: absolute; left: 50% ; transform: translateX(-50%); }Thanks
ThemeNectar Support Team
Hello Tahir,
Thank you for the code, but in the end I will be able to change the "image loaded file" from the "srcset" attribute by changing this:
sizes="(max-width: 900px) 100vw, 900px" (for example)
I've realized all the image sizes are there on the "srcset" attribute, so, from now I can just change that attribute with JS on the HOME and I've my problem solved!
Thank you
I'll just leave here the vanilla JS I've come up with to solve this problem, in case it can help someone in the future:
let isMobile = /iPhone|iPod|iPad|Android/i.test(navigator.userAgent)
let imgSizes = document.querySelectorAll('.products.columns-3 picture > *')
if ( !isMobile ) {
imgSizes.forEach(img => { img.setAttribute('sizes', '(max-width: 560px) 100vw, 560px') })
}
With this code I will get the next size image, around 600/900px wide, which is fine for Desktops.
Thanks for the additional code.
Best
ThemeNectar Support Team