Return to previous page

WooZone product image size - by Schubfaktor

This topic has 6 replies, 3 voices, and was last updated 7 years, 2 months ago ago by Olga Barlow

Schubfaktor

Participant

June 24, 2017 at 12:01

Hey there..sorry for opening more topics than one…

I have some problems with the remote product images coming from woozone plugin.

In some videos i saw that is in the most caes a problem of the theme……do u know anything about the problem of showing images in the correct size ( xstore – woozone compability )

Thank u very much

#166328 Copied

5 Answers

Olga Barlow

Participant

June 27, 2017 at 13:31

Hello,

All the product image settings you can adjust via WooCommerce > Setting > Products > Display > Image Sizes. If you change these values don’t forget to install, activate Regenerate Thumbnails plugin and regenerate all the images (Tools > Regenerate).

Explain in details what problems do you have with your images because I’m not sure if these options are that you were looking for.

Regards

#166542 Copied

jlcastagner

Participant

December 3, 2017 at 19:17

This is how i made it work (Woocommerce+Woozone+Xtsore – it’s not the fault of woozone, it’s the theme that doesn’t work the same way, so you have to force the images while conserving the ratio, it works so far) by adding that in the style.css of the Xstore child theme (widths and heights might need to be tweaked, maybe the support people will provide the correct values):

@media only screen and (max-width: 992px) {
.content-product {
position: relative;
}
}
@media only screen and (min-width: 1200px) {
.content-product .product-content-image, .content-product .product-content-image .block-srcset{

width: 277px;
height: 500px;
text-align: center;
vertical-align: middle;
overflow:hidden;
margin:inherit;
}
.content-product .product-content-image img , .content-product .product-content-image .block-srcset img{
opacity: 0;
object-fit: cover;
width:auto!important;
min-width:0px!important;
height: 100%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.content-product .product-title {
font-size: 1.07rem;
}

.content-product .product-content-image, .content-product .product-content-image .block-srcset{

width: 277px;
height: 500px;
text-align: center;
vertical-align: middle;
overflow:hidden;
margin:inherit;
}
.content-product .product-content-image img,.content-product .product-content-image .block-srcset img{
opacity: 0;
object-fit: cover;
width:auto!important;
min-width:0px!important;
height: 100%;
}
}
@media only screen and (max-width: 768px) {

.content-product .product-content-image, .content-product .product-content-image .block-srcset{

width: 194px;
height: 350px;
text-align: center;
vertical-align: middle;
overflow:hidden;
margin:inherit;
}
.content-product .product-content-image img, .content-product .product-content-image .block-srcset img{
min-width:0px!important;
height: 100%;
object-fit: cover;
width:auto!important;
}
}

#179179 Copied Theme version: lastest Xstore WooCommerce version: latest

Olga Barlow

Participant

December 4, 2017 at 17:23

Hello, @jlcastagner

It’s not a good practice to set a fixed width+height by CSS because it will stretch images. So, you need to explain me your problem in details and provide screenshots and link to your site to get the correct solution.

Regards

#179267 Copied

jlcastagner

Participant

December 5, 2017 at 14:40

Actually it works fine on my end if i don’t define the width only. I leave the height fixed (different values depending on @media)…
try it out and confirm please!?
thanks

#179341 Copied

Olga Barlow

Participant

December 5, 2017 at 18:21

Hello, @jlcastagner

If it works for you then you may use it. But we can’t include it as global styles because such CSS is very individual.

Regards

#179388 Copied
Tagged: optimization, product image size, woocommerce, woozone, wordpress
Viewing 6 results - 1 through 6 (of 6 total)