Return to previous page

Images CSS - by slw250@hotmail.com - on WordPress WooCommerce support

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

slw250@hotmail.com

Participant

August 7, 2018 at 17:20

Hello,
is there any CSS for images so they spears same on website shop pages. My images are not same size when I upload them on website before i was using your theme and those images were appeared same size on the shop pages. now after i am using your theme it appears at different size as I upload before. How can i adjust them so they apeared the same size. here is the url for one of the page: https://alhamrah.com/product-category/general-merchandises/lighters-and-accessories/lighter-fuel/

Please help

#197792 Copied Theme version: 4.28 WooCommerce version: 3.4.4

7 Answers
Olga Barlow

Support staff

August 8, 2018 at 09:14
Hello,

1) Go to Appearance > Customize > WooCommerce > Product Images and set the most suitable for you image settings. Regenerate thumbnails after that.
2) Add the following code in Theme Options > Styling > Custom CSS
```
.content-product .product-content-image img {
    min-width: 1px;
    width: auto;
}
```
3) Also, some of your images are so small 88x88px https://alhamrah.com/wp-content/uploads/2016/06/CAKLJ6VP.jpg We would recommend uploading images no less than 600px width or height for every product to have the nice grid.

Regards
#197801 Copied
slw250@hotmail.com

Participant

August 8, 2018 at 15:47

Thank you

#197843 Copied

Olga Barlow

Support staff

August 8, 2018 at 17:07

You are welcome!

Regards

#197845 Copied

slw250@hotmail.com

Participant

August 9, 2018 at 00:08

Can you please give me same for categories and sub categories also

#197853 Copied

Olga Barlow

Support staff

August 9, 2018 at 09:31

Hello,

That code should work for all the products. You are using the cache plugin. Add the code and flush the plugin and browser cache after that.

Regards

#197863 Copied

norbert.s

Participant

August 9, 2018 at 09:48

Hi I have the same problem. I set my Thumbnail cropping 1:1 and product isn´t fit to these square. I tried your custom ccs code but nothing has changed.
Please help me.

#197866 Copied Theme version: 4.28.1 WooCommerce version: 3.4.4
Olga Barlow

Support staff

August 9, 2018 at 10:13
Hello, @norbert.s

Seems you either did not set the 1:1 proportion or did not regenerate thumbnails after that.
Also, we would not recommend you to use very long images like you have at present. Use the graphics editor to create squared images before uploading them to your dashboard, it will be the best solution. Because if you crop existing image user won’t understand what you sell, the image will look ugly.

Some workaround for you can be CSS limit for the height, for example, replace that code by the following:
```
.content-product .product-content-image img {
    min-width: 1px;
    width: auto;
    max-height: 300px;
}
```
But I prefer using of the good images at the start.

Regards
#197871 Copied
Viewing 8 results - 1 through 8 (of 8 total)