Making Product Images Smaller

athlon24 · September 2015

Hi. In the URL below, I tried to make the image smaller but it seems that the images don't adjust.

I want to make it 4 columns and shows smaller images. How can I do that?

http://demo001.poisemakeup.com/cool-foundation/

Thanks.

Albert · September 2015

Hi,

to make them in 4 columns, you need to use below css:

.woocommerce ul.products:not(.col-4) li.product:nth-child(4n+1) { clear: both !important; }
.woocommerce ul.products li.product { width: 23% !important; }

athlon24 · September 2015

Hi. I added the css but the product images did not align.

Why is this?

Can you please explain the code you have give?

Thanks.

Albert · September 2015

Where did you pasted this code? Because we tested it on our side and it works. Please move this code on 1st position because if you did a mistake somewhere in css before the place where this code is pasted, then nothing below won't work.

athlon24 · September 2015

Hi. I pasted it on top of Custom CSS and it is still the same.

Albert · September 2015

As we see, they are in 4 columns now what you can see on http://pasteboard.co/QSfeBN3.png

Making Product Images Smaller

Comments